Одна полоса выполнения рассказывает одну историю. их набор показывает целый набор навыков, линейку услуг или статус проекта, не заставляя читателя работать на него.The Виджет Прогресс Барс в Мастер-аддоны для Elementor построен для того случая. он группирует несколько анимированных полосок в один виджет, поэтому вы добавляете столько, сколько вам нужно, и стилизуете их вместе или по одной.
Думайте об этом как о многополосном дополнении к автономному Виджет Прогресс Бар. Вместо того, чтобы отбрасывать отдельный виджет для каждого показателя, вы управляете всей группой с одной панели. Каждая панель получает свой собственный заголовок, процент и цвет, в то время как вкладка общего стиля контролирует внешний вид набора.
Предпочитаете смотреть первым? Это короткое руководство проходит через виджет от начала до конца, от перетаскивания до укладки полос:
Что делает виджет Progress Bars #
Виджет отображает список горизонтальных полос, которые анимируют от нуля до их заданного значения, когда они прокручиваются в поле зрения. каждая полоса показывает заголовок слева, процентную метку и цветную заливку, которая растет, чтобы соответствовать введенному вами числу.
Отличие от виджета с одной полосой - структура Здесь полоски живут внутри ретранслятора под названием Статистика Бары, так что вы добавляете, дублируете, переупорядочиваете, и удаляете полосы, не касаясь холста Один виджет, один набор элементов управления стилем, и любое количество полос.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- В редакторе Elementor откроется страница, куда пойдут полосы.
Как добавить виджет "Планы прогресса" #
В редакторе Elementor откройте Элементы панель и поиск Прогресс Барс, или прокрутите вниз к разделу Главные дополнения.Смотрите имена здесь: есть два виджета, которые читают почти одинаково. Прогрессбар это один бар, и Прогрессбары является группой. перетаскивание Прогрессбары на вашу страницу.
Он падает с тремя уже заполненными полосами образцов, поэтому вы сразу видите рабочий результат и редактируете оттуда, а не начинаете пустой.
Редактируйте каждую строку на вкладке "Содержимое" #
Открыть Содержание таб и вы найдете Статистика Бары ретранслятор. каждая строка - это одна полоса. щелкните строку, чтобы расширить ее, и вы получите три настройки:
- Статистика Название: метка, показанная над полосой, как “Web Design” или “WordPress”.Это поле принимает динамические теги Elementor, так что вы можете вытащить заголовок из поля сообщения, мета автора или другого динамического источника с помощью значка тега.
- Процентное значение: число от 1 до 100, которое устанавливает, насколько далеко заполняется полоса и что читает этикетка. Введите
87а планка заполняется до 87 процентов. - Цвет бара: необязательный цвет для этой одной полосы. оставьте его пустым, чтобы использовать глобальный цвет активной полосы, или установите его здесь, чтобы переопределить цвет группы для одной полосы.
Цвет на баре - это то, что делает группу гибкой. держите каждую балку на одном цвете бренда, или придайте каждой метрике свой оттенок, чтобы их было легко отличить с первого взгляда.
Добавьте неограниченные бары #
Чтобы добавить еще одну полосу, нажмите Добавить элемент внизу ретранслятора Появляется новая панель со значениями по умолчанию, которые вы можете переименовать и установить. нет колпачка, поэтому выстраивайте столько, сколько нужно содержимому. значок копирования в любой строке дублирует строку с неповрежденными настройками, а значок X удаляет один.
На вкладке "Контент" также есть Помогите Документам ссылка для быстрого ознакомления и a Обертка Ссылка опция из бесплатного Обертка Ссылка расширение, которое делает кликабельным весь виджет. та пригодится, когда полосы сидят на карте, которая где-то ссылается.
Стиль каждого бара из вкладки Стиль #
Переключиться на Стиль вкладка для управления тем, как выглядит вся группа Эти настройки применяются к каждой панели сразу, именно поэтому переопределения для каждой панели на вкладке Содержимое стоит знать о. Вкладка Стиль взламывается Статистика Бар, Статс Название, Статистика Проценти Шаблоны.
Статистика Бар #
- Бар БГ Цвет: цвет пустой дорожки за каждой заливкой.
- Активная панель Цвет: цвет заполнения по умолчанию для любой панели, у которой нет собственного набора "Цвет панели", на вкладке "Содержимое".
- Вертикальное расстояние: зазор между штабелированными стержнями.
- Высота бара: насколько толстые полосы, в пикселях.
- Радиус границы строки: закругляет углы. свяжите четыре значения для четного радиуса или установите "Верх", "Право", "Нижний" и "Левый" отдельно.
Статс Название #
В этом разделе этикетка размещается над каждой полосой.
- Выравнивание: слева, в центре или справа для текста заголовка.
- Цвет: цвет заголовка.
- Типографика: полный контроль над семейством шрифтов, размером, весом, преобразованием, остальными вариантами шрифтов Elementor.
Статистика Процент #
Процентная метка получает свои собственные элементы управления цветом и типографикой, поэтому вы можете сделать число жирным и большим или сохранить его в тишине. Ниже находится Шаблоны раздел. Он исходит из бесплатного расширения Patterns и добавляет фоновый узор фиксированного цвета за всем виджетом, а не внутри полос.
Результат на странице #
Публикуйте или просматривайте страницу, и полосы анимируют от нуля до заданных значений, когда раздел входит в порт просмотра. Стиль включает в себя: пользовательские цвета полос, цвет заголовка, процентный размер, расстояние и высоту - все это отображается на странице в реальном времени.
Обычные случаи использования #
- Бары навыков на странице о или резюме (дизайн, разработка, маркетинг).
- Сильные стороны сервиса на странице агентства - по одному бару за предложение.
- Статус проекта или кампании показано как проценты завершения.
- Оценки функций в блоке сравнени, спаренном с а таблица сравнения.
- Основные моменты СТАТ рядом с анимированными номерами из Виджет Counter Up.
Советы по работе с Progress Bars #
- Сначала установите групповой стиль, затем переопределите. Выберите цвет активной полосы и высоту полосы один раз, затем добавьте цвет на полосу только там, где вы хотите, чтобы полоса выделялась.
- Держите проценты честными. Число также метка, поэтому полоса, установленная на 76, читает “76%”.Сопоставьте заполнение с реальной фигурой.
- Высота и радиус настройки вместе. Более высокая планка с соответствующим радиусом выглядит как закругленная таблетка; тонкая полоса большого радиуса может выглядеть обрезанной.
- Используйте динамические заголовки в шаблонах. Когда полосы находятся в шаблоне сообщения или архива, подключите заголовок статистики к динамическому тегу, чтобы каждая запись маркировала себя.
- Дублируйте вместо восстановления. Значок копии клонирует полосу с ее цветом и типографикой, что превосходит настройку нового элемента вручную.
Часто задаваемые вопросы #
Что такое виджет Progress Bars в Master Addons?
Это виджет Элементор, который группирует несколько анимированных индикаторов выполнения в один элемент. вы добавляете панели через ретранслятор Stats Bars, даете каждому заголовок, процент и дополнительный цвет, а также стилизуете весь набор со вкладки Стиль. Это многополосная версия единственного виджета Progress Bar.
Чем Progress Bars отличается от единственного виджета Progress Bar?
Единственный виджет Progress Bar показывает одну полосу на виджет Виджет Progress Bars содержит ретранслятор, поэтому вы добавляете неограниченное количество полос внутри одного виджета и управляете ими вместе. используйте одиночный для автономной метрики и Прогресс-бары для стекового набора.
Сколько индикаторов прогресса я могу добавить?
Нет ограничения. нажмите "Добавить элемент" в ретрансляторе Stats Bars, чтобы добавить столько полос, сколько вам нужно. Каждая новая полоса начинается со значений по умолчанию, которые вы можете переименовать и настроить, и вы можете дублировать или удалять полосы в любое время.
Может ли каждая индикатор выполнения иметь разный цвет?
Да. установите цвет активной панели на вкладке "Стиль" по умолчанию в группе, затем откройте любую панель на вкладке "Содержимое" и используйте поле "Цвет панели", чтобы переопределить эту полосу. Оставьте поле пустым, чтобы сохранить полосу в цвете группы.
Анимируют ли полосы прогресса?
Да. каждая полоса заполняется от нуля до установленного процента, когда виджет прокручивается в поле зрения на живой странице, примерно по 20 миллисекунд на процентный пункт. нет настройки для изменения скорости.
Завершая #
Виджет Прогресс Барс превращает стопку метрик в один аккуратный, анимированный блок Добавить полосы в повторителе Stats Bars, установить каждый заголовок и процент, раскрасить их индивидуально или в группе, и сформировать весь набор из вкладки Стиль, Для одной автономной панели, дотянуться до Виджет Прогресс Бар вместо. Просмотрите все Виджеты и расширения Master Addgets чтобы посмотреть, что еще вы можете построить, и посмотреть Страница виджета Progress Bars для демо. виджет бесплатный, без вариантов только Pro.
