Želite naučiti kako dodati efekt lebdenja na stavke u widgetu za objaveElementor?
Ako ste korisnik WordPressa koji koristi Elementor stvoriti svoju web stranica, trebali biste biti upoznati sa značajkom efekta lebdenja. Ovu značajku možete pronaći uglavnom u postavkama svakog widgeta Elementor.
Efekt lebdenja može učiniti vaše elemente privlačnima, pa je to učinkovit način za poboljšanje korisničkog iskustva na vašem web stranica.
Pa, kad već govorimo o efektu lebdenja, ovaj će vam članak pokazati kako dodati potonji pojedinačnim elementima objave u widgetu Elementor Objave pomoću prilagođenog CSS-a Elementora, posebno efekta povećanja lebdenja.
Postoje dva razloga zašto vam pravimo ovaj vodič:
- Prema zadanim postavkama, možete dodati efekt lebdenja na objavu iz elementorovog widgeta za postove. No, učinak lebdenja bit će vrlo jednostavan/standardan.
- Prema zadanim postavkama, Elementor vam omogućuje dodavanje efekta patentnog zatvarača u widget Objave (kartica napredan -> transformacija -> Echelle). No efekt lebdenja utjecat će na sve (ne pojedinačne) elemente widgeta objava.
Koraci za dodavanje efekta lebdenja pojedinačnim objavama iz elementorovog widgeta za postove
Prije početka tutorijala, želimo vas obavijestiti da ovaj tutorijal koristi Custom CSS značajku Elementora. Ova je značajka dostupna samo na Elementor Pro; provjerite jeste li nadogradili svoju verziju.
Korak 1: Dodajte widget za objave
Idite u svoj uređivač Elementor i sve ćemo započeti ispočetka, pa izradite odjeljak s jednim stupcem.
Pročitajte također: Kako integrirati MailChimp s Elementorom
Zatim odaberite widget Objave na ploči widgeta, zatim ga povucite i ispustite u područje za uređivanje. Nakon što dodate widget Objave, možete urediti i stilizirati widget prema svojim željama.
Bilješka: Provjerite jeste li već objavili članke na svom web stranica.
Korak 2: dodajte CSS isječak
Nakon što uredite i stilizirate widget Objave, sljedeći ćemo dodati efekt lebdenja unutar pojedinačne objave dodavanjem jednostavnog CSS isječka. U postavkama widgeta Objave idite na karticu napredan -> Prilagođeni CSS. Kopirajte CSS isječak u nastavku i 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 kôd odabrat će pojedinačni element posta na widgetu Postovi pomoću birača .élémentor-post i primijeniti CSS transformaciju.
Ako ste zadovoljni efektom lebdenja koji je korišten, možete ga zadržati takvim i spremiti svoj projekt ako želite. No, ako želite prilagoditi brzinu prijelaza i vrijednost skale transformacije, možete promijeniti vrijednost u CSS isječku.
Bilješka: Transformacija/povećanje čest je i popularan efekt koji se koristi na web stranicama. Ako želite saznati više o drugim metodama transformiranja efekata lebdenja, možete posjetiti ovo stranica.
Otkrijte i: sve birače elementor widgeta u sljedećem članku
Nabavite Elementor Pro sada!!!
Zaključak
Ovaj vam članak pokazuje kako je jednostavno dodati efekt lebdenja pojedinačnim elementima posta u elementorovom widgetu za postove pomoću prilagođenog CSS-a.
Tehnika koju smo koristili za ovaj efekt je ( zoom-in ) koja uključuje 2D i neke pseudo transformirane elemente. Prilagodite i igrajte se sa svim stilovima efekata lebdenja dok ne pronađete najbolji efekt lebdenja za svoju web stranicu.
Ovdje je! Upravo smo vam predstavili najbolje alate 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 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.
...
