Call to Action Widget (Pro)
Cuprins:
arată
Widge-tul Call to Action Widget (Pro) este un instrument pentru crearea unor casete frumoase care combină o imagine, un text și un buton. Widgetul folosește animații și efecte CSS pentru a crea interacțiuni cu utilizatorul, care apar atunci când utilizatorul trece cu mouse-ul peste casetă.
Conţinut
Imagine
- Skin: Alegeți fie Skin-ul clasic, fie Skin-ul Cover.
- Aspect: (Afișat numai pentru skin-ul clasic) Aliniați imaginea la stânga, la dreapta sau deasupra imaginii.
Dacă se alege Skin-ul clasic, sunt disponibile următoarele opțiuni:
Conţinut
- Element grafic: Alegeți între Nimic, Imagine sau Pictogramă pentru a afișa un element grafic deasupra titlului Îndemn la acțiune.
- Dacă imaginea este selectată ca element grafic:
- Alegeți imagine: Selectați sau încărcați o imagine.
- Dimensiune imagine: Setați dimensiunea imaginii, de la miniatură la completă, sau setați o dimensiune personalizată.
- Dacă pictograma este selectată ca element grafic:
- Pictogramă: Selectați o pictogramă din biblioteca FontAwesome.
- Vizualizare: Alegeți vizualizarea implicită a pictogramei sau selectați Stivuit sau Încadrat.
- Titlu și descriere: Alegeți titlul și descrierea care apar în partea din față a casetei.
- Etichetă HTML pentru titlu: Setați eticheta HTML a titlului la H1-H6, Div sau Span.
- Button Text: Introduceți textul care va fi afișat pe buton.
- Link: Introduceți adresa URL pentru linkul butonului. Faceți clic pe pictograma
Opțiuni link pentru a adăuga rel=nofollow la link sau pentru a deschide linkul într-o fereastră nouă.
Opțiuni link pentru a adăuga rel=nofollow la link sau pentru a deschide linkul într-o fereastră nouă.Ribbon
- Titlu: Introduceți textul care urmează să fie afișat pe Ribbon.
Stil
Box
- Înălțime – Setați înălțimea minimă a întregii cutii.
- Aliniere – Aliniați conținutul la stânga, centrul sau dreapta casetei.
- Poziție verticală – Aliniați conținutul în partea de sus, centru sau de jos a casetei.
- Padding – Setați padding-ul pentru conținut.
Imagine
- Lățime: Setați lățimea minimă pentru imagine.
- Înălțime: Setați înălțimea minimă pentru imagine.
Conţinut
Titlu
- Tipografie: Setați opțiunile de tipografie pentru titlu.
- Spațiere: Setați spațiul dintre titlu și descriere.
Descriere
- Tipografie: Setați opțiunile de tipografie pentru titlu.
- Spațiere: Setați spațiul dintre descriere și buton.
Culori
- Culoare de fundal: Alegeți culoarea de fundal.
- Culoare titlu: Alegeți culoarea titlului.
- Culoare descriere: Alegeți culoarea descrierii.
- Culoarea butonului: Alegeți culoarea butonului.
Buton
- Dimensiune: Selectați dimensiunea butonului, de la Extra mic la Extra Large.
- Culoare text: Alegeți culoarea pentru textul butonului.
- Culoare de fundal: Alegeți culoarea pentru fundalul butonului.
- Culoarea chenarului: Alegeți culoarea pentru chenarul butonului.
- Lățimea chenarului: Setați lățimea chenarului.
- Raza chenarului: Setați raza chenarului pentru a controla rotunjimea colțului.
Ribbon
- Culoare de fundal: Alegeți culoarea pentru fundalul Ribbon-ului.
- Culoare text: Alegeți culoarea pentru textul Ribbon-ului.
- Distanță: Mutați cursorul între 0-50 pentru a seta distanța pentru Ribbon.
- Tipografie: Setați opțiunile de tipografie pentru titlul Ribbon-ului.
- Box Shadow: Setați setările pentru umbra casetei pentru Ribbon.
Efecte Hover
- Animație secvențială: Alegeți dacă animația pentru elementele text apare în secvențe sau toate odată.
- Animație de trecere cu mouse-ul: Alegeți animația de trecere cu mouse-ul pentru imagine: Măriți sau micșorați sau mutați-vă la stânga, la dreapta, în sus sau în jos.
Următoarele elemente pot fi setate independent atât pentru starea Normală, cât și pentru starea Hover.
- Culoare de suprapunere: Alegeți culoarea de suprapunere pentru imagine.
- Filtre CSS: Setați neclaritatea, luminozitatea, contrastul și saturația pentru imagine.
- Mod de amestecare: (Pentru starea normală) Setați un mod de amestecare.
- Durata tranziției (ms): (Pentru starea Hover) Setați durata efectului de hover.
Dacă se alege Cover Skin, sunt disponibile următoarele opțiuni:
Conţinut
- Element grafic: Alegeți între Nimic, Imagine sau Pictogramă pentru a afișa un element grafic deasupra titlului Îndemn la acțiune.
- Dacă imaginea este selectată ca element grafic:
- Alegeți imagine: Selectați sau încărcați o imagine.
- Dimensiune imagine: Setați dimensiunea imaginii, de la miniatură la completă, sau setați o dimensiune personalizată.
- Dacă pictograma este selectată ca element grafic:
- Pictogramă: Selectați o pictogramă din biblioteca FontAwesome.
- Vizualizare: Alegeți vizualizarea implicită a pictogramei sau selectați Stivuit sau Încadrat.
- Titlu și descriere: Alegeți titlul și descrierea care apar în partea din față a casetei.
- Etichetă HTML pentru titlu: Setați eticheta HTML a titlului la H1-H6, Div sau Span.
- Button Text: Introduceți textul care va fi afișat pe buton.
- Link: Introduceți adresa URL pentru linkul butonului. Faceți clic pe pictograma Opțiuni link pentru a adăuga rel=nofollow la link sau pentru a deschide linkul într-o fereastră nouă.
Ribbon
- Titlu: Introduceți textul care urmează să fie afișat pe Ribbon.
Stil
Box
- Înălțime: Setați înălțimea minimă a întregii cutii.
- Aliniere: Aliniați conținutul la stânga, centrul sau dreapta casetei.
- Poziție verticală: Aliniați conținutul în partea de sus, centru sau de jos a casetei.
- Padding: Setați padding-ul pentru conținut.
Conţinut
Titlu
- Tipografie: Setați opțiunile de tipografie pentru titlu.
- Spațiere: Setați spațiul dintre titlu și descriere.
Culori
- Culoare titlu: Alegeți culoarea titlului.
- Culoarea butonului: Alegeți culoarea butonului.
Buton
- Dimensiune: Selectați dimensiunea butonului, de la Extra mic la Extra Large.
- Tipografie: Setați opțiunile de tipografie pentru textul butonului.
- Culoare text: Alegeți culoarea pentru textul butonului.
- Culoare de fundal: Alegeți culoarea pentru fundalul butonului.
- Culoarea chenarului: Alegeți culoarea pentru chenarul butonului.
- Lățimea chenarului: Setați lățimea chenarului.
- Raza chenarului: Setați raza chenarului pentru a controla rotunjimea colțului.
Ribbon
- Culoare de fundal: Alegeți culoarea pentru fundalul Ribbon-ului.
- Culoare text: Alegeți culoarea pentru textul Ribbon-ului.
- Distanță: Mutați cursorul între 0-50 pentru a seta distanța pentru Ribbon.
- Tipografie: Setați opțiunile de tipografie pentru titlul Ribbon-ului.
- Box Shadow: Setați setările pentru umbra casetei pentru Ribbon.
Efecte de Hover
Conţinut
- Animație de trecere cu mouse-ul: Alegeți animația de trecere cu mouse-ul pentru imagine: Măriți sau micșorați sau mutați-vă la stânga, la dreapta, în sus sau în jos.
- Durata animației: Setați timpul necesar pentru finalizarea animației.
- Animație secvențială: Alegeți dacă animația pentru elementele text apare în secvențe sau toate odată.
Fundal
- Animație de trecere cu mouse-ul: Alegeți animația de trecere cu mouse-ul pentru imagine: Măriți sau micșorați sau mutați-vă la stânga, la dreapta, în sus sau în jos.
- Culoare de suprapunere: Alegeți culoarea de suprapunere pentru normal și hover.
- Filtre CSS: Setați neclaritatea, luminozitatea, contrastul și saturația pentru imagine.
- Mod de amestecare: (Pentru starea normală) Setați un mod de amestecare pentru imagine.
- Durata tranziției (ms): (Pentru starea Hover) Setați durata efectului de hover.
Avansat
Setați Opțiunile avansate care sunt aplicabile pentru Widge-tul Call to Action Widget (Pro).
Pentru confortul dvs. urmăriți acest Tutorial și în format Video. Video creat de echipa de asistență Elementor.
Notă! Ați găsit util acest articol? Atunci veți aprecia sprijinul oferit de Elementor în realizarea acestui tutorial. Experimentați construcția unui site cu Elementor astăzi și obțineți un site web modern, pre-securizat, pre-optimizat. Alegeți licența care vi se potrivește astăzi, treceți la versiunea Pro.
