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

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

Давайте начнем.

Создание макета конструкции многоразового каркаса

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

Дизайн строки

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

Цвет фона: # 333333
Выравнивание строк: по центру
Специальная ширина: 775 пикселей
Ширина желоба: 2
Пользовательские отступы: 130 пикселей сверху, 130 пикселей снизу, 50 пикселей слева, 50 пикселей справа
Пользовательское поле: 0 пикселей сверху, 0 пикселей снизу

Дизайн раздела

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

Цвет фона: #ffffff
Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: #ffffff
Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: #ffffff

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

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу
Ширина верхней границы: 5vw
Цвет верхней границы: #ffffff
Ширина нижней границы: 5vw
Цвет нижней границы: #ffffff

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

Сохраните макет в своей библиотеке

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

Щелкните значок «Сохранить в библиотеку» в меню раздела.

Затем введите имя макета (что-то вроде «Row Frame Layout») и нажмите кнопку «Сохранить в библиотеке».

Завершение дизайна рамы №1

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

Изменение структуры столбца

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

Для этого сначала измените структуру строк на макет из шести столбцов.

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

Затем добавьте три модуля изображений (с изображениями) в каждый столбец. Я использую изображения с более портретной ориентацией (а не альбомной) с разными размерами / размерами.

Вот окончательный дизайн.

Бонусный совет по дизайну

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

Цвет фона слева: # 333333
Правый цвет градиента фона: #ffffff
Направление градиента: 90 градусов
Стартовая позиция: 50%
Конечная позиция: 0%

Обратите внимание на этот дизайн.

Настройка макета для различных дизайнов рамок и содержимого

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

Вот основной процесс обновления макета:

1. Загрузить сохраненный макет раздела на страницу
2. Обновите цветовую схему раздела с помощью «Найти и заменить».
3. Изменить стиль разделителя
4. Настройте строку с новым фоном и структурой столбцов.
5. Добавьте модули в свои столбцы

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

Конструкция рамы # 2

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

Теперь мы готовы настроить раздел под новый дизайн.

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

В модальном окне "Найти и заменить" обновите следующее:

Внутри: Этот раздел
Заменить на: # 443850
Выбрать Заменить все

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

Теперь обновите настройки раздела с новым стилем разделителя:

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

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

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

Цвет значка: # 7d8491
Размер шрифта значка: 80 пикселей
Ориентация текста: по центру

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

Цвет значка: # 8cd845
Размер шрифта значка: 50 пикселей

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

Вот окончательный дизайн.

Конструкция рамы # 3

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

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

Внутри: Этот раздел
Заменить на: # 1e3888
Выбрать Заменить все

Затем обновите разделитель раздела с новым стилем верхнего и нижнего разделителя (облака):

Далее заходим в настройки строки. Придайте строке градиентный фон следующим образом:

Цвет фона градиента слева: по умолчанию (# 2b87da)
Правый цвет градиента фона: # 1E3888 (тот же цвет, что и фон раздела)
Тип градиента: радиальный (для придания округлым округлым чертам вида «облака»).
Конечная позиция: 83% (чтобы немного скрыть края ряда)

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

Добавьте «#» в поле ввода ссылки, чтобы отобразить кнопку
Использовать цвет фона: НЕТ

Цвет текста заголовка: # ffc338
Цвет текста кнопки: # ffc338

Вот окончательный дизайн.

А как насчет мобильных?

Если вам интересно. Вот как будут выглядеть дизайны на мобильных устройствах.

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!