5 способов стилизовать модуль счетчика кругов Divi

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

Примеры модуля счетчика кругов Divi с практическими рекомендациями

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

Вариант первый: Divi Streamer

В этом пакете макетов мы использовали модуль счетчика кругов, чтобы продемонстрировать демографическую статистику Divi Streamer.

Второй стиль: Divi Chocolatier

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

Дизайн третий: дизайнер украшений Divi

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

Посмотрите четвертый: Divi Hostel

Измерение «коэффициента счастья» среди гостей с помощью анимированного модуля имеет смысл.

Демонстрация пятая: магазин игрушек Divi

Здесь мы используем модули Circle для продвижения продаж в интернет-магазине.

Подготовка к стилизации модуля счетчика кругов Divi

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

Создание вашего раздела

Сначала нажмите на значок синего плюса . Это добавит новый раздел на вашу страницу.

Выбор столбцов

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

Добавьте модули счетчика кругов

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

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

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

Style One ft. Divi Streamer Layout Pack

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

Подготовить раздел

Во-первых, давайте удалим модули счетчиков чисел, которые в настоящее время находятся в этом разделе. Наведите указатель мыши на модуль и в появившемся сером всплывающем меню щелкните значок корзины .

Повторите это для другого модуля счетчика чисел в секции.

Добавить модуль счетчика кругов

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

Добавление вашего контента

После того, как ваш первый модуль счетчика кругов будет добавлен, вам нужно будет ввести точку данных. На вкладке «Содержимое» модуля введите описание точки данных. В нашем случае мы будем показывать процент пользователей из Торонто. Итак, вводим наш текст и число 78 (без знака процента!)

Стиль модуля счетчика кругов

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

Стилизация круговой диаграммы

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

Настройки дизайна круга:

• Цвет круга: #5200ff
• Цвет фона круга: #ffffff
• Непрозрачность фона круга: 0,4

Стилизация текста заголовка

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

Настройки текста заголовка:

• Шрифт заголовка: Поппинс
• Начертание шрифта заголовка: полужирный
• Цвет шрифта заголовка: #ffffff

Добавление стиля к тексту номера

И последнее, но не менее важное: мы исправим числа в модуле счетчика кругов. Для этого мы нажимаем на вкладку Number Text . Затем мы будем использовать следующие настройки для стиля. Обратите внимание, что мы черпали вдохновение из пакета макетов, а также из модулей счетчиков чисел, которые были там раньше.

Настройки текста номера:

• Шрифт номера: Поппинс
• Вес шрифта номера: Жирный
• Цвет текста номера: #ffffff
• Размер текста номера: 72pt

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

Скопируйте и обновите модуль

Теперь, когда стиль завершен, мы можем продублировать этот модуль. Мы изменим его с другими нашими точками данных и соответствующими им названиями. Для этого наведите курсор на модуль. Это вызовет всплывающее меню настроек модулей. Щелкните значок копирования . Затем переместите модуль в другие столбцы в строке.

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

Создайте второй дизайн с помощью набора Divi Chocolatier Layout Pack

Следуйте сообщению в блоге Divi Chocolatier Layout Pack, чтобы узнать, как установить макет на свой веб-сайт. Мы изменим разделы событий на макете домашней страницы. Давайте добавим несколько модулей счетчика кругов, чтобы показать данные о том, сколько заказов было собрано.

Удалить текущий контент

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

В итоге мы получим пустую строку из трех столбцов.

Обновить заголовки

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

Добавьте модули круга

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

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

Добавьте данные в модули Circle

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

Для этого дизайна мы удалим знак процента, который поставляется с модулем по умолчанию. Для этого мы нажимаем на вкладку Elements . Затем мы снимаем флажок рядом с опцией «Знак процента» .

Теперь мы можем стилизовать этот модуль.

Стилизация модуля счетчика кругов

Для начала переходим на вкладку Дизайн модуля.

Добавление брендинга на круговую диаграмму

