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