Вложенные ряды против специальных разделов в Divi 5 (и почему мы их устанавливаем)

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

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

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

Подписаться на наш канал на YouTube

Divi 5 готов к использованию на новых веб -сайтах сегодня.

Ретроспектива специальных разделов

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

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

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

Специальные разделы добавили дополнительные поля CSS -класса/ID, которые были необходимы, но не совсем с остальными вариантами застройщика.

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

Разве не было бы хорошо, если бы обычные разделы были достаточно сильны, чтобы делать то, что вам нужно?

Вложенные ряды и лучший способ создать страницы

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

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

Как легко воссоздать специальную секцию с вложенными рядами

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

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

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

Установите ширину секции и максимальную ширину на 100%.

Убедитесь, что строка внутри секции имеет структуру с двумя столбцами и раздел 3/5 + 2/5. Кроме того, установите ширину ряда и максимальную ширину на 100%.

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

В левой колонке будет размещена более сложная сторона (с точки зрения модулей), а в правой колонке будет разместиться большое изображение.

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

Мы только повторим расстояние/размеры на рабочем столе, чтобы проиллюстрировать, как мы можем воссоздать специальный раздел, используя вложенные ряды. Идите вперед и добавьте контент и изображения (опять же, изображения доступны при импорте макета в страницу на вашем сайте). Вы также можете изменить текст и стили цвета, чтобы они соответствовали, как вы видите в форме. Основное изображение в правом столбце должно быть применено в качестве фонового изображения, а модуль изображения с изображением акцента, к которому мы получим позже.

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

Теперь откройте настройки правого столбца непосредственно под родительской строкой. Используйте фоновое изображение столбца.

Модуль изображения внутри этого столбца должен иметь фильтр> Blend> Overlay, установленную на него. В Advanced> позиция изображение абсолютно позиционируется и закреплено слева внизу.

И это почти для воссоздания специальной секции (на рабочем столе). Поскольку мы использовали структуру заданного столбца (3/5 + 2/5 столбцов), Divi имеет некоторые размеры и позиционирование по умолчанию в различных точках останова, которые необходимо решить. Вы можете избежать этого, используя один родительский столбец, но группы модулей для удержания контента для левой и правой стороны этого раздела.

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

Вступив в новое будущее

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

• Madebox Mayouts (скоро) : предложит больше контроля над выравниванием и распределением пространства в рядах.
• Вложенные ряды : бесконечное гнездование структур строк и столбцов, чтобы создать немного сложности с нативной системой строк на основе поплавки.
• Расширенный размер столбцов : добавлено отсутствующие элементы управления размерами для ширины и высот столбцов.
• Группы модулей : позволяет группировать модули для более легкого управления и стиля.
• Переменные дизайна : определить и повторно использовать глобальные переменные (цвета, шрифты, расстояние, изображения, текст) во всех элементах и ​​полях.
• Относительные цвета с HSL (скоро) : динамический, согласованный брендом контроль цвета на основе оттенка, насыщения и легкостью.

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

Divi 5 готов к использованию на новых веб -сайтах сегодня.

Скачать Divi 5learn Подробнее о Divi 5