Themify Counter - Плагин WordPress

Руководство по настройке Themify Counter для статистики и круговых счетчиков

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

Плагин работает как дополнение к Themify Builder, поэтому логика настройки отличается от обычных автономных счетчиков WordPress. Пользователь добавляет модуль Counter прямо в макет Builder, выбирает число, подпись, параметры круга и внешний вид, а затем проверяет результат в публичной части сайта. Важно понимать эту связку заранее: если Builder отключен, не загружен для нужного типа записи или конфликтует с темой, сам счетчик тоже не будет вести себя как отдельный независимый блок.

Ниже есть подробная инструкция по первому запуску, сценарий для блока "цифры компании", рекомендации по размерам и цветам, проверка на мобильных устройствах, безопасная CSS-правка через собственный класс и раздел диагностики. В конце добавлены близкие альтернативы для случаев, когда нужен не модуль Themify Builder, а блок Gutenberg, Elementor-виджет или отдельный шорткодный плагин.

Что делает Counter и когда счетчик действительно уместен

Counter в экосистеме Themify Builder предназначен для вывода числа с анимацией подсчета. Официальная документация описывает модуль как элемент, который можно перетащить в строку Builder и настроить через отдельные поля: заголовок модуля, число, подпись, процент заполнения круга, толщину обводки, цвет круга, фон круга и размер. На странице продукта также указаны числовая и круговая анимация, а также панель стилизации для размера, шрифтов, цвета текста и фона.

Такой модуль лучше всего работает в местах, где число помогает принять решение или быстро понять масштаб. Например, посетитель лендинга видит не абстрактное "мы опытные", а три коротких показателя: выполненные проекты, средняя скорость ответа, процент повторных клиентов. На странице сервиса можно показать этапность результата: "80% задач закрываем без доработки", "24 часа на первичный ответ", "12 направлений поддержки". Для портфолио счетчик помогает быстро подсветить объем работы, но только если цифры правдивые и объяснимые.

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

• Какую мысль число доказывает в этом блоке страницы.
• Поймет ли посетитель единицу измерения без дополнительного пояснения.
• Можно ли проверить число внутри компании или оно выглядит как случайная маркетинговая цифра.

Для Themify Counter особенно важна краткость. Модуль рассчитан на число и короткую подпись, а не на длинное объяснение. Если нужно раскрыть методику подсчета, лучше поставить рядом текстовый модуль или небольшой блок примечания. Сам Counter пусть остается визуальным акцентом, который ведет взгляд к главному показателю.

Кому подойдет этот модуль и когда лучше выбрать другой инструмент

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

Модуль может подойти и разработчику, который обслуживает сайт клиента на Themify. В этом сценарии Counter помогает быстро собрать редактируемый блок: клиент меняет число и подпись через интерфейс Builder, а разработчик отвечает за сетку, отступы, цветовую систему и проверку адаптивности. Если в проекте используется Builder Pro, официальная документация дополнительно указывает динамический режим для полей, когда доступна кнопка Dynamic. Это открывает более продвинутые сценарии с данными из метаполей, шорткодов, Post Type Builder или Advanced Custom Fields, но только если такая связка действительно включена на сайте.

Есть ситуации, где Themify Counter будет лишним. Если сайт не использует Themify Builder и весь макет построен на Gutenberg, Elementor, Kadence Blocks или другом конструкторе, подключать отдельную Builder-экосистему ради нескольких цифр обычно нерационально. Если нужно считать реальные посещения, заказы, подписчиков или обращения в режиме живых данных, обычный статический счетчик тоже не решает задачу сам по себе. Ему нужен источник данных, динамическое поле или другой специализированный плагин.

Практический ориентир: Themify Counter хорош для управляемых маркетинговых и справочных чисел внутри макета Builder. Для аналитики, посещаемости, живых счетчиков и сложной автоматизации сначала ищите источник данных, а уже потом выбирайте модуль вывода.

Что проверить перед установкой на WordPress-сайте

Counter является Builder Addon, а не полностью автономным визуальным блоком. Поэтому перед установкой нужно проверить не только ZIP-файл плагина, но и окружение, в котором он будет работать. Официальная документация Themify прямо указывает требование: Builder Addons требуют Themify Builder и могут использоваться либо с темой Themify, либо с плагином Builder.

Проверьте, есть ли рабочий Themify Builder

