При создании сайта с использованием Divi возможность вертикального выравнивания контента может стать ценным дополнением к вашему набору инструментов для дизайна. В зависимости от макета контент может потребоваться выровнять по вертикали различными способами (по центру, внизу, вверху). Наиболее распространенная необходимость — чтобы ваш материал был выровнен по вертикали. Он добавляет к вашему контенту приятный оттенок симметричного интервала, что очень полезно при использовании макетов с несколькими столбцами. Более того, вертикально центрированный контент остается центрированным по ширине браузера, что устраняет необходимость в настраиваемых отступах или полях для достижения аналогичной отзывчивости.
В этом уроке я научу вас, как вертикально выравнивать контент в любом столбце, используя несколько простых строк CSS. В демонстрационных целях я буду использовать несколько готовых макетов Divi. Вам не стоит беспокоиться, если вы не знакомы с CSS. За считанные секунды вы сможете применить это к своему дизайну.
CSS-атрибут Flex (или Flexbox) — это всего лишь средство для упорядочения элементов в горизонтальные и вертикальные стопки (что-то вроде таблицы). Однако в отличие от типичных таблиц функция гибкости позволяет создавать блоки, которые «подстраиваются» под размер содержащегося в них содержимого.
Divi использует атрибут flex, когда вы выбираете «Выравнивать высоту столбцов» в качестве настройки строки. Проще говоря, это гарантирует, что размер всех ваших столбцов будет соответствовать размеру столбца с наибольшим количеством информации. Поскольку «Выравнивание высоты столбца» активирует гибкость контейнера строк, вы можете использовать ее, добавляя CSS к своим столбцам, чтобы изменить содержимое каждого столбца (или поля).
Если вы добавите «margin: auto» к любому столбцу подряд, amp , содержимое этого столбца (будь то один или несколько модулей) будет центрировано по вертикали.
Все ваши столбцы (и их содержимое) будут центрированы по вертикали, если вы добавите «align-items: center;». к вашему ряду.
Конечно, свойство flex имеет гораздо больше применений в веб-дизайне и более продвинутый CSS, который вы можете использовать в своей теме. Однако в этом уроке я хотел, чтобы все было просто.
В техническом смысле нет. Вы можете использовать произвольный интервал для вертикального расположения содержимого/модулей внутри столбца (отступы и поля). amp , вы можете использовать параметры интервала Divi, чтобы центрировать модуль(и) по вертикали внутри очереди, чтобы обеспечить одинаковое заполнение столбца сверху и снизу. Вы также можете выровнять содержимое по нижнему краю, добавив к столбцу отступы сверху. При добавлении дополнительного контента на страницу вам может потребоваться изменить интервал. Более того, поддержание такого согласования в браузерах разных размеров может оказаться проблематичным.
Итак, если вы ищете способ выровнять информацию по вертикали, не беспокоясь об определенном интервале, я думаю, вы найдете это полезным.
Давайте начнем эту вечеринку!
Я собираюсь начать с макета страницы портфолио компании, занимающейся дизайном интерьера. Создайте новую страницу, чтобы разместить этот макет на своей странице. После этого дайте своей странице имя. Выберите «Использовать Divi Builder», а затем «Использовать Visual Builder» в раскрывающемся меню. Затем выберите «Выбрать готовый макет» в раскрывающемся меню. Затем выберите пакет макетов компании по дизайну интерьера в окне «Загрузить из библиотеки». Наконец, выбрав макеты, выберите страницу «Портфолио» и нажмите «Использовать этот макет».
Вы готовы начать после того, как макет загрузится на вашу страницу.
Откройте настройки второй строки (той, которая находится непосредственно под строкой с заголовком страницы). Откройте группу параметров «Размер» в параметрах дизайна и обратите внимание, что «Выравнивание высоты столбцов» уже активно; Это означает, что к строке добавлено свойство flex («display: flex;»).
В поле ввода «Основной элемент столбца 2» перейдите на вкладку «Дополнительно» для той же строки и добавьте следующий фрагмент CSS.
Содержимое второго столбца теперь перемещено по центру по вертикали.
| 01 | маржа: авто; |
Вы можете изменить значение поля следующим образом, чтобы выровнять контент по нижнему краю, чтобы все модули располагались внизу столбца:
| 01 | поле: авто 0; |
Вы можете центрировать содержимое всех столбцов в строке по вертикали, добавив следующий фрагмент в основной элемент настроек строки, вместо того, чтобы добавлять «поле: авто» к каждому столбцу индивидуально.
| 01 | выровнять-элементы: по центру; |
Вы также можете использовать этот фрагмент, если хотите, чтобы вся информация в ваших столбцах была выровнена внизу:
| 01 | выровнять-элементы: гибкий конец; |
Помните, что вы можете использовать функцию расширения стилей Divi, щелкнув правой кнопкой мыши основной элемент с фрагментом CSS и выбрав «Расширить основной элемент».
Затем, чтобы центрировать по вертикали все содержимое каждого столбца на странице, примените CSS основного элемента ко всем строкам на странице (или разделе).
Теперь все вертикально сбалансировано.
Однако вы, возможно, заметили, что белый цвет фона столбца больше не покрывает всю строку из-за добавления столбца «поля: авто». Вы можете исправить это, изменив цвет фона строки на белый и удалив отступы строк. Вместо этого я научу вас центрировать содержимое столбца без необходимости изменять поля.
Мы использовали свойство flex, сначала добавленное к строке. В результате каждый из наших столбцов стал «гибким блоком», который можно было выровнять по вертикали, изменив поля.
Однако мы можем использовать flex-direction для выравнивания текста нашего столбца, не жертвуя эффектом «Выравнивание высоты столбца», который сохраняет наши столбцы (и фон столбца) одинакового размера. Для этого мы добавим в нашу очередь несколько строк CSS, в результате чего все модули в ней будут расположены вертикально, а затем центрированы.
Вернемся к строке предыдущего amp . Щелкнув правой кнопкой мыши «Пользовательский CSS» и выбрав «Сбросить пользовательские стили CSS», вы можете удалить любой пользовательский CSS, который может быть у вас в настройках строки.
Затем в столбце 2 Main Element примените следующий CSS:
| 010203 | display: flex;flex-direction: columns;justify-content: center; |
Измените «justify-content: center» на «justify-content: flex-end», чтобы выровнять содержимое по нижнему краю.
Мне нравится эта конфигурация, потому что если я расположим контент вертикально и сделаю строку полной ширины, контент останется по центру.
Создание вертикально выровненных рекламных роликов с различным количеством текста
Выравнивание содержимого столбцов по центру по вертикали также может помочь с рекламными объявлениями. Как вы, возможно, знаете, не в каждой аннотации будет одинаковое количество текста, описывающего функцию или услугу. Если вы расположите эти аннотации вертикально по центру, ваш макет будет выглядеть красиво.
Для макета главной страницы цифровых платежей я выровняю аннотации по вертикали в этом amp .
Чтобы создать более реалистичное изображение внешнего вида сайта, я сначала добавляю в аннотации различное количество основного контента.
Теперь мне нужно «Выровнять высоту столбцов» в настройках строк.
Теперь я могу выровнять текст и настроить дизайн с помощью фрагментов CSS.
Мы можем центрировать содержимое наших столбцов по вертикали, добавив следующее в раздел «Основной элемент» на вкладке «Дополнительно» наших настроек строки:
| 01 | выровнять-элементы: по центру; |
Пожалуйста, измените его на следующее, чтобы выровнять их внизу.
| 01 | выровнять-элементы: гибкий конец; |
Вы также можете выровнять первый столбец по нижнему краю, а третий — по верхнему, сбросив пользовательские стили CSS и добавив следующие пользовательские поля.
Столбец 1. Основной элемент CSS:
| 01 | поле: авто авто 0; |
Столбец 3. Основной элемент CSS:
| 01 | маржа: 0 авто авто; |
Вам не нужен фрагмент CSS или гибкий интерфейс, чтобы центрировать контент в одну колонку по вертикали. Все, что вам нужно сделать, это убедиться, что ваш текст имеет одинаковые интервалы сверху и снизу (или модулей). Большинству потребителей требуется вертикально центрированный контент в макетах с множеством столбцов, потому что они хотят, чтобы соседний материал располагался правильно.
Несмотря на то, что это решение основано на нескольких незначительных фрагментах пользовательского CSS, я считаю, что оно может быть полезно для людей, которые ищут быстрое решение трудоемкой процедуры. Пожалуйста, не стесняйтесь поделиться своим мнением об этом подходе, а также amp примерами того, как он сэкономил вам время и усилия в прошлом.
Верхние и нижние колонтитулы веб-сайта являются важными элементами. В большинстве случаев заголовок обеспечивает навигацию…
Две самые популярные темы WordPress на рынке — Astra и OceanWP. Профессиональный…
Чтобы создать отличный новостной сайт, вам не обязательно становиться веб-дизайнером. Мы…
Тема «Газета» — одна из самых важных тем WordPress, разработанная tagDiv,…
Когда дело доходит до создания интернет-магазина, лучше всего plugin WooCommerce. Это…
Заголовок – это, как правило, первое, что видит человек, когда посещает ваш сайт.
Посмотреть комментарии
Спасибо за четкое объяснение. Однако это не работает с модулем блога. Тогда в строке будет только 1 столбец. Количество блогов рядом друг с другом определяется модулем (по умолчанию 3). Можно ли и здесь столбцы сделать одинаковыми?
Привет. Нет, извините, он предназначен только для классических столбцов DIVI, модуль блога DIVI имеет совершенно другой код для выравнивания столбцов.
Что делать, если вы хотите, чтобы модуль был выровнен на 2/3 вниз или на 1/3 сверху, а не идеально посередине сверху или снизу?
Привет, боюсь, что потребуется создать собственный CSS, по умолчанию такой опции нет.
Возможно, вы можете попытаться выровнять контент посередине и добавить к нему отступы, но, пожалуйста, внимательно проверьте рендеринг на всех устройствах.