Button Widget

Button Widget

Button Widget vă ajută să proiectați și să personalizați cu ușurință butoanele fără a fi nevoie de alte pluginuri sau coduri scurte.

Conţinut

1. Tip: Selectați din 5 stiluri de butoane pentru a începe designul. Alegeți dintre Implicit, Informații, Succes, Avertisment sau Pericol.
2. Text: Introduceți textul butonului.
3. Link: Setați adresa URL pentru linkul butonului. Faceți clic pe pictograma pentru a seta legătura fie să se deschidă într-o fereastră nouă, fie pentru a adăuga rel=nofollow la link.
4. Aliniere: Aliniați butonul la stânga, la centru, la dreapta sau justificat în raport cu coloana acestuia.
5. Dimensiune: Selectați dimensiunile presetate ale butoanelor, de la Extra mic la Extra Large (consultați detaliile implicite de Padding în partea de jos a acestui document)
6. Pictogramă: Selectați o pictogramă FontAwesome pentru a fi afișată pe buton.
7. Poziția pictogramei: Setați pictograma să apară înainte sau după textul butonului.
8. Spațierea pictogramelor: Reglați spațiul dintre pictogramă și textul butonului.
9. ID buton: (Opțional) Atribuiți un ID unic pentru buton pe care să îl utilizați în situații precum evenimentele Google Analytics.

Stil

1. Tipografie: Schimbați opțiunile implicite de tipografie pentru textul butonului.
2. Text Shadow: Adăugați o umbră și estompare textului butonului.
3. Culoare text: Selectați culoarea textului butonului.
4. Culoare de fundal: Selectați culoarea de fundal a butonului atât pentru starea Normală, cât și pentru starea Hover. Puteți utiliza o culoare solidă sau gradient.
5. Animație Hover: Faceți clic pe fila Hover pentru a seta o animație Hover.
6. Tip de chenar: Selectați tipul de chenar de utilizat în jurul butonului.
7. Lățime: Controlați grosimea chenarului din jurul butonului.
8. Culoare: Alegeți culoarea chenarului.
9. Raza chenarului: Setați raza chenarului pentru a controla rotunjimea colțului.
10. Box Shadow: Setați opțiuni pentru a aplica o umbră casetă pe buton.
11. Padding: Modificați setările de Padding ale butonului.

Cum să Urmăriți Evenimentul „Button onClick” (pentru Facebook Pixel, Google Analytics sau Google Tag Manager)

Urmați acești pași pentru a urmări evenimentele butonului onClick:

1. Edit Button > Advanced > set CSS ID = My_Button
2. Adăugați un Widget HTML pe pagină (după ce butonul va fi Ok)
3. Lipiți următorul cod în câmpul Cod HTML:

document.addEventListener("DOMContentLoaded", function(event) {
jQuery('#My_Button a').click(function(){
// tracking code here
// for example Facebook Pixel:
fbq('track','AddToCart');
});
});

4. Adăugați următorul CSS la secțiunea CSS personalizată a site-urilor dvs. Acesta poate fi în Personalizatorul temei, Setările site-ului, Codul personalizat sau tema copil.

/** Button Fix for Tag Manager (For Click Id triggering)
**/ .elementor-button-content-wrapper {pointer-events: none;}
.elementor-button span { pointer-events:none}

5. Actualizați pagina, previzualizați, testați.

Avansat

Setați Opțiunile avansate care sunt aplicabile pentru Button Widget.

Cum se Creează Fundaluri Gradiente pentru Butoane

Cum să Faci un Buton de Descărcare PDF

1. Adăugați un Widget Editor de text.
2. Încărcați PDF-ul prin Widgetul Editor de text.
3. Publicați
4. Accesați pagina live și copiați linkul URL care indică PDF.
5. Acum, într-o altă pagină, adăugați un Button Widget și setați linkul către adresa URL.

Dimensiuni Presetate Butoane: Valori implicite de Padding

Sus Stanga Jos Dreapta

• Foarte mic: 10px, 20px, 10px, 20px
• Mic: 12px, 24px, 12px, 24px
• Mediu: 15px, 30px, 15px, 30px
• Mare: 20px, 40px, 20px, 40px
• Extra mare: 25px, 50px, 25px, 50px

Pentru confortul dvs. urmăriți acest Tutorial și în format Video. Video creat de echipa de asistență Elementor.

Documentație adițională

• Text Editor Widget
• Icon Box Widget
• Sidebar Widget
• Toggle Widget