Когда сайт на Тильде разрастается до 8-10 страниц, задача сделать меню на все страницы Тильда одним блоком встаёт почти всегда. Конструктор верстает каждую страницу как отдельный документ, поэтому шапка с навигацией существует в стольких копиях, сколько у вас страниц в проекте. Добавили новый пункт в каталог - идёте переправлять меню на каждой странице руками. Я собирал такие сайты клиентам не раз и обычно решаю задачу одним из трёх способов, в зависимости от того, сколько страниц в проекте и как часто меняется навигация.
По теме статьи
Готовое решение
Скрипт расчёта налога (НДС) в корзине Tilda
Автоматический расчёт НДС отдельной строкой в корзине Tilda — для США, ЕС и B2B.
от5 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Почему в Тильде нет сквозного меню по умолчанию
В Тильде страница - самостоятельный документ. Zero Block собирает её из T‑блоков, и каждый такой блок принадлежит конкретной странице, а не всему проекту целиком. В WordPress или Битриксе шапка обычно тянется из одного шаблона на все страницы, в Тильде такого файла шаблона нет - есть отдельные страницы, общие настройки сайта и штатная шапка: страницу с меню назначают хедером в Настройках сайта → Шапка и подвал, и она выводится на всех страницах. Без назначенной шапки меню, свёрстанное как обычный T‑блок, живёт отдельной копией на каждой странице.
Это не баг, а следствие архитектуры конструктора: Тильда рассчитана на лендинги и небольшие сайты, где страниц немного и правки в шапке случаются редко. На сайте из 5-7 страниц дублирование почти не мешает. На сайте из 20 и больше страниц, особенно с каталогом или блогом, ручное копирование меню превращается в рутину и источник ошибок - на одной странице забыли добавить новый пункт, на другой ссылка ведёт на старый адрес.
Способ 1. Сохранить меню в библиотеку блоков Tilda
Самый простой вариант без единой строчки кода - собрать меню как обычный T‑блок и сохранить его в личную библиотеку. В редакторе страницы кликаете по блоку меню, в настройках блока выбираете «Сохранить в библиотеку», даёте название вроде «Меню-финал» и потом на любой странице проекта вставляете этот же блок через «Библиотека блоков» -> «Мои блоки».
Способ рабочий, но с оговоркой: сохранённый блок не связан с исходным напрямую. Поправили пункт меню на одной странице - на остальных останется старая версия, пока вы не пересохраните блок в библиотеку заново и не замените его на каждой странице руками. На проекте из 10 страниц такая правка отнимает 20-30 минут: зайти на каждую страницу, удалить старый блок, вставить новый, опубликовать. Для сайта, где меню меняется раз в полгода, это нормально. Для интернет-магазина, где раздел каталога дополняется каждую неделю, способ быстро надоедает.
Способ 2. Общий код в настройках сайта
Второй вариант обходит ограничение Zero Block, потому что вообще не использует T‑блоки. В настройках сайта, во вкладке «Ещё», есть поля «Вставить код в head» и «Вставить код перед /body». Всё, что вы туда добавите, Тильда вставляет на все страницы проекта одинаково, без исключений.
Верстаю меню обычным HTML и CSS, оборачиваю в контейнер с фиксированным id, например menu-global, и добавляю разметку в поле перед закрывающим body. Стили ухожу в head через тег style. Получается шапка, независимая от Zero Block, которая не пересобирается при каждой публикации страницы и не размножается по проекту.
Минус в том, что верстать приходится руками, без визуального редактора Тильды: drag-and-drop тут не работает, а адаптив под мобильные устройства прописывается через media-запросы самостоятельно. Для меню с выпадающими подпунктами и анимацией это уже полноценная фронтенд-верстка, а не пара часов в конструкторе.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Способ 3. Меню через fetch-скрипт с одним источником
Третий способ - тот, что я обычно ставлю клиентам с каталогом от 15 страниц и выше. Логика простая: делаю отдельную служебную страницу в Тильде, например /menu-source, верстаю на ней меню как обычный T‑блок с полным доступом к визуальному редактору, а на остальных страницах через общий код проекта подгружаю разметку этой страницы через fetch и вставляю в нужное место DOM.
fetch('/menu-source')
.then(res => res.text())
.then(html => {
const doc = new DOMParser().parseFromString(html, 'text/html');
const menu = doc.querySelector('#menu-block');
const target = document.querySelector('#menu-placeholder');
if (menu && target) target.replaceWith(menu);
});
На каждой странице оставляю пустой div с id menu-placeholder, куда скрипт подставит актуальное меню при загрузке. Править навигацию теперь можно в одном месте, на служебной странице /menu-source, в привычном визуальном редакторе Тильды, без верстки руками. Опубликовали страницу-источник - изменения подхватились везде при следующей загрузке любой страницы сайта.
Такой же принцип общего источника я использую в скриптах для Тильды, которые считают стоимость доставки СДЭК или дёргают виджет оплаты Т‑Банка: один блок кода обслуживает все страницы вместо копий на каждой. Из минусов - меню появляется на долю секунды позже основного контента, потому что грузится отдельным запросом. На практике это 100-200 миллисекунд на обычном хостинге Тильды и незаметно глазу, но для проектов, где важна каждая миллисекунда LCP, это стоит учитывать при выборе способа.
Сравнение трёх способов
Если сводить всё к одной таблице, разница между способами такая:
| Способ | Где правится меню | Когда использовать |
|---|---|---|
| Библиотека блоков | На каждой странице отдельно, без кода | Сайт до 7-10 страниц, редкие правки навигации |
| Общий код head/body | В одном месте, HTML и CSS руками | Простое меню без выпадающих списков, важна скорость |
| Fetch-скрипт | На отдельной странице-источнике, в визуальном редакторе | Каталог от 15 страниц, меню меняется часто |
Частые ошибки при настройке сквозного меню
- Ссылки на якоря вида #price работают только на той странице, где есть блок с этим id. При переносе меню на все страницы такие ссылки нужно менять на полный адрес вида /#price или на url конкретной страницы.
- Код меню вставили в head вместо конца body - браузер пытается отрисовать меню раньше, чем прогрузился остальной DOM, и получает пустой контейнер.
- Забыли протестировать мобильную версию: у Тильды отдельная адаптивная сетка, и меню, собранное вручную способом с общим кодом, требует собственных media-запросов под телефон.
- Общий блок меню конфликтует по z‑index с попапами Тильды - кнопка меню оказывается под попапом заказа и не кликается.
- Пытаются встроить в меню персональные данные - имя из личного кабинета, счётчик товаров в корзине - без сервера. Здесь чистой вёрсткой не обойтись, нужна интеграция с бэкендом или CRM. Такие доработки я обычно веду в рамках кастомной разработки под Тильду, потому что они тянут за собой API и хранение данных, а не просто HTML-блок.
Частые вопросы
Можно ли сделать меню на все страницы Тильды без кода?
Да, штатный способ - назначить страницу с меню шапкой в Настройках сайта → Шапка и подвал, и способ через библиотеку блоков тоже не требует кода. Ограничение библиотеки в том, что после правки меню на исходной странице придётся вручную заменить блок на каждой из остальных страниц - синхронизация не автоматическая.
Что делать, если ссылка в меню ведёт на удалённую страницу?
Проверяю список ссылок меню при каждом удалении раздела сайта. Если страницу удалили, а ссылка осталась, посетитель попадает на 404. При способе с fetch-скриптом достаточно поправить ссылку один раз на странице-источнике, при остальных двух способах - на каждой странице, где меню продублировано.
Как обновить пункт меню сразу на всех страницах после запуска сайта?
Зависит от выбранного способа. Если меню собрано через fetch-скрипт, правите только служебную страницу-источник. Если использована библиотека блоков, пересохраняете блок и вручную заменяете его на каждой странице. Если меню лежит в общем коде head или body, правите один раз в настройках сайта - это применяется сразу везде.
Замедляет ли JS-подгрузка меню скорость сайта?
Задержка есть, но небольшая - около 100-200 миллисекунд на обычном хостинге Тильды, пока браузер делает отдельный запрос за разметкой меню. Для большинства сайтов это некритично, но для проектов, где важна каждая миллисекунда в метриках Core Web Vitals, лучше сравнить это с вариантом общего кода в head, где задержки на подгрузку нет вовсе.