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

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

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

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

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

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

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

Скачать бесплатный шрифт Mightype

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

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

Интервал

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

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

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

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

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

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

Еще не добавляя никаких модулей, откройте настройки строки и добавьте следующий градиентный фон столбца 1:

• Цвет 1: #ffffff
• Цвет 2: rgba (0,255,233,0,25)
• Тип градиента столбца: радиальный
• Радиальное направление колонны: влево
• Начальная позиция в столбце: 59%
• Конечное положение столбца: 59%
• Градиент столбца над фоновым изображением: Да

Столбец 1 фоновый узор

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

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

• Размер фонового изображения столбца: Фактический размер
• Повторение фонового изображения столбца: пробел

Выравнивание строк

Включите также выравнивание правой строки.

Размеры

Мы также используем некоторые пользовательские настройки размера для этой строки:

• Использовать нестандартную ширину: Да
• Специальная ширина: 950 пикселей

Интервал

Это значения интервала, которые вам нужно добавить дальше:

• Нижнее поле: 100 пикселей
• Правое поле: -30 пикселей (планшет и телефон)
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Граница

И последнее, но не менее важное: добавьте границу вверху, слева и внизу строки:

• Ширина границы: 14 пикселей
• Цвет границы: # 000000
• Стиль левой границы: двойной

Добавить модуль текста заголовка

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

Теперь мы можем начать добавлять наши модули! Добавьте заголовок Text Module и убедитесь, что ваша копия - H2.

Фоновый цвет

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

Загрузить шрифт Mightype

Затем найдите шрифт Mightype на своем компьютере и загрузите его в свою библиотеку шрифтов, нажав кнопку загрузки в списке шрифтов.

Выберите файл шрифта Mightype, дайте своему шрифту имя и загрузите его в свою библиотеку шрифтов.

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

После того, как вы добавили новый шрифт, внесите другие изменения в настройки текста H2:

• Шрифт заголовка 2: Mightype
• Цвет текста заголовка: # 000000
• Размер текста заголовка 2: 150 пикселей (рабочий стол), 100 пикселей (планшет), 60 пикселей (телефон)

Интервал

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

• Верхнее поле: 200 пикселей
• Нижнее поле: 100 пикселей
• Левая маржа: -35%
• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей

Режим смешивания

И чтобы убедиться, что цвет фона текстового модуля влияет только на границу строки, а не на фон столбца 1, включите режим наложения «Умножение» в настройках фильтров.

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

Фоновый цвет

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

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

Зайдите в настройки текста и внесите некоторые изменения:

• Размер текста: 22 пикселей (рабочий стол), 18 пикселей (планшет), 15 пикселей (телефон)
• Высота текстовой строки: 1,8 м
• Ориентация текста: по центру

Размеры

Затем уменьшите размер этого текстового модуля до «96%».

Интервал

Также добавьте интервал:

• Нижнее поле: 200 пикселей
• Левая маржа: -50%
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Режим смешивания

И здесь также используйте режим наложения «Умножение».

Clone Row

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

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

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

Первое, что вам нужно изменить, это градиентный фон столбца 1:

• Цвет 2: rgba (255,187,0,0,33)
• Радиальное направление колонны: вправо

Выравнивание строк

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

Интервал

Мы также изменяем настройки Spacing:

• Левое поле: -25% (планшет и телефон)

Граница

Удалите левую границу, которая была применена к вашей строке, и вместо этого примените ее к правой стороне:

• Ширина правой границы: 14 пикселей
• Цвет правой границы: # 000000
• Стиль правой границы: Двойной

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

Интервал

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

• Левое поле: 52% (компьютер и планшет), 58% (телефон)
• Правая маржа: -52% (ПК и планшет), 58% (телефон)

Изменить настройки текста описания

Интервал

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

• Левая маржа: 50%
• Правая маржа: -50%

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

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

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

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