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