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

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

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

Sneak Peek

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

Создание новой страницы и развертывание Visual Builder

Чтобы начать работу, перейдите в свою панель управления WordPress и выберите «Страницы»> «Добавить». Затем дайте странице название и щелкните, чтобы использовать Divi Builder. Затем щелкните, чтобы использовать Visual Builder. Вам будет предложено три варианта. Выберите вариант «Строить с нуля».

Ваш чистый холст ждет!

Создание заголовка раздела функций

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

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

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

Содержание:

<h1>Our Features</h2>
Everything you need.

Шрифт текста: Монтсеррат
Толщина шрифта текста: полужирный
Размер текста текста: 22 пикс.
Ориентация текста: по центру
Толщина шрифта заголовка: Ультра полужирный
Размер текста заголовка: 6vw (рабочий стол), 50px (планшет), 30px (смартфон)

Теперь сохраните настройки, перейдите к настройкам раздела и добавьте тень блока следующим образом:

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 19 пикселей
Сила размытия тени коробки: 80 пикселей
Сила распространения тени коробки: -16 пикселей
Цвет тени: rgba (136,150,171,0.13)

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

Довольно простые вещи. А теперь перейдем к самому интересному.

Создание раздела основных функций и дизайна фона

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

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

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

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

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

Ширина: 1080 пикселей
Выравнивание сечения: по центру
Разделители: верх
Стиль разделителя: см. Снимок экрана
Цвет разделителя: rgba (136,150,171,0.07)
Высота разделителя: 52%

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

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

Добавление размытия в строку из четырех столбцов

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

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

Цвет значка: # 974450
Значок круга: ДА
Цвет круга: rgba (255,255,255,0,5)
Использовать размер шрифта значка: ДА
Размер шрифта значка: 48 пикселей
Ориентация текста: по центру

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

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

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

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

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

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

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

Удалить текст в поле заголовка
Номер: 25

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

Цвет фона панели: # 974450 (того же цвета, что и значки ваших рекламных объявлений)
Цвет текста числа: rgba (0,0,0,0) (это полностью прозрачно, чтобы скрыть число)
Размер текста числа: 0 пикселей (чтобы избавиться от нежелательного текстового пространства внутри круга)
Ширина: 109 пикселей (это было установлено на основе размера значка, который он будет перекрывать)
Выравнивание модуля: по центру
Margin-bottom: -102px (это полностью перекрывает значок)

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

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

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

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

Сделать эту строку полной шириной: ДА
Пользовательское заполнение столбца 2: 9% сверху (настольный компьютер), 0% сверху (планшет).
Пользовательское заполнение столбца 3: 9% сверху (настольный компьютер), 0% сверху (планшет).

Вот и все!

Проверьте окончательный результат.

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

Как раздел функций выглядит на мобильных устройствах

Вот как выглядит дизайн на дисплеях планшетов и смартфонов.

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!