Создание и настройка прогресс-баров в Elementor

Прогресс-бары - это эффективный элемент веб-дизайна, который в привлекательной форме информирует посетителей о ходе реализации проекта или цели. Elementor, как один из самых популярных плагинов для создания страниц для WordPress, предлагает вам возможность легко интегрировать прогресс-бары в ваши сайты. В этом руководстве вы узнаете, как создать и настроить прогресс-бар в Elementor.

Основные выводы

• Прогресс-бары обеспечивают визуальное представление прогресса и целей.
• Вы можете настроить заголовки, значения и цвета.
• Внутренний текст может быть показан или скрыт.
• Доступны различные стили и варианты настройки, чтобы адаптировать панель к вашему дизайну.

Пошаговые инструкции

Для начала откройте свой сайт WordPress и перейдите в редактор Elementor. Там вы можете добавить новый элемент и выбрать прогресс-бар.

Теперь вы готовы ввести название прогресс-бара. Придумайте подходящее название, например "Цель продаж". Это даст посетителям понять, о чем идет речь.

На следующем этапе вам нужно определить цель или сообщение об успехе. Подумайте, что именно вы хотите отобразить, и напишите это в соответствующем поле. Этот шаг поможет сделать вашу шкалу прогресса более понятной для пользователей.

Теперь вы можете задать цвет индикатора прогресса. Это не обязательно, но это хорошая возможность настроить дизайн. Вы можете выбрать цвет, который будет гармонировать с остальными элементами вашего сайта.

Затем перейдите к процентам. Здесь вы можете установить прогресс, например, на 40 %. Помните, что максимальное значение можно установить на 100 %, а минимальное - на 0 %. Такая обратная связь поможет посетителям быстро понять ваш прогресс.

Процент может быть отображен или скрыт. Зачастую текст выглядит более привлекательно, если его скрыть, особенно если вы предпочитаете чистый дизайн. Подумайте, какой вариант лучше всего подходит для вашего проекта.

При желании вы можете добавить внутренний текст, содержащий проценты. Эта функция особенно полезна, если вы хотите показать немедленный прогресс. Если вы откажетесь от внутреннего текста, вы также можете скрыть число здесь.

Теперь дело за стилем индикатора прогресса. Вы можете настроить цвет полосы, цвет фона для незаполненной области и высоту полосы. Выберите темно-зеленый тон для заполненной области и нейтральный цвет фона для четкого вида.

Вы также можете закруглить углы индикатора выполнения, чтобы придать ему более привлекательную форму. Помните, что углы можно закруглить только спереди, пока прогресс не достигнет 100%.

Если вы хотите настроить внутренний текст, вы можете изменить цвет и шрифт и здесь. Возможно, вы решите отключить шрифт, чтобы сосредоточиться на прогрессе.

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

Теперь сохраните изменения и перейдите на свою страницу, чтобы увидеть результат. Возможно, вы решите, что имеет смысл отображать процентное соотношение. Если нет, то шкала прогресса все равно будет отображаться привлекательно.

Теперь ваша шкала прогресса показывает заданное значение без анимированного отсчета от 0. Вместо этого прогресс визуализируется сразу.

Если вы используете Pro-версию Elementor, вам также будут доступны динамические атрибуты. Эта функция особенно полезна для настройки прогресс-баров на основе внешних данных или даже значений из базы данных.

Резюме

В этом руководстве вы узнали, как создать и настроить прогресс-бар в Elementor. Вы можете устанавливать заголовки и прогресс, выбирать цвета и вносить различные изменения, чтобы интегрировать привлекательный и эффективный прогрессбар.