Індикатори прогресу - це ефективний елемент веб-дизайну, який у привабливій формі інформує відвідувачів про хід виконання проекту або досягнення мети. Elementor, як один з найпопулярніших плагінів для WordPress, пропонує вам можливість легко інтегрувати індикатори прогресу у ваші веб-сайти. У цьому посібнику ви дізнаєтеся, як створити та налаштувати смугу прогресу в Elementor.
Основні висновки
- Індикатори прогресу забезпечують візуальне представлення прогресу і цілей.
- Ви можете налаштувати заголовки, значення і кольори.
- Внутрішній текст можна за бажанням показати або приховати.
- Доступні різні стилі та опції налаштування, щоб адаптувати панель до вашого дизайну.
Покрокові інструкції
По-перше, відкрийте свій сайт на WordPress і перейдіть до редактора Elementor. Там ви можете додати новий елемент і вибрати індикатор виконання.
Тепер ви готові ввести заголовок вашого індикатора прогресу. Придумайте відповідний заголовок, наприклад, "Мета продажів". Це дасть вашим відвідувачам початкове уявлення про те, про що йдеться.
На наступному кроці вам потрібно визначити мету або повідомлення про успіх. Подумайте, що саме ви хочете відобразити, і напишіть це у відповідному полі. Цей крок допоможе зробити ваш індикатор виконання простішим для розуміння користувачами.
Тепер ви можете налаштувати колір смуги прогресу. Це не є обов'язковим, але це хороша можливість налаштувати дизайн. Ви можете вибрати колір, який гармонійно поєднується з рештою вашого веб-сайту.
Потім перейдіть до відсотків. Тут ви можете встановити свій прогрес, наприклад, 40%. Пам'ятайте, що ви можете встановити максимальне значення 100%, а мінімальне - 0%. Цей зворотній зв'язок допомагає відвідувачам швидко зрозуміти ваш прогрес.
Відсоток може бути показаний або прихований. Часто виглядає більш привабливо, якщо приховати текст, особливо якщо ви віддаєте перевагу чистому дизайну. Подумайте, який варіант найкраще підходить для вашого проекту.
Якщо ви хочете, ви також можете додати внутрішній текст, який містить відсотки. Ця функція особливо корисна, якщо ви хочете показати негайний прогрес. Якщо ви вирішили не додавати внутрішній текст, ви також можете приховати число тут.
Тепер справа за стилем смуги прогресу. Ви можете налаштувати колір смуги, колір фону для незаповненої області і висоту смуги. Виберіть темно-зелений тон для заповненої області і нейтральний колір фону, щоб все виглядало чітко.
Ви також можете закруглити кути індикатора виконання, щоб надати йому привабливішої форми. Пам'ятайте, що кути можна закругляти тільки спереду, поки прогрес не досягне 100%.
Якщо ви хочете налаштувати внутрішній текст, ви також можете змінити колір і типографіку тут. Ви можете вимкнути шрифт, щоб зосередитися на прогресі.
Нарешті, ви перейдете до розширених налаштувань, де зможете налаштувати колір і стиль тексту для заголовка. Чорний, жирний заголовок з додатковою тінню гарантує, що ваш заголовок буде виділятися.
Тепер збережіть зміни і перейдіть на свою сторінку, щоб побачити результат. Ви можете вирішити, що є сенс відображати відсоток. Якщо ні, то індикатор виконання все одно буде відображатися привабливо.
Тепер ваш індикатор виконання показує вказане значення без відліку від 0 в анімованому вигляді. Замість цього прогрес візуалізується миттєво.
Якщо ви використовуєте Pro-версію Elementor, вам також будуть запропоновані динамічні атрибути. Ця функція особливо корисна для налаштування смуг прогресу на основі зовнішніх даних або навіть значень з бази даних.
Підсумок
У цьому посібнику ви дізналися, як створювати та налаштовувати смуги прогресу в Elementor. Ви зможете встановлювати заголовки і прогрес, вибирати кольори і робити різні налаштування, щоб інтегрувати привабливий і ефективний індикатор виконання.
Поширені запитання
Як створити смугу прогресу в Elementor? Виберіть смугу прогресу в Elementor і додайте заголовок і значення прогресу.
Чи можна змінити кольори смуги прогресу?Так, ви можете налаштувати як колір смуги прогресу, так і колір фону.
Яка перевага внутрішнього тексту на смузі прогресу?Внутрішній текст чіткіше відображає прогрес і допомагає зробити інформацію зрозумілішою з першого погляду.
Як зберегти внесені зміни?Після того, як ви виконали всі налаштування, ви можете зберегти зміни, щоб їх було видно на вашому сайті.
Чи є якісь особливі функції в Pro-версії Elementor? Так, Pro-версія пропонує розширені опції, такі як динамічні атрибути, які ви можете використовувати для подальшого налаштування вашого індикатора прогресу.
