Creează și personalizează bara de progres în Elementor

Bara de progres este un element eficient în designul web, care informează vizitatorii într-un mod atrăgător despre progresul unui proiect sau obiectiv. Elementor, unul dintre cele mai populare module de construire a paginilor pentru WordPress, îți oferă posibilitatea de a integra ușor barea de progres în paginile tale web. Această ghidare te va conduce prin pașii necesari pentru a crea și personaliza o bară de progres în Elementor.

Momente cheie

• Barele de progres oferă o reprezentare vizuală a progresului și obiectivelor.
• Poți ajusta individual titlul, valorile și culorile.
• Textul interior poate fi afișat sau ascuns opțional.
• Sunt disponibile diferite stiluri și opțiuni de personalizare pentru a-ți adapta bara la designul tău.

Ghid pas cu pas

În primul rând, deschizi pagina ta WordPress și navighezi către editorul Elementor. Acolo poți adăuga un nou element și selecta bara de progres.

Acum ești pregătit să introduci titlul barei tale de progres. Gândește-te la un titlu potrivit, cum ar fi "Obiectivul de vânzări". Asta oferă vizitatorilor tăi deja un indiciu despre ce este vorba.

În pasul următor, va trebui să definesc scopul sau mesajul de succes. Gândește-te la ceea ce vrei să afișezi și scrie-l în câmpul dedicat. Acest pas ajută la înțelegerea mai clară a barei de progres pentru utilizatori.

Apoi poți seta culoarea barei de progres. Aceasta nu este obligatorie, dar este o ocazie bună de a-ți adapta designul. Poți alege o nuanță care se potrivește cu restul site-ului tău.

Merge apoi la procente. Aici poți seta progresul, spre exemplu la 40%. Ai în vedere că poți seta valoarea maximă la 100% și valoarea minimă la 0%. Această indicație ajută vizitatorii să înțeleagă rapid progresul.

Procentul poate fi afișat sau ascuns. Arată adesea mai bine când textul este ascuns, în special dacă preferi un design curat. Gândește-te care variantă se potrivește cel mai bine proiectului tău.

Dacă dorești, poți adăuga și un text interior care să conțină procentajele. Această funcție este deosebit de utilă atunci când dorești să reprezinți progresul instantaneu. Dacă te decizi să nu folosești un text interior, poți ascunde și numărul aici.

Acum ai de-a face cu stilul barei de progres. Poți personaliza culoarea barei, culoarea fundalului pentru zona neumplută și înălțimea barei individual. Alege o nuanță de verde închis pentru zona umplută și o culoare neută pentru fundal pentru un aspect curat.

În plus, poți rotunji colțurile barei de progres astfel încât bara să aibă o formă mai atrăgătoare. Ai în vedere că colțurile pot fi rotunjite doar pe partea din față până când progresul atinge 100%.

Dacă dorești să personalizezi textul interior, poți schimba și aici culoarea și tipografia. Poate decizi să dezactivezi fontul pentru a accentua progresul.

În cele din urmă, ajungi la setările avansate, unde poți ajusta culoarea textului și stilul textului pentru titlu. Un titlu negru, îngroșat cu umbra opțională asigură că titlul tău iese în evidență.

Salvează acum modificările și vezi rezultatul pe pagina ta. Poate decizi că este util să afișezi procentajul. În caz contrar, bara de progres va fi totuși afișată într-un mod atrăgător.

Bara ta de progres va afișa acum valoarea stabilită, fără a fi animată să crească de la 0. În schimb, progresul este vizualizat instantaneu.

Dacă folosești versiunea Pro a Elementor, ai la dispoziție și atribute dinamice suplimentare. Această funcționalitate este deosebit de utilă pentru personalizarea barelor de progres bazate pe date externe sau chiar pe valori suportate de baza de date.

Rezumat

În acest ghid ai învățat cum să creezi și să personalizezi o bară de progres în Elementor. Poți stabili titlul și progresul, selecta culorile și face diverse ajustări pentru a integra o bară de progres atractivă și eficientă.