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

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

Мы добрались до второй части серии! И я должен сказать, что мне очень нравится создавать эти макеты. Сегодня я собираюсь показать вам, как создать макет сетки для ваших видео, который напоминает раздел функций на странице продукта или целевой странице. Этот макет состоит из последовательности строк в 1/2 1/2 столбца, каждая из которых содержит видео и соответствующее описание в каждом из двух столбцов. Затем в следующем разделе порядок видео и описания меняются слева направо, а затем справа налево. Поскольку каждая строка занимает всю ширину страницы, а каждый столбец сохраняет одинаковую высоту по вертикали, макет выглядит потрясающе на всех размерах экрана.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет значка воспроизведения: rgba (255,255,255,0,87)

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

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

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

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

Название: [введите название видео]
Содержание: [введите описание видео]
Ссылка: [вы можете ввести URL-адрес ссылки на другую страницу, если хотите]
Значок использования: ДА
Значок: [выберите значок]

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

Цвет значка: # 666666
Цвет текста: светлый
Ориентация текста: по центру
Шрифт заголовка: Roboto
Размер шрифта заголовка: 52 пикс.
Расстояние между буквами заголовка: 1 пиксель
Шрифт основного текста: Open Sans
Размер основного шрифта: 20 пикселей
Цвет основного текста: #dddddd
Настраиваемый отступ на рабочем столе: 5% сверху (вам может потребоваться отрегулировать это в зависимости от количества текста в вашем описании)
Пользовательское заполнение на планшете и смартфоне: 20 пикселей сверху, 20 пикселей снизу

Расширенные настройки

Анимация изображения / значка: справа налево (эта анимация в сочетании со значком стрелки привлечет дополнительное внимание к видео слева.

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

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

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

Фоновое изображение: [введите фоновое изображение (у меня 2000 x 2200)]

Использовать эффект параллакса: ДА
Метод параллакса: истинный параллакс

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

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

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

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

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

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

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

Сейчас все начинает становиться на свои места. У вас есть фоновое изображение, и вы создали свою первую строку. Теперь вы готовы продублировать эту строку. Щелкните значок дубликата в строке меню строки в визуальном построителе.

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

Теперь вам просто нужно обновить содержимое видеомодуля, чтобы включить новый URL-адрес видео и новое изображение обложки. Для модуля Blurb вам нужно будет обновить заголовок и контент, соответствующий вашему видео. И вам также нужно будет настроить значок рекламного объявления на стрелку, указывающую вправо (если вы использовали тот же значок, что и я), и переключить анимацию изображения / значка на «Слева направо».

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

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

Мы продвигаемся вперед. Теперь посмотрим, как выглядят наши первые две строки…

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

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

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

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

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

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

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

Фоновое изображение: [введите светлое фоновое изображение]

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

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

Цвет фона столбца 2: rgba (255,255,255,0,68)

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

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

Цвет значка: # 333333
Цвет текста: темный
Цвет текста заголовка: # 444444
Шрифт тела: Roboto
Цвет основного текста: # 666666

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

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

Цвет фона столбца 1: rgba (255,255,255,0,45)

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

Вот и все! Проверьте окончательный результат.

Отзывчивый?

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

Скоро…

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

Надеюсь, вам пока нравится этот сериал. Я с нетерпением жду вашего ответа в комментариях.

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