Doriți să creați un buton plutitor cu indexul Z activat Elementor ?

Suntem siguri că ești familiarizat cu butonul care apare în fața întregului conținut de pe ecran și, de obicei, cu o formă circulară și o pictogramă în centru. Ei bine, acesta este butonul de acțiune plutitor.

Butonul de acțiune plutitor poate declanșa o acțiune sau vă poate trimite să navigați undeva. Cum ar fi declanșatoare pentru e-mailuri, rețele sociale, orientarea vizitatori pentru a vă abona la un canal și multe altele.

Dans Elementor, există două metode de a crea un buton de acțiune plutitor, acestea sunt următoarele:

  • Prin setarea Z-Index
  • Prin crearea unei ferestre pop-up -Popup-

În acest tutorial vă vom arăta doar cum să creați un buton de acțiune plutitor prin setarea indexului Z. Și vom folosi versiunea pro pentru a face acest lucru.

Dar mai întâi, aflați: Cum se instalează Elementor pe WordPress

Cum se creează butonul de acțiune plutitoare în Elementor

Puteți folosi versiunea gratuită aElementor pentru a crea butonul de acțiune plutitor cu această metodă. Dar, trebuie să lipiți butonul pe care l-ați proiectat pe fiecare pagină în care doriți să fie afișat butonul pe dvs site-ul web.

cu Elementor Pro, puteți accesa și caracteristica CSS personalizat, pe care îl vom folosi în acest tutorial.

Accesați editorul dvs. Elementor; vă puteți modifica conținutul existent (pagini, articole etc...) sau puteți crea unul nou. În acest tutorial, vom modifica o pagină.

Mai întâi, creați o nouă secțiune cu o singură coloană. Selectați widgetul Buton și trageți și plasați-l în zona de editare din panoul widget. Apoi schimbați butonul Text și legătură. 

În acest tutorial, vom folosi butonul ca declanșator pentru a apăsa vizitatori pentru a naviga pe site-ul web Elementor. Apoi, pe opțiune aliniere, setați-l la dreapta et, În cele din urmă, schimbați Dimensiunea a butonului Pornit Foarte larg.

creați un buton plutitor cu indice Z

După cum puteți vedea în GIF-ul de mai sus, acest buton este staționar în secțiune. Apoi, îl vom face să se miște pe măsură ce derulăm, păstrând-o în aceeași poziție.

Accesați fila avansat. În parametrul Aspect, setați lățimea pe Inline (mașină), definește poziție pe Fix, a stabilit orientare orizontală pe dreapta și reglați-l décalage după cum doriți.

creați un buton plutitor cu indice Z

În continuare, vom defini elementele esențiale în această metodă. În câmp Index Z, introduceți numărul 9999 va face butonul mereu în față (plutitor).

creați un buton plutitor cu indice Z

Acum este timpul să rotiți butonul de acțiune plutitor. Întotdeauna sub filă avansat, accesați clase css de la bloc schemă, apoi scrie rotate interior.

Vezi și: Elementor: Vă prezentăm cel mai bun generator de pagini WordPress

După aceea mergi la bloc CSS personalizat , apoi inserați următorul cod în câmp:

.rotate.rotate
{transform: rotate(90deg);}

Puteți vedea că butonul tocmai s-a rotit, dar există un spațiu ciudat între partea laterală a ecranului. Deci, haideți să o reparăm ajustând décalage la -92

creați un buton plutitor cu indice Z

În cele din urmă, vom face o ultimă atingere pentru acest buton de acțiune plutitor. Accesați blocul Transformator, selectați-l PREZENTARE GENERALĂ, accesează opțiunea Decalaj și setați fiecare opțiune la 7.

creați un buton plutitor cu indice Z

Există mai multe opțiuni pentru a realiza un anumit lucru în Elementor. Când vine vorba de butonul plutitor, există două opțiuni pe care le puteți folosi. Aici am acoperit o singură metodă, cealaltă metodă va fi un alt tutorial.

Citiți și: Elementor: Cum să migrați un site web WordPress

Dacă doriți să aveți mai multe opțiuni de stil, crearea unui buton de acțiune plutitor folosind generatorul Popup va fi o alternativă mai bună, deoarece veți avea opțiuni pentru a personaliza butonul, precum și comportamentul, cum ar fi timpul de închidere a butonului, durata, animația de intrare sau ieșire etc. .

Tocmai ați finalizat această sarcină cu ușurință. Doar previzualizați munca pe tabletă și smartphone, încercând să modificați marginile pentru a se potrivi cu fiecare dispozitiv.

Obțineți Elementor Pro acum!

Concluzie

Asa de ! Asta este pentru acest articol care vă arată cum să aplicați un efect de Zoom pe un card de profil. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...