Trebate dodati efekt lebdenja u Elementor putem prilagođenog CSS-a?

Elementor ima ugrađenu značajku za dodavanje efekta lebdenja elementu (O ovome smo govorili u jednom od naših članaka. Iako je značajka dovoljno korisna, ima i lošu stranu. Na nju možete dodati samo efekt lebdenja. Odjeljak, stupac, widget Image, widget Button i widget Posts.

Pročitajte također: Kako instalirati Elementor na WordPress

Elementarova ugrađena značajka efekta lebdenja ne omogućuje vam dodavanje efekta lebdenja drugim widgetima poput widgeta za uređivanje teksta, widgeta naslova itd. Još jedan nedostatak je taj što možete dodati samo vrlo osnovni efekt lebdenja.

Postoji li još neka opcija za dodavanje efekta lebdenja u Elementor?

Da tamo je. Možete dodati efekt lebdenja u Elementor putem prilagođenog CSS-a. No, da biste dodali prilagođeni CSS, trebate koristiti Elementor Pro jer je prilagođeni CSS dostupan samo na Elementor Pro.

Dodavanje efekta lebdenja u Elementor putem prilagođenog CSS-a

Prije nego što započnemo, pogledajmo primjer efekata lebdenja stvorenih putem prilagođenog CSS-a.

Za razliku od Elementorovog ugrađenog efekta lebdenja, ovom metodom možete dodati točkasti efekt bilo kojem elementu u Elementoru. Bilo da je riječ o odjeljku, stupcu ili widgetu (svi widgeti).

U ovom primjeru pokazat ćemo vam kako stupcu dodati efekt točke.

Prvo kliknite na ručku stupca da biste se prebacili na ploču s postavkama stupca. Kad stignete, idite na karticu napredan i otvorite blok običaj CSS i zalijepite sljedeći CSS kôd.

selektor: hover {prijelaz: sve .2 olakšavanje ulaska; pretvoriti: razmjera (1.1); kursor: točka; z-indeks: 1; }

Tu.

U gornjem kodu koristimo svojstvo CSS transformirati () za dodavanje efekta lebdenja. Vrsta transformacije koju koristimo u ovom primjeru je skala s trajanjem od 1,1 sekunde.

Postoje 4 druge vrste transformacije s kojima možete koristiti:transform

  • Matrica
  • prevesti
  • Rotirati
  • iskrivljavati

Ako želite koristiti drugačiji stil pretvorbe, možete samo zamijeniti vrijednost transformirati na CSS kodu gore.

Možete pročitati cette stranica kako biste saznali više o CSS transformaciji.

Možete slijediti istu rutu da biste dodali efekt lebdenja ostalim elementima.

Da biste odjeljku dodali pokazivački efekt, možete kliknuti ručku odjeljka i otići na karticu napredan i otvorite blok Prilagođeni CSS.

dodajte efekt lebdenja u Elementor putem prilagođenog CSS-a

Da biste dodali efekt lebdenja widgetu, možete kliknuti ručicu widgeta i ponovo otići na karticu. Napredna, zatim otvorite blok Prilagođeni CSS.

Ostali dodatni premium WordPress dodaci 

Otkrijte i druge WordPress plugins premium koji optimiziraju izvedbu vašeg WordPress bloga ili web stranice.

1. Popup Live prodaje

Popup za prodaju uživo je još jedan WordPress plugin obavijest s nekoliko dobrih stvari koje možete pretvoriti u prednost. Prije svega, on ima mogućnost prikaz skočnog prozora kad netko izvrši narudžbu. Wordpress za skočni dodatak za prodaju uživo

Drugo, skočni prozor prodaje u stvarnom vremenu može također prikazati obavijest kada osoba jednostavno doda artikl u košaricu. I treće, alat možete koristiti za pojačavanje reklame za proizvod pokazujući koliko je posjetitelja pregledalo članak.

Uz najnovije web trendove, možete očekivati ​​da se Live Sales Popup lijepo prikazuje na svim uređajima i preglednicima. Što se tiče skočnog izgleda, možete ga prilagoditi do najsitnijih detalja.

Da biste pročitali: Kako popraviti sigurnosno upozorenje na vaš WordPress blog

Ostale značajke Live Sales Popupa su više od trideset animacija, zvukova, odbrojavanja i personalizirano pozicioniranje. Također radi za lažne obavijesti i omogućuje vam da ga postavite samo za određene stranice na kojima želite da obavijest izvršava svoj zadatak.

Preuzmite | demo | Web hosting

2. Foodify

Foodify je najbrži i najlakši način da kupci naruče hranu iz trgovine. Potpuno je osjetljiv i uključuje dodatne značajke poput slike, opcija pretraživanja, informacije o proizvodu. Foodlify meni hrane za restoran za woocommerce

Također dodaje gumbe u košarici za poboljšanje korisničko iskustvo. Ovo proširenje WooCommerce brzo je, sveobuhvatno rješenje za naručivanje koje se može dodati na bilo koju web stranicu WooCommerce.

Evo za tebe 5 WordPress dodatci za optimizaciju opisa kategorija i naljepnica

Prednost mu je što je vrlo fleksibilan i kompatibilan s mnogim postojećim dodacima u WordPress direktoriju.

Preuzmite | demo | Web hosting

3. Mega Zoom & Pan Image Viewer

Mega Zoom & Pan Image Viewer plugin izvrstan je preglednik slika i preglednik s potpuno responzivnim izgledom za prikaz velikih slika na vašem WordPress blog.

Mega zoom pan wordpress dodatak za zumiranje

Moćan je alat dizajniran za predstavljanje proizvoda (slike proizvoda visoke razlučivosti. Primjerice: Odjeća, automobili, tehnički dijagrami itd.), Prikaz karata i svih ostalih slika, zahvaljujući svom zumiranju i svojoj funkciji panoramski, njegove navigacijske kontrole, njegova traka za pomicanjei vrlo prilagodljive oznake / pristupne točke.

ovdje su 5 aplikacija za pametne telefone za zaštitu vaših slika i videozapisa

Ovaj dodatak izvrsno funkcionira na iOS-u (iPad, iPhone), Android i Windows mobiteli itd. Također radi na svim modernim preglednicima i starijim preglednicima poput IE7 ili IE8.

Preuzmite | demo | Web hosting

Ostali preporučeni resursi

Također vas pozivamo da se savjetujete sa donjim izvorima kako biste poboljšali i kontrolirali svoju web stranicu i blog.

Zaključak

Ovdje je ! To je sve za ovaj vodič. Nadamo se da vam je ovaj članak pomogao da dodate efekt lebdenja u Elementor putem prilagođenog CSS-a. Također možete pročitati naš članak na Kako popraviti blokiranje JavaScripta i CSS-a u WordPressu.

Međutim, također ćete moći konzultirati naše sredstva, 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.

Ako imate prijatelja ili komentar, ostavite ga u odjeljku komentar. Uglavnom ovaj članak podijelite na svojim različitim društvenim mrežama.

...