Divi: Kako stvoriti prilagođene slojeve slika

Želite li naučiti kako dizajnirati prilagođene slojeve slika pomoću Divi ?

Slikovni slojevi već su dugo prisutni u web dizajnu. Savršeni su za angažman posjetitelji otkrivanjem sadržaj Dodatni i dizajnerski elementi kada prijeđete pokazivačem iznad slike. 

U ovom vodiču pokazat ćemo vam kako dizajnirati prilagođene slojeve slika Divi. Ovi slojevi će se promijeniti i otkriti elemente kada prijeđete pokazivačem iznad slike. 

Nisu potrebni dodaci.

Krenimo!

pregled

Evo kratkog pregleda dizajna koji ćemo izraditi u ovom vodiču.

Stvorite novu stranicu s Divi Builderom

S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.

Dajte mu naslov koji vam ima smisla i kliknite Koristiti Divi Graditelj

zatim kliknite Počnite graditi (Gradi od ogrebotina)

Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.

Stvaranje prilagođenih slojeva slika u Diviju

Dizajnirajte odjeljak, redak i stupce

Za početak stvorite redak s tri stupca u zadanom odjeljku.

Otvorite postavke odjeljka i dodajte sljedeću boju pozadine:

• Pozadina: #3a0ca3

Zatim otvorite postavke stupca 1 i ažurirajte sljedeće:

• CSS klasa: et-overlay-container

• Horizontalni preljev: skriven
• Vertikalni preljev: skriveno

Dodaj sliku

Sada kada su odjeljak, redak i stupac spremni, dodajte novi modul slike u stupac 1. To će biti glavna slika iza naših dizajna preklapanja.

Učitajte sliku koja više sliči portretu nego pejzažu. Provjerite je li dovoljno širok da obuhvati punu širinu stupca na svim veličinama preglednika.

NAPOMENA: Možete koristiti pejzažne slike, ali ćete možda trebati prilagoditi položaj elemenata preklapanja kako se ne bi preklapali.

Ispod kartice dizajnažurirajte sljedeće:

• Margina (donja): 0px

Ispod kartice napredan, dodajte sljedeću CSS klasu:

• CSS klasa: et-overlay-image

Dodavanje boje preklapanja slike pomoću modula "Razdjelnik".

Za izradu boje preklapanja slike koristit ćemo modul Razdjelnik.

Prvo dodajte modul razdjelnika ispod slike.

Zatim postavite separator u apsolutni tako da bude postavljen iznad slike:

• Pozicija: Apsolutna

Ispod kartice Sadržajažurirajte sljedeće:

• Prikaži razdjelnik: NE

• Boja pozadine: rgba(247,37,133,0.8)

Zatim ažurirajte visinu i širinu separatora:

• Širina: 100%
• Visina: 100%

S postavljenim dizajnom dodajte sljedeću CSS klasu u razdjelnik:

• and-overlay-item

NAPOMENA: ovu klasu treba dodati svim elementima dizajna preklapanja koje želite prikazati samo kada lebdite. Ako ne želite da element bude skriven u početku, izostavite ga.

Kako biste lakše pratili elemente dizajna/module, otvorite modalne slojeve i označite modul Razdjelnik ("Boja preklapanja").

Dodan tekst zaglavlja sloja

Ispod modula Razdjelnik dodajte novi modul Tekst. Ovo će poslužiti kao tekst zaglavlja preklapanja koji će se pojaviti na vrhu slike kada lebdite.

Ažurirajte sadržaj sa H2 naslovom:

<h2>Coaching</h2>

Zatim ažurirajte oznaku tekstualnog modula za buduću upotrebu.

Ispod kartice dizajnažurirajte sljedeće:

• Poravnanje teksta: centrirano
• Boja teksta: svijetla

• Font: Kormoran Garamond
• Težina fonta: Podebljano
• Veličina teksta: 40px

• Širina: 100%
• Maksimalna širina: 85%

Ispod kartice napredan, ažurirajte poziciju na sljedeći način:

• Pozicija: Apsolutna
• Lokacija: gore centar
• Vertikalni pomak: 10%

NAPOMENA: Okomiti pomak će možda trebati prilagoditi ovisno o veličini omjera slike. Na primjer, pejzažna slika može zahtijevati manji pomak

Zatim tekstualnom modulu dodajte sljedeće CSS klase:

• CSS klasa: et-overlay-item move-down

Pored klase “and-overlay-item”, dodajemo dodatnu klasu "pomicati prema dolje" kako biste upotrijebili prilagođeni CSS za lagano pomicanje zaglavlja prema dolje pri lebdenju.

Stvaranje preklapajućeg tijela teksta

Da bismo stvorili preklapanje teksta tijela, možemo duplicirati modul Tekst koji se koristi za preklapanje zaglavlja. Prije ažuriranja dupliciranih parametara, promijenite oznaku u "Overlay Body".

Otvorite tekstualne postavke novog tekstualnog modula i ažurirajte sadržaj tijela s nekoliko rečenica teksta odlomka.

Ispod kartice napredan, promijenite apsolutnu lokaciju modula u središte.

Budući da ne želimo da se ovo pomiče dok lebdi (samo se pojavljuje), ažurirajte CSS klasu da uključuje samo sljedeće:

• CSS klasa: et-overlay-item

Stvaranje gumba preklapanja

Zadnji sloj na ovoj slici bit će gumb. Da biste stvorili gumb, dodajte novi modul gumba ispod drugog tekstualnog modula.

Prije izmjene dizajna ažurirajte položaj gumba na sljedeći način:

• Pozicija: apsolutna
• Vertikalni pomak: 10%

Sada bi gumb trebao biti centriran na donjem dijelu slike.

