Шкалы навыков, цели финансирования и статус проекта - все это лучше читается как визуальное, чем как число, закопанное в предложении. Бесплатно Виджет Прогресс Бар в Мастер-аддоны для Elementor дает вам анимированную полосу с заголовком и процентом, а также раскрывающийся список "Презачеты стиля", который переключается между простой линией, линией с пузырьком, полным кругом и полукруговым датчиком.
Вы устанавливаете заголовок и значение, выбираете предустановку, затем раскрашиваете переднюю панель, заднюю панель и значение, чтобы соответствовать вашему бренду. Это руководство охватывает каждый параметр виджета.
Что делает виджет Progress Bar #
Виджет отображает один индикатор прогресса: заголовок, процентное значение и полосу, которая заполняется до этого значения при загрузке страницы. The Пресеты стиля раскрывающийся список меняет форму, поэтому то же значение может отображаться в виде горизонтальной линии, линии с плавающим пузырем, круга пончика или калибра полукруга.
Он имеет три вкладки. Содержание имеет титул и ценность. Стиль управляет предустановкой, цветами передней и задней полос, пузырем, заголовком и текстом значений. Продвинутый имеет обычные параметры расстояния между Элементором и видимости.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Метки и проценты, которые вы хотите показать, например WordPress 60% или Java 85%.
Как добавить виджет "Плотина прогресса" #
В редакторе Elementor откройте Элементы панель и поиск Прогрессбар, или прокрутите в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на вашу страницу, и он загружается с одной полосой, готовой к редактированию.
Резюме вверх: есть два похожих виджета. Прогрессбар это одна полоса (это руководство), и Прогрессбары (the Виджет Прогресс Барс) укладывает несколько полос внутри одного виджета. для нескольких независимых полос в разных стилях, одиночный Прогрессбар является гибким выбором.
Установите заголовок и значение #
Открыть Содержание вкладка. Есть только два поля, которые позволяют быстро настраивать.
- Название: этикетка над полосой, например WordPress или Design.
- Значение: процент заполнения полосы от 0 до 100.
Поскольку каждая панель прогресса - это одна полоса, вы создаете набор, дублируя виджет. щелкните его правой кнопкой мыши и выберите Дублировать (или нажмите Ctrl/Cmd + D), затем измените заголовок и значение на каждой копии. именно так панели WordPress и Java выше оказались рядом.
Выберите предустановку стиля #
Переключиться на Стиль вкладка и открыть Общие стили. Пресеты стиля выпадающий - это место, где вы выбираете форму. The Пузырь линии preset добавляет плавающий пузырь, который показывает процент и движется в конце заливки.
- Пресеты стиля: Линия, пузырь линии, круг и вентилятор (коэффициент полукруга).
- Цвет пузыря: цвет процентного пузыря на пузырьке предустановлен.
- Положение пузыря: переместите пузырь вверх или вниз к перекладине.
Предварительные настройки колеи круга и полукруга #
The Круг preset рисует полный пончик с процентом посередине, что подходит для компактного блока статистики.
The Фан preset рисует полукруг, который хорошо подходит для оценки в стиле приборной панели или спидометра.
Стиль барных частей #
The Стиль вкладка разбивает виджет на части, которые вы можете стилизовать самостоятельно: Общие стили, Название, Передняя панель, Задний бари Значение. Если бесплатно Шаблоны расширение включено, а Шаблоны раздел декоративных накладок также появляется на этой вкладке.
- Название: цвет и типографика для этикетки.
- Передняя планка: цвет и ширина заполненной детали.
- Задняя планка: цвет и ширина незаполненной дорожки за ней.
- Значение: цвет и типографика процентного текста.
Открытый Передняя панель чтобы установить цвет заливки и ширину. это то, что несет ваш бренд цвет по всей полосе или калибру.
Обычные случаи использования #
- Бары навыков на странице о или резюме (WordPress 90%, Design 75%).
- Финансирование или счетчики целей показывая, насколько близка кампания.
- Статистика круга в блоке услуг или результатов.
- Полукруговые калибры для оценок, оценок или виджетов информационной панели.
- Статус проекта панели на странице клиента или портфолио.
Советы по работе с виджетом Progress Bar #
- Дублировать, затем редактировать. Создайте стиль одной полосы так, как вы хотите, затем скопируйте ее и измените заголовок и значение.
- Держите весы честными. Значение - процент, поэтому 60 означает 60 процентов заполнения.
- Соответствуйте контрасту передней и задней панели. Светлый след за фирменной цветной заливкой читается ясно.
- Используйте пузырь для точных чисел. Пресет Line Bubble ставит процент прямо на заполнение.
- Выберите форму контекста. Линии для списков навыков, кругов и фанатов для единой выдающейся статистики.
Смотрите видеоурок #
Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент Progress Bar от начала до конца, показывая, как каждый стиль предустановлен, цвет и значение работает в редакторе Elementor.
Часто задаваемые вопросы #
Что такое виджет Progress Bar в Master Addons?
Это виджет Elementor, который показывает анимированный индикатор прогресса с заголовком и процентом. выпадающий список "Презачеты стиля" переключается между линией, линией с пузырьком, полным кругом и полукруговым датчиком, и вы раскрашиваете каждую часть панели Elementor.
Какие стили индикаторов прогресса включает виджет?
Четыре предустановки: линия, линейный пузырь, круг и вентилятор. Линия представляет собой простую горизонтальную полосу, линейный пузырь добавляет плавающий процентный пузырь, круг рисует полный пончик со значением в центре, а вентилятор рисует полукруг. Значение остается одинаковым для всех них.
Могу ли я сделать круговую или калибровочную индикаторную планку в Элементоре?
Да. Установите пресеты стиля, чтобы обвести круг для полного пончика с процентом в середине, или к вентилятору для полукруга калибра. оба анимировать к установленному вами значению и может быть раскрашен через переднюю панель и заднюю панель разделы на вкладке Стиль.
Как добавить несколько индикаторов прогресса?
Каждый виджет Progressbar представляет собой одну панель, поэтому дублируйте виджет и меняйте заголовок и значение на каждой копии. Разместите копии в столбцах для ряда строк навыков. для нескольких полос, управляемых внутри одного виджета, используйте вместо этого отдельный виджет Progressbars.
Анимирует ли индикатор прогресса?
Да, один раз. полоса заполняется от нуля до своего значения примерно за секунду, когда страница загружается, а не когда она прокручивается в поле зрения, поэтому полосы, расположенные вверху, показывают движение лучше всего. Он работает так же на линии, круге и предустановках вентилятора.
Завершая #
Виджет Progress Bar превращает простой процент в анимированную линию, пузырь, круг или калибр. Установите заголовок и значение, выберите предустановку, затем раскрасьте переднюю панель, заднюю панель и значение, чтобы они соответствовали вашему дизайну. Обзор и сравнение с собственной полосой прогресса Elementor см. в разделе Виджет индикатора прогресса круга элементара страница. связанные виджеты см Прогресс Барс для брусков навыков, Прогресс-бар чтения для индикатора прокрутки Виджет Counter Up и Виджет информационного ящика, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
