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

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

Давайте приступим к делу!

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

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

Загрузите макет раздела с несколькими столбцами БЕСПЛАТНО

Чтобы получить доступ к макету многоколоночного раздела героя, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

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

Начнем воссоздавать!

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

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

Чтобы создать цельный многоколоночный раздел героя, мы собираемся использовать один из специальных разделов Divi, к которому у вас есть доступ внутри Visual Builder. Переход к специальному разделу позволяет вам лучше понять структуру сетки, которую вы используете, когда разрабатываете многоколоночный раздел героя. В этом конкретном примере мы выбираем следующую структуру столбцов:

Фоновый цвет

Откройте настройки раздела и добавьте белый цвет фона.

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

Размеры

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

• Выровнять высоту столбца: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Внутренняя ширина: 100%
• Внутренняя максимальная ширина: 100%

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ сверху столбца 1: 0 пикселей
• Отступ снизу столбца 1: 0 пикселей
• Верхний отступ столбца 2: 0 пикселей.
• Отступ нижнего столбца 2: 0 пикселей
• Верхний отступ столбца 3: 0 пикселей.
• Отступ нижнего столбца 3: 0 пикселей

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

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

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

Интервал

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

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

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

Добавить абзац и содержание H1

Пора начинать добавлять модули! Добавьте новый текстовый модуль с некоторым абзацем и содержимым H1 по вашему выбору.

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.9vw (рабочий стол), 1.6vw (планшет), 2.2vw (телефон)

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

Также измените настройки текста H1.

• Шрифт заголовка: Open Sans
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: прописные.
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 4vw
• Высота строки заголовка: 1.1em

Интервал

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

• Верхняя обивка: 10,8 ВВт
• Левый отступ: 4vw
• Правое заполнение: 4vw

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

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

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

Интервал

Еще не добавляя никаких модулей, откройте настройки строки и измените значения отступов.

• Верхняя обивка: 3vw
• Левый отступ: 4vw
• Правое заполнение: 4vw

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

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

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

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

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

• Шрифт заголовка 3: Open Sans
• Толщина шрифта заголовка 3: полужирный
• Стиль шрифта заголовка 3: прописные
• Цвет текста заголовка 3: # 000000
• Размер текста заголовка 3: 1.5vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)

Интервал

Продолжите, добавив немного верхнего поля на телефоне.

• Верхняя маржа: 2vw (только телефон)

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

Видимость

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

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

Линия

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

• Цвет линии: # 000000

Интервал

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

• Верхняя маржа: 2vw
• Нижняя маржа: 2vw
• Правое поле: 2vw

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

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

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

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.6vw (рабочий стол), 1.1vw (планшет), 2vw (телефон)
• Высота текстовой строки: 2em

Интервал

Также добавьте немного нижнего и правого отступов.

• Нижняя маржа: 5vw (только телефон)
• Правое поле: 2vw

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

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

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

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

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

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

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

Интервал

Откройте настройки строки и измените значения интервала.

• Верхняя маржа: 2vw
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

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

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

Добавить ссылку

Также добавьте ссылку на весь модуль.

Фоновый цвет

Мы также меняем цвет фона текстового модуля.

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

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

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

• Шрифт текста: Open Sans
• Толщина шрифта текста: Ультра полужирный
• Стиль шрифта текста: прописные.
• Выравнивание текста: по центру
• Цвет текста: #ffffff
• Размер текста: 1vw (рабочий стол), 1.7vw (планшет), 2.5vw (телефон)

Интервал

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

• Верхнее поле: 4vw (рабочий стол), 11vw (планшет), 0vw (телефон)
• Верхняя обивка: 4vw
• Нижняя обивка: 4vw

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

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

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

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

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

А также цвет фона.

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

Изменить цвет текста

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

• Цвет текста: # 000000

Изменить интервал

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

• Верхняя обивка: 4vw
• Нижняя обивка: 4vw

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

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

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

Размеры

Зайдите в настройки размера и убедитесь, что опция «Force Fullwidth» включена. Это гарантирует, что изображение сохранит свой размер на всех размерах экрана.

• Принудительная полная ширина: Да

Фильтры

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

• Насыщенность: 0%
• Яркость: 50%

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

Добавить абзац и содержание H3

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

Фоновый цвет

Добавьте цвет фона к модулю.

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

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

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

• Шрифт текста: Open Sans
• Цвет текста: #ffffff
• Размер текста: 0.9vw (рабочий стол), 1.6vw (планшет), 2.2vw (телефон)

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

Также измените настройки текста H3.

• Шрифт заголовка 3: Open Sans
• Толщина шрифта заголовка 3: полужирный
• Стиль шрифта заголовка 3: прописные
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 1.5vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)

Интервал

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

• Верхняя обивка: 3vw
• Нижняя обивка: 3vw
• Левый отступ: 2vw
• Правое заполнение: 2vw

Клонировать оба модуля и разместить дубликаты в столбце 3 раздела (в обратном порядке)

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

Изменить текстовый модуль

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

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

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

Изменить цвет текста

Затем измените цвет текста.

• Цвет текста: # 000000

Изменить цвет текста H3

Вместе с цветом текста H3.

• Цвет текста заголовка 3: # 000000

Изменить модуль изображения

Изменить изображение

Затем загрузите другое изображение в дубликат модуля изображения.

Изменить фильтры

И измените настройки фильтров.

• Насыщенность: 0%
• Яркость: 147%

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

Позиция

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

Видимость

Убедитесь, что опция «Показать разделитель» включена.

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

Линия

Затем добавьте цвет линии.

• Цвет линии: #ffffff

Преобразовать Повернуть

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

• Слева: 270 градусов

Преобразовать Перевести

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

• Справа: -19vw (Рабочий стол)
• Внизу: -11vw (рабочий стол), -24vw (планшет)

Видимость

И спрячьте весь модуль на телефоне.

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

Позиция

Следующий и последний разделительный модуль нужно добавить прямо здесь:

Видимость

Убедитесь, что опция «Показать разделитель» включена.

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

Линия

Перейдите на вкладку дизайна и измените цвет линии.

• Цвет линии: # 000000

Преобразовать Повернуть

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

• Слева: 270 градусов

Преобразовать Перевести

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

• Справа: 2vw
• Внизу: -11vw (рабочий стол), -24vw (планшет)

Видимость

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

• Индекс Z: 2

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

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

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

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

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