Если сайт использует тему Themify, Builder обычно входит в состав фреймворка темы. Если стоит сторонняя тема, нужен отдельный плагин Themify Builder. В WordPress.org Themify Builder описан как визуальный конструктор для записей, страниц и пользовательских типов записей, где есть поддержка the_content. Это важно: Counter будет добавляться в макет Builder, а не в произвольное место шаблона.

Быстрый тест области вывода

Перед установкой откройте тестовую страницу, включите Builder и убедитесь, что видите рабочую сетку, панель модулей и возможность сохранить изменения. Если сетка не появляется, документация Themify связывает такой симптом с шаблоном, где нет функции the_content() или используется the_excerpt(). В этом случае проблема не в Counter, а в том, что Builder не получает нормальную область вывода.

Подготовьте страницу для безопасного теста

Не начинайте с главной страницы или посадочной страницы, на которую идет реклама. Создайте черновик или закрытую тестовую страницу. Добавьте туда одну строку Builder и временный Counter. Так вы проверите, появляется ли модуль в разделе Addons, сохраняются ли поля, отрабатывает ли анимация и не ломается ли стилизация темы.

Если сайт использует кеширование, минификацию или оптимизацию JavaScript, запомните текущие настройки. В документации Themify Builder отдельно описаны Builder Cache и минифицированные скрипты, а в changelog встречаются исправления конфликтов с оптимизацией и кешем. Не нужно заранее отключать все оптимизации, но важно понимать, где они находятся, чтобы быстро проверить влияние на анимацию.

Уточните, какие числа можно публиковать

Счетчик выглядит убедительно, но он усиливает и ошибочную информацию. Если редактор ставит "99%" без методики, посетитель может воспринять блок как преувеличение. Для корпоративного сайта заранее согласуйте источники цифр: CRM, отчеты, статистика заказов, публичные кейсы, фактические результаты команды. Для благотворительного или образовательного проекта проверьте, не устаревает ли число слишком быстро.

Установка и первый запуск Counter в Builder

Themify описывает установку Builder Addons как обычную установку WordPress-плагина. Пользователь получает ZIP-файл, открывает админ-панель, переходит в Plugins -> Add New, выбирает Upload Plugin, загружает архив, нажимает Install Now и активирует плагин. В руководстве Themify отдельно упоминается нюанс Safari: браузер может автоматически распаковать ZIP, поэтому архив лучше сохранять через контекстное действие сохранения ссылки, если файл скачивается не как ZIP.

После активации Counter нужно искать не в списке блоков Gutenberg, а в панели Themify Builder. Откройте страницу или запись, включите Builder и найдите модуль Counter в секции Addons. Документация уточняет, что модуль доступен и в режиме редактирования из админ-панели, и во фронтенд-режиме, как стандартные модули Builder.

1. Откройте тестовую страницу и включите Builder.
2. Добавьте строку или выберите существующую строку, где будет блок статистики.
3. Откройте панель модулей и найдите Counter в разделе Addons.
4. Перетащите Counter в нужную колонку или строку.
5. Заполните минимальный набор полей: Number и Label.
6. Сохраните модуль, сохраните страницу и откройте ее как обычный посетитель.

Первый тест лучше делать без сложной стилизации. Поставьте простое число вроде 120+, короткую подпись "проектов" и один размер. Если этот базовый вариант работает, можно переходить к круговой анимации, цветам и сетке из нескольких счетчиков. Если не работает даже простой вариант, сразу идите в раздел диагностики ниже, потому что дальнейшая настройка только добавит переменных.

Подробная настройка полей: число, подпись, круг и размер

Настройка Counter строится вокруг нескольких полей. Они кажутся простыми, но именно здесь чаще всего появляются неудачные блоки: слишком длинная подпись, непонятный процент круга, плохой контраст или цифра без единицы измерения. Ниже разберем параметры так, как их стоит проходить после установки.

Module Title: когда заголовок нужен, а когда мешает

Документация Themify указывает, что Module Title выводится сверху модуля, центрируется, становится верхним регистром и использует формат H3. Это поле не обязательно заполнять для каждого счетчика. Если у вас сетка из трех показателей, общий заголовок лучше вынести отдельным текстовым или заголовочным модулем над всей секцией, а внутри Counter оставить только число и подпись.

Используйте Module Title, если один Counter стоит как самостоятельный акцент. Например, на странице кейса это может быть "Результат проекта", а в самом числе будет 37%. Если же рядом стоят "120+", "8", "95%", заголовок в каждом модуле создаст шум и ухудшит сканирование.

