Я ненавижу Elementor. Так сильно, что аж зубы скрипят. Это ужасно непрофессиональный инструмент. Но, к сожалению, иногда приходится с ним работать из-за ошеломительной популярности этого плагина.
Что такое Elementor?
Elementor – это Drag-and-Drop конструктор страниц для CMS WordPress. Какие-то странные и непонятные слова? Можно проще. Это такая штука, которая позволяет создавать сайты визуально. Перетаскивать элементы, настраивать им шрифты, цвет, размер и т.д. В общем как Tilda или Wix, только как дополнение для WordPress’а.
Возможность создавать рабочие сайты без знания кода и в целом новизна рынка (ну и конечно же партнёрская программа) сделали Elementor одним из самых устанавливаемых плагинов в истории. В репозитории у него более 10 миллионов установок. Если верить официальному сайту, конструктор используется более чем на 16 миллионах веб-сайтов. Цифра внушительная. Говорят, что сами разработчики WordPress создали редактор блоков для конкуренции с Элементором (хотя мне кажется больше для конкуренции с площадками типа Tilda и Wix). Так почему же тогда этот продукт плох?
«Тяжелый» код
WP-Kama (лучший русскоязычный сайт с документацией и обсуждением ВордПресса) недавно проводил опрос «Каким конструктором страниц Вы пользуетесь», и большинство пользователей ответили: «никаким, это лютое зло!». Профессиональных разработчиков можно понять. Большинство конструкторов выдает отвратный код. Раздутый, с ужасной структурой, без использования семантики.
Это может показаться мелочью. Сайт работает? Работает. А остальное не важно. Это в корне неверный подход. Сайт с большим количеством ненужных «оберток» (от англ. ‘wrapper’), имеет неоправданно сложную DOM-структуру. А следовательно браузер будет тратить больше ресурсов и времени на загрузку и рендер страницы. А скорость загрузки напрямую влияет на конверсии.
Мобильные сайты, которые загружаются за две секунды или меньше, имеют на 15 % более высокий коэффициент конверсии, чем средний мобильный сайт.
Google
Вот простой пример:
Видя эту секцию, в голову сразу приходит простая верстка: контейнер с H1 заголовком и парой абзацев (меню мы не учитываем, оно часть хэдера). HTML и CSS должны выглядеть примерно так:
<section>
<div class="container">
<h1 class="header">А Really Good PLace То Eat lnThe City 0f New York</h1>
<span class="accent-header">GOOD PLACE. GOOD FOOD.</span>
<p class="paragraph">Massa praesent sit suspendisse ас votutpat amet. Commodo elit at non neque ullamcorper id.</p>
</div>
</section>.container {
padding-block: 4rem;
display: flex;
flex-direction: column;
gap: 1em;
background-image: url('/hero-bg.jpg');
text-align: center;
}
.header {
font-size: 4rem;
}
.accent-header {
order: -1;
}А теперь давайте взглянем на конечный код страницы, который сделает нам самый популярный конструктор
Четыре! Четыре враппера мне понадобилось пройти, чтобы найти мой главный заголовок! И это базовый элемент в простейшем макете. Заглядывать в сложные элементы вроде слайдера или аккордеона мне просто страшно.
Другой важной проблемой является семантика. А точнее ее отсутствие и возможность ею управлять.
Одна из важных особенностей HTML — семантика, которая буквально переводится как «обозначающий». При помощи HTML мы описываем структуру страниц и их содержимого, то есть объясняем браузерам, вспомогательным и другим технологиям и программам значение элементов. Это может быть параграф текста, кнопка, часть страницы с основным содержимым или ничего не значащий контейнер.
Дока
И тегов в HTML сотни. И все они, кроме <div> и <span>, имеют семантическое значение. <header>, <footer> и <main> для разметки частей страницы, как в типографике, <nav> для меню, оглавлений и «хлебных крошек», <h1>-<h6> для заголовков и так далее. Большинство этих тегов Элементор не использует. И что самое страшное, не дает возможности самостоятельно задавать нужный. Ты можешь выбрать только из небольшого ограниченного набора.
Начинающие верстальщика часто не знают или пренебрегают семантическими тегами, что является очень грубой ошибкой. Вся юзабилити и доступность строиться на них. Это касается всех пользователей, но в первую очередь тех, кто пользуются скринридерами. Читалки с экрана буквально ориентируются по странице с помощью тегов. Зачитывают заголовки и их уровень, списки, кнопки, alt атрибут у изображений и т.д.
Сами браузеры используют разметку, например при создании облегченной версии страницы в режиме чтения (reading mode). Некоторые расширения, технологии и сервисы могут полагаться на семантические теги, например при создании RSS-лент.
Семантика работает и на SEO. Правильная страница быстрее и правильнее понимается поисковыми роботами, а значит лучше индексируется и ранжируется.
«It’s not scalable and maintainable»
Я не смог придумать лучше заголовка, чем любимая фраза одного американского разработчика и владельца агентства по разработке сайтов и плагинов для WordPress. Ее сложно красиво перевести на русский язык, но я попробую.
Сайт на Elementor (и многих других конструктора) НЕ масштабируемые и НЕ поддерживаемые. Это не значит, что после окончания работы над сайтом вы не сможете ничего менять. Конечно, нет. Просто с каждым разом этот процесс будет становиться все дольше и мучительней, прямо пропорционально размеру вашего сайта.
Эта проблема возникает всего лишь из-за того, данный билдер игнорирует одну из важнейших творений в сфере веб технологий и дизайна. Можно даже сказать основу CSS как языка – классы. CSS классы это кирпичи из которых собирает дизайн любой HTML страницы. Они удобны, потому что понятны и реюзабельны. Но, к сожалению, Элементор основывается не на классовой модели, а на модели «пресетов». Подробнее можете почитать в этой англоязычной статье: почему пресеты ужасны.
Кто-то может сказать: «Но ведь в Элементоре можно задавать элементам классы!». Да, но настраивать и редактировать их вы сможете только через произвольный CSS. То есть писать код вручную. Зачем вам вообще визуальный конструктор. Плюс, из-за ужасной DOM-структуры описанной выше, один и тот же класс может вести себя по-разному на разных элементах.
Реклама в моем платном софте?
Итак, Элементор распространяется по популярной модели «Бесплатно с Pro-версией», когда часть функционала доступна только в платной лицензии или по подписке. Никаких претензий к такой модели нет. Она отлично работает, как для разработчика, так и для пользователя.
Но не в нашем случае. Платная версия конструктора открывает доступ к всем возможностям, но не избавляет от «рекламы». Реклама в кавычках, потому что это не совсем привычная реклама. Но каждый раз, когда вы редактируете текст, вам будут предлагать отличного AI-помощника. Или при добавлении изображения на страницу, Elementor дружески предложит вам установить оптимизатор, чтобы сделать ваши картинки легкими и быстрозагружаемыми.
Что в этом плохого? Все эти эти функции — сторонние плагины и поставляются по аффилированной программе. Да, Элементор зарабатывает на вас. Подробнее ситуацию описана в этом видео от одного из популярных англоязычных WordPress-блоггеров:
