Elementor — самый популярный конструктор страниц для WordPress. Он превращает создание дизайна в перетаскивание блоков мышкой: двигаете секции, меняете тексты и картинки, сразу видите результат. Ни строчки кода. Разберём, как его поставить и собрать первую страницу.
К концу статьи вы сделаете страницу в Elementor и поймёте, когда он нужен, а когда хватит обычного редактора.
Зачем нужен Elementor
Обычный блочный редактор WordPress хорош для статей и простых страниц. Но когда хочется нестандартный дизайн — колонки, красивый первый экран, кнопки, отступы под свой вкус — его возможностей не хватает.
Elementor даёт этот контроль без кода. Аналогия: обычный редактор — как печатать в блокноте, а Elementor — как собирать страницу в графическом редакторе, двигая элементы мышкой.
Чаще всего его берут под лендинги, главные страницы, страницы услуг — там, где важен вид.
Шаг 1. Установите Elementor
- Зайдите в Плагины → Добавить новый.
- Найдите Elementor (Website Builder).
- Нажмите «Установить» и «Активировать».
Бесплатной версии хватает для большинства задач. Есть платный Elementor Pro с дополнительными виджетами и шаблонами, но на старте он не нужен.
Шаг 2. Откройте страницу в редакторе
- Создайте страницу: Страницы → Добавить новую.
- Нажмите большую кнопку «Редактировать в Elementor».
- Откроется редактор: слева панель с блоками, справа — сама страница.
Как устроен Elementor
Три уровня, из которых собирается всё:
- Секция — горизонтальная полоса во всю ширину. Страница — это стопка секций сверху вниз.
- Колонка — секция делится на колонки, чтобы поставить элементы в ряд.
- Виджет — конкретный элемент: заголовок, текст, картинка, кнопка, форма, иконка.
Логика простая: добавляете секцию → делите на колонки → кладёте в них виджеты.
Шаг 3. Соберите первую секцию
- Нажмите «+» — добавится новая секция.
- Выберите структуру: одна колонка, две, три.
- Перетащите из левой панели нужный виджет — например, «Заголовок».
- Кликните по нему и впишите текст прямо на странице.
- Слева настройте вид: шрифт, цвет, размер, отступы.
Повторяйте, наращивая страницу секциями сверху вниз. Всё меняется с живым предпросмотром — видно результат сразу.
Шаг 4. Проверьте мобильную версию
Больше половины посетителей — с телефонов, поэтому мобильный вид обязателен. Внизу редактора есть переключатель устройств: компьютер, планшет, телефон.
Переключитесь на телефон и проверьте: не разъезжается ли текст, не мелкие ли кнопки, помещаются ли колонки. Elementor позволяет задавать отдельные настройки для мобильной версии — например, уменьшить заголовок только на телефоне.
Шаг 5. Опубликуйте
Когда готово, нажмите «Опубликовать» внизу панели. Страница появится на сайте. Позже её всегда можно открыть и доработать в том же редакторе.
Готовые шаблоны
Не хотите собирать с нуля — используйте готовые блоки и шаблоны. В редакторе есть библиотека: вставляете готовую секцию (первый экран, отзывы, цены) и меняете тексты под себя. Экономит время на старте.
Когда Elementor не нужен
Честно: не под каждую задачу. Для обычных статей блога хватает встроенного редактора — он легче и быстрее. Elementor добавляет вес странице, поэтому не стройте на нём весь сайт подряд без нужды. Используйте там, где важен дизайн: лендинги, главная, услуги.
Частые вопросы
Базовая версия бесплатна и покрывает большинство задач. Pro-версия платная, с расширенными виджетами — на старте не обязательна.
Немного добавляет веса, да. Поэтому используйте его точечно и не перегружайте страницы эффектами. Про скорость есть статья «Как ускорить сайт на WordPress».
Встроенный редактор (Gutenberg) — для статей и простых страниц. Elementor — когда нужен свой дизайн без кода. Многие используют оба: статьи в Gutenberg, лендинги в Elementor.
Что дальше
Теперь вы умеете собирать страницы в Elementor. Логичное применение — продающая страница: посмотрите статью «Как сделать лендинг на WordPress», там структура, которую удобно собрать именно в Elementor. А чтобы конструктор не тормозил сайт, важен нормальный хостинг — сверьтесь с рейтингом хостингов.