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

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон страницы разделителя разделов БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

1. Перейдите в Divi Theme Builder и добавьте новый шаблон.

Перейти в конструктор тем Divi

Начните с перехода к Divi Theme Builder.

Добавить новый шаблон для страниц

Там создайте новый шаблон, щелкнув значок плюса.

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

2. Создайте собственный заголовок

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

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

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

• Цвет 1: # d13232
• Цвет 2: # fc6a3c

Интервал

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

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

Индекс Z

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

• Индекс Z: 99999

Добавить новую строку

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

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

Размеры

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

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

Интервал

Удалите также всю верхнюю и нижнюю обивку.

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

Главный элемент

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

display: flex;
align-items: center;

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

Загрузить логотип

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

Выравнивание

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

• Выравнивание изображения: по центру

Размеры

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

• Ширина: 6vw (рабочий стол), 13vw (планшет), 17vw (телефон)

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

Выберите меню

Во втором столбце нам понадобится модуль меню. Выберите меню по вашему выбору.

Удалить цвет фона

Продолжите, удалив цвет фона модуля.

Макет

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

• Стиль: Выровнено по левому краю
• Направление раскрывающегося меню: вниз

Текст меню

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

• Шрифт меню: Oswald
• Толщина шрифта меню: легкий
• Стиль шрифта меню: прописные
• Цвет текста меню: #ffffff (рабочий стол), # 202332 (планшет и телефон)
• Размер текста меню: 0.8vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
• Расстояние между буквами меню: 0.1vw

Выпадающее меню

Измените цвет строки раскрывающегося меню и в настройках раскрывающегося меню.

• Цвет строки раскрывающегося меню: #ffffff

Иконки

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

• Цвет значка меню гамбургера: #ffffff

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

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

К последнему столбцу! Здесь нам понадобится только модуль Button. Добавьте какую-нибудь копию по вашему выбору.

Выравнивание

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

• Расположение кнопок: по центру

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

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

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

• Радиус границы кнопки: 100 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Open Sans
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхнее заполнение: 0,8vw (рабочий стол), 1.6vw (планшет), 2.2vw (телефон)
• Нижняя прокладка: 0,8 мм (рабочий стол), 1,6 мм (планшет), 2,2 мм (телефон)
• Левое заполнение: 1,5 мм (рабочий стол), 2,5 мм (планшет), 3,5 мм (телефон)
• Правая прокладка: 1.5vw (рабочий стол), 2.5vw (планшет), 3.5vw (телефон)

3. Создайте собственное тело и добавьте верхний разделитель.

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

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

Верхний разделитель

Вы снова заметите раздел на странице. Откройте этот раздел и добавьте к нему верхний разделитель.

• Стиль разделителя: найти в списке
• Цвет разделителя: # fc6a3c
• Высота разделителя: 6vw
• Повторение по горизонтали делителя: 15x
• Переворот разделителя: вертикальный
• Расположение разделителей: поверх содержимого раздела

Интервал

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

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

Добавить новую строку

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

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

Размеры

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

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

Интервал

Удалите также все стандартные верхние и нижние отступы.

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

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

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

3. Сохраните изменения Builder и просмотрите результат

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

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

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

Рабочий стол

Мобильный

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

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

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