Коли верстаєш лендинг на Elementor, десктопна сітка виглядає ідеально: три колонки, чіткий порядок, усе дихає. Відкриваєш на планшеті, і третя колонка з’їжджає вниз, ламає ритм, залишає дірку справа. Знайомо?

Elementor за замовчуванням переносить колонки, які не вміщуються в рядок на вузькому екрані. Але що, якщо на планшеті вам потрібно не три, а рівно дві колонки в ряд, без розривів і без порожнього місця? Або на мобільному не одна, а дві?

Нижче два робочі методи: вбудований (для версій Elementor 2024+) і кастомний CSS (для повного контролю над будь-якими версіями). Обидва протестовані й не конфліктують з оптимізацією DOM.

💡 Швидкий огляд:

• Налаштуйте ширину колонок в Elementor через вкладку Advanced для кожної контрольної точки окремо
• Якщо стандартних налаштувань не вистачає, підключіть кастомний CSS із flex-wrap і медіазапитами
• Перевірте розкладку на всіх пристроях: колонки перебудовуються без розривів і порожніх місць

Наочно процес показано в цьому відео:

1. Вбудований метод: responsive-ширина колонок

Починаючи з Elementor 3.18+ (і особливо з переходом на Flexbox-контейнери у 2024 році), керувати шириною колонок на кожному пристрої можна без жодного рядка коду.

Створюємо секцію з колонками

Додайте нову секцію та виберіть структуру з трьох колонок:

Продублюйте кожну з трьох колонок, вийде шість. Це потрібно, щоб на планшеті колонки перебудувалися у два ряди по дві, а не залишили третю наодинці:

Щоб бачити розкладку, заповніть колонки номерами через віджет «Заголовок», так на прев’ю одразу видно, яка куди стала:

Налаштування ширини під кожен пристрій

Зайдіть у налаштування кожної колонки → вкладка Advanced (Додатково). У секції Width (Ширина) перемкніться на responsive-режим (іконка планшета/телефона) і задайте значення згідно з документацією Elementor:

• Desktop: три колонки в ряд (ширина поділиться автоматично)
• Tablet: дві в ряд
• Mobile: одна в ряд (або дві, якщо на мобільному теж потрібно дві)

Ключовий момент: ширина задається для кожної з шести колонок окремо, Elementor застосовує значення до всіх колонок усередині однієї секції. Жодних переносів не буде, тому що на планшеті шість колонок дають рівно два ряди по дві.

2. Кастомний CSS: повний контроль

Вбудований метод покриває більшість сценаріїв, але іноді потрібна інша кількість колонок на планшеті (2 замість 3), а на мобільному нестандартна (2 замість 1). Або у вас стара версія Elementor без responsive-ширини. Тоді CSS.

Присвоюємо CSS-клас секції

Відкрийте налаштування секції → вкладка Advanced → поле CSS Classes. Пропишіть унікальний клас, наприклад, elementor-custom-columns:

Додаємо CSS-правила

Вставте код у налаштування секції (вкладка Advanced → Custom CSS) або в кастомайзер теми (Зовнішній вигляд → Налаштувати → Додаткові стилі). Ось актуальна версія:

1
selector.elementor-custom-columns .elementor-container {
2
  flex-wrap: wrap;
3
  justify-content: center;
4
}

А тепер ширина колонок під кожен пристрій через медіазапити. Для секцій (Sections) використовуйте селектор .elementor-top-column, для контейнерів (Containers), .e-con-inner > .e-con:

1
/* Базово: три колонки на десктопе */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Планшет: две колонки */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Мобильный: одна колонка */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

Що тут відбувається: flex-wrap: wrap дозволяє перенос колонок, коли вони не вміщуються в рядок, а justify-content: center вирівнює решту колонок по центру (без дірки справа). Медіазапити перевизначають ширину на кожній контрольній точці, рівно стільки колонок у ряд, скільки потрібно.

Результат на пристроях

На десктопі три акуратні колонки:

На планшеті рівно дві в ряд, без розривів і пустот:

