5 примеров макетов разделов редакционного стиля, созданных с помощью Divi

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

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

Первый пример

Рабочий стол

Мобильный

Второй пример

Рабочий стол

Мобильный

Третий пример

Рабочий стол

Мобильный

Четвертый пример

Рабочий стол

Мобильный

Пятый пример

Рабочий стол

Мобильный

5 примеров макетов разделов редакционного стиля, созданных с помощью Divi

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

Начать создание первого примера

Давайте начнем с создания нашего первого макета стиля редактора.

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

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

Добавить трехколоночную строку

В этом стандартном разделе нам понадобится строка из трех столбцов.

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

Откройте настройки строки и добавьте к ней следующий градиентный фон:

• Первый цвет: # 636363
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 0%
• Конечная позиция: 47%

Цвет фона столбца 2

Нам также необходимо установить '# d8d8d8' в качестве цвета фона столбца 2.

Размеры

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

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

Интервал

Откройте подкатегорию «Интервал» и добавьте «50 пикселей» к верхнему, правому, нижнему и левому отступу второго столбца.

Модуль изображения первого столбца

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

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

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: # 086191
• Тип градиента: линейный
• Направление градиента: 107 градусов
• Стартовая позиция: 60%
• Конечная позиция: 60%

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

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

Интервал

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

• Верхнее поле: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Модуль текста второго столбца

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

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

• Размер шрифта текста: 12 пикселей
• Цвет текста: # 000000
• Ориентация текста: по центру

Размеры

Откройте подкатегорию «Размер», используйте ширину «84%» и выберите «Выравнивание модуля по центру».

Интервал

Наконец, добавьте 50 пикселей к верхнему и нижнему полю.

Модуль изображения третьего столбца

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

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

• Первый цвет: # a36100
• Второй цвет: rgba (255,255,255,0)
• Тип градиента: линейный
• Направление градиента: 73 град.
• Стартовая позиция: 40%
• Конечная позиция: 40%

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

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

Интервал

Наконец, добавьте следующие настраиваемые поля и отступы:

• Верхнее поле: 300 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Результат

Давайте еще раз посмотрим на результат на рабочем столе:

И на мобильном телефоне:

Начать создание второго примера

Второй пример на рабочем столе выглядит так:

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

Во-первых, добавьте новый стандартный раздел.

Добавить двухколоночную строку

Затем добавьте к нему строку из двух столбцов.

Цвет фона столбца 2

Откройте настройки строки и добавьте «#ededed» в качестве цвета фона столбца 2.

Размеры

Перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Размер»:

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

Модуль изображения первого столбца

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

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

Интервал

Откройте подкатегорию Spacing и используйте следующие настройки:

• Верхнее поле: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Модуль текста второго столбца

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

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

• Шрифт текста: Lato
• Размер шрифта текста: 12 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 2.2em
• Ориентация текста: по центру

Размеры

Откройте подкатегорию «Размер» и примените ширину «75%».

Интервал

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

• Верхнее поле: 120 пикселей (рабочий стол), -80 (планшет и телефон)
• Левое поле: -240 пикселей (рабочий стол), 80 (планшет), 45 (телефон)
• Отступ сверху, справа, снизу и слева: 50 пикселей (рабочий стол и планшет), 20 пикселей (телефон)

Результат

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

И на мобильном телефоне:

Начать создание третьего примера

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

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

Еще раз добавим новый стандартный раздел.

Добавить двухколоночную строку

Структура столбцов, которая нам понадобится для этой строки, следующая:

Цвет фона столбца 1

Откройте настройки строки и используйте «# e8e8e8» в качестве цвета фона столбца 1.

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

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

• Первый цвет: # e8e8e8
• Второй цвет: rgba (255,255,255,0)
• Столбец 2 Тип градиента: линейный
• Столбец 2 Направление градиента: 147 градусов
• Столбец 2 Начальная позиция: 25%
• Конечная позиция в столбце 2: 9%

Размеры

Откройте подкатегорию Размер и используйте следующие настройки:

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

Интервал

Наконец, добавьте «70 пикселей» к верхнему и нижнему отступу первого столбца.

Модуль изображения первого столбца

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

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

Интервал

Откройте подкатегорию «Интервал» и добавьте «-300 пикселей» к левому полю.

Модуль текста второго столбца

Фоновый цвет

Добавьте текстовый модуль во второй столбец и используйте '# 3d3d3d' в качестве цвета фона.

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

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

• Шрифт текста: Lato
• Размер шрифта текста: 12 пикселей
• Цвет текста: #FFFFFF
• Высота текстовой строки: 2.2em
• Ориентация текста: по центру

Размеры

Откройте подкатегорию «Размер» и укажите «75%» для ширины.

