Модуль Счётчик с Кругами Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Счётчик с кругами.

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

Как добавить модуль Счётчик с кругами на свою страницу

Прежде чем вы сможете добавить модуль счётчик с кругами на свою страницу, вам сначала нужно перейти в Divi Builder. После установки темы Divi на ваш веб-сайт вы увидите кнопку «Использовать Divi Builder» над текстовым редактором страницы каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем выберите один из трёх вариантов, чтобы запустить редактор страницы в визуальном режиме. Вы также можете нажать кнопку «Включить Visual Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

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

Найдите модуль счётчик с кругами в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «счётчик», а затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль отзывов! После добавления модуля вы увидите список его параметров. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

Пример использования: использование модуля Circle Counter для отображения целей проекта в тематическом исследовании

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

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

Давайте начнем.

Используйте визуальный конструктор, чтобы добавить стандартный раздел с полноширинным макетом (1 столбец). Затем добавьте в строку модуль счетчика кругов.

Обновите настройки следующим образом:

Вкладка Контент

Заголовок: Branding
Число: 80
Знак процента: ON
Фон: #e07a5e

Вкладка Дизайн

Цвет круга: #e07a5e
Цвет текста: Dark
Заголовок шрифт: default
Заголовок размер текста: 26px
Заголовок цвет текста: #405c60
Число шрифт: Default
Число размер текста: 46px
Число цвет текста: #405c60

Сохранить настройки

Теперь продублируйте модуль счетчика кругов дважды и перетащите каждый дубликат во второй и третий столбцы в строке.

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

Готово!

Загляните на страницу.

Вкладка Контент модуля Счётчик с кругами

На вкладке содержимого вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролирует то, что отображается в вашем модуле, всегда находится на этой вкладке.

Заголовок

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

Число

Задайте число для счетчика круга. При выборе числа ниже 100 круговой график заполнится до процента, равного введенному вами числу. Например, при вводе числа 20 круг заполняется на 20% цветом вашего акцента.

Знак процента

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

Фон

Это изменит цвет заливки полосы. Количество цвета заливки контролируется «числом», выбранным выше. Если вы выберете число 50 и синий цвет, тогда ваш круг заполнится синим цветом на 50% пути.

Метка администратора

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Счётчик с кругами

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

Цвет круга

Это цвет, который будет использоваться для незаполненной части круга (отрицательное пространство, которое не заполнено цветом фона полосы, определенным на вкладке «Содержимое»).

Непрозрачность фона круга

Вы можете уменьшить непрозрачность закрашенной части круга, используя этот параметр.

Цвет текста

Здесь вы можете выбрать, должен ли ваш текст быть светлым или темным. Если вы работаете с темным фоном, ваш текст должен быть светлым. Если ваш фон светлый, тогда ваш текст должен быть темным.

Заголовок шрифт

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и подчеркивание.

Заголовок размер текста

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок цвет текста

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

Заголовок расстояние между букв

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

Заголовок высота строки

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

Число Шрифт

Вы можете изменить шрифт своего числового текста, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и подчеркивание.

Число размер текста

Здесь вы можете настроить размер текста вашего номера. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Число цвет текста

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

Число расстояние между букв

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

Число высота строки

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

Вкладка Расширенный модуля Счётчик с кругами

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS ID

Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор можно использовать для создания пользовательского стиля CSS или для создания ссылок на определенные разделы вашей страницы.

Класс CSS

Введите дополнительные классы CSS, которые будут использоваться для этого модуля. Класс CSS можно использовать для создания пользовательского стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы можно использовать в вашей дочерней теме Divi или в настраиваемом CSS, который вы добавляете на свою страницу или свой веб-сайт с помощью параметров темы Divi или настроек страницы Divi Builder.

Пользовательский CSS

Пользовательский CSS также можно применить к модулю и любым внутренним элементам модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавить пользовательский CSS непосредственно к каждому элементу. Ввод CSS в эти настройки уже заключен в теги стилей, поэтому вам нужно только ввести правила CSS, разделенные точкой с запятой.

Отключить на:

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