Когда верстаешь лендинг на 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 пригодится и для других задач: кастомные шрифты на устройствах, скрытие блоков, нестандартные отступы под планшеты.