Как выровнять элементы в одной строке на 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». Затем выберите вариант «Выбрать базовый макет». Затем выберите макет компании Interior Design Company во всплывающем окне «Загрузить из библиотеки». Наконец, выберите страницу портфолио из списка макетов и нажмите «Использовать этот макет».

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

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

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

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

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

Выровнять нижний контент

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

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

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

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

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

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

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

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

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

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

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

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

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

дисплей: гибкий; flex-direction: столбец; justify-content: center;

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

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

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

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

В этом примере я буду вертикально выровнять рекламные объявления по макету домашней страницы Digital Payments.

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

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

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

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

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

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

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

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

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

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

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