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

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

Пример

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

И вот так на мобильном телефоне:

Как выделить свой раздел героя

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

1. Большой, описательный и централизованный логотип.

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

2. Сконцентрируйте письменный контент

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

3. Выделите уникальные торговые предложения.

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

4. Чистое изображение продукта

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

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

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

Воссоздать пример с Divi

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

Формат заголовка

Первое, что вам нужно сделать, это выбрать «По центру» в качестве стиля заголовка, перейдя в панель управления WordPress> Настройка> Заголовок и навигация> Формат заголовка> и выберите «По центру» в качестве стиля заголовка.

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

Затем вернитесь в Заголовок и навигация> Панель основного меню> и внесите следующие изменения:

• Высота меню: 211 пикселей
• Максимальная высота логотипа: 100 пикселей
• Размер текста: 16
• Расстояние между буквами: 2
• Шрифт: Lato Light
• Стиль шрифта: прописные
• Цвет текста: #FFFFFF
• Цвет активной ссылки: #FFFFFF
• Цвет фона: rgba (255,255,255,0)
• Цвет фона выпадающего меню: rgba (255,255,255,0)

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

После этого добавьте новую страницу, включите Divi Builder, включите Visual Builder и добавьте новый стандартный раздел.

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

Используйте следующий градиентный фон для этого раздела:

• Первый цвет: # e2e2e2
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 180 градусов
• Стартовая позиция: 40%
• Конечная позиция: 40%

Фоновая картинка

Затем загрузите фоновое изображение и выберите «Умножить» в качестве наложения фонового изображения.

Добавить двухколоночную строку

Фоновый цвет

Добавьте строку из двух столбцов в только что созданный раздел и используйте '# b7afa1' в качестве цвета фона.

Столбец 1 градиентный фон

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

• Первый цвет: rgba (255,255,255,0,43)
• Второй цвет: rgba (255,255,255,0)
• Столбец 1 Тип градиента: радиальный
• Столбец 1 Направление градиента: вверху слева
• Колонка 1: начальная позиция: 49%
• Конечная позиция в столбце 1: 49%

Столбец 2 градиентный фон

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

• Первый цвет: rgba (255,255,255,0,43)
• Второй цвет: rgba (255,255,255,0)
• Столбец 2 Тип градиента: радиальный
• Столбец 2 Радиальное направление: Внизу справа
• Колонка 2: начальная позиция: 49%
• Конечная позиция в столбце 2: 49%

Размеры

Перейдите на вкладку «Дизайн», включите параметр «Использовать настраиваемую ширину желоба» и укажите «1» в качестве ширины желоба.

Интервал

Откройте подкатегорию Spacing и используйте следующие отступы и поля:

• Верхний отступ: 0 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Отступ справа: 25 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 25 пикселей
• Нижнее поле: 200 пикселей

Первый модуль Blurb

Включить значок

Добавьте модуль Blurb в первый столбец строки, включите параметр «Использовать значок» и выберите значок.

Настройки значков

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

• Цвет значка: #FFFFFF
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 40 пикселей

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

Затем примените следующие настройки к подкатегории «Текст заголовка»:

• Шрифт заголовка: Roboto Light
• Стиль шрифта: полужирный
• Размер шрифта заголовка: 25 пикселей
• Цвет текста заголовка: #FFFFFF
• Высота строки заголовка: 1,5 мм

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

Подкатегория основного текста потребует следующих изменений:

• Шрифт: Lato Light
• Размер основного шрифта: 13 пикселей
• Цвет основного текста: #FFFFFF

Размеры

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

Интервал

Наконец, используйте следующие поля и отступы для модуля Blurb:

• Верхнее поле: -50 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Верхний отступ: 100 пикселей
• Отступ справа: 10 пикселей
• Заполнение Bototm: 30 пикселей
• Отступ слева: 10 пикселей

Клонировать модуль Blurb и поместить во второй столбец

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

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

Первое, что вам нужно изменить в этом клонированном модуле Blurb, - это цвет фона. Измените его на rgba (89,60,31,0.5).

Изменить значок

Следующее и последнее, что вам нужно изменить, - это значок на вкладке содержимого.

Дополнительно: добавьте новую опцию тени коробки Divi в строку

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

• Горизонтальное положение тени блока: -3px
• Положение прямоугольной тени по вертикали: 31 пикс.
• Сила размытия тени коробки: 79 пикселей
• Сила распространения тени коробки: -4px
• Цвет тени: # 424242
• Положение тени коробки: внешняя тень

Результат

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

И на мобильном телефоне:

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Лучшее изображение Эллагрина / shutterstock.com