Під час створення сайту за допомогою Divi можливість вертикального вирівнювання вмісту може стати цінним доповненням до вашого набору інструментів для дизайну. Залежно від макета вміст може бути вирівняно по вертикалі різними способами (по центру, знизу, зверху). Найпоширеніша потреба полягає в тому, щоб ваш матеріал був вирівняний по вертикалі. Це додає чудовий відтінок симетричного інтервалу до вашого вмісту, що дуже корисно при використанні кількох макетів стовпців. Крім того, вертикально центрований вміст залишається центрованим по ширині браузера, усуваючи потребу в спеціальному заповненні або полях для досягнення подібної швидкості реагування.
У цьому уроці я навчу вас, як вертикально вирівнювати вміст у будь-якому стовпці за допомогою кількох простих рядків CSS. Для демонстраційних цілей я буду використовувати кілька збірних макетів Divi. Вам не потрібно турбуватися, якщо ви не знайомі з CSS. За лічені секунди ви зможете застосувати це до свого дизайну.
- Розуміння різниці між Flex і Divi
- Це потрібно?
- Додайте попередньо налаштований макет на свою сторінку.
- Метод 1. Вертикальне вирівнювання вмісту за допомогою Flex і Auto Margin
- Вирівнювання вмісту знизу
- Вертикальне вирівнювання вмісту для стовпців вашого рядка
- Спосіб 2. Вирівнювання вмісту по вертикалі за допомогою напряму гнучкості стовпця
- А як щодо макетів лише з одним стовпцем?
- Останні думки щодо вертикального та горизонтального вирівнювання DIVI
Розуміння різниці між Flex і Divi
Атрибут Flex (або Flexbox) CSS — це лише засіб для розміщення елементів у горизонтальних і вертикальних стеках (як у таблиці). Однак, на відміну від типових таблиць, функція flex дозволяє створювати блоки, які «гнуться» відповідно до розміру вмісту, який вони містять.
Divi використовує атрибут flex, коли ви вибираєте «Вирівнювати висоту стовпців» як налаштування рядка. Простіше кажучи, це гарантує, що розмір усіх ваших стовпців відповідає розміру стовпця з найбільшою інформацією. Оскільки «Вирівнювання висоти стовпців» запускає гнучкість для контейнера рядків, ви можете скористатися ним, додавши CSS до своїх стовпців, щоб змінити вміст кожного стовпця (або поля).
Якщо додати «маржа: авто» в будь-якому стовпці в рядку, для екс amp ле, зміст цього стовпчика (будь то один або кілька модулів) будуть вирівняні по вертикалі.
Усі ваші стовпці (та їх вміст) будуть відцентровані по вертикалі, якщо ви додасте «align-items: center;» до вашого ряду.
Звичайно, властивість flex має набагато більше додатків у веб-дизайні та більш просунутих CSS, які ви можете використовувати у своїй темі. Однак я хотів, щоб усе було простішим для цього підручника.
Це потрібно?
У технічному сенсі — ні. Ви можете використовувати спеціальний інтервал, щоб розташувати вміст/модулі вертикально в межах стовпця (заповнення та поля). Для екс amp ля, ви можете використовувати параметри інтервалів DiVi до центру (модулі) по вертикалі в черзі , щоб дати стовпець , рівні верхні і нижні відступи. Ви також можете вирівняти вміст знизу, додавши верхній відступ до стовпця. Під час додавання додаткового вмісту на свою сторінку вам може знадобитися змінити інтервал. Крім того, підтримання цього вирівнювання в різних розмірах браузера може бути проблематичним.
Тож, якщо ви шукаєте спосіб вирівняти інформацію по вертикалі, не турбуючись про певний інтервал, я думаю, вам це стане в нагоді.
Давайте розпочнемо цю вечірку!
Додайте попередньо налаштований макет на свою сторінку.
Я почну з макета сторінки портфоліо компанії дизайну інтер’єру. Створіть нову сторінку, щоб мати цей макет на своїй сторінці. Після цього дайте своїй сторінці назву. Виберіть «Використовувати Divi Builder», а потім «Використовувати Visual Builder» зі спадного меню. Потім виберіть «Вибрати готовий макет» зі спадного меню. Потім виберіть пакет макетів компанії дизайну інтер’єру у вікні «Завантажити з бібліотеки». Нарешті, вибравши макети, виберіть сторінку «Портфоліо» та натисніть «Використовувати цей макет».
Ви готові почати, коли макет завантажиться на вашу сторінку.
Метод 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. Вирівнювання вмісту по вертикалі за допомогою напряму гнучкості стовпця
Ми використали властивість flex, вперше додану до рядка. В результаті кожен з наших стовпців став «гнучкою коробкою», яку можна було вирівняти по вертикалі, змінивши поле.
Однак ми можемо використовувати flex-direction для вирівнювання тексту нашого стовпця, не жертвуючи ефектом «Вирівнювання висоти стовпця», який зберігає наші стовпці (і фон стовпців) однакового розміру. Щоб досягти цього, ми додамо кілька рядків CSS до нашої черги, завдяки чому всі модулі в ній будуть складені вертикально, а потім відцентровані.
Повернемося до попереднього екс amp ряд ле - х. Клацнувши правою кнопкою миші на користувацькому CSS і вибравши «Скинути користувацькі стилі CSS», ви можете видалити будь-який користувацький CSS, який у вас є в налаштуваннях рядка.
Потім у головному елементі стовпця 2 застосуйте такий CSS:
| 010203 | display: 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 та додавши наступні користувацькі поля.
Основний елемент CSS стовпця 1:
| 01 | поле: автоматичне автоматичне 0; |
Основний елемент CSS стовпця 3:
| 01 | поле: 0 авто авто; |
А як щодо макетів лише з одним стовпцем?
Вам не потрібен фрагмент CSS чи flex, щоб вміст із одним стовпцем було відцентровано по вертикалі. Все, що вам потрібно зробити, це переконатися, що ваш текст має однакові інтервали зверху і знизу (або модулів). Більшість споживачів вимагають вертикально відцентрованого вмісту на макетах з багатьма стовпцями, оскільки вони хочуть, щоб сусідній матеріал розташовувався правильно.
Останні думки щодо вертикального та горизонтального вирівнювання DIVI
Незважаючи на те, що це рішення спирається на кілька незначних фрагментів користувацького CSS, я вважаю, що воно може бути корисним для людей, які шукають швидке лікування від тривалої процедури. Будь ласка, не соромтеся поділіться своїми думками щодо цього підходу, а також amp того, як він заощадив ваш час і зусилля в минулому.
Bedankt voor de duidelijke uitleg. Bij een Blog module werkt dit echter niet. Dan is er in de row maar 1 kolom. Тут розміщено блоги, що містять модуль (за замовчуванням 3). Zijn hier de kolommen ook gelijk te maken?
Привіт, на жаль, це лише для класичних стовпців DIVI, модуль блогу DIVI має зовсім інший код для вирівнювання стовпців.
Що робити, якщо ви хочете, щоб модуль був вирівняний на 2/3 вниз або на 1/3 зверху, а не ідеально посередині зверху або знизу?
Привіт, я боюся, що для цього знадобиться створити спеціальний CSS, за замовчуванням такої опції немає.
Можливо, ви можете спробувати вирівняти вміст посередині та додати до свого вмісту трохи відступів, але уважно перевірте відтворення на всіх пристроях.