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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выравнивание контента внизу

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

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

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

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

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

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

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

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

Метод 2. Выравнивание контента по вертикали с использованием направления гибкого столбца

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

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

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

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

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

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

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

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

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

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

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

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

Мы можем центрировать содержимое наших столбцов по вертикали, добавив следующее в раздел «Основной элемент» на вкладке «Дополнительно» наших настроек строки:

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

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

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

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

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

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

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

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