Під час створення сайту за допомогою Divi опція вертикального вирівнювання вмісту може бути цінним доповненням до вашого інструментарію дизайну. Залежно від макета вміст може знадобитися вирівнювати по вертикалі різними способами (по центру, знизу, вгорі). Найпоширеніша потреба полягає в тому, щоб ваш матеріал був вирівняний вертикально. Це додає чудовий відтінок симетричного інтервалу до вашого вмісту, що дуже корисно при використанні кількох макетів стовпців. Крім того, вертикально відцентрований вміст залишається центрованим по ширині веб-переглядача, усуваючи потребу в користувацьких відступах або полях для досягнення аналогічної чутливості.
У цьому уроці я навчу вас, як вертикально вирівняти вміст у будь-якому стовпці за допомогою кількох простих рядків CSS. Для демонстрації я використаю декілька готових макетів Divi. Вам не потрібно хвилюватися, якщо ви не знайомі з CSS. За лічені секунди ви зможете застосувати це до свого дизайну.
- Розуміння різниці між Flex і Divi
- Це обов'язково?
- Додайте попередньо налаштований макет на свою сторінку.
- Спосіб 1: Вертикальне вирівнювання вмісту за допомогою Flex і Auto Margin
- Вирівнювання вмісту внизу
- Вертикальне вирівнювання вмісту для стовпців вашого рядка
- Спосіб 2: Вирівнювання вмісту по вертикалі за допомогою Column Flex Direction
- А як щодо макетів лише з одним стовпцем?
- Останні думки щодо вертикального та горизонтального вирівнювання DIVI
Розуміння різниці між Flex і Divi
Атрибут CSS Flex (або Flexbox) — це просто засіб для розміщення елементів у горизонтальних і вертикальних стосах (на зразок таблиці). Проте, на відміну від типових таблиць, функція гнучкості дозволяє створювати блоки, які «гнуться» до розміру вмісту, який вони містять.
Divi використовує атрибут flex, коли ви вибираєте «Equalize Column Heights» як налаштування рядка. Простіше кажучи, це забезпечує пристосування розміру всіх ваших стовпців до розміру стовпця з найбільшою кількістю інформації. Оскільки «Вирівняти висоту стовпців» запускає гнучкість для контейнера рядків, ви можете скористатися нею, додавши CSS до своїх стовпців, щоб змінити вміст кожного стовпця (або поля).
Якщо ви додасте «margin: auto» до будь-якого стовпця в рядку, amp , вміст цього стовпця (незалежно від того, чи це один або кілька модулів) буде вертикально по центру.
Усі ваші стовпці (і їхній вміст) будуть відцентровані вертикально, якщо ви додасте «align-items: center;» до свого ряду.
Звичайно, властивість flex має набагато більше застосувань у веб-дизайні та більш просунутий CSS, який ви можете використовувати у своїй темі. Однак я хотів зробити все просто для цього підручника.
Це обов'язково?
У технічному сенсі ні. Ви можете використовувати власний інтервал, щоб розташувати вміст/модулі вертикально всередині стовпця (заповнення та поля). amp , ви можете використати параметри інтервалів Divi, щоб відцентрувати модуль(и) вертикально в черзі, щоб стовпець був однаковим для верхнього та нижнього відступів. Ви також можете зробити вміст вирівняним за низом, додавши верхній відступ до стовпця. Додаючи більше вмісту на свою сторінку, вам може знадобитися змінити інтервали. Крім того, підтримувати це вирівнювання в кількох розмірах браузера може бути проблематично.
Отже, якщо ви шукаєте спосіб вирівняти інформацію по вертикалі, не турбуючись про конкретні інтервали, я думаю, що це буде для вас корисним.
Давайте почнемо цю вечірку!
Додайте попередньо налаштований макет на свою сторінку.
Я збираюся почати з макету сторінки портфоліо компанії Interior Design. Створіть нову сторінку, щоб мати цей макет на своїй сторінці. Після цього дайте своїй сторінці назву. Виберіть «Використовувати Divi Builder», а потім «Використовувати Visual Builder» у спадному меню. Потім у спадному меню виберіть «Вибрати готовий макет». Потім виберіть Interior Design Company Layout Pack у вікні «Завантажити з бібліотеки». Нарешті, серед вибраних макетів виберіть сторінку портфоліо та натисніть «Використовувати цей макет».
Ви готові почати, коли макет завантажиться на вашу сторінку.
Спосіб 1: Вертикальне вирівнювання вмісту за допомогою Flex і Auto Margin
Відкрийте параметри рядка для другого рядка (той, який знаходиться безпосередньо під рядком із заголовком сторінки). Відкрийте групу параметрів «Розмір» у параметрах дизайну та зауважте, що «Вирівняти висоту стовпців» уже активний; Це означає, що до рядка додано властивість flex (“display: flex;”).
У полі введення «Головний елемент стовпця 2» перейдіть до параметрів вкладки «Додатково» для того самого рядка та додайте наведений нижче фрагмент CSS.
Вміст другого стовпця тепер переміщено до вертикального центру.
| 01 | маржа: авто; |
Вирівнювання вмісту внизу
Ви можете змінити значення поля таким чином, щоб зробити ваш вміст вирівняним за низом, щоб усі модулі розміщувалися внизу стовпця:
| 01 | запас: авто 0; |
Вертикальне вирівнювання вмісту для стовпців вашого рядка
Ви можете вертикально відцентрувати вміст усіх стовпців у вашому рядку, додавши наступний фрагмент до основного елемента налаштувань рядка, а не додавати «margin: auto» до кожного стовпця окремо.
| 01 | align-items: center; |
Ви також можете використовувати цей фрагмент, якщо хочете, щоб уся інформація у ваших стовпцях була вирівняна внизу:
| 01 | align-items: flex-end; |
Пам’ятайте, що ви можете скористатися функцією «Розширити стилі» Divi, клацнувши правою кнопкою миші основний елемент із фрагментом CSS і вибравши «Розширити основний елемент».
Потім, щоб вертикально відцентрувати весь вміст кожного стовпця на сторінці, застосуйте CSS головного елемента до всіх рядків сторінки (або розділу).
Тепер все вертикально збалансовано.
Однак ви могли помітити, що білий фоновий колір стовпця більше не охоплює весь рядок через додавання до стовпця «margin: auto». Ви можете виправити це, змінивши колір тла рядка на білий і видаливши заповнення рядка. Натомість я навчу вас, як центрувати вміст вашої колонки без необхідності змінювати поля.
Спосіб 2: Вирівнювання вмісту по вертикалі за допомогою Column Flex Direction
Ми використали властивість flex, яку спочатку додали до рядка. У результаті кожен із наших стовпців став «гнучким полем», який можна було вирівняти по вертикалі, змінивши поля.
Однак ми можемо використовувати flex-direction, щоб вирівняти текст нашого стовпця, не жертвуючи ефектом «Вирівняти висоту стовпця», який зберігає наші стовпці (і фон стовпців) однакового розміру. Щоб досягти цього, ми додамо кілька рядків CSS до нашої черги, щоб усі модулі в ній розмістилися вертикально, а потім по центру.
Повернемося до попереднього рядка amp . Клацнувши правою кнопкою миші користувацький CSS і вибравши «Скинути користувацькі стилі CSS», ви можете видалити будь-який користувацький CSS, який ви можете мати в налаштуваннях рядка.
Потім у стовпці 2 Основний елемент застосуйте такий CSS:
| 010203 | відображення: flex;flex-direction: column;justify-content: center; |
Змініть «justify-content: center» на «justify-content: flex-end», щоб вирівняти вміст знизу.
Мені подобається ця конфігурація, тому що якщо я розміщую свій вміст вертикально та роблю рядок на всю ширину, вміст залишається по центру.
Створення вертикально вирівняних рекламних текстів із різною кількістю тексту
Вирівнювання вмісту стовпців по вертикалі також може допомогти з рекламними оголошеннями. Як ви, напевно, знаєте, не кожна анонса матиме однакову кількість тексту для опису функції чи послуги. Якщо зробити ці рекламні оголошення вертикально по центру, ваш макет може виглядати красиво.
Для макета домашньої сторінки цифрових платежів я вирівняю рекламні оголошення по вертикалі для цього amp .
Щоб створити більш реалістичне зображення зовнішнього вигляду сайту, я спочатку додам різну кількість основного вмісту до рекламних оголошень.
Тепер мені потрібно «Вирівняти висоту стовпців» у налаштуваннях рядків.
Тепер я можу вирівняти свій текст і налаштувати дизайн за допомогою фрагментів CSS.
Ми можемо вертикально відцентрувати вміст наших стовпців, додавши наступне до розділу «Основний елемент» вкладки «Додатково» наших параметрів рядка:
| 01 | align-items: center; |
Змініть його на наступне, щоб вирівняти їх внизу.
| 01 | align-items: flex-end; |
Ви також можете зробити перший стовпець вирівняним за низом, а третій стовпець – за верхом, скинувши власні стилі CSS і додавши наступні спеціальні поля.
Стовпець 1 Основний елемент CSS:
| 01 | margin: auto auto 0; |
Стовпець 3 Основний елемент CSS:
| 01 | margin: 0 auto auto; |
А як щодо макетів лише з одним стовпцем?
Вам не потрібен фрагмент CSS або flex, щоб ваш вміст у один стовпець вирівнявся вертикально по центру. Все, що вам потрібно зробити, це переконатися, що ваш текст має однакові інтервали зверху та знизу (або модулів). Більшості споживачів потрібен вертикально відцентрований вміст у макетах із багатьма стовпцями, оскільки вони хочуть, щоб суміжні матеріали правильно вишикувались.
Останні думки щодо вертикального та горизонтального вирівнювання DIVI
Незважаючи на те, що це рішення ґрунтується на кількох незначних фрагментах спеціального CSS, я вважаю, що воно може бути корисним для людей, які шукають швидке лікування від трудомісткої процедури. Будь ласка, не соромтеся поділитися своїми думками щодо цього підходу, а також amp уроків того, як він заощадив ваш час і зусилля в минулому.
Дякую за чітке пояснення. Однак це не працює з модулем блогу. Тоді в рядку лише 1 стовпець. Кількість блогів один біля одного визначається модулем (за замовчуванням 3). Чи можна стовпці тут також зробити рівними?
Привіт, ні, вибачте, він призначений лише для класичних стовпців DIVI, модуль блогу DIVI має зовсім інший код для вирівнювання стовпців.
Що робити, якщо ви хочете, щоб модуль був вирівняний на 2/3 вниз або на 1/3 зверху, а не ідеально посередині зверху чи знизу?
Привіт, я боюся, що для цього знадобиться створити власний CSS, за замовчуванням такої опції немає.
Можливо, ви можете спробувати вирівняти вміст посередині та додати до нього відступи, але уважно перевірте відтворення на всіх пристроях.