Създаване и настройване на лентата за напредък в Elementor

Лента за напредък е ефективен елемент в уеб дизайна, който информира посетителите на привлекателен начин за напредъка на проект или цел. Elementor, като един от най-популярните плъгини за изграждане на страници за WordPress, ви предоставя възможността да лесно вграждате лентите за напредък в уебсайтовете си. Това ръководство ще ви насочи през отделните стъпки за създаване и персонализиране на лента за напредък в Elementor.

Най-важните заключения

• Лентите за напредък представят визуално напредъка и целите.
• Можете да персонализирате заглавието, стойностите и цветовете индивидуално.
• Вътрешният текст може да се показва или скрива по избор.
• Има различни стилове и опции за персонализация, за да се приспособите лентата към вашия дизайн.

Стъпка по стъпка ръководство

Първо трябва да отворите вашия уебсайт в WordPress и да отидете към редактора на Elementor. Там можете да добавите нов елемент и да изберете лентата за напредък.

Сега сте готови да въведете заглавието на вашата лента за напредък. Мислете за подходящо заглавие, като например "Цел за оборот". Това вече дава на вашите посетители първа насока за какво става въпрос.

Следващата стъпка е да зададете целта или съобщението за успех. Мислете какво именно искате да покажете и напишете го в подходящото поле. Тази стъпка помага да направите вашата лента за напредък по-разбираема за потребителите.

След това може да зададете цвета на лентата за напредък. Това не е задължително, но е добра възможност да персонализирате дизайна. Можете да изберете цвят, който се хармонизира с останалата част от уебсайта ви.

След това преминете към процентните стойности. Тук можете да настроите напредъка си, например на 40%. Промени на максималната стойност на 100% и минималната стойност на 0% могат да помогнат на посетителите ви бързо да разберат напредъка.

Процентът може да се показва или скрива. Често изглежда по-привлекателно, ако скриете текста, особено ако предпочитате чист дизайн. Мислете коя варианта е най-подходяща за ваш проект.

Ако желаете, можете също да добавите вътрешен текст с процентите. Тази функция е особено полезна, ако искате да представите незабавния напредък. Ако решите да не използвате вътрешен текст, можете да скриете числото тук.

Сега става въпрос за стила на лентата за напредък. Можете да персонализирате цвета на лентата, цвета на фона за ненапълнената част и височината на лентата индивидуално по поанасяне. Изберете тъмно зелен цвят за пълната част и неутрален фонов цвят, за да постигнете ясен вид.

Допълнително можете да закръглите ъглите на лентата за напредък, така че тя да придобие по-привлекателна форма. Помнете, че ъглите могат да бъдат закръглени само отпред, докато напредъкът е 100%.

Ако желаете да персонализирате вътрешния текст, можете също да променяте цвета и типографията тук. Възможно е да решите да деактивирате шрифта, за да се фокусирате върху напредъка.

Накрая, имате възможност да настроите цвета на текста и стила на заглавието чрез разширени настройки. Черно, удебелено заглавие с опционална сянка ще направи заглавието ви видимо.

Сега запазете промените си и отидете на страницата си, за да видите резултата. Може би ще решите, че е разумно да покажете процента. В противен случай, лентата за напредък все пак ще бъде показана привлекателно.

Вашият Fortschrittsbalken вече показва зададената стойност, без да бъде анимирана от 0 на горе. Вместо това напредъкът се визуализира веднага.

Ако използвате Pro версията на Elementor, ще ви бъдат предложени допълнителни динамични атрибути. Тази функция е особено полезна за персонализация на лентите за напредък въз основа на външни данни или дори на базирани на данни стойности.

Резюме

В това ръководство научихте как да създадете и персонализирате лента за напредък в Elementor. Можете да зададете заглавие и напредък, да изберете цветове и да направите разнообразни настройки, за да вградите привлекателна и ефективна лента за напредък.