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

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

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

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

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

Загрузите макет раздела героя БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

• Цвет 1: # 7e2dff
• Цвет 2: #ffffff
• Стартовая позиция: 63%
• Конечная позиция: 63%

Интервал

Перейдите на вкладку «Дизайн» и добавьте несколько настраиваемых полей сверху и снизу для разных размеров экрана.

• Верхняя прокладка: 6vw (рабочий стол), 13vw (планшет), 32vw (телефон)
• Нижняя прокладка: 6vw (рабочий стол), 10vw (планшет), 20vw (телефон)

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

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

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

Размеры

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

• Максимальная ширина: 100%

Интервал

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

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

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

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

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

Размеры

Перейдите на вкладку «Дизайн» модуля изображения и включите параметр «Force Fullwidth».

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

Интервал

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

• Показать пространство под изображением: Нет
• Левое заполнение: 17vw

Граница

И добавьте «50vw» в верхний правый угол модуля изображения.

Фильтры

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

• Оттенок: 211deg
• Насыщенность: 600%
• Яркость: 67%
• Контрастность: 112%
• Инвертировать: 18%

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

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

Второй модуль, который нам нужен в этой строке, - это текстовый модуль с некоторым содержанием H1.

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

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

• Шрифт заголовка: Montserrat
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 5vw
• Расстояние между буквами заголовка: -2 пикселя

Размеры

Затем измените ширину модуля.

• Ширина: 70%

Интервал

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

• Верхнее поле: -57vw (рабочий стол), -75vw (планшет), -91vw (телефон)

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

Видимость

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

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

Линия

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

• Цвет линии: # 00dcff

Размеры

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

• Вес разделителя: 0,8 Вт
• Ширина: 27%

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

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

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

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

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

• Шрифт текста: Open Sans
• Цвет текста: #ffffff
• Размер текста: 1vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
• Высота текстовой строки: 1,8 м

Размеры

Также измените ширину модуля.

• Ширина: 53% (рабочий стол), 65% (планшет), 100% (телефон)

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

Добавить копию

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

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 0 пикселей
• Шрифт кнопки: Open Sans

Интервал

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

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

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

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

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

Фоновый цвет

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

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

Размеры

Перейдите на вкладку дизайна и увеличьте максимальную ширину.

• Максимальная ширина: 100%

Интервал

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

• Верхняя обивка: 3vw
• Нижняя обивка: 8vw
• Левое заполнение: 7vw
• Правое заполнение: 7vw

Граница

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

• Ширина верхней границы: 1.2vw
• Цвет верхней границы: # 00dcff

Коробка Тень

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

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

Индекс Z

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

• Индекс Z: 10

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

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

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

Выбрать значок

Далее выберите значок по вашему выбору.

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

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

• Цвет значка: # 000000
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 5vw

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

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

• Шрифт заголовка: Montserrat
• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 1.1vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)
• Интервал между заголовками: -1px

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

Наряду с настройками основного текста.

• Шрифт основного текста: Open Sans
• Выравнивание основного текста: по центру
• Размер основного текста: 0.8vw (рабочий стол), 1.6vw (планшет), 2vw (телефон)
• Высота линии корпуса: 1,5 Вт (рабочий стол), 3 Вт (планшет и телефон)

Клонировать модуль Blurb дважды и размещать дубликаты в оставшихся столбцах

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

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

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

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

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

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

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

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