Вячеслав и Валерия : Сайтостроение 1419 1 комментарий к записи Как добавить анимированные счетчики чисел в WordPress

Как добавить анимированные счетчики чисел в WordPress

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

Добавление анимированного счетчика

Установите и активируйте плагин Counter Number. Переходим в «Counter Number» — «Добавить новый счетчик», пишем заголовок для счетчика.

Прокручиваем немного вниз и начинаем создавать анимированные счетчики чисел. По умолчанию их 3, но вы можете добавить больше, используя кнопку «Добавить новый счетчик». Добавьте заголовок, выбираем один из значков Font Awesome и добавляем значение для счетчика чисел.

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

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

Закончив настройку счетчиков, нажмите кнопку «Опубликовать».

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

Вот что у нас получилось.

Изменение стиля счетчика с помощью CSS

Вы можете дополнительно изменить стиль счетчика, добавив некоторый код в поле Custom CSS плагина.

.wpsm_counter_b_row {background-color: #f0f8ff;}

Теперь у счетчика появился фон.

Для этого вам нужно будет использовать CSS классы / идентификаторы плагина. Как видите ничего сложного здесь нет. А у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!