Затем мы нажимаем переключатель «Круг» , чтобы получить доступ к настройкам дизайна для аспекта круговой диаграммы модуля. Мы будем использовать следующие настройки для его стиля:

Настройки дизайна круга:

• Цвет круга: #ff6a28
• Цвет фона круга: #000000
• Непрозрачность фона круга: 0,3

Стилизация текста заголовка

Для текста заголовка мы будем использовать следующие настройки после нажатия на вкладку «Текст заголовка» :

Настройки текста заголовка:

• Шрифт заголовка: Jost
• Вес шрифта заголовка: обычный
• Цвет текста заголовка: #000000

Оформление текста номера.

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

Настройки текста номера:

• Шрифт номера: Jost
• Вес шрифта номера: обычный
• Цвет текста номера: #000000
• Размер текста номера: 72px

Дублировать и закончить

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

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

Третий стиль с набором макетов Divi Jewelry Designer Layout Pack

Для этого дизайна мы использовали пакет макетов Divi Jewelry Designer Layout Pack в качестве отправной точки. Мы хотели добавить образовательный раздел на страницу продукта этого макета и будем использовать модуль счетчика кругов для демонстрации этой информации. Мы преобразуем раздел отзывов в нижней части страницы в этот.

Удалить модули

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

Обновить дизайн и структуру раздела и строки

Для этого пакета макетов мы также хотим изменить фон раздела, чтобы добавить интереса. Нажмите на значок шестеренки в синем меню настроек раздела.

Во-первых, давайте удалим фоновое изображение. Нажмите на вкладку Фон . Затем нажмите на значок изображения . Наконец, нажмите на значок корзины , чтобы удалить фоновое изображение.

Мы хотим оставить фоновый градиент и цвет. Теперь давайте добавим в раздел фоновый узор. Щелкните значок Фоновый узор . Затем щелкните значок плюса , чтобы добавить фоновый узор.

Мы будем использовать следующий фоновый узор.

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

Добавить модуль круга

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

С модулем, добавленным в столбец, как и раньше, мы добавляем наш контент. Мы будем использовать знак процента в этом дизайне.

Стилизуйте свои круговые счетчики

Теперь мы начнем стилизовать наши счетчики.

Стилизация круговой диаграммы

Сначала мы начнем с круглой части нашего счетчика. Будут использованы следующие настройки:

Настройки дизайна круга:

• Цвет круга: #000000
• Цвет фона круга: #ac8961
• Непрозрачность фона круга: 0,5

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

Добавление стиля к тексту заголовка

Для текста заголовка мы будем использовать то же семейство шрифтов, что и во всем пакете макетов. Вы можете найти настройки, щелкнув вкладку «Текст заголовка». Ниже найдите настройки, которые использовались для оформления текста заголовка:

Настройки текста заголовка:

• Шрифт текста заголовка: GFS Didot
• Начертание шрифта заголовка: полужирный
• Цвет текста заголовка: #000000

Стилизация текста номера

Для числового текста мы будем использовать золотой цвет, чтобы вернуться к цветам, используемым в брендинге этого пакета макетов. Мы нажимаем на вкладку «Числовой текст» , чтобы ввести настройки, которые мы будем использовать ниже:

Стиль текста номера:

• Шрифт номера: GFS Didot
• Цвет текста номера: #ac8961
• Размер текста номера: 48px

Сохранение и дублирование нашей работы

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

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

К следующему дизайну!

Хостел Design Four ft. Divi

Мы будем использовать Divi Hostel Layout Pack для нашего четвертого дизайна этого поста. В частности, мы изменим раздел удобств в шаблоне целевой страницы.

Удалить модули из раздела

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

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

Добавить модуль круга

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

Добавить контент

На вкладке «Содержание» в настройках модуля добавьте свой заголовок и точку данных.

Приступайте к разработке модуля счетчика кругов

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

Стилизация круга модуля счетчика кругов

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

Настройки дизайна круга:

