Как вертикально выровнять контент в Divi

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

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

Понимание Flex и Divi

Свойство CSS Flex (или Flexbox) - это просто способ позиционирования элементов в горизонтальных и / или вертикальных стеках (что-то вроде таблицы). За исключением того, что, в отличие от традиционных таблиц, свойство flex позволяет создавать блоки, которые подстраиваются или «сгибаются» в соответствии с размером содержимого, которое они содержат.

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

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

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

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

Это действительно необходимо?

Технически нет. Вы можете вертикально выровнять свой контент / модули в столбце, используя настраиваемый интервал (отступы и поля). Например, вы можете использовать параметры интервалов Divi, чтобы задать равное верхнее и нижнее заполнение столбца для центрирования модуля (модулей) по вертикали внутри столбца. Или вы можете добавить к столбцу только верхний отступ, чтобы выровнять содержимое по нижнему краю. Однако вам, возможно, придется отрегулировать интервал при обновлении страницы с дополнительным содержанием. Кроме того, может быть сложно сохранить это выравнивание при разной ширине браузера.

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

Давайте начнем!

Загрузите готовый макет на свою страницу

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

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

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

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

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

margin: auto;

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

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

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

margin: auto auto 0;

Выравнивание содержимого по вертикали для всех столбцов в строке

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

align-items: center;

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

align-items: flex-end;

И не забывайте, что вы можете воспользоваться функцией Divi Extend Styles, щелкнув правой кнопкой мыши по основному элементу с помощью вашего css-фрагмента и выбрав «Extend Main Element».

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

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

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

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

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

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

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

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

display: flex;
flex-direction: column;
justify-content: center;

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

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

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

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

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

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

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

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

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

align-items: center;

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

align-items: flex-end;

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

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

margin: auto auto 0;

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

margin: 0 auto auto;

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

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

Множество приложений

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

Последние мысли

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

Не стесняйтесь делиться своими идеями и комментариями ниже.

Ваше здоровье!