Želite li stvoriti plutajući gumb s uključenim Z indeksom Elementor ?
Sigurni smo da ste upoznati s gumbom koji se pojavljuje ispred cijelog sadržaja zaslona i obično s kružnim oblikom i ikonom u sredini. Pa, to je plutajući gumb za akciju.
Plutajući akcijski gumb može pokrenuti akciju ili vas poslati nekamo ploviti. Kao što su okidači za e-poštu, društvene mreže, orijentacija posjetitelji pretplatiti se na kanal i mnoge druge.
Dans Elementor, postoje dvije metode za stvaranje plutajućeg akcijskog gumba, one su sljedeće:
- Postavljanjem Z-indeksa
- Stvaranjem skočnog prozora -Popup-
U ovom vodiču samo ćemo vam pokazati kako stvoriti plutajući akcijski gumb postavljanjem indeksa Z. A mi ćemo koristiti pro verziju kako bismo to ostvarili.
Ali prvo saznajte: Kako instalirati Elementor na WordPress
Kako stvoriti plutajući akcijski gumb u Elementoru
Možete koristiti besplatnu verzijuElementor da stvorite plutajući akcijski gumb ovom metodom. Ali morate zalijepiti gumb koji ste dizajnirali na svaku stranicu na mjesto gdje želite da se gumb prikaže na vašoj web stranica.
s Elementor Pro, također možete pristupiti značajci Prilagođeni CSS, koji ćemo koristiti u ovom vodiču.
Idite na svoj Elementor editor; možete izmijeniti svoj postojeći sadržaj (stranice, članke, itd...) ili stvoriti novi. U ovom vodiču ćemo modificirati stranicu.
Prvo stvorite novi odjeljak s jednim stupcem. Odaberite widget gumba te ga povucite i ispustite u područje za uređivanje s ploče widgeta. Zatim promijenite gumb Tekstovi i veza.
U ovom vodiču koristit ćemo gumb kao okidač za pritiskanje posjetitelji za navigaciju web stranica Elementor. Zatim, na opciju poravnanje, postavite na pravo et, Konačno, promijenite struk gumba Uključeno Vrlo velika.
Kao što možete vidjeti na GIF-u iznad, ovaj gumb je nepomičan u odjeljku. Zatim ćemo ga pomaknuti dok se pomičemo dok ga držimo u istom položaju.
Idite na karticu napredan. U parametru Izgled, postavite širinu na liniji (automobil), definirati pozicija na Fiksno, postavljeno horizontalna orijentacija na pravo i prilagodite ga décalage kao što želite.
Zatim ćemo definirati bitne stvari u ovoj metodi. U području Z-indeks, unesite broj 9999 ; to će učiniti da je gumb uvijek ispred (plutajući).
Sada je vrijeme za okretanje plutajućeg akcijskog gumba. Uvijek ispod kartice napredan, pristupite css klase iz bloka raspored, onda napiši rotate u.
Vidi također: Elementor: Predstavljamo najbolji alat za izgradnju WordPress stranica
Nakon toga idite u blok Prilagođena CSS , zatim zalijepite sljedeći kod u polje:
.rotate.rotate
{transform: rotate(90deg);}Možete vidjeti da se gumb upravo zarotirao, ali postoji čudan razmak između strane zaslona. Dakle, popravimo to podešavanjem décalage na -92
Konačno, napravit ćemo posljednji mali dodir za ovaj plutajući akcijski gumb. Pristup bloku Transformator, odaberite ga PREGLED, pristupiti opciji smjena i postavite svaku opciju na 7.
Postoji nekoliko opcija za postizanje određene stvari u Elementoru. Kada je riječ o plutajućem gumbu, postoje dvije opcije koje možete koristiti. Ovdje smo pokrili samo jednu metodu, druga metoda će biti još jedan tutorial.
Pročitajte također: Elementor: Kako migrirati WordPress web stranicu
Ako želite imati više stilskih opcija, stvaranje plutajućeg akcijskog gumba pomoću alata za izgradnju skočnog prozora bit će bolja alternativa jer ćete imati opcije za prilagodbu 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 kako bi odgovarale svakom uređaju.
Nabavite Elementor Pro odmah!
Zaključak
Dakle ! To je to za ovaj članak koji vam pokazuje kako primijeniti Zoom efekt na karticu profila. 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.
...