Number: число, символ и ожидание анимации

Поле Number принимает число и символы, которые должны отображаться в центре модуля. Официальное описание говорит, что введенное число получает эффект подсчета при обновлении страницы. На практике это означает: если пользователь видит блок впервые или перезагружает страницу, число должно анимироваться к конечному значению.

Как не перегрузить центральное значение

Для читаемости лучше не перегружать это поле. Знак +, знак процента или короткая валютная единица понятны. Длинные фразы внутри числа лучше не использовать. Если нужна единица измерения, которую нельзя красиво поставить рядом с числом, вынесите ее в Label. Например, число 24, подпись "часа на первичный ответ" читаются лучше, чем перегруженное 24 часа с длинным пояснением в том же визуальном центре.

Label: подпись должна объяснять число

Label выводится под числом. Это поле отвечает за смысл. Без него посетитель видит только "86%" или "15+", но не понимает, что именно измеряется. Хорошая подпись короткая и конкретная: "выполненных проектов", "городов доставки", "уровень готовности", "клиентов в обучении". Плохая подпись либо повторяет очевидное, либо превращается в длинное предложение.

Если подпись не помещается красиво, не уменьшайте шрифт до микротекста. Лучше сократите формулировку, измените сетку или добавьте пояснение рядом. Counter должен быть визуальным показателем, а не контейнером для текста.

Круговая анимация: процент, толщина и цвета

Поля Circle Percentage, Circle Stroke, Circle Color и Circle Background управляют круговой визуализацией вокруг числа. Документация указывает, что процент задает заполнение круга, а если поле процента пустое, круговая анимация не появляется. То же касается толщины обводки: пустое значение можно использовать, если круговая часть не нужна.

Круг лучше использовать только тогда, когда процент имеет смысл. Для "95% удовлетворенности" или "70% готовности курса" круг помогает. Для "12 лет опыта" или "300 проектов" круг может сбивать с толку: посетитель начнет искать, что означает заполнение круга. Если круг нужен как декоративная рамка, задавайте нейтральный процент осторожно или лучше используйте стилизацию без круговой метафоры.

С цветами есть два требования: контраст и связь с дизайном страницы. Circle Color должен выделять прогресс, а Circle Background не должен спорить с фоном секции. Если страница уже использует фирменный акцент, возьмите его для активного круга, а фон круга сделайте более светлым или приглушенным. На темной секции проверяйте, чтобы число, подпись и круг не сливались.

Size и стилизация: не делайте число главным любой ценой

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

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

Как собрать блок "цифры компании" на реальной странице

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

Цель и подготовка

Предположим, у сайта есть страница "Услуги", собранная в Themify Builder. Нужно добавить блок после вводного описания: "128 выполненных проектов", "9 направлений работы", "87% повторных обращений". Перед настройкой подготовьте короткие подписи, проверьте числа и решите, нужен ли круг. В нашем примере круг уместен только для процента повторных обращений, потому что он действительно выражает долю.

Шаги в Builder

1. Откройте страницу в режиме редактирования Builder и добавьте новую строку под вводным блоком.
2. Выберите сетку из трех колонок на десктопе. Для планшета можно оставить две колонки в первой строке и одну во второй, а для мобильного - одну колонку.
3. Перетащите Counter в первую колонку, введите 128+ в Number и "проектов" в Label.
4. Скопируйте модуль или добавьте второй Counter, задайте 9 и подпись "направлений".
5. В третьем Counter задайте 87%, подпись "повторных обращений", а в Circle Percentage введите значение, соответствующее проценту. Добавьте толщину обводки и два контрастных цвета круга.
6. Откройте стилизацию секции и выровняйте отступы так, чтобы блок не прилипал к соседним текстовым модулям.
7. Сохраните страницу и проверьте ее в публичной части сайта.

Ожидаемый результат и проверка

На странице должна появиться секция, где все три числа читаются как единый блок. Посетитель сначала видит крупные цифры, затем короткие подписи. Для третьего показателя круговая анимация усиливает смысл процента, а не спорит с ним. При обновлении страницы число должно проигрывать анимацию подсчета. Если анимация видна только в редакторе, но не на опубликованной странице, проверьте кеш, минификацию и ошибки JavaScript.

