Elementor давно стал одним из самых популярных визуальных конструкторов для WordPress, и во многом это благодаря простой и понятной работе со структурой страницы. В основе большинства макетов лежат секции и колонки. Именно колонки определяют, как контент распределяется по странице: где окажется текст, где изображение, насколько широким будет блок и как всё это будет вести себя на смартфоне. В этой статье подробно разберём, как управлять шириной колонок, менять их порядок и на основе этих инструментов строить гибкую сетку под любую задачу.
Как устроена структура страницы в Elementor
Прежде чем переходить к настройкам, важно понять иерархию. Страница в Elementor строится по принципу матрёшки. Секция представляет собой горизонтальный ряд, внутри неё размещаются колонки, а уже внутри колонок лежат виджеты: заголовки, тексты, картинки, кнопки и так далее.
Секция отвечает за общее направление колонок и их количество, а каждая колонка имеет собственные настройки ширины, отступов, выравнивания и фона. Понимание этой вложенности избавит от большинства ошибок: например, если вы пытаетесь изменить ширину, а ничего не происходит, скорее всего, настройки открыты не у той колонки или не у той секции.
Стоит отметить, что в новых версиях Elementor появился инструмент Flexbox Containers, который постепенно заменяет классическую связку секция плюс колонка. Однако колонки по-прежнему широко используются, а принципы работы с шириной и порядком элементов в обоих подходах очень похожи.
Изменение ширины колонок
Перетаскивание границы мышью
Самый быстрый способ изменить ширину колонки прямо в редакторе. Наведите курсор на вертикальную границу между двумя колонками, зажмите левую кнопку мыши и потяните границу в нужную сторону. Elementor в реальном времени покажет текущее соотношение в процентах, например 40 на 60. Этот способ удобен для быстрого подбора пропорций, когда точное значение не критично.
Точная настройка через панель параметров
Когда нужна точность, стоит обратиться к панели настроек. Кликните по иконке с шестью точками в верхнем левом углу колонки, чтобы выбрать именно её, и в левой панели откройте вкладку «Макет». Здесь вы увидите поле «Ширина колонки», заданное в процентах от ширины секции.
Важно понимать один нюанс: сумма ширин всех колонок в секции должна составлять 100 процентов. Если вы увеличите ширину одной колонки, соседняя автоматически сожмётся. Elementor не позволит выйти за пределы секции, поэтому сетка всегда остаётся цельной.
Разные пропорции для разных задач
Выбор пропорций зависит от контента. Классическая комбинация 50 на 50 подходит для симметричных блоков, где текст и изображение равнозначны. Соотношение 60 на 40 или 66 на 33 используют, когда одной части нужно больше визуального веса, например для крупного текста с небольшим боковым блоком. Для карточек товаров или услуг чаще применяют три колонки по 33,3 процента, а для портфолио четыре колонки по 25 процентов.
Вложенные секции для сложных макетов
Иногда внутри одной колонки нужна собственная сетка. Для этого в Elementor есть внутренняя секция: перетащите её из панели виджетов в нужную колонку, и внутри появится ещё один ряд с колонками. Так можно собрать, скажем, колонку, в верхней половине которой лежат два блока рядом, а в нижней один широкий элемент. Главное не увлекаться вложенностью: чем глубже структура, тем сложнее её поддерживать и тем сильнее она влияет на скорость загрузки.
Адаптивность: ширина на планшете и мобильном
Одно из главных преимуществ Elementor в том, что настройки можно задавать отдельно для каждого устройства. Переключитесь в режим планшета или мобильного телефона через иконку в нижней панели редактора и меняйте параметры колонок уже там.
Например, на десктопе у вас секция с пропорциями 70 на 30, где слева текст, а справа форма подписки. На планшете такое соотношение может выглядеть тесно, и стоит изменить его на 60 на 40. На мобильном колонки по умолчанию складываются вертикально друг под друга и занимают всю доступную ширину, поэтому отдельная настройка ширины обычно не требуется, хотя в отдельных случаях можно задать колонке ширину меньше 100 процентов, чтобы создать отступ сбоку.
Если вы меняете ширину в режиме мобильного, а значение не сохраняется, проверьте, не включена ли кнопка связывания с настройками десктопной версии. Клик по этому значку открывает отдельное поле, в которое можно вписать своё значение для конкретного устройства.
Изменение порядка колонок
Порядок на десктопе
На компьютерной версии поменять колонки местами проще всего перетаскиванием. Схватите колонку за иконку с шестью точками и перетащите её на новое место внутри секции. Альтернативный способ: открыть «Навигатор» через меню в нижней панели редактора, найти нужную колонку в древе структуры и переместить её там. Навигатор особенно выручает, когда колонки плотно заполнены контентом и в редакторе их сложно выделить.
Порядок на мобильных устройствах
С мобильной версией ситуация интереснее. Когда колонки складываются вертикально, они выстраиваются в том же порядке, что и на десктопе. Допустим, у вас слева изображение, а справа текст. На телефоне картинка окажется сверху. Часто это нежелательно: пользователю сначала лучше прочитать заголовок и увидеть кнопку, а уже потом картинку.
Решение находится в настройках самой секции. Выберите секцию, перейдите на вкладку «Макет» и переключитесь в мобильный режим. В поле «Направление» доступна опция разворота колонок, которая меняет порядок следования на обратный. В старых версиях настройка называлась Reverse Columns и работала как простой переключатель. Так, контент, который на десктопе шёл справа, на мобильном окажется сверху, без необходимости дублировать секции.
Правильный порядок элементов на мобильных напрямую влияет на конверсию. Посетитель смартфона видит сразу лишь верхнюю часть экрана, поэтому первым должен идти самый важный блок: заголовок, оффер, кнопка действия.
Создание гибкой сетки
Гибкая сетка складывается из нескольких настроек, работающих в связке.
Первый элемент этой системы, вертикальное выравнивание. В настройках секции на вкладке «Макет» есть поле «Вертикальное выравнивание». Если колонки разной высоты, контент по умолчанию прижимается к верху. Выбрав значение по центру, вы получите ровное визуальное положение содержимого, что особенно заметно в блоках с иконкой и текстом. Значение по нижнему краю используют реже, например для подвалов с подписями.
Второй элемент, промежутки между колонками. В том же разделе настроек секции есть параметр Gap, задающий расстояние между колонками. Доступны готовые варианты: нет, маленький, средний, большой и очень большой, а в расширенном режиме можно указать собственное значение. Правильные промежутки не дают колонкам слипаться и делают макет воздушным.
Третий элемент, растягивание содержимого. Колонка умеет растягивать вложенные виджеты на всю свою высоту и ширину. Это полезно, когда нужно, чтобы кнопка занимала всю ширину колонки или чтобы фоновый блок тянулся на всю доступную область.
Четвёртый элемент, сочетание колонок разной ширины. Гибкость сетки проявляется именно в том, что секции на одной странице могут иметь совершенно разную структуру. Сверху страницы может идти полноширинная секция с одним блоком, ниже секция 60 на 40 с текстом и формой, ещё ниже три равные колонки с преимуществами. Каждая секция независима, и вместе они образуют единый ритм страницы.
Практический пример: блок с изображением и текстом
Разберём типовую задачу. Нужно собрать блок, где слева фотография, справа заголовок, абзац текста и кнопка, а на телефоне текст должен оказаться выше картинки.
Создайте секцию с двумя колонками. Задайте левой колонке ширину 50 процентов, правой тоже 50, а вертикальное выравнивание секции поставьте по центру. В левую колонку перетащите виджет изображения, в правую добавьте заголовок, текстовый редактор и кнопку. В расширенных настройках кнопки включите растягивание на всю ширину, если это соответствует дизайну. Теперь переключитесь в мобильный режим, откройте настройки секции и активируйте разворот колонок. Заголовок и кнопка окажутся сверху, а изображение под ними. Блок готов, он аккуратно выглядит на всех устройствах и не требует дублирования контента.
Типичные ошибки и полезные советы
Частая ошибка новичков, попытка задавать ширину виджету вместо колонки. Ширина виджета по умолчанию занимает всю ширину колонки, поэтому управлять композицией нужно именно на уровне колонок и секций.
Вторая ошибка, чрезмерная вложенность. Внутренние секции удобны, но их обилие усложняет редактирование и добавляет лишний код. Прежде чем добавлять вложение, спросите себя, нельзя ли решить задачу одной секцией.
Третий момент связан с проверкой на реальных устройствах. Встроенный предпросмотр в редакторе удобен, но настоящие смартфоны и планшеты могут отображать страницу чуть иначе. Перед публикацией обязательно откройте сайт на реальном телефоне.
И наконец, не забывайте про сумму процентов. Если сетка выглядит «сломанной», проверьте, не превышает ли сумма ширин колонок допустимые значения и не задан ли одной из колонок индивидуальный отступ, съедающий место.
Колонки в Elementor это фундамент, на котором строится любая страница. Умение точно задавать ширину в процентах, менять порядок колонок для мобильных устройств, управлять выравниванием и промежутками превращает набор виджетов в аккуратную профессиональную вёрстку. Освоив эти базовые инструменты, вы сможете собирать макеты любой сложности: от простого лендинга до полноценного корпоративного сайта, и при этом быть уверенными, что страница одинаково хорошо выглядит на экране любого размера.
