Как расширить модули для создания уникальных макетов столбцов в Divi

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

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

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

Sneak Peek

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

До

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

После

Это макет после расширения двух модулей изображений и трех текстовых модулей, обозначенных номерами «01», «03» и «05».

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

А результат на планшете еще более впечатляющий.

Понимание концепции

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

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

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

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

И одним из плюсов использования шести колонок является то, что дизайн хорошо сохраняется на планшете.

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

Зачем использовать макет из шести столбцов?

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

Этот дизайн также работает с макетом 1/2 1/6 1/6 1/6 столбца и макетом 1/6 1/6 1/6 1/2 столбца, поскольку они оба сохранят три столбца на планшете.

Реализация дизайна

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

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

Для начала создайте новую страницу и разверните визуальный конструктор. Затем выберите «Строить с нуля». Затем добавьте в свой первый раздел макет колонок 1/2 1/6 1/6 1/6.

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

Цвет фона: # 222831
Ширина желоба: 1
Выровнять высоту столбца: ДА
Пользовательское поле: 0 пикселей сверху, 0 пикселей снизу
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

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

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

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

Добавление модулей в строку 1

В первом столбце верхней первой строки добавьте текстовый модуль со следующими настройками:

Цвет текста: светлый
Размер текста текста: 16 пикселей
Пользовательские отступы: 2vw сверху, 2vw снизу, 2vw слева, 2vw справа

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

Заголовок: [введите заголовок]
Содержание: [удалить]
Значок: [выберите значок]
Цвет значка: #eeeeee
Размер шрифта значка: 50 пикселей
Цвет текста: светлый
Ориентация текста: по центру
Пользовательские набивки: 3vw сверху, 2vw снизу

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

В третьем столбце добавьте изображение.

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

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

Показать разделитель: НЕТ
Отключить на: Телефон

Добавление модулей в строки 2 и 3

Теперь перейдем к строке 2. В первом столбце скопируйте и вставьте модуль рекламного объявления, который вы создали, во второй столбец первой строки. Затем измените цвет значка и заголовка на черный цвет.

Затем добавьте текстовый модуль во второй столбец со следующим:

Содержание:

<h2>Product</h2>
01

Цвет текста текста: #ffffff
Размер текста текста: 50 пикселей
Высота текстовой строки: 1em
Ориентация текста: вправо
Выравнивание текста заголовка 2: по левому краю
Цвет текста заголовка 2: #ffffff
Высота строки заголовка 2: 3em
Пользовательские отступы: 2vw сверху, 2vw снизу, 2vw слева, 2vw справа

Затем скопируйте только что созданный текстовый модуль и вставьте его в столбцы 4 и 6.

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

В столбце 2 строки 3 добавьте еще одно изображение.

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

Вот как должен выглядеть ваш макет на этом этапе (пустые квадраты представляют модуль разделителя):

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

На этом этапе мы можем начать расширять наши модули с использованием отрицательного поля. Это очень просто сделать.

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

Затем добавьте -100% Left Margin к текстовому модулю в строке 2, столбце 3.

Теперь скопируйте стили модуля и вставьте их в текстовые модули в строке 2, столбец 6, а также в текстовый модуль в строке 3, столбец 5.

Осталось только расширить изображение в строке 3, столбце 2. Обновите модуль изображения с настраиваемым полем -100% слева.

Добавление цветов фона к столбцам

Последний этап дизайна - добавление цвета фона к вашим столбцам. Для первой (верхней) строки добавьте следующее:

Цвет фона столбца 1: # 393e46

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

Цвет фона столбца 1: #eeeeee
Цвет фона столбца 4: # 7971ea
Цвет фона столбца 5: # 393e46
Цвет фона столбца 6: # 393e46

И в последнюю строку добавьте следующее:

Цвет фона столбца 3: # 7971ea
Цвет фона столбца 6: # 7971ea

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

Настройка макета для дисплея смартфона

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

Обычно, если я хочу исправить отрицательную маржу на смартфоне, я просто устанавливаю левое поле на 0% в настройках модуля для смартфонов. Однако по-прежнему потребуется корректировка для размеров экрана от 479 пикселей до 767 пикселей в ширину. Из-за этого лучший способ исправить отрицательную маржу на смартфоне - это сделать это с помощью фрагмента пользовательского CSS.

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

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

Этот фрагмент CSS устанавливает для правого и левого полей всех модулей значение 0%, если размер экрана равен или меньше 479 пикселей в ширину. Это прекрасно решает проблему!

Теперь посмотрим на окончательный дизайн.

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

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

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

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