Divi: Si të krijoni mbivendosje të personalizuara të imazhit

Dëshironi të mësoni se si të dizajnoni mbivendosje të personalizuara të imazhit me Divi ?

Mbivendosjet e imazheve kanë qenë rreth e rrotull për një kohë të gjatë në dizajnin e uebit. Ato janë perfekte për t'u angazhuar vizitorët duke zbuluar përmbajtje Elemente shtesë dhe dizajni kur rri pezull mbi imazh. 

Në këtë tutorial, ne do t'ju tregojmë se si të dizajnoni mbivendosje të personalizuara të imazhit Divi. Këto mbivendosje do të ndryshojnë dhe do të zbulojnë elemente kur kaloni pezull mbi imazh. 

Nuk nevojiten shtojca.

Le të fillojmë!

studim

Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.

Krijo një faqe të re me Divi Builder

Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.

Jepini një titull që ka kuptim për ju dhe klikoni përdorim Divi Ndërtues

Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Krijimi i mbivendosjeve të personalizuara të imazheve në Divi

Dizajnoni seksionin, rreshtin dhe kolonat

Për të filluar, krijoni një rresht me tre kolona në seksionin e paracaktuar.

Hapni cilësimet e seksionit dhe shtoni ngjyrën e mëposhtme të sfondit:

• Sfondi: #3a0ca3

Më pas, hapni cilësimet e kolonës 1 dhe përditësoni sa vijon:

• Klasa CSS: et-overlay-container

• Vërshimi horizontal: I fshehur
• Vërshimi vertikal: I fshehur

Shtoni imazhin

Tani që Seksioni, Rreshti dhe Kolona janë gati, shtoni një modul të ri Imazh në Kolonën 1. Ky do të jetë imazhi kryesor pas modeleve tona të mbivendosjes.

Ngarko një imazh që duket më shumë si një portret sesa një peizazh. Sigurohuni që të jetë mjaft e gjerë për të mbuluar gjerësinë e plotë të kolonës në të gjitha madhësitë e shfletuesit.

SHËNIM: Mund të përdorni imazhe peizazhi, por mund t'ju duhet të rregulloni pozicionimin e elementeve të mbivendosjes në përputhje me rrethanat, në mënyrë që ato të mos mbivendosen.

Nën skedinë Projektimi, përditësoni sa vijon:

• Marzhi (poshtë): 0 px

Nën skedinë Avancuar, shtoni klasën e mëposhtme CSS:

• Klasa CSS: et-overlay-image

Shtimi i ngjyrës së mbivendosjes së imazhit duke përdorur një modul "Ndarës".

Për të krijuar ngjyrën e mbivendosjes së imazhit, ne do të përdorim një modul Divider.

Së pari, shtoni një modul Divider poshtë imazhit.

Pastaj vendoseni ndarësin në mënyrë absolute në mënyrë që të vendoset sipër imazhit:

• Pozicioni: Absolut

Nën skedinë Përmbajtja, përditësoni sa vijon:

• Ndarësi i shfaqjes: JO

• Ngjyra e sfondit: rgba (247,37,133,0.8)

Pastaj përditësoni lartësinë dhe gjerësinë e ndarësit:

• Gjerësia: 100%
• lartësia: 100%

Me dizajnin në vend, shtoni klasën e mëposhtme CSS në ndarësin:

• dhe-mbivendosje-artikull

SHËNIM: Kjo klasë duhet t'u shtohet të gjithë elementëve të dizajnit të mbivendosjes që dëshironi të shfaqni vetëm në lëvizje. Nëse nuk dëshironi që elementi të fshihet fillimisht, lëreni atë jashtë.

Për t'ju ndihmuar të mbani gjurmët e elementeve/moduleve të dizajnit, hapni shtresat modale dhe etiketoni ndarjen e modulit ("Ngjyra e mbivendosjes").

Teksti i kokës së mbivendosjes u shtua

Në modulin Divider, shtoni një modul të ri Teksti. Kjo do të shërbejë si teksti i mbivendosjes së kokës që do të shfaqet në krye të imazhit kur rri pezull.

Përditësoni përmbajtje me titull H2:

<h2>Coaching</h2>

Më pas, përditësoni etiketën e modulit të tekstit për referencë në të ardhmen.

Nën skedinë Projektimi, përditësoni sa vijon:

• Rreshtimi i tekstit: në qendër
• Ngjyra e tekstit: e lehtë

• Fonti: Cormorant Garamond
• Pesha e shkronjave: Bold
• Madhësia e tekstit: 40 px

• Gjerësia: 100%
• Gjerësia maksimale: 85%

