Как сделать адаптивную верстку в Elementor для телефона и планшета

Если страница нормально выглядит на компьютере, а на телефоне элементы съезжают, налезают друг на друга или появляется горизонтальная прокрутка, проблема почти всегда в том, как собран макет. В Elementor это обычно решается без кода: нужно проверить порядок блоков, поведение контейнеров, размеры отступов, ширину изображений и видимость элементов на разных устройствах.

Ниже — практический порядок действий, который помогает привести страницу в нормальный вид на планшете и телефоне, не ломая десктопную версию.

Сначала проверьте, где именно ломается макет

В Elementor удобно начинать не с правок, а с просмотра страницы в режимах адаптивности. Откройте страницу в редакторе и переключитесь на иконки Desktop, Tablet и Mobile в нижней панели. Так вы увидите, какие элементы ведут себя по-разному на каждом экране.

Ищите не только очевидные съехавшие блоки. На мобильных часто всплывают более мелкие проблемы:

• широкая картинка или видео вылезает за границы контейнера;
• кнопка становится слишком узкой или, наоборот, занимает слишком много места;
• текст не переносится из-за длинного слова, URL или email;
• внутренние отступы слишком большие и съедают полезную ширину;
• в одном ряду остаются блоки, которые на телефоне должны идти друг под другом;
• скрытый элемент всё равно влияет на высоту или ширину секции.

Если на мобильном есть горизонтальная прокрутка, сначала ищите самый широкий элемент на странице. Обычно это либо изображение с фиксированной шириной, либо контейнер с отрицательными отступами, либо блок с таблицей, кодом или длинной строкой без переноса.

Перестраивайте блоки под маленький экран, а не просто сжимайте их

Главная ошибка при адаптации — пытаться сохранить десктопную композицию в том же виде, только уменьшить всё подряд. На телефоне это почти всегда выглядит тесно. Лучше перестроить порядок и логику блоков.

Если у вас контейнеры Flexbox

В современных макетах Elementor чаще используются контейнеры. Для них важны три вещи: направление, выравнивание и перенос. На десктопе контейнер может быть горизонтальным, а на планшете или телефоне — вертикальным.

Откройте нужный контейнер и проверьте настройки Direction, Wrap, Justify Content и Align Items. Названия могут немного отличаться в зависимости от версии и локализации, но смысл один:

• Direction — в какую сторону идут дочерние элементы;
• Wrap — могут ли элементы переноситься на следующую строку;
• Justify Content — как распределяется пространство по основной оси;
• Align Items — как элементы выравниваются поперёк оси.

Для мобильной версии часто достаточно переключить контейнер с горизонтального на вертикальный и проверить, не остались ли внутри дочерние элементы с фиксированной шириной.

Если сайт собран на старых секциях и колонках

На старых страницах Elementor может использовать секции и колонки. Там логика похожая: на мобильном колонки обычно должны складываться друг под друга. Если этого не происходит, проверьте настройки колонок и ширину каждого блока внутри.

На практике полезно помнить простое правило: если в строке на телефоне больше двух смысловых блоков, почти всегда лучше перестроить их в вертикальный список. Это касается карточек, преимуществ, шагов, отзывов и блоков с иконками.

Управляйте видимостью элементов отдельно для телефона и планшета

Не каждый элемент нужно показывать на всех экранах. Иногда на десктопе нужен большой декоративный блок, а на телефоне он только мешает. Elementor позволяет скрывать элементы для отдельных устройств.

Откройте нужный виджет, контейнер или секцию и найдите настройки Responsive или Адаптивность. Там обычно можно отключить отображение для Desktop, Tablet или Mobile. Это удобно для:

• крупных фоновых изображений, которые перегружают мобильный экран;
• дублирующих заголовков;
• декоративных иконок и разделителей;
• сложных таблиц и больших сравнительных блоков;
• второстепенных CTA, если на телефоне нужен только один основной призыв к действию.

Но скрытие — не универсальное решение. Если вы прячете важный контент на мобильном, пользователь просто не увидит его. Поэтому сначала попробуйте перестроить блок, а скрывать используйте только для действительно второстепенных элементов.

После скрытия обязательно проверьте, не осталось ли пустое место. Иногда сам виджет скрыт, а отступы контейнера вокруг него продолжают занимать высоту.

Исправляйте отступы и ширину отдельно для каждого устройства

Одна из самых частых причин «ломаной» мобильной верстки — одинаковые отступы для всех экранов. На десктопе 80 пикселей сверху и снизу могут выглядеть нормально, а на телефоне превращаются в огромные пустые поля.

В Elementor у многих параметров есть переключатель адаптивности: рядом с полем отступа, размера шрифта, ширины или высоты можно выбрать значение для Desktop, Tablet или Mobile. Это нужно использовать, а не задавать одно значение на всё.

Что обычно стоит проверить в первую очередь:

• Padding у секций и контейнеров;
• Margin между блоками;
• Gap между элементами внутри контейнера;
• Width и Max Width у изображений, кнопок и колонок;
• Min Height у геро-блоков и баннеров.

Если блок на телефоне выглядит слишком узким, проверьте, не задана ли ему фиксированная ширина в процентах или пикселях. Для мобильной версии чаще безопаснее использовать ширину по контенту контейнера, а не жёсткое значение.

