Želite li kreirati plutajuće dugme sa uključenim Z indeksom Elementor ?
Sigurni smo da ste upoznati sa dugmetom koje se pojavljuje ispred svih sadržaja ekrana i obično ima kružni oblik i ikonu u sredini. Pa, to je plutajuće dugme za akciju.
Plutajuće dugme za akciju može pokrenuti akciju ili vas poslati negdje na plovidbu. Kao što su okidači za e-poštu, društvene mreže, orijentaciju posjetitelja pretplatiti se na kanal i mnoge druge.
u Elementor, postoje dvije metode za kreiranje plutajućeg akcijskog gumba, a to su sljedeće:
- Postavljanjem Z-indeksa
- Kreiranjem iskačućeg prozora -Popup-
U ovom tutorijalu samo ćemo vam pokazati kako da kreirate plutajuće dugme za akciju postavljanjem indeksa Z. I koristićemo pro verziju da to ostvarimo.
Ali prvo saznajte: Kako instalirati Elementor na WordPress
Kako kreirati plutajuću akcijsku tipku u Elementoru
Možete koristiti besplatnu verzijuElementor za kreiranje plutajućeg akcijskog dugmeta ovom metodom. Ali, morate da zalijepite dugme koje ste dizajnirali na svaku stranicu na kojoj želite da se dugme prikaže na vašoj sajt.
sa Elementor Pro, također možete pristupiti ovoj funkciji Custom CSS, koji ćemo koristiti u ovom tutorijalu.
Idite na svoj Elementor editor; možete izmijeniti svoj postojeći sadržaj (stranice, članke, itd...) ili kreirati novi. U ovom vodiču ćemo modificirati stranicu.
Prvo kreirajte novi odjeljak s jednom kolonom. Odaberite widget Dugme i prevucite ga i ispustite u oblast za uređivanje sa widget panela. Zatim promijenite dugme tekst i veza.
U ovom vodiču koristit ćemo dugme kao okidač za pritiskanje posjetitelja za navigaciju site Web Elementor. Zatim, na opciju poravnanje, postavite na u pravu et, Konačno, promijenite struk dugmeta Uključeno Vrlo velike.
Kao što možete vidjeti na GIF-u iznad, ovo dugme je nepomično u odjeljku. Zatim ćemo ga natjerati da se kreće dok se pomičemo dok ga držimo u istoj poziciji.
Idite na karticu napredan. U parametru Izgled, postavite širinu na liniji (automobil), definisati pozicija na Fiksno, set horizontalna orijentacija na u pravu i prilagodite ga décalage po želji.
Zatim ćemo definisati osnove ove metode. Na terenu Z-indeks, unesite broj 9999 ; to će učiniti da je dugme uvek ispred (plutajuće).
Sada je vrijeme da rotirate plutajuće dugme za akciju. Uvijek ispod kartice napredan, pristupite css klase iz bloka Raspored, onda napiši rotate unutra.
Vidi takođe: Elementor: Predstavljamo najbolji WordPress Page Builder
Nakon toga idite u blok Custom CSS , zatim zalijepite sljedeći kod u polje:
.rotate.rotate
{transform: rotate(90deg);}Možete vidjeti da se dugme upravo zarotiralo, ali postoji čudan razmak između strane ekrana. Dakle, popravimo to podešavanjem décalage na -92
Konačno, napravićemo još jedan mali dodir za ovo plutajuće dugme za akciju. Pristupite bloku transformator, odaberite ga PREGLED, pristupite opciji smjena i postavite svaku opciju na 7.
Postoji nekoliko opcija za postizanje određene stvari u Elementoru. Kada je u pitanju plutajuće dugme, postoje dvije opcije koje možete koristiti. Ovdje smo pokrili samo jednu metodu, druga metoda će biti još jedan tutorijal.
Pročitajte takođe: Elementor: Kako premjestiti WordPress web stranicu
Ako želite imati više stilskih opcija, kreiranje plutajućeg akcijskog gumba pomoću alata za izgradnju Popup prozora bit će bolja alternativa jer ćete imati opcije za prilagođavanje gumba kao i ponašanja, kao što je vrijeme zatvaranja gumba, trajanje, animacija ulaska ili izlaska, itd. .
Upravo ste lako obavili ovaj zadatak. Samo pregledajte rad vašeg tableta i pametnog telefona, pokušavajući promijeniti margine da odgovaraju svakom uređaju.
Nabavite Elementor Pro odmah!
zaključak
Dakle! To je to za ovaj članak koji vam pokazuje kako primijeniti Zoom efekat na karticu profila. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, 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.
...
