Как вертикально выровнять с системой макета Flexbox от Divi 5

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

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

Понимание системы макета Flexbox от Divi 5

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

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

Как Divi 5 интегрирует Flexbox

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

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

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

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

Divi 5 уходит от специальных и полных разделов. Эти достижения делают систему макета Flexbox от Divi 5 мощным инструментом для создания современных, адаптируемых макетов непосредственно внутри строителя.

Настройка вертикального выравнивания в Divi 5

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

Вертикальное выравнивание в разделе

В настройках раздела перейдите на вкладку Design и найдите параметры макета , где вы найдете элементы управления Flexbox.

Убедитесь, что Flex выбирается в стиле макета . Это гарантирует, что Flexbox включен для раздела.

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

Вертикальное выравнивание в ряд

Вы также можете вертикально выравнивать контент на уровне строк. Однако в этом примере мы будем использовать элементы выравнивания , а не оправдать контент, чтобы вертикально выравнивать модули в строке. На вкладке «Дизайн» для строки найдите настройки макета . Убедитесь, что вы включите Flex и найдите настройки Align Items . По умолчанию выбирается старт , и это выравнивает все модули в строке до вершины контейнера.

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

Вертикальное выравнивание на нескольких рядах

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

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

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

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

Вертикальное выравнивание в группах модулей

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

Чтобы выровнять элементы, нажмите на первый столбец группы модулей, перейдите на вкладку Design и найдите настройки Flex. Установить оправдание контента в пространство между . Это равномерно распределяет модули в столбце, идеально выровняя кнопки «Читать больше» по всем столбцам без пользовательских CSS. Этот подход обеспечивает последовательные, профессиональные макеты для динамического контента, таких как сетки блогов или списки продуктов.

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить свою подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Советы для отзывчивого вертикального выравнивания

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

Используйте настраиваемые отзывчивые точки отзывчиков Divi 5

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

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

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

Используйте переменные дизайна Divi 5

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

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

Flexbox облегчает вертикальное выравнивание

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

Загрузите новейшую Divi 5 Alpha и экспериментируйте с системой макетов Flexbox в новом проекте.