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

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

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

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

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

Скачайте БЕСПЛАТНО раздел «Герой режима наложения».

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

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

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

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

СКАЧАТЬ

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

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

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

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

Интервал

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

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

Коробка Тень

Перейдите к параметрам тени блока и добавьте тонкую тень блока.

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

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

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

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

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

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

• Цвет 1: # 00cbff
• Цвет 2: # bf35ff
• Направление градиента: 96 градусов

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

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

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора
• Наложение фонового изображения: экран

Размеры

Затем перейдите к настройкам размера и позвольте строке занять всю ширину контейнера секции.

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

Интервал

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

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

Отображать

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

display: flex;

Столбец 2 Настройки

Фоновый цвет

После того, как вы завершили общие настройки строки, откройте настройки второго столбца. Начните с добавления белого цвета фона.

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

Фильтры

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

• Режим наложения: Экран

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

Видимость

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

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

Интервал

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

• Нижняя маржа: 50vw

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

Добавить заголовок H1

Переходим ко второй колонке! Здесь мы начнем с текстового модуля заголовка. Введите контент H1 по вашему выбору.

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

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

• Шрифт заголовка: Poppins
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: #FFFFFF
• Размер текста заголовка: 12vw
• Интервал между буквами заголовка: -0,2vw

Интервал

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

• Верхняя маржа: 18vw
• Нижняя маржа: 2vw
• Левое поле: -27,3vw

Фильтры

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

• Режим наложения: разница

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

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

Переходим ко второму модулю! Добавьте контент по вашему выбору.

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

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

• Шрифт текста: Поппинс
• Выравнивание текста: по ширине
• Цвет текста: # 000000
• Размер текста: 0.8vw (рабочий стол), 1.5vw (планшет), 2.3vw (телефон)
• Высота текстовой строки: 2,5 м (настольный компьютер и планшет), 2,2 м (телефон)

Интервал

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

• Нижняя маржа: 1vw
• Левое поле: 5vw
• Правое поле: 14vw (рабочий стол), 4vw (планшет), 5vw (телефон)

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

Видимость

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

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

Линия

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

• Цвет линии: #FFFFFF
• Стиль линии: сплошной
• Позиция линии: вверху

Размеры

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

• Вес разделителя: 0,7 Вт
• Ширина: 9%
• Высота: 0 пикселей

Интервал

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

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

Фильтры

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

• Режим наложения: разница

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

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

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

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

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

• Расположение кнопок: влево

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

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

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

Интервал

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

• Нижнее поле: 10vw (рабочий стол), 15vw (планшет и телефон)
• Левое поле: 5vw
• Верхняя обивка: 1vw
• Нижняя обивка: 1vw
• Левый отступ: 3vw
• Правое заполнение: 3vw

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

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

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

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

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