Бесплатный виджет панели прогресса круга Элементор
Свободный виджет Progress Bar от Elementor рисует прямую линию Виджет Progress Bar в Master Addons также бесплатен, и он может рисовать полосу как линию, линию с процентным пузырем, полный круг или полукруг фан-калибр.Дайте ему заголовок и значение от 0 до 100, выберите предустановленный стиль, затем раскрасьте заполненную полосу и дорожку за ней. Он хорошо работает для финансирования целей, хода курса, рейтингов и одиночных характеристик. для списка полос навыков внутри одного виджета, используйте Прогресс Барс. Для бара, который заполняется, когда посетители просматривают сообщение, используйте Прогресс-бар чтения.
Как добавить панель прогресса круга в Elementor
Виджет является частью бесплатного плагина Master Addons, поэтому все, что вам нужно, это Elementor и Master Addons.
- Установить и активировать Мастер-адреса от WordPress.org.
- Отредактируйте свою страницу с помощью Elementor и найдите панель виджетов Прогрессбар.
- Перетащите его в столбец. для ряда кругов поместите по одному виджету в каждый столбец.
- В разделе "Содержимое" введите заголовок и установите значение от 0 до 100.
- В стиле, общих стилях установите пресеты стиля на круг или на веер для калибра полукруга.
- Установите цвета и ширину передней и задней панели, затем создайте текст заголовка и значения.
Каждая обстановка описана в Настройки виджета Progress Bar гид.
Пресеты линии, линейного пузыря, круга и вентилятора
Выберите форму в стиле, общие стили, Пресеты стиля. Линия - плоская горизонтальная полоса с заголовком над ней. Line Bubble добавляет круглую метку, которая скользит вдоль точки заполнения и показывает процент. Circle рисует полное кольцо со значением посередине, а Fan рисует полукруг калибра.
- Переключите предустановки в любое время, и заголовок, ценность и цвета останутся такими, какие они есть.
- Цвет пузыря устанавливает наполнение пузыря на Line Bubble.
- Положение пузыря перемещает пузырь вверх или вниз к перекладине.
Название и ценность
На вкладке Содержимое есть два поля. Название это ярлык, такой как цель сбора средств или прогресс курса. Значение это число от 0 до 100 (60 по умолчанию), которое определяет, насколько далеко заполняется полоса, кольцо или калибр, и показывает его в процентах.
- Заполнение анимирует от нуля до вашего значения в течение примерно одной секунды при загрузке страницы.
- Таможенного максимума нет, поэтому 45 из 60 уроков проходят как 75.
- Один виджет - это один индикатор. дублируйте его, чтобы построить ряд кругов или стопку линий.
Стиль передней панели и задней панели
Передняя панель является ли заполненная часть и Задний бар является трек за ним. каждый имеет свой цвет и Ширина число для толщины хода, 5 по умолчанию Толстая передняя полоса над более тонкой световой дорожки легко читать, особенно на предустановках Круга и Вентилятора.
- Цвета по умолчанию - фиолетовый (#704aff) на светло-сером (#ddd) треке.
- Цвета сплошные. нет варианта градиентного заполнения.
- Ширина - это одно число для всех устройств, поэтому проверьте результат на мобильном телефоне.
Текст названия и значения
The Название и Значение разделы стиля имеют каждый сборщик цвета и полную группу типографики, поэтому процент может быть больше или смелее, чем метка. На круге и веере предустанавливается значение находится внутри формы.
- Название выводится как заголовок H6 и по умолчанию имеет черный цвет.
- Ценный цвет и типографика также применимы к этикетке Line Bubble.
Прогресс-бар Elementor против Прогресс-бара Master Addons
Оба виджета бесплатны.Elementor's Progress Bar - это прямая полоса, которая может удерживать внутри себя строку текста.Master Addons добавляет круглые формы, поэтому выбор в основном сводится к нужной вам форме.
| Особенность | Прогресс-бар Элементор | Мастер Аддоны Прогресс Бар |
|---|---|---|
| Цена | Бесплатно в Элементоре | Бесплатно в мастер-аддонах |
| Формы | Только линия | Линия, линейный пузырь, круг и вентилятор |
| Значение | Процентный ползунок с динамическими тегами | Номер от 0 до 100 |
| Текст | Название с выбором тега HTML, процентом отображения, внутренним текстом | Название (H6) и процентная метка |
| Размер бара | Радиус высоты и границы | Ширина передней и задней перекладины |
| Цвета | Цвет бара и цвет фона | Цвета передней и задней панели, цвет пузыря |
| Анимация | Заполняется, когда полоса прокручивается в поле зрения | Заполняет при загрузке страницы |
Используйте виджет Elementor для простой строки, которая оживляет по мере того, как посетители достигают его или извлекают его значение из динамического тега. Используйте главные надстройки, когда вам нужно кольцо или датчик. Связанные бесплатные виджеты: Прогресс Барс для баров навыков в одном виджете, Прогресс-бар чтения для индикатора прогресса прокрутки и Встречный для анимированных чисел.
Часто задаваемые вопросы для Progress Bar
В чем разница между Прогресс-баром, Прогресс-барами и Прогресс-баром чтения?
Прогресс Бар (этот виджет) - один индикатор, показанный в виде линии, линии с пузырьком, круга или вентилятора.The Элемент Прогресс Барс это список горизонтальных полос навыков, которые вы добавляете в один виджет. Прогресс-бар чтения является расширением, которое показывает, насколько далеко посетитель прокрутил страницу.
Одушевляет ли индикатор выполнения при прокрутке в поле зрения?
Нет. заполнение выполняется от нуля до вашего значения примерно за секунду, как только страница загружается, поэтому полоса далеко вниз по странице может закончиться, прежде чем кто-либо ее увидит. Собственная панель прогресса Elementor и виджет "Панели прогресса" Master Addons начинают заполняться, когда они появляются в поле зрения.
Виджет Master Addons Progress Bar бесплатен?
Да. поставляется с бесплатным плагином Master Addons на WordPress.org, и все четыре пресета включены без лицензии Pro.
Могу ли я сделать круг над уровнем моря и получить результат из 100?
Да. Установите пресеты стиля, чтобы обвести круг и оценить счет, например 85. Кольцо заполняется до 85 процентов с 85% в середине. для оценки из другого числа сначала преобразуйте его в процент, так как виджет не имеет пользовательского максимума.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
