Прогресс Барс

Одна полоса выполнения рассказывает одну историю. их набор показывает целый набор навыков, линейку услуг или статус проекта, не заставляя читателя работать на него.The Прогресс Барс виджет в Мастер-аддоны для Elementor построен для того случая. он группирует несколько анимированных полосок в один виджет, поэтому вы добавляете столько, сколько вам нужно, и стилизуете их вместе или по одной.

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

Предпочитаете смотреть первым? Это короткое руководство проходит через виджет от начала до конца, от перетаскивания до укладки полос:

Что делает виджет Progress Bars #

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

Отличие от виджета с одной полосой - структура Здесь полоски живут внутри ретранслятора под названием Статистика Бары, так что вы добавляете, дублируете, переупорядочиваете, и удаляете полосы, не касаясь холста Один виджет, один набор элементов управления стилем, и любое количество полос.

Прежде чем начать #

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• В редакторе Elementor откроется страница, куда пойдут полосы.

Как добавить виджет "Планы прогресса" #

В редакторе Elementor откройте Элементы панель и поиск Прогресс Барс, или прокрутите вниз к разделу Главные дополнения.Смотрите имена здесь: есть два виджета, которые читают почти одинаково. Прогрессбар это один бар, и Прогрессбары является группой. перетаскивание Прогрессбары на вашу страницу.

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

Редактируйте каждую строку на вкладке "Содержимое" #

Открыть Содержание таб и вы найдете Статистика Бары ретранслятор. каждая строка - это одна полоса. щелкните строку, чтобы расширить ее, и вы получите три настройки:

• Статистика Название: метка, показанная над полосой, как “Web Design” или “WordPress”.Это поле принимает динамические теги Elementor, так что вы можете вытащить заголовок из поля сообщения, мета автора или другого динамического источника с помощью значка тега.
• Процентное значение: число от 0 до 100, которое устанавливает, насколько далеко заполняется полоса и что читает этикетка. Введите 87 а планка заполняется до 87 процентов.
• Цвет бара: необязательный цвет для этой одной полосы. оставьте его пустым, чтобы использовать глобальный цвет активной полосы, или установите его здесь, чтобы переопределить цвет группы для одной полосы.

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

Добавьте неограниченные бары #

Чтобы добавить еще одну полосу, нажмите Добавить элемент внизу ретранслятора Появляется новая панель со значениями по умолчанию, которые вы можете переименовать и установить. нет колпачка, поэтому выстраивайте столько, сколько нужно содержимому. значок копирования в любой строке дублирует строку с неповрежденными настройками, а значок X удаляет один.

На вкладке "Контент" также есть Помогите Документам ссылка для быстрого ознакомления и a Обертка Ссылка опция (функция Pro), которая делает кликабельным весь виджет. та пригодится, когда полосы сидят на карте, которая где-то ссылается.

Стиль каждого бара из вкладки Стиль #

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

Статистика Бар #

• Бар БГ Цвет: цвет пустой дорожки за каждой заливкой.
• Активная панель Цвет: цвет заполнения по умолчанию для любой панели, у которой нет собственного набора "Цвет панели", на вкладке "Содержимое".
• Вертикальное расстояние: зазор между штабелированными стержнями.
• Высота бара: насколько толстые полосы, в пикселях.
• Радиус границы строки: закругляет углы. свяжите четыре значения для четного радиуса или установите "Верх", "Право", "Нижний" и "Левый" отдельно.

Статс Название #

В этом разделе этикетка размещается над каждой полосой.

• Выравнивание: слева, в центре или справа для текста заголовка.
• Цвет: цвет заголовка.
• Типографика: полный контроль над семейством шрифтов, размером, весом, преобразованием, остальными вариантами шрифтов Elementor.

Статистика Процент #

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

Результат на странице #

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

Обычные случаи использования #

• Бары навыков на странице о или резюме (дизайн, разработка, маркетинг).
• Сильные стороны сервиса на странице агентства - по одному бару за предложение.
• Статус проекта или кампании показано как проценты завершения.
• Оценки функций в блоке сравнени, спаренном с а таблица сравнения.
• Основные моменты СТАТ рядом с анимированными номерами из Виджет Counter Up.

Советы по работе с Progress Bars #

• Сначала установите групповой стиль, затем переопределите. Выберите цвет активной полосы и высоту полосы один раз, затем добавьте цвет на полосу только там, где вы хотите, чтобы полоса выделялась.
• Держите проценты честными. Число также метка, поэтому полоса, установленная на 76, читает “76%”.Сопоставьте заполнение с реальной фигурой.
• Высота и радиус настройки вместе. Более высокая планка с соответствующим радиусом выглядит как закругленная таблетка; тонкая полоса большого радиуса может выглядеть обрезанной.
• Используйте динамические заголовки в шаблонах. Когда полосы находятся в шаблоне сообщения или архива, подключите заголовок статистики к динамическому тегу, чтобы каждая запись маркировала себя.
• Дублируйте вместо восстановления. Значок копии клонирует полосу с ее цветом и типографикой, что превосходит настройку нового элемента вручную.

Часто задаваемые вопросы #

Завершая #

Виджет Прогресс Барс превращает стопку метрик в один аккуратный, анимированный блок Добавить полосы в повторителе Stats Bars, установить каждый заголовок и процент, раскрасить их индивидуально или в группе, и сформировать весь набор из вкладки Стиль, Для одной автономной панели, дотянуться до Виджет Прогресс Бар вместо. Просмотрите все Виджеты и расширения Master Addgets чтобы посмотреть, что еще вы можете построить, и проверить страница ценообразования для Pro такие функции, как ссылки на обертку и узоры на стержнях.