Želite da naučite kako da dodate efekat lebdenja na stavke u widgetu za objaveElementor?
Ako ste korisnik WordPress-a koji koristite Elementor da kreirate svoje site Web, trebali biste biti upoznati sa funkcijom efekta lebdenja. Ovu funkciju možete pronaći uglavnom u svakoj postavkama vidžeta Elementor.
Lebdeći efekat može učiniti vaše elemente atraktivnim, tako da je to efikasan način da poboljšate korisničko iskustvo na vašem uređaju sajt.
Pa, kada govorimo o efektu lebdenja, ovaj će vam članak pokazati kako ga dodati pojedinačnim elementima objave u widgetu Elementor Objave koje koriste Elementorov prilagođeni CSS, konkretno, efekat zumiranja.
Dva su razloga zašto pravimo ovaj vodič za vas:
- Podrazumevano, možete dodati efekat lebdenja u objavu iz Elementor vidžeta za objave. Ali, efekat lebdenja će biti vrlo osnovni/standardan.
- Podrazumevano, Elementor vam omogućava da dodate efekat zatvarača u vidžet Postovi (tab napredan -> Transformacija -> skala). Ali efekat lebdenja će uticati na sve (ne pojedinačne) elemente vidžeta za objave.
Koraci za dodavanje efekta lebdenja pojedinačnim objavama iz Elementorovog vidžeta za objave
Prije nego što započnemo tutorijal, želimo da vas obavijestimo da ovaj vodič koristi Elementorovu prilagođenu CSS funkciju. Ova funkcija je dostupna samo na Elementor Pro; provjerite jeste li nadogradili svoju verziju.
Korak 1: Dodajte widget postova
Idite na svoj Elementor uređivač i sve ćemo početi ispočetka, stoga kreirajte odjeljak s jednom kolonom.
Pročitajte takođe: Kako integrirati MailChimp sa Elementorom
Zatim odaberite vidžet Objave na panelu vidžeta, a zatim ga prevucite i ispustite u područje za uređivanje. Nakon što dodate vidžet Postovi, možete uređivati i stilizirati vidžet prema vašim željama.
primjedba: Provjerite jeste li već objavili članke na svom sajt.
Korak 2: Dodajte CSS isječak
Nakon što uredite i stilizirate widget Postovi, sljedeće ćemo dodati efekat hovera unutar pojedinačnog posta dodavanjem jednostavnog CSS isječka. U postavkama vidžeta Objave idite na karticu napredan -> Prilagođeni CSS. Kopirajte CSS isječak ispod, a zatim ga zalijepite u polje Prilagođeni CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Gornji kod će odabrati pojedinačni element objave na widgetu Postovi pomoću selektora .élémentor-post i primijeniti CSS transformaciju.
Ako ste zadovoljni efektom lebdenja koji je korišten, možete ga zadržati i sačuvati svoj projekt ako želite. Ali, ako želite prilagoditi brzinu prijelaza i transformirati vrijednost skale, možete promijeniti vrijednost u CSS isječku.
primjedba: Transformacija/zumiranje je uobičajen i popularan efekat koji se koristi na web stranicama. Ako želite saznati više o drugim metodama transformacije lebdećih efekata, možete posjetiti ovo Strana.
Otkrijte i: svi Elementor widget selektori u sljedećem članku
Nabavite Elementor Pro odmah!!!
zaključak
Ovaj članak vam pokazuje koliko je lako dodati efekat lebdenja pojedinačnim elementima posta u Elementor-ov widget za objave koristeći prilagođeni CSS.
Tehnika koju smo koristili za ovaj efekat je (zum-in) koja uključuje 2D i neke pseudo transformisane elemente. Prilagodite i igrajte se sa svim stilovima lebdećih efekata dok ne pronađete najbolji efekat lebdenja za svoju web stranicu.
Ovdje je! Upravo smo vas upoznali sa najboljim alatima za marketing putem e-pošte za Elementor. Ako imate bilo kakvih nedoumica o tome kako ih koristiti, 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.
...
