Želite li naučiti kako napraviti karticu s efektom portfelja? U ovom novom tutorijalu pokazat ćemo vam kako to učiniti s Elementor.
Ukoliko nemate pojma o čemu danas želimo da pričamo, pozivamo vas da pogledate sledeći video:
Vratimo se onda zašto smo ovdje.
Da biste dovršili ovaj vodič, trebat će vam Pro verzija Elementora, jer ćemo koristiti prilagođeni CSS kod koji podržava samo ova verzijaElementor.
Pročitajte takođe: Kako prikazati tekst iznad slike pomoću Elementora
Kreirajmo novi odeljak sa strukturom od 3 kolone, a zatim u panelu, hajde da definišemo visina na Min Height, a zatim Minimalna visina kliknimo na VH i postavite klizač na 100.
Odaberimo srednju kolonu i ubacimo u ovu kolonu Widget internog odjeljka. Vidžet Internog odjeljka je po defaultu konfigurisan sa 2 kolone. Ispod 2 kolone ispustimo widget naslov sa naslovom Restoran, izaberite H4 za HTML oznaku i Centar za poravnanje.
Na kartici napredan od vidžeta Naslov, Uđimo 30 za Gornja margina
Odaberimo još jednom našu internu sekciju. U panelu, izmijenimo ga visina na Min Height i dalje Minimalna visina postavimo kursor na 380. Zatim, izbrišemo desnu ili lijevu kolonu internog odjeljka
Pustimo to Image widget u Internom dijelu i ubacite sliku iz naše biblioteke. birajmo Cijeli sipati Veličina slike et Centar sipati Poravnanje.
NB: Ako želite da imate kompletne stranice poput naše, pozivamo vas da ih snimite uz pomoć Chrome ekstenzije GoFullPage, ali možete koristiti i drugu.
Otkrijte i: Kako stvoriti galeriju slika s Elementor-om
Zatim u kartici stil, kliknite na PX de širina, postavimo klizač na 260 i granični zraci na 10
Zatim modificirajmo Box Shadow mijenjajući Blur na 40 i Diffuse na -10.
Na kartici Napredno, u odjeljku pozicioniranje, izaberite apsolutan za Položaj, Horizontalna orijentacija na lijevo, u décalage na 0TheVertikalna orijentacija na bas.
Duplicirajmo dvaput naš widget za slike. Neizbežno će se svi oni nadovezati. Pokrenimo Navigator tako da možemo pristupiti ostalim widgetima koje je sakrio prvi.
Zamijenimo sliku drugog Widgeta iu njegovom Tab napredan, izmijenimo ih donje margine et lijevo ulaskom 30 za svaki. Sada ćete vidjeti malo zaostajanje,
Uradite isto za treći Image Widget, ali primijenite margine 60 za donju i lijevu marginu. Sada biste trebali imati pregled sva 3 vidžeta za slike.
Odaberimo naš widget Internal Section, idimo na njegovu karticu napredan iu odjeljku Custom CSS, kopirajte i zalijepite sljedeći isječak koda:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Ako nemate ovaj odjeljak onda nemate Pro verziju, ako želite da nastavite potrebno je nadograditi svoju verziju)
Sada ako zadržite pokazivač iznad naše mape, imat ćete animaciju zumiranja
Odaberimo naš prvi Image Widget (najniži) i u njegovom Tab napredan, hajde da zgrabimo front-img sipati CSS klase.
Za drugi vidžet slike, ukucajmo mid img za CSS klase.
Za treći Image Widget, ukucajmo last-img za CSS klase.
Vidi takođe: Kako napraviti galeriju slika sa karticama pomoću Elementora
Lebdeći iznad naše kolone sada ćemo vidjeti veličanstvenu animaciju sadržaja našeg internog odjela.
Hajde da prikažemo našu stranicu u tablet modu Videćemo da slike neće biti pravilno prikazane.
Odaberite prvi Image widget, na kartici Stil, izmijenimo širinu klikom na PC i zatim unesite 150 kao širinu. Uradimo isto sa ostala 2 widgeta za slike.
Odaberimo naš Interni odjeljak, u njegovom dijelu sadržaj, izmijenimo Minimalna visina na 225.
Prikažimo i našu stranicu u Smartphone modu, a priori to ne predstavlja nikakav problem. Ali, ako ga ima, hajde da izaberemo naš interni odeljak, u njegovom odeljku sadržaj, izmijenimo minimalnu visinu.
Sada duplirajmo naš srednji stupac 2 puta, a zatim izbrišite druge 2 prazne kolone.
Izmijenimo naslove ovih kolona, a zatim promijenimo slike
Morat ćete imati veličanstven dio čiji su rezultati:
Izvolite, upravo ste lako obavili ovaj zadatak.
Nabavite Elementor Pro odmah!
zaključak
Evo ga! To je to za ovaj članak koji vam pokazuje kako da kreirate karticu sa efektom portfolija. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar komentari.
Međutim, možete se posavjetovati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
