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

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

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

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

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

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

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

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

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

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

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

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

Обновите настройки модуля как показано ниже:

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

Показывать процент: ON
Фон: #dddddd

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

Цвет фона полосного счётчика: #e07a5e
Цвет текста: Dark
Заголовок шрифт: default
Заголовок размер текста: 20px
Заголовок цвет текста: #405c60
Заголовок высота букв: 2em
Процент шрифт: Default
Процент размер текста: 16px
Процент цвет текста: #ffffff
процент высота строки: 2.5em

Теперь вернитесь на вкладку Content и выберите + Add New Item, чтобы добавить первую панель в модуль.

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

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

Заголовок: Branding
Процент: 80

Сохраните изменения

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

Готово!

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

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

Показывать процент

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

Фоновый цвет

Этот параметр позволяет настроить цвет фона каждой барной стойки. Эти настройки применяются к отрицательному пространству за заполненной полосой цвета.

Цвет фона панели

Этот параметр позволяет настроить цвет фона заполненной полосы. Эти настройки цвета фона перекрывают предыдущие настройки цвета фона.

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

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления 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» после вашего значения размера, чтобы изменить его тип единицы измерения.

Прямоугольник с закругленными углами

Применение радиуса границы закругляет углы планки внутри барной стойки. Чем выше радиус границы, тем более скругленными становятся углы.

Использовать границу

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

Цвет рамки

Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.

Ширина рамки

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

Стиль рамки

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

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

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты 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, разделенные точкой с запятой.

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

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

Индивидуальные настройки модуля Счётчик с полосками — вкладка Контент

Заголовок

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

Процент

Это значение определяет степень заполнения барной стойки. Вы можете ввести значение от 1% до 100%.

Фоновый цвет

Этот параметр позволяет настроить цвет фона каждой барной стойки. Эти настройки применяются к отрицательному пространству за заполненной полосой цвета.

Цвет фона панели

Этот параметр позволяет настроить цвет фона заполненной полосы. Эти настройки цвета фона перекрывают предыдущие настройки цвета фона.

Индивидуальные настройки Счётчик с полосками — вкладка Дизайн

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

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

Процент цвет текста

Этот параметр изменяет цвет текста в процентах, который отображается внутри счетчика маршрута.

Индивидуальные настройки вкладок модуля Счётчк с полосками — вкладка Расширенный

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

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