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

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

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

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

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

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

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

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

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

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

Сначала добавьте обычный раздел со структурой 1/4 1/2 1/4 (2 столбца).

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

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

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

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

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

Затем добавьте разделительный модуль непосредственно под видеомодулем.

В настройках разделителя под установите высоту разделителя на 20.

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

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

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

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

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

Цвет фона: # 333333

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

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

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

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

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

Цвета градиента фона: rgba (255,255,255,0,58) и # b684e8
Направление градиента: 360 градусов
Цвет фона столбца 1: rgba (0,0,0,0.69)
Цвет фона столбца 2: rgba (255,255,255,0,45)
Цвет фона столбца 1: rgba (0,0,0,0.85)

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

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

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

Пришло время добавить вторую строку. Добавьте еще одну структурную строку 1/4 1/2 1/4 (3 столбца) под первой.

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

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

Фоновый градиент: нет (стереть тот, который был скопирован)
Цвет фона столбца 1: rgba (0,0,0,0.69)
Цвет фона столбца 2: rgba (0,0,0,0.0) - то же, что none или transparent
Цвет фона столбца 3: rgba (0,0,0,0.35)

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

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

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

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

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

Цвет текста: светлый
Ориентация текста: по центру
Шрифт заголовка: PT Sans
Размер шрифта заголовка: 52 пикс.
Расстояние между буквами заголовка: 1 пиксель
Шрифт: PT Sans
Размер основного шрифта: 20 пикселей

Теперь, наконец, пришло время для последнего ряда. Конечно, при необходимости вы можете добавить больше.

Идите вперед и добавьте структурную строку 1/4 1/4 1/4 1/4 (4 столбца) под предыдущей строкой.

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

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

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

Цвет фона столбца 1: rgba (0,0,0,0.34)
Цвет фона столбца 2: rgba (0,0,0,0.69)
Цвет фона столбца 3: rgba (0,0,0,0.34)
Цвет фона столбца 4: rgba (0,0,0,0.69)

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

Пользовательское заполнение столбца 4: 20 пикселей 20 пикселей 20 пикселей 20 пикселей

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

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

Оцените свой новый макет сетки…

Создание облегченной версии

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

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

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

Цвет фона: rgba (0,0,0,0.12)

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

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

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

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

Цвет текста: темный

Вот и все! Обратите внимание на облегченную версию.

Легко изменить дизайн с помощью параметров фона раздела

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

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

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

Скоро…

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

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

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