Как создавать потрясающие сеточные макеты с помощью видеомодуля Divi (часть 4)

Добро пожаловать в пост 4 из 5 в нашем мини-сериале «Как создавать потрясающие сеточные макеты с помощью видеомодуля Divi». В этой серии мы расскажем, как создавать потрясающие макеты сеток с нуля с помощью Divi Visual Builder. И если вас беспокоит, что это слишком сложно, подумайте еще раз! Все эти макеты можно создавать и стилизовать с помощью Visual Builder без дополнительного кода.

Надеюсь, вам до сих пор нравятся макеты сетки. Сегодняшний макет - номер 4 в серии, и он один из моих любимых (и самый быстрый в реализации). Создавать с помощью Divi не только легко (и весело), ​​но и настраивать его в соответствии с цветовой схемой вашего сайта. Параметры градиента фона являются основной особенностью этого дизайна, которые были использованы для создания двух цветов тона, разделенных диагональной линией. Интервал также предназначен для облегчения восприятия видео. Возможно, этот дизайн может выходить за рамки того, что мы обычно называем «сеткой», но я думаю, вы увидите потенциал.

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

Вот как будет выглядеть окончательный результат

Концепция и вдохновение

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

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

Реализация дизайна с помощью Divi

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

Во-первых, добавьте обычный раздел с полноразмерной структурой (1 столбец).

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

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

Параметры содержимого
Содержание: [введите текст для заголовка]

Варианты дизайна

Цвет текста: светлый
Шрифт текста: Аримо
Размер шрифта текста: 56 пикселей
Расстояние между буквами текста: 1 пикс.
Высота текстовой строки: 1em

Сохранить настройки

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

Цвета градиента фона: # 121212, #ffffff
Тип градиента: линейный
Направление градиента: 198 градусов
Стартовая позиция: 45%
Конечная позиция: 45%

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

Варианты дизайна

Сделать эту строку полной шириной: ДА
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 4
Выровнять высоту столбца: ДА
Пользовательское заполнение: 1% сверху, 5% справа, 5% снизу, 5% слева

Сохранить настройки

Теперь добавьте еще одну строку со структурой ⅔ ⅓ (2 столбца) прямо под только что созданной строкой.

Затем добавьте видеомодуль в левый столбец.

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

Параметры содержимого

Видео MP4 / URL: [введите URL вашего видео]
URL накладываемого изображения: [введите URL накладываемого изображения]

Сохранить настройки

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

Обновите содержание видео, включив в него правильные URL-адреса и изображения обложек.

Идите вперед и добавьте Blurb Module под двумя видеомодулями в правом столбце. Это может служить описанием видео в этой сетке.

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

Параметры содержимого

Заголовок: [введите заголовок]
Содержание: [введите содержание или описание]

Варианты дизайна

Цвет текста: светлый

Сохранить настройки

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

Параметры содержимого

Цвета градиента фона: # 4999c1, # 121212
Тип градиента: линейный
Направление градиента: 198 градусов
Стартовая позиция: 45%
Конечная позиция: 45%

Варианты дизайна

Сделать эту строку полной шириной: ДА
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 4
Выровнять высоту столбца: ДА
Пользовательское заполнение: 5% сверху, 5% справа, 5% снизу, 5% слева

Большой! Вы закончили первый раздел. Мы почти закончили. Проверьте прогресс на данный момент.

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

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

Параметры содержимого

Цвета градиента фона: #ffffff, # 121212 (эти цвета расположены в порядке, обратном первому разделу).

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

Варианты дизайна

Цвет текста текста: # 333333

Сохранить настройки

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

Параметры содержимого

Цвета градиента фона: # 121212, # 4999c1 (в основном вы меняете порядок цветов, чтобы они были в порядке, обратном порядку первого раздела)

Сохранить настройки

Теперь посмотрим, что получилось после добавления второй секции…

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

Вот как это выглядит после добавления третьего раздела:

Вот и все! Все закончено.

Отзывчивый?

Этот макет действительно выглядит даже лучше на мобильном телефоне без каких-либо изменений. Проверьте это!

Дальнейшая настройка

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

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

Вы также можете добавить модуль слайдера видео в сетку в левом столбце.

Скоро…

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

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

Наслаждаться!