На мобільному одна колонка на всю ширину:

Для тих, хто ввімкнув оптимізацію DOM

Якщо в налаштуваннях Elementor (Elementor → Settings → Experiments) активовано опцію Improved DOM Optimization, селектори змінюються, .elementor-row зникає. Адаптований CSS для цього режиму:

1
selector.elementor-custom-columns {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
}
6
 
7
.elementor-custom-columns .elementor-top-column {
8
  width: 33.33%;
9
}
10
 
11
@media (min-width: 768px) and (max-width: 1024px) {
12
  .elementor-custom-columns .elementor-top-column {
13
    width: 50%;
14
  }
15
}
16
 
17
@media (max-width: 767px) {
18
  .elementor-custom-columns .elementor-top-column {
19
    width: 100%;
20
  }
21
}

Перевірений приклад коду для цього сценарію також доступний у GitHub Gist від oooh-boi, робочий, протестований на Elementor 3.19+ з увімкненою DOM-оптимізацією.

Який метод обрати: таблиця порівняння

Якщо у вас свіжа версія Elementor і стандартна сітка (2-4 колонки), беріть вбудований метод, він швидший і не потребує CSS. Якщо потрібна нестандартна розкладка, ви використовуєте стару версію плагіна або ввімкнули DOM-оптимізацію, кастомний CSS дасть повний контроль.

⁉️🤔 Часті запитання

Чому колонки переносяться з розривом на планшеті?

Elementor за замовчуванням використовує flex-wrap: nowrap для рядка колонок. Коли три колонки не вміщуються в планшетну ширину, утворюється розрив: друга колонка на першому рядку, третя йде на другий і залишається одна. З flex-wrap: wrap і шириною колонок у половину рядка на планшеті шість колонок укладаються рівно в три ряди по дві, без розривів. justify-content: center центрує колонки, якщо в останньому ряду їх менше, ніж потрібно. Рішення: або responsive-ширина через UI (метод 1), або flex-wrap: wrap із медіазапитами (метод 2).

Чи працює метод із контейнерами (Flexbox Containers)?

Так, але селектори інші. Для контейнерів замість .elementor-top-column використовуйте .e-con-inner > .e-con, а замість .elementor-container, сам контейнер. Вбудований responsive-метод (№1) працює з контейнерами без правок.

Чи обов’язково дублювати колонки?

Так, якщо на планшеті вам потрібно менше колонок у ряду, ніж на десктопі. Наприклад: десктоп, 3 колонки, планшет, 2. Три вихідні колонки не вийде перебудувати у два акуратні ряди по дві. Шість колонок (кожна продубльована) перебудовуються у три ряди по дві.

Чи конфліктує це з плагінами кешування?

CSS-правила, додані через Custom CSS секції або кастомайзер, потрапляють в інлайн-стилі або wp_head, вони проходять через будь-який кеш-плагін (WP Rocket, W3 Total Cache, LiteSpeed) без проблем. Після зміни CSS скиньте кеш.

Що робити, якщо на мобільному колонки занадто вузькі?

Перевірте, чи не успадковується ширина від планшетної контрольної точки. В Elementor налаштування каскадні: mobile успадковує tablet, tablet успадковує desktop. Явно задайте ширину на кожній контрольній точці, навіть якщо значення збігається з вищим.

Чи варто морочитися з CSS у 2026 році?

Вбудованих responsive-налаштувань Elementor вистачає для більшості задач, їх і використовуйте як основний інструмент. Але коли на планшеті потрібно не дві й не три, а, скажімо, чотири колонки з неоднаковою шириною, кастомний CSS залишається єдиним способом зробити саме те, що задумано.

Спробуйте обидва методи на тестовій сторінці: почніть із вбудованого (швидше), а якщо не вистачає гнучкості, візьміть CSS-підхід. Навичка налаштування медіазапитів для Elementor знадобиться й для інших задач: кастомні шрифти на пристроях, приховування блоків, нестандартні відступи під планшети.