Все для начинающих интернет-предпринимателей

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

Counter-Number-11

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

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

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

Counter-Number-1

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

Counter-Number-2

Counter-Number-3

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

Counter-Number-4

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

Counter-Number-5

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

Counter-Number-6

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

Counter-Number-7

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

Counter-Number-8

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

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

Counter-Number-9

.wpsm_counter_b_row {background-color: #f0f8ff;}

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

Counter-Number-10

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

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

Понравился материал? Поделитесь с друзьями!



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *