Моя история с Elementor: 9 вещей, которые я понял после одного сломанного сайта

Год назад мы с другом делали интернет‑магазин для его девушки. Она модель, и у неё была совместная линейка одежды с одним брендом. Нужны были каталог, лукбук, страница о ней и промо‑баннеры под каждую новую коллекцию. Каталог сделали на WooCommerce, а главную, лукбук и баннеры я сверстал в Elementor. Чтобы было быстрее, вставил вёрстку в HTML‑виджеты, подогнал стили, и всё выглядело ровно так, как задумывали. Передал доступы и забыл.

Через пару недель она пишет: «кажется, я сломала сайт». Выходила новая коллекция, она хотела поменять текст на баннере, открыла виджет, увидела там кучу div‑ов и аккуратно поправила пару строк. Заодно случайно стёрла один закрывающий тег. Половина главной съехала, подвал оказался посреди лукбука.

Винить её не за что. Elementor мы и выбрали для того, чтобы она меняла баннеры и тексты сама, мышкой, без нас. А я отдал ей конструктор, внутри которого лежит обычный HTML. Формально это Elementor, а по сути та же ручная вёрстка.

Сначала я быстро всё починил, а потом переделал главную, лукбук и баннеры на родные элементы. С тех пор у меня правило: страница собирается только из родных элементов Elementor. Контейнеры, заголовки, тексты, кнопки, картинки, иконки. Каждый из них можно кликнуть в редакторе и поменять, ничего не сломав. HTML‑виджетов ноль.

Звучит просто, но уже на той переделке и на следующих сайтах выяснилось, что на современных контейнерах (Flexbox Container, которые пришли на смену секциям и колонкам) у Elementor хватает неочевидного поведения. Ниже то, на что я наступал сам, и почему так происходит.

Как Elementor хранит страницу

Это полезно знать, даже если вы никогда не полезете в базу руками.

Вся страница лежит в одном поле записи в виде JSON‑дерева. Каждый узел — контейнер или виджет, у каждого свой короткий id, тип и настройки. В настройки попадает только то, что вы явно поменяли в панели. Всё остальное берётся из значений по умолчанию, и именно там прячется большая часть сюрпризов.

Рядом с деревом Elementor держит ещё несколько вещей: CSS‑файл страницы, кэш готового HTML виджетов и служебные метки. Когда вы жмёте «Обновить» в редакторе, всё это пересобирается вместе. Когда страница меняется в обход редактора (импорт, перенос, скрипт, плагин), всё легко рассинхронизируется.

1. Класс у контейнера и у виджета задаётся по‑разному

На вкладке «Дополнительно» и у контейнера, и у виджета есть поле «CSS‑классы». Выглядит одинаково, но внутри данных ключи разные: у виджета служебные настройки начинаются с подчёркивания, у контейнера нет. С отступами то же самое.

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

Кажется, что не подключились стили, и ищешь проблему в CSS, а она в разметке. Поэтому я проверяю итоговый HTML страницы: есть ли нужный класс у нужного блока в том, что реально ушло в браузер.

2. Вложенный контейнер по умолчанию занимает всю ширину

Каждому вложенному контейнеру Elementor по умолчанию ставит ширину 100%. В колонке это нормально. В ряду это значит, что каждый элемент хочет занять всю строку.

Отсюда два эффекта. flex-grow не работает, потому что делить нечего, место уже занято. А мелкие элементы, которые должны стоять в строку (теги, бейджи, маленькие кнопки), выстраиваются каждый на своей строке.

Лечится просто: таким элементам ставим ширину «авто». А колонкам, которые должны делить свободное место, ширину снимаем и даём им расти. Только на десктопе: на телефоне ряд превращается в колонку, и там 100% как раз нужны.

3. Перенос плюс проценты — колонка всегда уедет вниз

Два блока рядом: текст слева, картинка справа, каждому 50%, между ними зазор. У ряда включён перенос, чтобы на телефоне блоки встали друг под друга.

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

Браузер сначала решает, что переносить на новую строку, и только потом сжимает элементы. 50% плюс 50% плюс зазор больше 100%, значит, второй блок переносится, до сжатия дело не доходит.

Решение: там, где у блоков задана ширина, перенос выключаем, и они сами ужмутся на величину зазора. А на телефоне вместо переноса меняем ряду направление на «колонка». Перенос оставляю только для элементов без фиксированной ширины: тегов, кнопок, ссылок.

4. flex‑basis в колонке — это высота

Нужна короткая линия под заголовком, 40 пикселей в ширину и 1 в высоту. Задаю размер через flex-basis, а блок с заголовком становится выше ровно на 39 пикселей.

flex-basis работает по главной оси. В контейнере с направлением «колонка» главная ось вертикальная, так что 40 пикселей ушли в высоту.

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

5. Ленивая загрузка может спрятать фоны насовсем

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

У меня на одном сайте скрипт этот класс не ставил вообще. Фоны и градиенты пропали у всех. Причём не везде одинаково: с какой секции начинается скрытие, зависит от высоты окна. На моём мониторе всё было видно, а на ноутбуке уже нет.

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

Если функция не критична, проще выключить её в экспериментах.

6. Кэш виджетов показывает старую версию

Поменял страницу в обход редактора (импортом или переносом), сбросил все кэши. В базе новые данные, а в браузере старая страница.

Elementor хранит готовый HTML виджетов в отдельном кэше внутри записи. Редактор обновляет его при сохранении, а изменения в обход редактора — нет. Кнопка «Очистить кэш» в инструментах его тоже не трогает.

Помогает открыть страницу в редакторе и нажать «Обновить». Про шапку и подвал легко забыть: если они сделаны через конструктор тем, это отдельные записи со своим кэшем.

7. Невидимые настройки дополнительных брейкпоинтов

Кроме компьютера, планшета и телефона, в Elementor можно включить дополнительные размеры экрана: ноутбук, широкий экран и другие.

Меняю размер шрифта в подвале, а на экране 1440 ничего не меняется. Оказалось, у виджета сохранилось отдельное значение для «ноутбука» от старого дизайна. В панели его не видно, пока не переключишься именно на ноутбук, а на реальном экране оно перебивает всё, что задаёшь для компьютера.

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

8. Font Awesome внутри Elementor — пятой версии

Elementor везёт свою копию Font Awesome, и это пятая версия. Если взять имя иконки с сайта Font Awesome, где по умолчанию шестая, часть иконок просто не появится. Многие иконки в шестой версии переименовали.

Если нужны свои иконки, я загружаю их как SVG и выбираю в виджете «Загрузить SVG». Они красятся цветом из настроек виджета и меняются так же легко, как картинка.

9. Отступы копятся по вложенности

У контейнера по умолчанию внутренний отступ 10 пикселей. На одном уровне незаметно. На пяти уровнях это уже 50 лишних пикселей сверху и снизу, и блок выглядит рыхлым.

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

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

Короткий чек‑лист

Перед тем как отдать сайт, прохожу по списку:

• нужные классы есть в итоговом HTML, а не только в панели;

• там, где у блоков задана ширина, перенос выключен, а на телефоне меняется направление;

• у мелких элементов в строку снята ширина 100%;

• фоны видны на любом экране, включая невысокий ноутбук;

• после изменений в обход редактора страница пересохранена, включая шапку и подвал;

• проверены все включённые размеры экрана, а не только три стандартных;

• все иконки на месте;

• лишние отступы обёрток обнулены.

Зачем всё это

Проще, конечно, вставить HTML и не мучиться. Но только в день сдачи. Сайт из родных элементов живёт дольше: владелец сам меняет тексты, добавляет блоки по образцу соседних, переставляет секции, и ему не нужно звать разработчика из‑за каждой запятой.

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