Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka.

Želite li naučiti kako izraditi karticu s učinkom portfelja? U ovom novom vodiču pokazat ćemo vam kako to učiniti s Elementorom.

Ako nemate pojma o čemu danas želimo razgovarati, pozivamo vas da pogledate sljedeći video:

izradite karticu s učinkom portfelja

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 verzija Elementora.

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.

odjeljak s 3 stupca

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

izradite karticu s učinkom portfelja

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

izradite karticu s učinkom portfelja

Pustimo to Slikovni widget u Internom dijelu i umetnite sliku iz naše biblioteke. birajmo Cijeli za Veličina slike et Centar za Poravnanje.

izradite karticu s učinkom portfelja

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

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje stvaranje Jednostavno i besplatno bilo koje web stranice ili blog dizajn s profesionalnim izgledom. Prestanite plaćati puno za web stranicu koju možete sami napraviti.

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.

izradite karticu s učinkom portfelja

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.

izradite karticu s učinkom portfelja

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 slikovni widget, ali primijenite margine 60 za donju i lijevu marginu. Sada biste trebali imati pregled sva 3 slikovna widgeta.

izradite karticu s učinkom portfelja

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)

Želite li prodavati svoje proizvode na internetu?

Besplatno preuzmite WooCommerce, najbolje dodatke za e-trgovinu za prodaju vaših fizičkih i digitalnih proizvoda na WordPressu i jednostavno kreiranje vaše internetske trgovine. Savršeno za početnike.

Sada ako zadržite pokazivač iznad naše karte, imat ćete animaciju zumiranja

izradite karticu s učinkom portfelja

Odaberimo naš prvi slikovni widget (najniži) i u njegovu karticu napredan, uđimo front-img 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 lebdimo iznad naše kolumne sada ćemo vidjeti prekrasnu animaciju sadržaja našeg Internog odjeljka.

izradite karticu s učinkom portfelja

Prikažimo našu stranicu u načinu rada tableta. Vidjet ćemo da slike neće biti ispravno prikazane.

izradite karticu s učinkom portfelja

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.

izradite karticu s učinkom portfelja

Pokažimo i našu stranicu u načinu rada Smartphone a priori to ne predstavlja nikakav problem. Ali, ako ga ima, odaberimo naš unutarnji odjeljak, u njegovom odjeljku Sadržaj, izmijenimo minimalnu visinu.

Sada dvaput duplicirajmo naš srednji stupac, a zatim izbrišite druga dva prazna stupca.

izradite karticu s učinkom portfelja

Izmijenimo naslove ovih stupaca, a zatim promijenimo slike

Morat ćete imati veličanstven dio čiji su rezultati:

izradite karticu s učinkom portfelja

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.

...

0 dionice
udio
cvrkut
Prijaviti