Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka.

Želite li stvoriti plutajući gumb sa Z indeksom na Elementoru?

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 radnju ili vas poslati negdje na plovidbu. Kao što su okidači za e-poštu, društvene mreže, usmjeravanje posjetitelja da se pretplate na kanal i još mnogo toga.

U Elementoru postoje dvije metode za stvaranje plutajućeg akcijskog gumba, a to 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 verziju Elementora za stvaranje plutajućeg akcijskog gumba ovom metodom. No, morate zalijepiti gumb koji ste dizajnirali na svaku stranicu na kojoj želite da se gumb pojavi na vašoj web stranici.

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.

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje stvaranje Jednostavno i besplatno bilo koje web stranice ili blog dizajn s profesionalnim izgledom. Prestanite plaćati puno za web stranicu koju možete sami napraviti.

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 veza. 

U ovom vodiču koristit ćemo gumb kao okidač za poticanje posjetitelja da pregledavaju web stranicu Elementor. Zatim, na opciju poravnanje, postavite na pravo et, Konačno, promijenite struk gumba Uključeno Vrlo velika.

stvorite plutajući gumb sa Z indeksom

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.

stvorite plutajući gumb sa Z indeksom

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).

stvorite plutajući gumb sa Z indeksom

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

stvorite plutajući gumb sa Z indeksom

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.

stvorite plutajući gumb sa Z indeksom

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.

...

0 dionice
udio
cvrkut
Prijaviti