Пропустить

Как использовать модуль кругового счетчика на Divi builder

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

счетчик цитирования divi.png

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

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

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

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

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

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

встречный круг divi.png

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

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

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

Один из лучших способов использования модуля круговых счетчиков - это иллюстрировать статистику для тематических исследований или элементов портфолио.

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

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

пример модуля круг divi animation.gif

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

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

Конфигурация счетчика кругов divi.png

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

Название: Анимация
Количество: 80
Знак%: Да
Цвет фона панели: #e07a5e

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

Цвет круга: #e07a5e
Цвет текста: Темный
Шрифт заголовка: по умолчанию
Размер шрифта заголовка: 26px
Цвет текста заголовка: #405c60
Номер шрифта: по умолчанию
Размер шрифта размера: 46px
Цвет текста номера: #405c60

анимация divi создание круга с графикой divi.png

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

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

скопируйте модуль круглого счетчика divi.png

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

Вот так!

Посетите страницу.

счетчик проектов divi builder.png

Параметры содержимого круглых счетчиков

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

содержимое модуля модуля circle.png

Название

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

Имя

Установите номер кругового счетчика. Если выбрать число меньше 100, круговая диаграмма заполнится до процента, равного введенному вами числу. Например, ввод числа 20 заполнит круг на 20% цветом вашего акцента.

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Ярлык администрации

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

Параметры дизайна круглых счетчиков

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

круговой счетчик divi.png

Цвет круга

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

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

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

Цвет текста

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

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

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

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

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

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

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

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

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

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

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

Полицейский номер

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

номер текста divi builder round counter.png

Размер шрифта номера

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

Цвет номера текста

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

Интервал пронумерованных букв

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

текстовые метры пробелов divi.png

Высота числовой линии

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

Расширенные параметры кругового счетчика

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

расширенный счетчик divi.png

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

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

Класс CSS

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

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

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

видимость

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

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

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

Вверх
11 акции
доля6
чирикать2
Регистрация3