Nën skedinë Avancuar, përditësoni pozicionin si më poshtë:

• Pozicioni: Absolut
• Vendndodhja: qendra e sipërme
• Kompensimi vertikal: 10%

SHËNIM: Zhvendosja vertikale mund të duhet të rregullohet në varësi të madhësisë së raportit të pamjes së figurës. Për shembull, një imazh i tipit peizazh mund të kërkojë më pak kompensim

Më pas, shtoni klasat e mëposhtme CSS në modulin e tekstit:

• Klasa CSS: et-overlay-item lëviz-poshtë

Përveç klasës "dhe-overlay-item", shtojmë një klasë shtesë "leviz poshte" në mënyrë që të përdorni CSS-në e personalizuar për të lëvizur kokën pak poshtë kur rri pezull.

Krijimi i tekstit të trupit të mbivendosur

Për të krijuar trupin e tekstit të mbivendosjes, ne mund të kopjojmë modulin Tekst të përdorur për kokën e mbivendosjes. Përpara se të përditësoni parametrat e dyfishtë, ndryshoni etiketën në "Trupi i mbivendosur".

Hapni cilësimet e tekstit të modulit të ri Tekst dhe përditësoni përmbajtje të trupit me disa fjali të tekstit të paragrafit.

Nën skedinë Avancuar, ndryshoni vendndodhjen absolute të modulit në qendër.

Meqenëse nuk duam që kjo të vazhdojë të lëvizë (vetëm shfaqet), përditësoni klasën CSS për të përfshirë vetëm sa vijon:

• Klasa CSS: et-overlay-item

Krijimi i butonit të mbivendosjes

Mbivendosja e fundit në këtë imazh do të jetë butoni. Për të krijuar butonin, shtoni një modul të ri Buton nën modulin e dytë të tekstit.

Përpara modifikimit të dizajnit, përditësoni pozicionin e butonit si më poshtë:

• Pozicioni: absolut
• Kompensimi vertikal: 10%

Tani butoni duhet të përqendrohet në pjesën e poshtme të figurës.

Në skedë Avancuar, përditësoni klasën CSS dhe shtoni një fragment të personalizuar CSS në elementin kryesor si më poshtë:

• Klasa CSS: et-overlay-item lëvizja lart

• Elementi kryesor CSS:

min-width: 15em;

Vini re se një klasë shtesë është shtuar në butonin për ta lëvizur atë pak lart kur rri pezull. Kjo është për të plotësuar lëvizjen poshtë të tekstit të kokës kur rri pezull.

Më pas, përditësoni cilësimet e mëposhtme të dizajnit:

• Shtrirja e butonave: në qendër
• Përdorni stile të personalizuara për butonin: PO
• Madhësia e tekstit të butonit: 14 px
• Ngjyra e sfondit: #4361ee

• Gjerësia e kufirit të butonit: 0 piksel
• Hapësira e shkronjave të butonave: 0,1em
• Pesha e shkronjave: Bold
• Stili i fontit të butonit: TT
• Mbushja: 0,8em (lart dhe poshtë), 0px (majtas dhe djathtas)

Shtimi i CSS i personalizuar me modulin e kodit

Shtoni një modul Kodi poshtë butonit.

Pastaj ngjisni CSS-në e mëposhtme në përmbajtjen e kodit. Mos harroni të mbështillni kodin në etiketat e nevojshme të skriptit.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

Kodi është komentuar kështu që ju mund të kuptoni se ku mund të rregulloni CSS për t'iu përshtatur nevojave tuaja.

Dubliko kolonën për më shumë dizajn

Hapni shtresën modale, së pari fshini dy kolonat boshe.

Pastaj dubliko dy herë kolonën që përmban dizajnin e mbivendosjes së imazhit. Duhet të keni gjithsej tre kolona me dizajne identike.

Krijimi i dizajnit të mbivendosjes së imazhit #2

Për këtë dizajn tjetër, ne do ta vendosim butonin në qendër të imazhit (gjithmonë i dukshëm). Më pas, ne do të zhvendosim kokën dhe tekstin e trupit në pamje nga lart dhe fundi i imazhit.

Rregulloni vendosjen e tekstit të trupit dhe klasën CSS

Hapni cilësimet e modulit të tekstit të mbivendosjes së trupit në kolonën 2 dhe përditësoni pozicionin:

• Vendndodhja: në qendër të poshtme
• Kompensimi vertikal: 5%

Më pas, përditësoni klasën CSS me sa vijon:

• Klasa CSS: et-overlay-item lëvizja lart

