Как создать шапку сайта в Elementor: меню, логотип и кнопка в одном блоке

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

В Elementor это можно сделать разными способами, но логика одна: сначала создаём шаблон шапки, затем собираем в нём контейнер с нужными элементами и отдельно проверяем адаптивность. Если у вас есть Elementor Pro, задача решается штатно через Theme Builder. Если Pro нет, шапку обычно делают возможностями темы или через сторонний плагин для header/footer, потому что в бесплатном Elementor глобальную шапку сайта он сам по себе не создаёт.

Что должно быть в рабочей шапке сайта

Для большинства сайтов достаточно трёх элементов:

• логотип — помогает быстро узнать бренд и обычно ведёт на главную;
• меню — даёт доступ к основным разделам;
• кнопка — выделяет главное действие: заказать, оставить заявку, записаться, купить, связаться.

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

Как создать шапку в Elementor Pro

Если у вас установлен Elementor Pro, шапку лучше делать через шаблон темы. Это правильный путь, потому что такой header будет отображаться на всём сайте, а не только на одной странице.

Откройте в админке WordPress раздел Elementor → Theme Builder и создайте новый шаблон типа Header. После этого откроется редактор Elementor, где можно собрать структуру шапки из контейнеров и виджетов.

Собираем базовый контейнер

Для современной версии Elementor удобнее использовать контейнеры Flexbox. Создайте один внешний контейнер на всю ширину шапки, а внутри него — ещё один контейнер для контента. Так проще управлять шириной, отступами и выравниванием.

Практически это выглядит так:

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

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

Добавляем логотип

Логотип обычно вставляют через виджет Site Logo. Он подтягивает изображение из настроек сайта WordPress, а не из конкретной страницы. Это удобно: если потом поменяется логотип, он обновится везде, где используется этот виджет.

Проверьте два момента:

• логотип не слишком большой по высоте;
• изображение не размывается на экранах Retina.

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

Настраиваем меню

Меню в Elementor обычно выводят через виджет Nav Menu. Здесь есть важная зависимость: само меню создаётся в WordPress, в разделе Внешний вид → Меню, а Elementor только отображает его и даёт визуальные настройки.

Если меню ещё не создано, сначала соберите структуру в WordPress:

1. откройте Внешний вид → Меню;
2. создайте новое меню или выберите существующее;
3. добавьте нужные страницы, рубрики или произвольные ссылки;
4. сохраните и назначьте меню, если тема этого требует.

После этого вернитесь в Elementor и выберите нужное меню в настройках виджета. Там же можно настроить:

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

Если меню не отображается, чаще всего причина не в Elementor, а в том, что меню не создано в WordPress или не выбрано в самом виджете.

Добавляем кнопку в шапку

Для кнопки используйте обычный виджет Button. Это самый надёжный вариант: он не зависит от темы и хорошо управляется в адаптиве. Кнопка должна быть заметной, но не спорить с логотипом и меню.

Обычно кнопку ставят справа от меню. Если шапка узкая, можно сократить текст до одного-двух слов: Заказать, Оставить заявку, Связаться. Длинная кнопка в верхней панели почти всегда ухудшает компоновку на мобильных экранах.

Как выстроить порядок элементов в одном блоке

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

В контейнере Elementor порядок элементов задаётся перетаскиванием. Для внутреннего контейнера обычно достаточно:

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

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

Как настроить адаптивность, чтобы шапка не развалилась на телефоне

На мобильных устройствах шапка ломается чаще всего из-за трёх причин: слишком широкий логотип, длинное меню и кнопка, которая не помещается в строку. Поэтому адаптивность нужно проверять отдельно для desktop, tablet и mobile.

В Elementor откройте режим адаптивного просмотра и посмотрите, как ведут себя все элементы. Обычно для телефона делают так:

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

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

Когда шапку лучше делать через тему, а не только в Elementor

Elementor удобен для визуальной сборки, но не всегда он должен отвечать за всю шапку. Если тема уже имеет хорошую базовую header-структуру, иногда проще доработать её, чем полностью заменять. Это особенно актуально, если:

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

Если же задача — собрать понятную и управляемую шапку без верстки, Elementor Pro обычно даёт более предсказуемый результат. Главное — не смешивать сразу несколько источников управления: часть шапки в теме, часть в Elementor, часть в плагине. Потом это сложно поддерживать.

Как проверить, что шапка собрана правильно

После сохранения шаблона откройте сайт как обычный посетитель и проверьте несколько вещей:

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

Если изменения не отображаются, сначала проверьте кеш браузера и кеш сайта. В Elementor после правок иногда нужно обновить CSS-файлы, а на сайтах с оптимизацией — очистить ещё и кеш плагина или CDN. Это обычная причина, а не ошибка в самой шапке.

Что обычно мешает собрать шапку с первого раза

На практике проблемы повторяются. Чаще всего мешают не настройки дизайна, а организационные ошибки:

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

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