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

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

Давайте перейдем к этому.

Предварительный просмотр

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

Начнем творить!

Подпишитесь на наш канал Youtube

Добавить новый раздел

Градиентный фон

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

• Цвет 1: #ffffff
• Цвет 2: # 757f1e
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Интервал

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

• Верхний отступ: 130 пикселей
• Нижний отступ: 130 пикселей

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Цвет фона столбца 1

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона в первый столбец.

• Цвет фона столбца 1: rgba (0,0,0,0.19)

Фоновое изображение столбца 1

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

• Столбец 1 Расположение фонового изображения: внизу по центру
• Столбец 1: повторение фонового изображения: без повтора
• Столбец 1 "Наложение фонового изображения": "Умножить".

Цвет фона столбца 2

Для второго столбца потребуется только белый цвет фона.

• Цвет фона столбца 2: #ffffff

Размеры

Продолжите, перейдя на вкладку дизайна в настройках строки и измените настройки размера.

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 2000 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Удалите также все пользовательские отступы по умолчанию для строки.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Коробка Тень

И добавьте легкую тень коробки.

• Сила размытия тени коробки: 80 пикселей

Добавить текстовый модуль в столбец 2

Добавить содержимое

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

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

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

• Толщина шрифта заголовка: Ультра полужирный
• Размер текста заголовка: 60 ​​пикселей (компьютер и планшет), 50 пикселей (телефон)
• Расстояние между буквами заголовка: -4 пикселя
• Высота строки заголовка: 0,8 м

Интервал

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

• Верхняя маржа: 17vw
• Левое заполнение: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

Добавить модуль разделителя в столбец 2

Видимость

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

• Показать разделитель: Да

Цвет

Затем измените цвет разделителя.

• Цвет: # 757f1e

Стили

Измените стиль разделителя также в настройках стилей.

• Стиль разделителя: Двойной

Размеры

И увеличьте вес разделителя в настройках размеров модуля.

• Вес разделителя: 6 пикселей

Интервал

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

• Верхняя маржа: 2vw
• Нижняя маржа: 15vw

Добавить строку №2

Структура столбца

Во второй ряд! Выберите для него следующую структуру столбцов:

Цвет фона столбца 1

Откройте настройки строки и добавьте цвет фона к первому столбцу.

• Цвет фона столбца 1: # 212121

Размеры

Затем перейдите на вкладку дизайна и поиграйте с размером строки.

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 2000 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Удалите все настраиваемые отступы строки, добавив «0 ​​пикселей» к верхнему и нижнему отступу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Коробка Тень

И последнее, но не менее важное: придайте строке тонкую тень прямоугольника.

• Сила размытия тени коробки: 80 пикселей

Добавить текстовый модуль №1 в столбец 1

Добавить содержимое

Первый модуль, который нам понадобится, - это текстовый модуль. Добавьте один в первый столбец с некоторым содержанием по выбору.

Настройки текста

Продолжите, перейдя на вкладку дизайна и изменив настройки текста.

• Толщина шрифта текста: легкий
• Цвет текста: #ffffff
• Размер текста: 18 пикселей (рабочий стол), 15 пикселей (планшет), 12 пикселей (телефон)
• Высота текстовой строки: 1em
• Ориентация текста: влево
• Цвет текста: светлый

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

Также измените настройки текста заголовка.

• Заголовок 3 Цвет текста: #ffffff
• Размер текста заголовка 3: 25 пикселей (рабочий стол), 20 пикселей (планшет), 18 пикселей (телефон)
• Интервал между буквами заголовка 3: -1px

Интервал

Также добавьте несколько пользовательских значений отступов в настройки интервала.

• Верхний отступ: 30 пикселей
• Нижний отступ: 30 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Добавить текстовый модуль №2 в столбец 2

Добавить содержимое

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

Цвет фона по умолчанию

Затем перейдите к настройкам фона и добавьте цвет фона.

• Цвет фона: #eaeaea

Цвет фона при наведении

Измените этот цвет фона при наведении курсора.

• Цвет фона: # ffbb00

Настройки текста по умолчанию

Затем измените настройки текста на вкладке дизайна.

• Толщина шрифта текста: Ультра полужирный
• Стиль шрифта текста: прописные.
• Цвет текста: # 333333
• Размер текста: 16 пикселей
• Расстояние между буквами текста: -1px
• Ориентация текста: по центру

Настройки текста при наведении

И измените эти настройки при наведении курсора.

• Цвет текста: #ffffff
• Размер текста: 20 пикселей

Интервал по умолчанию

Мы также применяем некоторые значения интервалов по умолчанию.

• Верхний отступ: 45 пикселей
• Нижний отступ: 45 пикселей
• Отступ слева: 5 пикселей
• Отступ справа: 5 пикселей

Расстояние при наведении

Что мы изменим при наведении курсора.

• Верхнее поле: -50 пикселей
• Левое поле: -20 пикселей
• Верхний отступ: 70 пикселей
• Нижний отступ: 70 пикселей
• Отступ слева: 5 пикселей
• Отступ справа: 5 пикселей

Тень бокса по умолчанию

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

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (255,255,255,0)

Hover Box Shadow

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

• Цвет тени: rgba (0,0,0,0.34)

Клонировать текстовый модуль №2 дважды и поместить в оставшиеся столбцы

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

Изменить первый дубликат

Изменить содержимое

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

Изменить цвет фона

Также измените цвет фона этого модуля.

• Цвет фона: #dddddd

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

Изменить содержимое

Измените также содержимое второго дубликата в столбце 4.

Изменить цвет фона

Вместе с цветом фона.

• Цвет фона: # c6c6c6

Добавить модуль изображения для экрана меньшего размера в столбец 2 строки №1

Загрузить изображение

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

Видимость

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

Предварительный просмотр

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

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

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