Rregulloni vendndodhjen e butonit dhe klasën CSS

Më pas, hapni cilësimet e butonit në kolonën 2 dhe përditësoni vendndodhjen e mëposhtme të pozicionit:

• Vendndodhja: Qendër

Më pas, hiqni klasën CSS pasi duam që butoni të mbetet gjithmonë i dukshëm.

Hapni cilësimet e modulit Divider (ngjyra e mbivendosjes) dhe ndryshoni sfondin si më poshtë:

• Sfondi: rgba (67,97,238,0.8)

Pastaj hapni cilësimet e butonit dhe ndryshoni ngjyrën e sfondit:

• Ngjyra e sfondit: #f72585

Rregulloni imazhin dhe klasën CSS

Pastaj hapni cilësimet e imazhit dhe ngarkoni një imazh të ri (nëse dëshironi).

Pastaj shtoni klasën e mëposhtme CSS në imazh:

• Klasa CSS: et-overlay-image et-scale

Vini re se përveç klasës "et-overlay-image", ekziston një klasë shtesë e quajtur "et-scale" e cila do të rrisë madhësinë e imazhit, duke krijuar një efekt zmadhimi në lëvizje.

Krijimi i dizajnit të mbivendosjes së imazhit #3

Tani është koha për të krijuar modelin e tretë të mbivendosjes së imazhit në kolonën 3.

Rregulloni përmbajtjen e tekstit të mbivendosjes dhe klasën CSS

Filloni duke hapur cilësimet e modulit të tekstit të mbivendosjes në kolonën 3. Më pas, shtoni titullin H2 sipër tekstit të paragrafit. Tani të dy do të jenë brenda një moduli.

Pastaj hiqni klasën CSS në mënyrë që teksti të mbetet i dukshëm sipër imazhit.

Rregullo kompensimin e butonit dhe klasën CSS

Hapni cilësimet e modulit të butonit dhe përditësoni zhvendosjen e pozicionit vertikal:

• Kompensimi vertikal: 5%

Hiq kokën e mbivendosjes

Më pas, hiqni modulin e tekstit të kokës së mbivendosjes.

Rregulloni ngjyrën e mbivendosjes dhe klasën CSS

Hapni cilësimet e modulit Divider (ngjyra e mbivendosjes) dhe përditësoni sfondin në sa vijon:

• Ngjyra e gradientit të sfondit të majtë: rgba (67,97,238,0.8)
• Ngjyra e gradientit të sfondit të djathtë: rgba (247,37,133,0.8)
• Pozicioni fillestar: 25%
• Pozicioni përfundimtar: 75%

Dhe meqenëse duam ta mbajmë mbivendosjen e gradientit të dukshëm gjatë gjithë kohës, hiqni klasën CSS.

Rregulloni klasën CSS të imazhit

Së fundi, ne do të shtojmë një klasë shtesë CSS (“et-rotate”) në imazhin kryesor që do të ndryshojë përmasat dhe do ta rrotullojë imazhin kur rri pezull.

• Klasa CSS: et-overlay-image et-rotate

Prekjet e fundit

Para se të kontrollojmë rezultatet tona përfundimtare, duhet të bëjmë disa rregullime.

Hiq kufirin e poshtëm të paracaktuar për të gjitha modulet

Meqenëse tashmë e kemi përditësuar margjinën me një diferencë të poshtme prej 0 px, mund ta zgjerojmë këtë diferencë në të gjitha modulet.

Klikoni me të djathtën në cilësimin e margjinës dhe zgjidhni "Zgjero margjinat".

Pastaj zgjidhni të zgjeroni margjinën te Të gjitha modulet në faqe.

Hiq modulet e kodit dublikatë

Sigurohuni që të hiqni modulet shtesë të kodit që janë bartur nga dyfishimi i kolonës së parë. Ju duhet të keni vetëm një. Ju mund ta bëni këtë lehtësisht nga shtresat modale.

Rezultatet përfundimtare

Tani që tre modelet tona janë kompletuar, le të hedhim një vështrim në rezultatet përfundimtare të modeleve tona të mbivendosjes së imazhit.

Shkarkoni DIVI Tani!!!

Dhe këtu është dizajni në celular. Efektet e pezullimit të mbivendosjes zbatohen vetëm në desktop. Prandaj, mbivendosjet do të jenë ende të dukshme në celular.

Shkarkoni DIVI Tani!!!

Përfundim

Krijimi i mbivendosjeve të personalizuara të imazhit është në fakt shumë argëtues. Ka modele të panumërta që mund t'i provoni vizualisht me Divi Builder. 

Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...