Пропустить

Как выровнять элементы в одной строке на Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

шаблон divi тема wordpress.png

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

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

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

согласовать высоты столбцов .png

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

marginauto;

автоматический margin divi.png

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

marginauto 0;

margin divi line.png

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

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

align-items: center;

выровнять элементы divi.png

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

align-items: flex-end;

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

расширить основной элемент.png

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

развернуть стили на divi.png

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

появление изменений divi.png

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

Усилитель рулевого управления Flex-column.png

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

flex alignment end.png

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

появление box.png

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

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

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

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

выравнивание blorbds.png

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

гармонизировать columns.png

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

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

align-items: center;

Изменить выравнивание контента divi.png

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

align-items: flex-end;

выравнивание внизу divi.png

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

marginauto auto 0;

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

margin0 auto auto;

настроить выравнивание рефератов divi.png

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

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

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
4 акции
доля2
чирикать
Регистрация2