Как проявить творческий подход с помощью 6-колоночного блока строк и окна просмотра Divi

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

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

Давайте приступим к делу!

Предварительный просмотр

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

Подход

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

Приступим к созданию

Предварительный просмотр серверной части

Это конечный результат с точки зрения серверной части:

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

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

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

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

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

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

Интервал

Также добавьте к строке несколько настраиваемых отступов слева и справа.

• Левое заполнение: 6.5vw
• Правая прокладка: 6.5вВт

Добавить модуль текста заголовка в столбец 6

Добавить содержимое

Пора начинать добавлять модули! Мы начнем с добавления заголовка "Текстовый модуль" в столбец 6. Включите какую-нибудь копию заголовка 2 по выбору.

Настройки текста заголовка

Затем перейдите на вкладку дизайна и измените настройки текста заголовка модуля.

• Шрифт заголовка 2: Battambang
• Толщина шрифта заголовка 2: полужирный
• Размер текста заголовка 2: 4.2vw (рабочий стол), 10vw (планшет), 8vw (телефон)
• Интервал между буквами заголовка 2: -1px

Интервал

Добавьте несколько значений пользовательского интервала рядом, чтобы эта строка перекрывала 6-й и 5-й столбцы строки.

• Верхняя маржа: 10vw
• Левое поле: -8vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: -50vw (планшет и телефон)

Добавить текстовый модуль описания в столбец 6

Добавить содержимое

Следующий модуль, который нам понадобится в столбце 6, - это текстовый модуль описания. Добавьте контент по выбору.

Интервал

Затем перейдите к настройкам интервалов и также сдвиньте этот модуль влево.

• Верхняя маржа: 2vw
• Левое поле: -8vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: -50vw (планшет), -3vw (телефон)

Добавить модуль кнопок в столбец 6

Добавить копию

Следующий и последний модуль, необходимый в столбце 6, - это кнопочный модуль. Добавьте какую-нибудь копию по выбору.

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: #ffffff
• Ширина границы кнопки: 1 пиксель
• Цвет границы кнопки: # 000000
• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: -2 пикселя

Интервал

И снова нам нужно, чтобы этот модуль перекрывал столбцы 5 и 6, используя пользовательские значения полей в настройках интервалов.

• Верхнее поле: 2vw (рабочий стол), 5vw (планшет), 10vw (телефон)
• Левое поле: -8vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: -50vw (планшет и телефон)
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Добавить модуль изображения №1 в столбец 1

Размеры изображения

Пора начинать добавлять различные модули изображений! Пример, который мы воссоздаем, на 100% адаптивен, если вы используете только изображения с шириной 880 пикселей и высотой 1320 пикселей . Итак, если вы хотите создать точно такой же пример с нуля, вам следует использовать изображения с этим конкретным набором размеров. Однако, если вы хотите, чтобы эта работа работала для любого набора размеров изображения, вам придется вручную настроить единицы окна просмотра каждого модуля изображения, чтобы они соответствовали общему дизайну.

Загрузить изображение

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

Интервал

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

• Верхняя маржа: 0.5vw (только для планшетов и телефонов)
• Нижняя маржа: 0.5vw (только для планшетов и телефонов)
• Левое поле: -5vw (рабочий стол), 0.5vw (планшет и телефон)
• Правое поле: -2vw (рабочий стол), 0.5vw (планшет и телефон)

Добавить модуль изображения №2 в столбец 1

Загрузить изображение

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

Интервал

И также измените настройки интервала этого модуля.

• Верхнее поле: 0,4vw (ПК), 0,5vw (планшет и телефон)
• Нижняя маржа: 0.5vw (только для планшетов и телефонов)
• Левое поле: -8.1vw (рабочий стол), 0.5vw (планшет и телефон)
• Правое поле: 3,7 МВт (рабочий стол), 0,5 МВт (планшет и телефон)
• Левый отступ: 3vw (рабочий стол), 0vw (планшет и телефон)
• Правая прокладка: 3vw (рабочий стол), 0vw (планшет и телефон)

Добавить модуль изображения № 3 в столбец 2

Загрузить изображение

Переходим ко второй колонке! Добавьте новый модуль изображения и загрузите изображение.

Интервал

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

• Верхняя маржа: 0.5vw (только для планшетов и телефонов)
• Нижняя маржа: 0.5vw (только для планшетов и телефонов)
• Левое поле: -0.5vw (рабочий стол), 0.5vw (планшет и телефон)
• Правое поле: 0.5vw (только для планшетов и телефонов)
• Левый отступ: 3vw (рабочий стол), 0vw (планшет и телефон)
• Правая прокладка: 3vw (рабочий стол), 0vw (планшет и телефон)

Добавить модуль изображения №4 в столбец 2

Загрузить изображение

Также добавьте второй модуль изображения в столбец 2.

Интервал

И здесь также измените настройки интервала.

• Верхняя маржа: 0.5vw
• Нижняя маржа: 0.5vw (только для планшетов и телефонов)
• Левое поле: -0.5vw (рабочий стол), 0.5vw (планшет и телефон)
• Правое поле: 0.5vw (только для планшетов и телефонов)
• Левый отступ: 3vw (рабочий стол), 0vw (планшет и телефон)
• Правая прокладка: 3vw (рабочий стол), 0vw (планшет и телефон)

Добавить модуль изображения №5 в столбец 3

Загрузить изображение

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

Интервал

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

• Верхняя маржа: 0.5vw (только для планшетов и телефонов)
• Нижняя маржа: 0.5vw (только для планшетов и телефонов)
• Левое поле: -2,5 МВт (рабочий стол), 0,5 МВт (планшет и телефон)
• Правое поле: -17,5 МВт (настольный ПК), 0,5 МВт (планшет и телефон)

Добавить модуль изображения №6 в столбец 3

Загрузить изображение

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

Интервал

И измените всю его позицию, добавив собственные значения маржи. Для удобства мы добавляем этот модуль в столбец 3 вместо столбца 2.

• Верхняя маржа: -26,7 МВт (настольный ПК), 0,5 МВт (планшет и телефон)
• Нижняя маржа: 0.5vw (только для планшетов и телефонов)
• Левое поле: -20,5 МВт (рабочий стол), 0,5 МВт (планшет и телефон)
• Правое поле: 17,3 МВт (рабочий стол), 0,5 МВт (планшет и телефон)

Включить лайтбокс для графического модуля №1

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

• Открыть в лайтбоксе: Да

Копировать вариант лайтбокса и применить ко всем изображениям в разделе

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

Добавить радиус границы к модулю изображения №1

Также добавьте закругленные углы к первому модулю изображения.

Расширить радиус границы для всех изображений в разделе

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

Предварительный просмотр

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

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

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