Если проблема в слишком больших отступах, уменьшайте их именно в мобильном режиме, а не глобально. Иначе можно испортить десктопную композицию, которая изначально была выстроена правильно.

Следите за изображениями, видео и другими «тяжёлыми» элементами

На мобильных устройствах чаще всего ломают макет медиа-блоки. Изображение может быть слишком широким, видео — не помещаться в контейнер, а галерея — растягивать строку.

Для изображений проверьте:

• не задана ли фиксированная ширина в пикселях;
• не стоит ли выравнивание, из-за которого картинка выходит за край;
• не используется ли слишком большой исходный файл, который долго грузится и визуально «прыгает» при открытии страницы.

Для видео и iframe-элементов важно, чтобы они были встроены через адаптивный контейнер или корректно ограничены по ширине. Если видео вставлено вручную и на мобильном вылезает за границы, визуальных настроек Elementor может быть недостаточно — тогда нужен либо корректный HTML-встраиваемый код, либо дополнительная обёртка с адаптивными стилями.

Если на странице есть слайдер, проверьте, как он ведёт себя на планшете и телефоне: иногда карточки в слайдере становятся слишком узкими, а текст внутри перестаёт читаться. В таких случаях лучше уменьшить количество элементов в видимой области или заменить слайдер на вертикальный список.

Проверяйте порядок элементов и логику чтения

На десктопе блоки часто строят в две колонки: слева текст, справа картинка. На телефоне такой макет почти всегда нужно перестроить. Если оставить его как есть, текст станет слишком узким, а картинка займёт половину экрана.

Для мобильной версии обычно лучше такой порядок:

1. заголовок;
2. краткое пояснение;
3. изображение или иллюстрация;
4. основной текст;
5. кнопка или форма.

Если в Elementor нужно изменить порядок элементов только на мобильном, проверьте настройки контейнера и дочерних элементов. В некоторых случаях достаточно поменять направление контейнера. Если блоки собраны на старой структуре секций и колонок, проще перестроить их в более логичную последовательность прямо в редакторе, чем пытаться «дотянуть» старый макет стилями.

Особенно внимательно относитесь к блокам с иконками и преимуществами. На широком экране они могут идти в три или четыре колонки, а на телефоне лучше свести их к одной колонке или максимум к двум, если карточки короткие и не перегружают экран.

Когда без CSS уже не обойтись

Большинство задач по адаптивности в Elementor решается встроенными настройками. Но есть ситуации, где визуального редактора недостаточно:

• нужно убрать горизонтальную прокрутку, вызванную сторонним виджетом или встроенным кодом;
• нужно ограничить поведение длинных слов, URL или таблиц;
• нужно точечно исправить ширину элемента, который не поддаётся обычным настройкам;
• нужно переопределить стили темы или стороннего плагина.

Если у вас есть Elementor Pro, можно использовать поле Custom CSS у конкретного элемента. Если Pro нет, CSS добавляют через настройки темы, кастомайзер WordPress или отдельный плагин для пользовательских стилей. Важно применять стили точечно, а не писать общий код «на всё подряд».

Пример полезного правила для длинных строк: если на мобильном ломает макет длинное слово или ссылка, элементу можно задать перенос. Такой код имеет смысл только тогда, когда проблема действительно в переполнении текста, а не в неверной ширине контейнера.

.your-element-selector {
  overflow-wrap: anywhere;
  word-break: break-word;
}

Этот приём помогает тексту не вылезать за границы блока, но он не исправит неправильно собранный контейнер или слишком широкую картинку. Сначала проверьте структуру, и только потом переходите к CSS.

Как проверить, что адаптивная верстка действительно исправлена

После правок не ограничивайтесь просмотром в редакторе. Откройте страницу в обычном браузере и проверьте её на нескольких ширинах экрана: узкий телефон, средний смартфон и планшет. Если есть возможность, посмотрите страницу на реальном устройстве, а не только в эмуляторе.

Проверка должна ответить на несколько простых вопросов:

• нет ли горизонтальной прокрутки;
• все ли блоки читаются без масштабирования;
• не слишком ли велики отступы сверху и снизу;
• кнопки достаточно крупные для нажатия пальцем;
• не скрыт ли важный контент;
• не съехал ли порядок блоков относительно логики чтения.

Если после правок проблема осталась только в одном месте, не переделывайте всю страницу. Обычно достаточно найти конкретный элемент, который выбивается из общей схемы, и исправить его ширину, отступ или поведение на мобильном.

Что обычно ломает адаптивность в Elementor чаще всего

Если собрать практику в короткий список, то почти всегда виновато одно из следующих решений:

• жёсткая ширина у изображения, кнопки или контейнера;
• слишком большие отступы, рассчитанные только на десктоп;
• несколько колонок, которые не были перестроены под телефон;
• скрытые элементы, которые оставили пустое пространство;
• встроенный код, iframe или таблица без адаптивной обёртки;
• длинный текст без переноса;
• попытка сохранить сложную десктопную композицию без упрощения для мобильного.

Если держать в голове именно эти причины, адаптивная верстка в Elementor перестаёт быть угадыванием. Сначала вы находите элемент, который ломает ширину или порядок, потом решаете, нужно ли его перестроить, скрыть или точечно поправить стилями. В большинстве случаев этого достаточно, чтобы страница нормально выглядела и на телефоне, и на планшете.