Как переупорядочить элементы в разных точках останова в Divi 5

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

В этом посте мы рассмотрим, почему переупорядочение элементов имеет значение, как инструменты Divi 5's Flexbox делают это простым, и продемонстрируем шаги по реструктуризации макетов в разных точках отдыха.

Почему вы хотели бы переупорядочить элементы

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

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

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

Как Flexbox от Divi 5 облегчает повторное заказ

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

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

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

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

Пошаговое руководство по отзывчивому переупорядоченности в Divi 5

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

1. Настройте семь пользовательских точек останова

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

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

Вы увидите телефон (до 767px), ширину телефона (до 860px), планшет (до 980px), ширина таблетки (до 1024px), настольный компьютер (более 981px), широкоэкранный (более 1280px) и ультра широкий (более 1440px).

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

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

Перетащите холст до 300px и посмотрите, как ваш трехколонный макет «превратится в один мобильный стек». Потяните его обратно на 1200px и увидите, что ваш контент снова распределяется. Вам не нужно переключать режимы предварительного просмотра или изменить размер окна браузера.

2. Доступ к управлению гибкой

Нажмите на значок «Настройки любой строки», чтобы открыть панель «Настройки» на правой стороне. Перейдите на вкладку Design в верхней части этой панели. В меню макета вы найдете все элементы управления Flexbox от Divi 5. По умолчанию Flex выбирается в стиле макета.

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

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

Ниже приведены параметры оправдания контента для контроля выравнивания и распределения. Между тем, параметры выравнивания элементов появляются прямо под вариантами позиционирования.

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

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

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

Переключитесь на точку перерыва планшета и нажмите кнопку «Изменить структуру». Вместо текущей настройки выберите симметричный макет 2 × 2. Это мгновенно делает представление менее подавляющим, показывая меньше карт в каждом ряду. Отрегулируйте вертикальные и горизонтальные зазоры по мере необходимости для сбалансированного вида. Затем выберите столбец CTA, установите его класс столбцов на полную ширину в настройках размеров и выберите «Расти, чтобы заполнить».

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

Для мобильных устройств используйте опцию «Структура столбца изменения», чтобы переключиться на одноконтактную структуру. В элементах управления Flexbox установите направление макета на обратное столбце. Отрегулируйте пробел до того, что выглядит лучше для вашего контента.

4. Перезаряйте столбцы в точках останова

Использование значений заказа - отличный способ вручную определить порядок детских элементов ваших гибких контейнеров (часто столбцов) в разных размерах экрана. Вкладка «Заказ» в настройках строки дает каждому столбцу число, которое сообщает браузере: «Показать этот столбец в позиции 1, этот в позиции 2» и так далее. Сначала появляются более низкие числа, а более высокие числа появляются последними. Как просто.

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

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

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

Настройка заказа на планшетах и ​​мобильных телефонах

Теперь переключитесь на точку перерыва планшета, используя переключение устройства. И изменить заказы столбца:

Установите столбец 6 (вызов) на «3», чтобы он появлялся в среднем ряду. Оставьте столбцы 1 и 2 как есть столбец 3 как 4, а остальное по желанию. Пользователи планшета видят ваш призыв к действию сразу после предложения о ценности, за которым следует подробные сведения.

Затем переключитесь на Mobile, используя переключение устройства. Измените заказ столбца CTA на «3» и оставьте первый порядок первых двух столбцов, как есть. Сделайте остальную часть заказа столбца аналогична расположению планшета.

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

Управляйте тем, как все складывается с Divi 5

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

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