Интервал

Наконец, используйте следующие настройки для подкатегории Spacing:

• Верхнее поле: 130 пикселей (рабочий стол), -200 (планшет и телефон)
• Левое поле: -180 пикселей (рабочий стол), 80 (планшет), 50 (телефон)
• Отступ сверху, справа, снизу и слева: 50 пикселей (рабочий стол и планшет), 20 пикселей (телефон)

Результат

После завершения результат на рабочем столе будет выглядеть так:

И вот так на мобильном телефоне:

Начать создание четвертого примера

Четвертый пример, который мы создадим, выглядит так:

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

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

Добавить двухколоночную строку

Затем добавьте к нему строку из двух столбцов.

Размеры

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

• Использовать нестандартную ширину: Да
• Специальная ширина: 60%
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Модуль "Первое изображение первого столбца"

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

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

Размеры

Перейдите в подкатегорию «Размеры» этого модуля изображения, используйте ширину «89%» и выберите правильное выравнивание модуля.

Видимость

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

Модуль "Первый столбец" для второго изображения

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

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

Граница

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

• Использовать границу: Да
• Цвет границы: #FFFFFF
• Ширина границы: 5 пикселей
• Стиль границы: сплошной

Видимость

Наконец, перейдите на вкладку «Дополнительно» и отключите модуль изображения на телефоне и планшете.

Модуль "Первое изображение второго столбца"

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

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

Граница

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

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

Второй столбец Модуль второго изображения

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

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

Размеры

Затем откройте подкатегорию размеров, используйте ширину «89%» и выберите выравнивание левого модуля.

Видимость

Также отключите этот модуль изображения на телефоне и планшете.

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

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

Размеры

Перейдите на вкладку «Дизайн» в настройках строки, включите параметр «Использовать нестандартную ширину» и используйте «581px» в качестве пользовательской ширины.

Текстовый модуль

Фоновый цвет

Добавьте текстовый модуль в эту новую строку и выберите «rgba (255,255,255,0.92)» в качестве цвета фона.

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

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

• Шрифт текста: Lato
• Размер шрифта текста: 12 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 2.2em
• Ориентация текста: по центру

Размеры

Затем откройте подкатегорию «Размер», добавьте «75%» к ширине и выберите центральное выравнивание модуля.

Интервал

Наконец, примените следующие настройки к подкатегории Интервал:

• Верхнее поле: -580 пикселей (рабочий стол), -200 (планшет и телефон)
• Левое поле: - 180 пикселей (рабочий стол), 80 (планшет), 50 (телефон)
• Отступ сверху, справа, снизу и слева: 50 пикселей

Результат

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

А на мобильном телефоне:

Начать создание пятого примера

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

Добавить секцию полной ширины

Начните с добавления на страницу полноразмерного раздела.

Модуль полноразмерного изображения

В этом разделе полной ширины добавьте модуль изображения полной ширины.

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

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

Добавить трехколоночную строку

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

Цвет фона столбца 1, 2 и 3

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

• Столбец 1: #eaeaea
• Столбец 2: rgba (12,113,195,0,17).
• Столбец 3: rgba (131,0 233,0.09).

Размеры

Перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Размер»:

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Затем откройте подкатегорию «Интервал», добавьте «-60 пикселей» к верхнему полю и «50 пикселей» к нижнему отступу каждого столбца.

Модуль текста первой колонки

Фоновый цвет

Продолжите, добавив текстовый модуль в первый столбец и используя rgba (255,255,255,0.89) в качестве цвета фона.

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

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

• Шрифт текста: Lato
• Размер шрифта текста: 12 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 2.2em
• Ориентация текста: по центру

Граница

Откройте подкатегорию Border и используйте следующие настройки:

• Использовать границу: Да
• Цвет границы: #FFFFFF
• Ширина границы: 17 пикселей
• Стиль границы: сплошной

Размеры

Затем используйте ширину «75%» и выберите выравнивание центрального модуля в подкатегории «Размер».

Интервал

Наконец, откройте подкатегорию Spacing и примените следующие настройки:

• Верхнее поле: -300 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Сверху, справа, снизу, отступ слева: 50 пикселей (компьютер и планшет), 20 пикселей (телефон)

Клонировать текстовый модуль дважды и разместить в двух других столбцах

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

Модуль "Изменить интервал для второго столбца"

Нам нужно изменить верхнее поле текстового модуля, расположенного во втором столбце, на «-220 пикселей».

Модуль изменения интервала для третьего столбца

Те же подсчеты для текстового модуля в третьем столбце, но вместо этого значение равно «-140 пикселей».

Результат

И вот результат на рабочем столе:

И на мобильном телефоне:

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от Джулии Тим / shutterstock.com