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

измерительный модуль divi.png

Как добавить модуль барной стойки на свою страницу

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

Нажав на эту кнопку, вы можете активировать Divi Builder, который предоставит вам доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder запустить генератор в визуальном режиме.

Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на веб-интерфейсе, если вы подключены к своей панели управления WordPress.

использовать divi builder

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

bar counter divi.png

Найдите модуль барной стойки в списке модулей и щелкните по нему, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «Барная стойка», а затем нажать Enter для автоматического поиска и добавления модуля барной стойки!

После добавления модуля вы увидите список опций модуля. Эти варианты делятся на три основные группы: Содержание , Дизайн et Передовой .

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

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

показать 3 project goals.jpg

Как видите, вверху страницы представлены три цели проекта с использованием модуля «Барная стойка», а внизу страницы представлены результаты тематического исследования с использованием модуля «Счетчик». Номер ".

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

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

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

Параметры содержимого

Процент использования: ВКЛ.
Цвет фона: #dddddd
Цвет фона панели: # e07a5e

Варианты дизайна

Цвет текста: Темный
Шрифт заголовка: по умолчанию
Размер шрифта заголовка: 20px
Цвет текста заголовка: # 405c60
Высота строки заголовка: 2em
Процент шрифта: по умолчанию
Процент Размер шрифта: 16px
Процент Цвет текста: #ffffff
Процентная высота линии: 2.5em

добавить счетчик divi.png

Теперь вернитесь на вкладку Content и выберите + Добавить новый предмет для добавления первого барного счетчика к модулю.

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

Контент

Название: Мой заголовок
Процент: 80

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

номер строки настройки divi.png

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

bar counter divi список bars.png

Вот так!

конечный результат divi module barre.png

Опции содержимого барной стойки

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

модуль содержимого модуля divi.png

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

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

Цвет фона

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

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

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

Административная этикетка

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

Параметры дизайна бар-счетчика

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

опция design module counter barre.png

Цвет текста

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

Название шрифта

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

Размер шрифта заголовка

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

Цвет текста заголовка

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

Интервал заглавных букв

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

Высота строки заголовка

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

процент текстового divi модуля barre.png

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

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

Размер шрифта в процентах

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

Цвет текста в процентах

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

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

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

Высота процентной линии

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

Радиальный радиус

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

опция border divi builder.png

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

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

Цвет границы

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

Ширина границы

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

Стиль границ

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

Прокладка бара

Padding - это пространство, добавленное внутри вашего модуля, между краем модуля и его внутренними элементами. Здесь вы можете добавить настраиваемые верхнее и нижнее отступы к модулю панели.

Дополнительные параметры барной стойки

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

параметры панели счетчика advanced.png

CSS-идентификатор

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

Класс CSS

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

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

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

видимость

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

Это все для этого урока.