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

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

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

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

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

Рабочий стол

Мобильный

Скачать макет контуров столбцов БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

Переполнения

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

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

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

Размеры

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

• Ширина: 100%
• Максимальная ширина: 100%
• Выравнивание строк: вправо

Интервал

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

• Верхнее поле: 200 пикселей
• Левое заполнение: 47% (рабочий стол), 6% (планшет), 10% (телефон)
• Правое заполнение: 6% (планшет), 10% (телефон)

Граница

Мы завершим общие настройки строки, добавив верхнюю и нижнюю границу.

• Ширина верхней и нижней границы: 4 пикселя
• Цвет верхней и нижней границы: #bdffed

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

Интервал

После завершения общих настроек строки откройте настройки первого столбца и добавьте несколько значений пользовательского интервала.

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

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

Интервал

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

• Верхняя набивка: 12%
• Нижняя обивка: 12%
• Левое заполнение: 5% (рабочий стол), 20% (планшет), 15% (телефон)
• Правое заполнение: 5% (рабочий стол), 20% (планшет), 15% (телефон)

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

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

Пришло время добавить модули, начиная с текстового модуля, содержащего H2 Content в столбце 1.

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

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

• Шрифт заголовка 2: Source Code Pro
• Толщина шрифта заголовка 2: полужирный
• Цвет текста заголовка 2: rgba (35,38,211,0.46)
• Размер текста заголовка 2: 4vw (рабочий стол), 60 пикселей (планшет), 50 пикселей (телефон)
• Заголовок 2 Расстояние между буквами: 5 пикселей

• Заголовок 2 Текстовая тень Длина по горизонтали: 0,05 мкм
• Заголовок 2 Текстовая тень Длина по вертикали: 0,07 мкм
• Цвет тени текста заголовка 2: #bdffed

Вертикальное движение

Мы также добавим немного вертикального движения.

• Включить вертикальное движение: Да
• Начальное смещение: 2
• Среднее смещение: 0
• Конечное смещение: -2
• Триггер эффекта движения: середина элемента

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

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

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

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

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

• Шрифт текста: Исходный код Pro
• Цвет текста: rgba (35,38,211,0.76)
• Размер текста: 15 пикселей
• Высота текстовой строки: 2em

Вертикальное движение

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

• Включить вертикальное движение: Да
• Начальное смещение: 2
• Среднее смещение: 0
• Конечное смещение: -2
• Триггер эффекта движения: середина элемента

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: # 2326d3
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Исходный код Pro
• Показать значок кнопки: Да
• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет

Интервал

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

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Вертикальное движение

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

• Включить вертикальное движение: Да
• Начальное смещение: 2
• Среднее смещение: 0
• Конечное смещение: -2
• Триггер эффекта движения: середина элемента

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

Загрузить изображение с соотношением сторон 1: 1

В столбце 2 единственный модуль, который нам нужен, это модуль изображения. Загрузите изображение с соотношением сторон 1: 1.

Размеры

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

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

Граница

Теперь мы превратим изображение в круг, добавив закругленные углы.

• Все углы: 50vw

Коробка Тень

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

• Горизонтальное положение тени блока: 30 пикселей
• Положение прямоугольной тени по вертикали: 30 пикселей
• Цвет тени: rgba (38,255,197,0.3)

Вертикальное движение

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

• Включить вертикальное движение: Да
• Начальное смещение: -2
• Среднее смещение: 0
• Конечное смещение: 2
• Триггер эффекта движения: середина элемента

Клонировать всю строку дважды

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

Изменить весь контент и изображения

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

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

И откройте настройки последней строки, перейдите в настройки интервала и добавьте нижнее поле.

• Нижнее поле: 200 пикселей

Выделите новую строку (вверху раздела) контурам столбцов

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

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

Размеры

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

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

Интервал

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

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

Позиция

Затем перейдите на вкладку «Дополнительно» и измените положение всей строки. Установив абсолютное положение, мы удалим пространство контейнера, занимаемое строкой внутри страницы.

• Позиция: Абсолютная
• Расположение: Top Center

Ширина CSS всех основных элементов столбца

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

width: 20% !important;

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

Интервал

Затем откройте настройки столбца 1 и измените значения заполнения для разных размеров экрана.

• Верхняя набивка: 150vh (настольный компьютер), 250vh (планшет и телефон)
• Нижняя обивка: 150vh (рабочий стол), 250vh (планшет и телефон)

Граница

Также добавьте левую границу.

• Ширина левой границы: 5 пикселей
• Цвет левой границы: #bdffed
• Стиль левой границы: пунктирная

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

Фоновый цвет

Затем мы откроем настройки столбца 2 и добавим цвет фона.

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

Граница

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

• Ширина правой границы: 4 пикселя
• Цвет правой границы: #bdffed
• Стиль правой границы: сплошной

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

Граница

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

• Ширина правой границы: 4 пикселя
• Цвет правой границы: rgba (35,38,211,0,12)
• Стиль правой границы: пунктирная

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

Граница

Затем мы откроем настройки столбца 4 и соответствующим образом изменим настройки границы:

• Ширина правой границы: 4 пикселя
• Цвет правой границы: #bdffed
• Стиль правой границы: сплошной

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

Граница

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

• Ширина правой границы: 4 пикселя
• Цвет правой границы: rgba (35,38,211,0,12)
• Стиль правой границы: пунктирная

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

Видимость

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

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

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

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

Рабочий стол

Мобильный

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

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

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