U kartici napredanažurirajte CSS klasu i dodajte prilagođeni CSS isječak u glavni element na sljedeći način:

• CSS klasa: et-overlay-item move up

• Glavni CSS element:

min-width: 15em;

Imajte na umu da je gumbu dodana dodatna klasa koja ga lagano pomiče prema gore kada lebdite. Ovo je nadopuna pomicanju teksta zaglavlja prema dolje pri lebdenju.

Zatim ažurirajte sljedeće postavke dizajna:

• Poravnanje gumba: centrirano
• Koristi prilagođene stilove za gumb: DA
• Veličina teksta gumba: 14px
• Boja pozadine: #4361ee

• Širina obruba gumba: 0 piksela
• Razmak između slova gumba: 0,1 em
• Težina fonta: Podebljano
• Stil fonta gumba: TT
• Ispod: 0,8 em (gore i dolje), 0 px (lijevo i desno)

Dodavanje prilagođenog CSS-a s modulom Code

Dodajte modul koda ispod gumba.

Zatim zalijepite sljedeći CSS u sadržaj koda. Ne zaboravite umotati kod u potrebne oznake skripte.

<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>

Kod je komentiran tako da možete razumjeti gdje možete prilagoditi CSS kako bi odgovarao vašim potrebama.

Duplicirajte stupac za više dizajna

Otvorite modalni sloj, prvo izbrišite dva prazna stupca.

Zatim dvaput duplicirajte stupac koji sadrži dizajn preklapanja slike. Trebali biste imati ukupno tri stupca s identičnim dizajnom.

Stvaranje dizajna preklapanja slike #2

Za ovaj sljedeći dizajn, gumb ćemo postaviti u središte slike (uvijek vidljivo). Zatim ćemo premjestiti zaglavlje i glavni tekst u prikaz s vrha i dna slike.

Podesite položaj teksta i CSS klasu

Otvorite postavke modula teksta preklapanja u stupcu 2 i ažurirajte položaj:

• Mjesto: dolje u sredini
• Vertikalni pomak: 5%

Zatim ažurirajte CSS klasu sa sljedećim:

• CSS klasa: et-overlay-item move-up

Podesite lokaciju gumba i CSS klasu

Zatim otvorite postavke gumba u stupcu 2 i ažurirajte sljedeću lokaciju položaja:

• Lokacija: Centar

Zatim uklonite CSS klasu jer želimo da gumb uvijek ostane vidljiv.

Otvorite postavke modula Razdjelnik (boja preklapanja) i promijenite pozadinu na sljedeći način:

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

Zatim otvorite postavke gumba i promijenite boju pozadine:

• Boja pozadine: #f72585

Podesite CSS sliku i klasu

Zatim otvorite postavke slike i prenesite novu sliku (ako želite).

Zatim dodajte sljedeću CSS klasu na sliku:

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

Imajte na umu da uz klasu "et-overlay-image" postoji dodatna klasa pod nazivom "et-scale" koja će povećati veličinu slike, stvarajući efekt povećanja pri lebdenju.

Stvaranje dizajna preklapanja slike #3

Sada je vrijeme za izradu trećeg dizajna preklapanja slike u stupcu 3.

Prilagodite sadržaj teksta preklapanja i CSS klasu

Započnite otvaranjem postavki modula teksta preklapanja u stupcu 3. Zatim dodajte naslov H2 iznad teksta odlomka. Sada će oboje biti unutar modula.

Zatim uklonite CSS klasu tako da tekst ostane vidljiv iznad slike.

Podesite pomak gumba i CSS klasu

Otvorite postavke modula gumba i ažurirajte pomak okomitog položaja:

• Vertikalni pomak: 5%

Ukloni zaglavlje sloja

Zatim uklonite modul Overlay Header Text.

Podesite boju sloja i CSS klasu

Otvorite postavke modula Razdjelnik (boja preklapanja) i ažurirajte pozadinu na sljedeće:

• Boja gradijenta lijeve pozadine: rgba(67,97,238,0.8)
• Boja gradijenta desne pozadine: rgba(247,37,133,0.8)
• Početna pozicija: 25%
• Konačna pozicija: 75%

A budući da želimo zadržati sloj gradijenta vidljivim cijelo vrijeme, uklonite CSS klasu.

Podesite CSS klasu slike

Na kraju ćemo dodati dodatnu CSS klasu (“et-rotate”) glavnoj slici koja će mijenjati veličinu i rotirati sliku dok lebdite.

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

Završni detalji

Prije provjere naših konačnih rezultata, moramo napraviti neke prilagodbe.

Uklonite zadanu donju marginu za sve module

Budući da smo već ažurirali marginu s donjom marginom od 0px, možemo proširiti ovu marginu na sve module.

Desnom tipkom miša kliknite postavku margine i odaberite “Proširi margine”.

Zatim odaberite proširenje margine na sve module na stranici.

Uklonite dvostruke module koda

Svakako uklonite dodatne module koda koji su preneseni iz dupliciranja prvog stupca. Trebao bi imati samo jedan. To možete jednostavno učiniti iz modalnih slojeva.

Konačni rezultati

Sada kada su naša tri dizajna dovršena, pogledajmo konačne rezultate naših dizajna preklapanja slika.

Preuzmite DIVI odmah!!!

A evo i dizajna na mobitelu. Efekti prekrivanja primjenjivi su samo na radnoj površini. Stoga će slojevi i dalje biti vidljivi na mobilnom uređaju.

Preuzmite DIVI odmah!!!

Zaključak

Stvaranje prilagođenih preklapanja slika zapravo je jako zabavno. Postoji bezbroj dizajna koje možete vizualno testirati s Divi Builderom. 

Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.

Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...