Создайте свой сайт
на Nethouse за полчаса
В простом и удобном конструкторе сайтов, интернет-магазинов и лендингов
создать сайт бесплатно
Секреты дизайна в Nethouse. Часть 9. Топбар.
Рекомендации по оформлению сайтов на нашей платформе предоставляет Григорий Левин, руководитель студии дизайна "Интегра", первый агент Nethouse. С предыдущими частями "Секретов" можно ознакомиться по ссылке.
"Обновленный топбар — самое заметное и важное нововведение на платформе за последнее время. Теперь это не просто верхнее меню, а полноценный визуальный конструктор: вы сами выбираете, какие элементы отображать, где и как именно. Все настраивается: фон, ширина, отступы, порядок элементов, видимость на мобильных устройствах, даже логотип можно разместить по центру.
Появилась "песочница" для предпросмотра, добавлены кнопки, поиск, поддержка SVG, интеграция с картами 2ГИС и многое другое. Все это делает новый топбар мощным инструментом, от которого напрямую зависит удобство сайта и первая реакция посетителя.
Почти без ограничений: как мы применяем новый топбар в студии
Самое важное — новый топбар практически не ограничивает возможности оформления верхнего меню. Теперь на Nethouse можно реализовать шапки сайтов, сравнимые по уровню с крупными интернет-магазинами и маркетплейсами: многоуровневое меню, поиск, кнопки, личный кабинет, иконки мессенджеров, акценты на мобильной версии — все гибко настраивается.
С момента выхода нового топбара мы в студии "Интегра" сразу начали активно применять его в реальных проектах. Готовы поделиться своими наблюдениями и показать конкретные примеры сайтов, на которых он уже работает.
Первое впечатление и с чего начать
Безусловно, новый топбар поначалу показался нам довольно сложным инструментом. Все дело в большом количестве настроек и возможностей — их действительно очень много. Но именно в этом и его сила: гибкость, с которой можно собрать верхнее меню под любые задачи.
Включается топбар просто: в панели управления откройте Дизайн → Настроить → Меню и нажмите "Новая версия топбара". Не переживайте: если что-то пойдет не так, вы всегда можете вернуться к старой версии меню.
Мы рекомендуем начинать работу с топбаром с одного из готовых шаблонов. Зайдите во вкладку Топбар → Шаблоны, выберите понравившийся и на его основе начинайте вносить изменения.
Дальше мы разберем, из чего состоит новый топбар, как устроены его блоки и как именно мы используем их в реальных проектах: для интернет-магазинов, лендингов, сайтов услуг и других направлений.
Настройки, которые стоит попробовать
После выбора понравившегося шаблона мы рекомендуем начать с варианта, где задействованы все строки — это даст максимальное представление о возможностях нового топбара.
Во вкладке "Дизайн" вы можете выбрать, как будет позиционироваться топбар:
- поверх блоков (накладывается на первый экран);
- перед блоками (занимает свое собственное место).
Выбирайте, что лучше смотрится в вашем макете — результат виден сразу.
Меню можно зафиксировать в верхней части сайта или оставить нефиксированным. В первом случае оно будет "прилипать" к верху при прокрутке, что удобно, особенно для длинных страниц.
Далее идут тонкие настройки:
- отступы сверху и снизу;
- ширина всего меню (по ширине контента или на всю ширину экрана);
- ширина каждой строки меню (верхней, средней и нижней);
- выравнивание, фон, прозрачность, тень, обводка и даже скругления углов меню.
Мы не рекомендуем использовать изображения в качестве фона топбара — это ухудшает читаемость и может перегрузить дизайн. Лучше поэкспериментировать с цветами и прозрачностью: классический белый, темный или брендовый цвет в сочетании с тенью и скруглениями дают отличный результат.
Все это — лишь часть того, что можно настроить. Главное — не бояться экспериментировать. Топбар сразу же показывает изменения, поэтому вы быстро увидите, подходит ли текущий вариант для вашего сайта.
Как устроен топбар: представьте себе таблицу
Чтобы проще понять, из чего состоит новый топбар, представьте таблицу 3×3 — сетку из трех строк и трех колонок.
- по вертикали — это строки: Верхняя строка, Средняя строка, Нижняя строка;
- по горизонтали — это колонки в каждой строке: Левая колонка, Центральная колонка, Правая колонка.
Таким образом, у каждой строки есть три зоны, в которые вы можете поместить любые нужные элементы — логотип, меню, кнопки, контакты, иконки, ссылки, поиск и т.д.
Гибкость в том, что вы можете не только настраивать внешний вид каждой из этих ячеек, но и определять, какие блоки где отображаются — причем отдельно для десктопной и мобильной версий.
Учитывайте отображение элементов на разных устройствах
При работе с новым топбаром обратите особое внимание на значки, показывающие, где будет отображаться каждый элемент:
- на десктопе;
- на мобильных устройствах;
- или сразу в обеих версиях.
Каждый блок, который вы добавляете в колонку, можно включать или отключать отдельно для каждой версии сайта. Это удобно, например, если вы хотите показать номер телефона только в мобильной версии или разместить одну ссылку на десктопе, а другую — на смартфоне.
Важно: проверяйте результат не только в редакторе, но и на живом сайте.
Откройте сайт в браузере на компьютере, в новой вкладке, чтобы убедиться, что топбар на десктопе работает корректно. Параллельно откройте сайт на смартфоне и проверьте мобильную версию: не наслаиваются ли элементы, не "прыгают" ли строки, удобно ли нажимать кнопки.
Это особенно актуально, если вы, например, используете разные версии одного и того же блока (контакты, ссылки, поиск) под разные устройства — такая гибкость часто спасает от перегруженности.
Средняя строка — главный элемент нового топбара
После настройки шаблона и дизайна, вы увидите вкладки:
- верхняя строка;
- средняя строка;
- нижняя строка.
Рекомендуем начать с настройки именно средней строки, потому что чаще всего именно она является основной. Особенно если у вас не крупный интернет-магазин, а сайт услуг, лендинг или имиджевый проект — можно обойтись одной средней строкой, полностью отключив верхнюю и нижнюю.
Попробуйте так и сделать:
- отключите верхнюю и нижнюю строки;
- включите отображение только средней строки;
- перейдите к ее настройке — она очень похожа на общий дизайн: можно изменить фон, задать скругления, добавить или убрать границы, настроить отступы, выбрать ширину и расстояние между колонками.
Структура средней строки
Средняя строка, как и другие, состоит из левой, центральной и правой колонок. Вот рекомендации из нашей студийной практики:
- левая колонка: классически сюда помещается логотип;
- центральная колонка: если это интернет-магазин, мы размещаем здесь каталог и поиск, если это сайт компании, здесь может быть блок ссылок — привычное меню со ссылками на страницы сайта;
- правая колонка: для интернет-магазинов — иконка личного кабинета, корзина, а для сайтов услуг — кнопка звонка, номер телефона, запись на консультацию или другие важные CTA-элементы.
Обязательно обратите внимание на бургер-меню (выпадающее меню с иконкой из трех горизонтальных полоск) — оно может быть универсальным элементом как для десктопа, так и для мобильной версии.
Бургер можно настроить так, чтобы он отображался только в мобильной версии или и в мобильной, и в десктопной — если основное меню хочется спрятать.
Советуем на этом этапе не перегружать топбар: размещайте только то, что действительно важно пользователю. Чем проще и понятнее навигация — тем выше шанс, что человек останется на сайте и совершит нужное действие.
Верхняя строка: информационный уровень
Хотя верхняя строка не обязательна, мы в студии используем ее чаще, чем нижнюю — она отлично подходит для размещения контактной и вспомогательной информации.
Чтобы активировать верхнюю строку:
- зайдите в раздел "Верхняя строка";
- включите отображение;
- настройте ее внешний вид и содержимое.
Как мы используем верхнюю строку:
- левая колонка: часто размещаем адрес магазина или офиса, ссылку на форму обратной связи, иногда — блок ссылок, если нужно вывести навигационные элементы отдельно, как это делают крупные интернет-магазины;
- центральная колонка: пока используем редко, но считаем, что здесь отлично будет смотреться график работы, часы приема, или другая важная информация. В одном из примеров мы используем центральную строку для размещения ссылок RUS | ENG для перехода к версии сайта на английском языке;
- правая колонка: номер телефона — один из самых частых элементов, иконки соцсетей и мессенджеров (WhatsApp, Telegram, VK и пр.).
Как и в остальных строках, вы можете управлять отображением блоков по устройствам, задавать отступы, ширину, фон и другие параметры.
Важно: верхняя строка должна быть вспомогательной, а не отвлекать от основного меню.
Используйте ее для того, чтобы сразу дать человеку контакт, доверие и быстрый доступ к обратной связи.
Нижняя строка: опционально и по необходимости
Нижнюю строку мы используем реже всего. Иногда сайты, особенно интернет-магазины, формируют топбар из трех строк. Но, по нашему мнению, такой подход может перегружать интерфейс, особенно, если сайт рассчитан на быструю навигацию и простоту восприятия.
Тем не менее, бывают ситуации, когда нижняя строка действительно оправдана:
- если у вас большое количество ссылок;
- если проект масштабный, с множеством категорий;
- если нужно сделать быстрый доступ к самым популярным разделам интернет-магазина.
В таких случаях нижняя строка может быть отличным решением: разместите там ссылки на категории товаров или другие ключевые разделы.
На данный момент это единственный сценарий использования, который мы применяли на практике. Но редактор топбара — инструмент новый, и мы продолжаем его изучать. Следите за нашими работами: по мере накопления опыта мы будем делиться свежими идеями и приемами.
Примеры из нашей практики
Мы постарались подобрать сайты из разных сфер — интернет-магазины и сайты услуг — и показать, какие элементы и настройки топбара использованы в каждом случае.
- производитель катеров и яхт "Albakore"
Используется одна строка топбара (средняя строка). В левой колонке — логотип, в центральной — навигационное меню, в правой — бургер-меню.
Минималистичное и эффектное решение, подходящее для премиального продукта. Благодаря новому редактору топбар смотрится цельно, а все внимание сосредоточено на визуале и ключевых разделах. Хороший пример того, как обойтись одной строкой без потери функциональности.
- база отдыха "Онегин Хутор"
Также используется одна средняя строка топбара. В левой колонке — логотип, в центральной — ссылки на страницы сайта, в правой — иконки соцсетей и мессенджеров, кнопка "Выбрать дом", бургер-меню.
Более насыщенное меню по сравнению с минималистичным вариантом. Наглядно демонстрирует, как в рамках одной строки можно разместить все ключевые элементы и не перегрузить интерфейс.
- сеть детских футбольных школ "Юниор"
Используется две строки топбара. Верхняя строка: в левой колонке — информация о филиалах и ссылка "Напишите нам", в правой колонке — номер телефона, кнопка "Заказать звонок", иконки мессенджеров. Средняя строка: левая колонка — логотип, центральная — основное меню с разделами, правая — кнопка "Бесплатное занятие" и бургер-меню.
Классический пример шапки для сайта с услугами. Топбар решает сразу несколько задач: информирует, упрощает навигацию и направляет к целевому действию. Благодаря новому редактору шапка остается визуально легкой, несмотря на обилие элементов.
- производственная компания "Окна Рядом"
Используется две строки топбара. Верхняя строка: левая колонка — информация о сети салонов, email, правая — номер телефона, иконки мессенджеров и соцсетей. Средняя строка: левая колонка — логотип, центральная — кнопка "Каталог", строка поиска по каталогу и навигационное меню, правая — кнопка "Бесплатный замер".
Пример реализации шапки для сайта услуг с элементами e-commerce. Каталог, поиск, навигация и призыв к действию расположены логично, без визуальной перегрузки.
- производитель исследовательских приборов "АИП"
Используется две строки топбара. Верхняя строка: левая колонка — ссылки на страницы сайта, центральная колонка — переключатель языковой версии (Рус/Eng), правая колонка — адрес, телефон, WhatsApp. Средняя строка: левая колонка — логотип, центральная колонка — кнопка "Каталог" и поиск по каталогу, правая колонка — кнопка "Консультация" и бургер-меню.
В данном примере дополнительно использована функция визуального разделения строк и колонок в средней строке, благодаря которой топбар смотрится чуть более современно.
- интернет-магазин бытовой техники "KitchenAid"
Используется две строки топбара. Верхняя строка: левая колонка — ссылки на страницы сайта, правая колонка — адрес, номер телефона, иконки мессенджеров. Средняя строка: левая колонка — логотип, центральная — кнопка "Каталог" и строка поиска, правая колонка — личный кабинет и корзина.
Продуманная структура в духе крупных интернет-магазинов. Пример того, как новый топбар на Nethouse можно использовать для построения полноценной коммерческой шапки.
- официальный дилер кухонной техники "Omoikiri"
Используется три строки топбара. Верхняя строка: левая колонка — два адреса, правая колонка — номера телефонов, иконки мессенджеров. Средняя строка: левая колонка — логотип, центральная — кнопка "Каталог товаров" и строка поиска, правая колонка — личный кабинет и корзина. Нижняя строка: центральная колонка — блок ссылок на основные разделы сайта.
Пример полноформатного трехуровневого топбара для сайта с большим каталогом и разветвленной навигацией. Несмотря на объем, шапка остается читаемой и строгой, соответствует визуальному стилю бренда.
В завершение
Новый топбар — это не просто обновление одного блока. Это мощный инструмент, который открывает перед вами совершенно новый уровень в оформлении сайта. Теперь верхнее меню можно адаптировать под любые задачи: от минималистичного лендинга до масштабного интернет-магазина.
Если вы всерьез относитесь к своему сайту, топбаром обязательно нужно пользоваться. Он не просто украшает — он работает на конверсию, помогает удерживать внимание, делает интерфейс современным и удобным, в духе крупных брендов и маркетплейсов.
Поделиться новостью
Новые статьи
Все Статьи
09/04
2026
2026
Уведомления в Max. Обновление корзины и модуля доставки.
Рассказываем, что изменилось в конструкторе сайтов Nethouse. Добавили новые возможности, которые доступны владельцам сайтов уже сегодня.
08/04
2026
2026
SEO для интернет-магазина: в топ-10 Яндекса за 3 месяца
SEO-продвижение — надежный способ привлекать клиентов из поиска. На примере покажем, как мы выводим сайт в топ Яндекса и стабильно растим органический трафик.
26/03
2026
2026
Доставка в интернет-магазине: как сделать ее быстрой и удобной для покупателя
Статистика показывает: до 70% покупателей отказываются от заказа, если их не устраивает способ или стоимость доставки. А 90% из них больше не вернутся в магазин после негативного опыта ожидания и получения товара. В этой статье разберем, как настроить доставку так, чтобы клиенты оформляли заказы и возвращались снова.
23/03
2026
2026
SEO-аудит сайта за 0 рублей
Контекстная реклама в Яндекс Директе — проверенный инструмент для быстрого поиска клиентов. Она показывает объявления тем, кто ищет ваши товары и услуги прямо сейчас. Закажите премиум-настройку рекламы в Директе, чтобы получить полное сопровождение рекламных кампаний на 1 месяц!
19/03
2026
2026
Сквозные модули и блоки
Мы добавили два новых инструмента, которые значительно ускорят создание и редактирование сайта, а главное — сделают эти процессы более гибкими и удобными. Теперь вы можете использовать сквозные блоки и сквозные модули.
12/03
2026
2026
Как сделать каталог товаров в интернет-магазине
Каталог товаров — один из ключевых элементов интернет-магазина. В нем представлены все товары, которые доступны к заказу. Каталог помогает пользователю найти нужные позиции, определиться с параметрами и совершить покупку. В этой статье расскажем, как правильно оформить каталог, используя конструктор сайтов, чтобы покупатель с легкостью совершал покупки в вашем интернет-магазине.
10/03
2026
2026
Как быстро поднять сайт в выдаче: новые тарифы в Nethouse.Продвижение
SEO-продвижение всегда требует времени. Бывает, что месяцы работы не приносят желаемого роста, и позиции сайта остаются на месте. Когда классические методы не работают, нужно использовать новые стратегии. В сервисе Nethouse.Продвижение появились новые тарифы — Альфа Премиум (для регионов) и Бета Премиум (для Москвы и области, Санкт-Петербурга и области). Они включают все опции Альфа+ и Бета+, но с мощным дополнением для быстрого роста в выдаче.
04/03
2026
2026
10 000 рублей на первый запуск кампании в Яндекс Директе
Запустите рекламу в Яндекс Директ — сервисе для простого привлечения клиентов в интернете. Начните продвижение с приятным бонусом – получите 10 000 рублей на вашу первую рекламу.