Цифры убеждают быстрее, чем предложения: доставлено 5,5K уведомлений, просмотров видео 120M. The Виджет Counter Up в Мастер-аддоны для Elementor помещает эти характеристики в ряд карт, которые отсчитывают от нуля при загрузке страницы, каждая со значком, суффиксом типа K+ или M+ и своим собственным стилем.
В этом руководстве с нуля создается раздел из четырех статусов: элементы, цифры, значки, макет и стиль карты, заканчивающийся готовыми счетчиками на странице в реальном времени.
Что делает виджет Counter Up #
Один виджет содержит набор элементов счетчика. каждый элемент представляет собой статистику: число, которое отсчитывает от нуля при загрузке страницы, префикс или суффикс вокруг него, заголовок под ним и дополнительный значок или изображение сверху. Виджет размещает элементы в столбцах и стилизует их как группу, поэтому полоса характеристик остается последовательной без подбора каждой карты.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Виджет Counter Up включен на панели параметров "Мастерские надстройки" в разделе "Базовые виджеты".
- Ваши реальные цифры. раздел статистики с придуманными цифрами приносит больше вреда, чем отсутствие статистики вообще.
Как добавить виджет Counter Up #
В редакторе Elementor выполните поиск Элементы панель для Встречный и перетащите его на страницу. Он загружается образцами предметов, уже считая на холсте, поэтому анимация видна с первой секунды.
Настройте каждый элемент счетчика #
Открытый Контент Counter Up и нажмите на элемент в списке. каждый из них содержит полный набор элементов управления для каждого статуса:
- Тип: нет, значок или изображение поверх стат. Значок открывает библиотеку Элементор; изображение открывает медиатеку.
- Название: метка под номером, как “Notifications Delivered”.
- Префикс номера и суффикс: текст вокруг числа. префикс “$” или суффикс “K+” превращает 5,5 в $5,5 или 5,5K+.
- Номер: значение, до которого поднимается счетчик. десятичные дроби работают, поэтому 5.5 с суффиксом K+ читается как 5.5K+.
- Предыстория: цвет карты для каждого предмета, когда одна статистика должна выделяться.
Суффиксный трюк позволяет большим числам быть короткими: вместо анимации до 120 000 000 демо-версия считается до 120 с суффиксом M+. Карта остается чище, и никто не считает нули для проверки.
Постатейный Фон раскрашивает только эту карту. Полезно для выделения статистики заголовка, или пропустите ее и позвольте стилю общего ящика обрабатывать все четыре:
Выберите столбцы и позицию контента #
Ниже списка позиций, Столбцы устанавливает, сколько счетчиков имеют общую строку (1, 2, 3, 4 или 6), с адаптивным переключателем на устройство. Позиция контента помещает заголовок относительно числа: вверху, слева, справа или внизу. демо-версия пробует 2 столбца с рядом номером и заголовком, затем снова оседает на 4 столбцах, сложенных друг на друга.
Настройте значки #
The Настройки значков раздел управляет блоком значков на каждой карте: Положение значка/изображения (слева, вверху или справа от статистики), Размер значкаи Круг значков или размер изображения для цветного диска за глифом. демо-версия запускает 30 пиксельных значков на кругах 86 пикселей.
Стиль карт #
В Стиль вкладка, Стиль коробки встречного подъема покрывает общий вид карты: Цвет фона, Набивка, Маржа, Тип границы, Граничный радиуси Коробка Тень. Демо-версия представлена на мягких розовых картах с 20-пиксельной заполнением и запасом, что разделяет четыре характеристики без жестких границ.
Украсьте номера, заголовки и значки #
The Стиль контента раздел делится на четыре группы, по одной на элемент карты:
- Стиль значка: цвет глифа и цвет круга за ним. демо-версия превращает круги в темно-фиолетовый цвет с помощью белых значков.
- Стиль номера: цвет и типографика самой статистики, самого большого текста на карточке.
- Префикс номера: свой собственный цвет, типографика, размер и поле, поэтому символ валюты может располагаться меньше числа.
- Стиль названия: цвет, типографика и поле для этикетки.
Результат на странице #
На живой странице числа отсчитывают от нуля в течение примерно двух секунд после загрузки страницы, затем останавливаются на конечных значениях. Вот готовая полоса:
Обычные случаи использования #
- Статистика компании диапазоны: обслуживаемые клиенты, реализуемые проекты, годы работы.
- Разделы доказательства SaaS: пользователи, время безотказной работы, интеграция.
- Номера портфеля: запущенные кампании, полученный доход, часы редактирования.
- Некоммерческое воздействие: доставка еды, волонтеры, собранные средства.
- Страницы курса и сообщества: студенты, уроки, отзывы.
Советы по лучшим счетчикам #
- Используйте суффиксы для больших чисел. Подсчет до 120 с суффиксом M+ читается чище, чем подсчет до девяти цифр.
- Поместите счетчики высоко на страницу. Подсчет выполняется один раз при загрузке страницы, поэтому счетчики намного ниже сгиба могут закончиться, прежде чем кто-либо прокрутит их.
- Сохраните набор на три или четыре характеристики. Соревнуются шесть счетчиков; четверо читаются.
- Лидируйте с самым сильным числом. Посетители читают слева направо и могут не закончить ряд.
- Подберите круги значков к своей палитре. Цвет круга - самый заметный выбор стиля на карте, фиолетовый-на-розовом работает демо, потому что оба происходят из одной палитры.
- Проверьте количество мобильных столбцов. Четыре столбца на телефоне сжимают цифры; отзывчивый элемент управления столбцами исправляет это в один клик.
Видео Учебник #
Если вы хотите увидеть виджет Counter Up в действии, это видео проходит через полную настройку, от первого пункта до анимированной полосы статистики на живой странице:
Часто задаваемые вопросы #
Что такое виджет Counter Up в Master Addons?
Это виджет Элементор для разделов анимированной статистики. каждый элемент содержит число, которое отсчитывает от нуля при загрузке страницы, плюс префикс, суффикс, заголовок и дополнительный значок или изображение. столбцы, размер значков и стиль карты являются общими для всего набора.
Как показать 120M+ вместо 120000000?
Установите число на 120, а числовой суффикс на M+. счетчик анимирует до 120 и отображает 120M+. то же самое работает для тысяч K+ и десятичных значений, таких как 5.5, с суффиксом K+.
Может ли каждый счетчик иметь свой значок и цвет?
Да. каждый элемент выбирает свой собственный значок или изображение с помощью элемента управления типом, и каждый элемент имеет свой собственный цвет фона. Общий размер значка, размер круга и стиль карты взяты из "Настройки значков" и вкладки "Стиль".
Когда начинается анимация подсчета?
Цифры отсчитываются от нуля до значения, которое вы установили, как только страница загружается, в течение примерно двух секунд. анимация воспроизводится один раз и не ждет, пока виджет прокрутится в поле зрения.
Можно поменять, сколько счетчиков сидит в ряд?
Да. Выпадающий столбец в Counter Up Content предлагает 1, 2, 3, 4 или 6 столбцов с адаптивным переключателем, поэтому диапазон рабочего стола с четырьмя столбцами может опускаться до двух столбцов на планшетах и одного на телефонах.
Чем Counter Up отличается от виджета Elementor Counter?
Счетчик Элементор показывает одно число на виджет и позволяет установить начальное число, продолжительность и тысячу разделителей, и он считает, когда число прокручивается в поле зрения.Counter Up держит много счетчиков в одном виджете с значками, стиль карты и 1, 2, 3, 4 или 6 столбцов, и он считается один раз при загрузке страницы.
Завершая #
Виджет Counter Up превращает простые числа в полосу статистики, которая перемещается: значки, префиксы и суффиксы для каждого элемента, общие столбцы и стиль карт, а также анимацию обратного отсчета, которая привлекает внимание ровно один раз. Просмотрите полный набор Виджеты и расширения Master Addgets чтобы увидеть, что еще поставляется с плагином. The Страница продукта Counter Up сравнивает его с виджетом Elementor Counter.