• Цвет круга: #008186
• Цвет фона круга: #d37643
• Непрозрачность фона круга: 0,2

Стиль текста заголовка

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

Настройки текста заголовка:

• Шрифт текста заголовка: Manrope
• Начертание шрифта заголовка: сверхжирный
• Цвет текста заголовка: #000000

Стили числового текста

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

Стиль текста номера:

• Шрифт номера: Manrope
• Шрифт номера: обычный
• Цвет текста номера: #d37643
• Размер текста номера: 54px

Добавить границу и отступ

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

Настройки границ:

• Границы: Все границы
• Ширина границы: 4 пикселя
• Цвет границы: #008186
• Стиль границы: Твердый

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

Дублируйте и обновите свой модуль

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

Последний пример: магазин игрушек Divi

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

Добавить строки в раздел

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

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

Изменить структуру столбцов и добавить модуль

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

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

Добавить содержимое в модуль счетчика кругов

Теперь мы собираемся добавить наш контент и данные в наш модуль счетчика кругов.

Стиль модуля счетчика кругов

Как и в наших предыдущих примерах, мы переходим на вкладку «Дизайн», чтобы стилизовать текст заголовка, числовой текст и многое другое. Тем не менее, мы сделаем кое-что немного по-другому, чтобы завершить этот урок.

Стилизация счетчика кругов

Мы начнем со стиля нашего кругового счетчика со следующими настройками:

Настройки дизайна круга:

• Цвет круга: #557068
• Цвет фона круга: #ffffff
• Непрозрачность фона круга: 1

Обратите внимание, что мы не используем прозрачность для непрозрачности фона круга. Для этого дизайна мы перейдем на вкладку «Текст» и выберем «Светлый» в качестве цвета текста . Это сделает заголовок и номер белым или цветом, который вы установили в качестве светлого цвета шрифта для страницы.

Настройки оформления текста:

• Выравнивание текста: по центру
• Цвет текста: светлый

Добавление стиля к тексту заголовка

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

Настройки текста заголовка:

• Шрифт заголовка: Libre Baskerville
• Начертание шрифта заголовка: полужирный

Стилизация текста номера

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

Настройки текста номера:

• Шрифт номера: Libre Baskerville
• Вес шрифта номера: Жирный
• Цвет текста номера: #ffffff
• Размер текста номера: 72px

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

Чтобы закончить этот урок, мы вернемся на вкладку «Содержимое». Затем мы собираемся щелкнуть вкладку «Фон» , чтобы добавить некоторые акценты в наш модуль счетчика кругов. Затем мы перейдем к значку фоновой маски .

Стилизация фоновой маски для модуля счетчика кругов

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

Настройки фоновой маски:

• Дизайн фоновой маски: стек камней
• Цвет маски: #eac989
• Преобразование маски: поворот, инвертирование
• Соотношение сторон маски: квадрат

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

Настройки фоновой маски (модуль 2):

• Дизайн фоновой маски: стек камней
• Цвет маски: #354e7c
• Преобразование маски: инвертировать
• Соотношение сторон маски: квадрат

Для последнего модуля используются следующие настройки:

Настройки фоновой маски (модуль 3):

• Дизайн фоновой маски: стек камней
• Цвет маски: #f6c6c5
• Преобразование маски: Отразить по горизонтали, Повернуть, Инвертировать
• Соотношение сторон маски: квадрат

Со всеми расставленными акцентами вот так выглядит конечный продукт:

Последние мысли

С некоторыми рекомендациями и большими данными вы можете изменить то, как ваши пользователи будут взаимодействовать с контентом на вашем сайте. Использование модуля счетчика кругов помогает добавить интерес к вашей странице, одновременно демонстрируя информацию о вашем продукте или услуге в привлекательной форме. Мы с нетерпением ждем возможности увидеть, как вы реализуете некоторые из этих руководств на своем сайте. Если вы вдохновлены, сообщите нам об этом в разделе комментариев внизу!