Как выровнять по вертикали и горизонтали разделы, строки, столбцы и модули в DIVI Builder

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

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

• Понимание разницы между Flex и Divi
• Это обязательно?
• Добавьте предварительно настроенный макет на свою страницу.
• Метод 1: вертикальное выравнивание содержимого с помощью Flex и Auto Margin
• Выравнивание содержимого по низу
• Вертикальное выравнивание содержимого столбцов вашей строки
• Метод 2: выравнивание содержимого по вертикали с помощью направления гибкости столбца
• А как насчет макетов с одним столбцом?
• Заключительные мысли о вертикальном и горизонтальном выравнивании DIVI

Понимание разницы между Flex и Divi

Атрибут Flex (или Flexbox) CSS - это просто средство для размещения элементов в горизонтальных и вертикальных стеках (вроде как таблица). Однако, в отличие от типичных таблиц, функция гибкости позволяет создавать блоки, которые «сгибаются» в соответствии с размером содержимого, которое они содержат.

Divi использует атрибут flex, когда вы выбираете «Выровнять высоту столбцов» в качестве настройки строки. Проще говоря, это гарантирует, что размер всех ваших столбцов будет соответствовать размеру столбца с наибольшим объемом информации. Поскольку «Выровнять высоту столбца» запускает гибкость для контейнера строки, вы можете использовать его, добавив CSS в свои столбцы, чтобы изменить содержимое каждого столбца (или поля).

Если добавить «маржа: авто» в любом столбце в строке, для экс amp ле, содержание этого столбца (будь то один или несколько модулей) будут выровнены по вертикали.

Все ваши столбцы (и их содержимое) будут центрированы по вертикали, если вы добавите «align-items: center;» в ваш ряд.

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

Это обязательно?

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

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

Давайте начнем эту вечеринку!

Добавьте предварительно настроенный макет на свою страницу.

Я собираюсь начать с макета страницы портфолио компании, занимающейся дизайном интерьеров. Создайте новую страницу, чтобы этот макет был на вашей странице. После этого дайте своей странице имя. В раскрывающемся меню выберите «Использовать Divi Builder», а затем «Использовать Visual Builder». Затем в раскрывающемся меню выберите «Выбрать готовый макет». Затем выберите Пакет макетов компании по дизайну интерьера в окне «Загрузить из библиотеки». Наконец, в выборе макетов выберите страницу «Портфолио» и нажмите «Использовать этот макет».

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

Метод 1: вертикальное выравнивание содержимого с помощью Flex и Auto Margin

Откройте настройки строки для второй строки (той, которая находится непосредственно под строкой с заголовком страницы). Переключите и откройте группу опций «Размер» в опциях дизайна и обратите внимание, что функция «Выровнять высоту столбцов» уже активна; Это означает, что свойство flex («display: flex;») было добавлено в строку.

В поле ввода «Главный элемент столбца 2» перейдите к настройкам вкладки «Дополнительно» для той же строки и добавьте следующий фрагмент CSS.

Теперь содержимое второго столбца перемещено по центру по вертикали.

Выравнивание содержимого по низу

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

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

Вы можете вертикально центрировать содержимое всех столбцов в строке, добавив следующий фрагмент к основному элементу настроек строки, вместо того, чтобы добавлять «margin: auto» к каждому столбцу по отдельности.

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

Помните, что вы можете использовать функцию расширения стилей Divi, щелкнув правой кнопкой мыши основной элемент с помощью фрагмента CSS и выбрав «Расширить основной элемент».

Затем, чтобы центрировать все содержимое каждого столбца на странице по вертикали, примените основной элемент CSS ко всем строкам на странице (или в разделе).

Теперь все вертикально сбалансировано.

Однако вы могли заметить, что белый цвет фона столбца больше не покрывает всю строку из-за добавления в столбец поля «margin: auto». Вы можете исправить это, изменив цвет фона строки на белый и удалив отступы строки. Вместо этого я научу вас, как центрировать содержимое столбца, не меняя поля.

Метод 2: выравнивание содержимого по вертикали с помощью направления гибкости столбца

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

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

Вернемся к предыдущему экс amp ряд ле - х. Щелкнув правой кнопкой мыши «Пользовательский CSS» и выбрав «Сбросить пользовательские стили CSS», вы можете удалить любой пользовательский CSS-код, который может быть у вас в настройках строки.

Затем в главном элементе столбца 2 примените следующий CSS:

Измените «justify-content: center» на «justify-content: flex-end», чтобы выровнять содержимое по нижнему краю.

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

Создание вертикально выровненных размытых изображений с различным количеством текста

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

Для макета домашней страницы цифровых платежей я выровняю по вертикали размытые изображения для этого amp .

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

Теперь мне нужно «Выровнять высоту столбца» в настройках строки.

Теперь я могу выровнять текст и настроить дизайн с помощью фрагментов CSS.

Мы можем вертикально центрировать содержимое наших столбцов, добавив следующее в раздел Main Element на вкладке Advanced в наших настройках строки:

Измените его на следующее, чтобы выровнять их внизу.

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

 Столбец 1, основной элемент CSS:

 Столбец 3 Основной элемент CSS:

А как насчет макетов с одним столбцом?

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

Заключительные мысли о вертикальном и горизонтальном выравнивании DIVI

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