Как создать равные столбцы с помощью Flexbox в Divi 5

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

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

Равные высоты столбца в Divi 4

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

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

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

Как Flexbox в Divi 5 адресах равны столбцам

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

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

Как создать равные высоты столбца в Divi 5

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

Шаг 1: Создайте свой дизайн

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

Когда появится диалоговое окно «Новый раздел», выберите трехколонный макет под равными столбцами .

Добавьте групповой модуль в первом столбце.

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

Выберите значок проверки на вкладке Content.

На вкладке «Дизайн» установите цвет значка на #2EA3F2 и размер значка до 36px.

Затем добавьте модуль заголовка под модулем значка. Обязательно добавьте заголовок в групповой модуль, нажав на значок Black + вместо серых.

Введите веб -дизайн как заголовок на вкладке Content .

На вкладке «Дизайн» выберите H5 в качестве уровня заголовка , Inter As Heading Font , и средний в качестве веса шрифта заголовка . Установите стиль шрифта заголовка на верхний выравнивание текста влево , заголовок текста в #000000 и сохранить размер текста заголовка по размеру по умолчанию 16px .

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

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

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

Шаг 2: дублирующие столбцы

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

Затем измените заголовок заголовка во 2 -м столбце на кодирование , и заголовок заголовка в 3 -м столбце на маркетинг . Мы также удалим часть контента в текстовом модуле во 2 -м столбце, чтобы мы могли продемонстрировать, как Divi 5 обрабатывает Flexbox с различной длиной контента. Как видите, столбцы неровные.

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

Мы также добавим радиус границы 15px и ширину границы 1PX с #666666 в качестве цвета.

Последний шаг в разработке нашей строки - скопировать атрибуты дизайна из 1 -го столбца и вставить их в оставшиеся столбцы. Щелкните правой кнопкой мыши на первом столбце и выберите стили копирования элементов . Затем щелкните правой кнопкой мыши на 2-м столбце и выберите стиль вставки . Повторите это действие и для 3 -го столбца.

Шаг 3: Настройте настройки Flexbox для равных высот

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

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

Далее нажмите на настройки для первого столбца. Нажмите на выпадающее меню макета, чтобы показать его настройки на вкладке «Дизайн» . По умолчанию Flex будет выбрана под макетом . В поле направления макета выберите столбец . Под оправданием контента выберите пространство между . Совместите все элементы с началом (слева) и оставьте макетную упаковку , чтобы не было обертываться .

Повторите шаги выше для 2 -го и 3 -го столбца. Вы также можете использовать функции копирования/вставки или расширения, чтобы применить те же настройки к оставшимся столбцам строки.

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

Шаг 4: Тестовая отзывчивость

Настраиваемые отзывчивые точки отзывчиков Divi 5 позволяют легко гарантировать, что ваши равные высоты столбца отлично выглядят на всех устройствах. Используйте переключатели с отзывчивым представлением, чтобы предварительно просмотреть свой макет в визуальном строителе. По умолчанию есть три точки останова. Тем не менее, Divi 5 теперь имеет 7, что может быть легко включено, нажав меню Ellipsis на панели инструментов в верхней части визуального строителя. Включите точки останова, которые вы хотите, и нажмите «Сохранить» , чтобы применить их.

Нажмите, чтобы предварительно просмотреть свой макет в представлении планшета . Как вы можете видеть, Flexbox держит столбцы в сложенных бок о бок.

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

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

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

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

Общие варианты использования

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

1. Списки продуктов

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

2. Избранные разделы

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

3. Портфолио сетки

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

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

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

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

СКАЧАТЬ

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

Познакомьтесь с функцией Flexbox от Divi 5 сегодня

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

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