Мини-итог: в хорошем блоке Counter число, подпись и визуальная форма работают вместе. Если круговая анимация не объясняет показатель, не включайте ее только ради движения.

Сценарии применения: где Counter усиливает страницу

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

Лендинг услуги или агентства

Для агентства Counter хорошо работает рядом с тезисом о специализации. Например, одна строка показывает количество запущенных проектов, средний срок реакции и процент клиентов, которые вернулись с новой задачей. Здесь важна честная подпись. "128+ проектов" лучше, чем "1000+ довольных клиентов", если второе число невозможно подтвердить.

Страница кейса

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

Образовательный или некоммерческий проект

Для курса можно показать число уроков, часов практики и выпускников. Для фонда - собранные наборы, проведенные мероприятия, долю выполненной цели. Если показатель меняется часто, подумайте о динамическом источнике. Официальная документация говорит о динамических полях при наличии Builder Pro, но доступность конкретного поля нужно проверять в вашей конфигурации.

Внутренняя страница продукта или тарифа

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

Проверка результата после публикации

После сохранения страницы нельзя ограничиваться просмотром в редакторе. Builder показывает live preview, но посетитель видит публичную страницу, где подключены кеш, оптимизация, тема, сторонние скрипты и реальные стили. Поэтому проверку лучше проводить по короткому маршруту.

Публичная часть сайта

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

Адаптивность и сетка

Переключите ширину окна или используйте инструменты разработчика браузера. На мобильном экране счетчики не должны становиться микроскопическими. Если сетка из трех колонок сжимается плохо, настройте адаптивную сетку Builder: для планшета выберите более широкие колонки, для телефона - вертикальное расположение. Themify Builder поддерживает адаптивные сетки и responsive styling, поэтому нет смысла пытаться решить все только уменьшением шрифта.

Контраст, доступность и смысл

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

Кеш и стили Builder

Если после настройки на публичной странице виден старый цвет или старый размер, очистите кеш сайта и проверьте инструменты Themify Builder. В документации Builder есть инструмент Regenerate CSS Files, который пересоздает CSS-стили Builder при просмотре страницы. Используйте его как безопасный шаг, если стили не обновляются после сохранения.

Безопасная доработка внешнего вида без правки плагина

Иногда стандартной стилизации достаточно, но на реальном сайте хочется чуть точнее вписать счетчики в дизайн: добавить больше воздуха, ограничить ширину, выровнять блоки в сетке или сделать фон секции спокойнее. Не редактируйте файлы Themify Counter, Themify Builder или темы напрямую. Такие правки потеряются при обновлении и могут осложнить поддержку.

Самый безопасный подход - назначить строке или модулю собственный CSS-класс в настройках Builder, а затем добавить небольшой CSS через дочернюю тему, штатный раздел пользовательского CSS или проверенный плагин для сниппетов. Ниже пример не зависит от внутренних классов Counter: он стилизует только контейнер, которому вы сами дали класс stats-counter-section. Если в вашей теме другой способ добавления пользовательского CSS, используйте его.

.stats-counter-section {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 20px;
}

.stats-counter-section .module {
  text-align: center;
}

@media (max-width: 680px) {
  .stats-counter-section {
    padding: 24px 14px;
  }
}

Смысл этого кода - не "переизобрести" Counter, а аккуратно ограничить общий блок и улучшить отступы на мобильных экранах. После вставки откройте страницу как посетитель, проверьте ширину, отступы и отсутствие горизонтальной прокрутки. Если результат не понравился, удалите CSS или уберите класс с секции. Такой откат безопаснее, чем правка файлов плагина.

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

Когда Themify Counter будет удачным выбором

Themify Counter стоит использовать, если сайт уже работает на Themify Builder и вам нужен управляемый визуальный блок для числовых показателей. Сильная сторона модуля - простая связка "число -> подпись -> анимация -> результат на странице". Он хорошо подходит для лендингов, страниц услуг, кейсов и блоков доверия, где показатели короткие, проверяемые и привязаны к смыслу соседнего текста.

Перед публикацией пройдите короткую проверку: Builder работает на нужной странице, Counter виден в Addons, число и подпись понятны без лишнего объяснения, круговая анимация используется только там, где она действительно показывает процент, а публичная страница проходит проверку в браузере, на мобильной ширине и после очистки кеша. Если все это выполнено, можно переходить к блоку загрузки и получить файл Themify Counter для тестирования на своем сайте.

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