Želite li naučiti kako izraditi karticu s učinkom portfelja? U ovom novom vodiču pokazat ćemo vam kako to učiniti s Elementor.
Ako nemate pojma o čemu danas želimo razgovarati, pozivamo vas da pogledate sljedeć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đer: Kako prikazati tekst iznad slike pomoću Elementora
Kreirajmo novi odjeljak sa strukturom od 3 stupca, a zatim na ploči definirajmo Visina sur Minimalna visinaa onda Minimalna visina kliknimo na VH i postavite klizač na 100.
Odaberimo srednji stupac i ispustimo u ovaj stupac Widget unutarnjeg odjeljka. Widget Unutarnji odjeljak prema zadanim je postavkama konfiguriran s 2 stupca. Ispustimo widget ispod 2 stupca Naslov s naslovom Restoran, Izaberi H4 za HTML oznaku i Centar za poravnanje.
U kartici napredan widgeta Naslov, Uđimo 30 za Gornja marža
Odaberimo još jednom naš interni odjeljak. Izmijenimo ga na ploči Visina sur Minimalna visina i Minimalna visina postavimo kursor na 380. Zatim izbrišite desni ili lijevi stupac unutarnjeg odjeljka
Pustimo to Slikovni widget u Internom dijelu i umetnite sliku iz naše biblioteke. birajmo Cijeli za Veličina slike et Centar za Poravnanje.
Napomena: Ako želite imati cjelovite stranice poput naše, pozivamo vas da ih snimite uz pomoć Chromeovog proširenja GoFullPage, ali možete koristiti i drugu.
Otkrijte također: Kako napraviti galeriju slika pomoću Elementora
Zatim u kartici Stil, kliknite na PX de Širina, postavimo klizač na 260 et les granične zrake sur 10
Zatim modificirajmo Box Shadow mijenjajući Blur na 40 i Diffuse na -10.
Na kartici Napredno, u odjeljku namještanje, Izaberi absolu za Položaj, Horizontalna orijentacija sur lijevoje décalage sur 0, L 'Vertikalna orijentacija sur Bas.
Duplicirajmo dvaput naš widget Image. Neizbježno će se svi oni nadovezati. Pokrenimo Navigator tako da možemo pristupiti ostalim widgetima koje je sakrio prvi.
Zamijenimo sliku drugog Widgeta i njegovu karticu napredan, izmijenimo ih donje margine et lijevo ulaskom 30 za svakoga. Sada ćete vidjeti lagano zaostajanje,
Učinite isto za treći Widget za slike, ali primijenite margine od 60 za donju i lijevu marginu. Sada biste trebali imati pregled sva 3 slikovna widgeta.
Odaberimo naš widget Internal Section, idimo na njegovu karticu napredan i u odjeljku Prilagođena 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 nastaviti, morate nadograditi svoju verziju)
Sada ako zadržite pokazivač iznad naše karte, imat ćete animaciju zumiranja
Odaberimo naš prvi slikovni widget (najniži) i u njegovu karticu napredan, uđimo prednja slika za CSS klase.
Za drugi slikovni widget ukucajmo sredina img za CSS klase.
Za treći slikovni widget, ukucajmo zadnja slika za CSS klase.
Vidi također: Kako stvoriti galeriju slika s karticama pomoću Elementora
Dok sada lebdimo iznad našeg stupca, vidjet ćemo veličanstvenu animaciju sadržaj našeg Internog odjela.
Prikažimo našu stranicu u načinu rada tableta. Vidjet ćemo da slike neće biti ispravno prikazane.
Odaberite prvi widget za sliku, na njegovoj kartici Stil, izmijenimo širinu klikom na PC i zatim unesite 150 kao širinu. Učinimo isto s ostala 2 slikovna widgeta.
Odaberimo naš Interni odjeljak, u njegovom odjeljku Sadržaj, izmijenimo Minimalna visina sur 225.
Prikažimo našu stranicu iu pametnom načinu rada, a priori to ne predstavlja nikakav problem. Ali, ako ih predstavlja, odaberimo naš Interni odjeljak, u njegovom odjeljku Sadržaj, promijenimo minimalnu visinu.
Sada dvaput duplicirajmo naš srednji stupac, a zatim izbrišite druga dva prazna stupca.
Izmijenimo naslove ovih stupaca, a zatim promijenimo slike
Morat ćete imati veličanstven dio čiji su rezultati:
Eto, upravo ste lako obavili ovaj zadatak.
Nabavite Elementor Pro odmah!
Zaključak
Tu je ! To je to za ovaj članak koji vam pokazuje kako izraditi karticu s učinkom portfelja. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar Komentari.
Međutim, možete se 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.
...
