Войти
Блог / Автоматические хлебные крошки

Автоматические хлебные крошки в Tilda: установка и проверка

Собирает цепочку навигации из URL страницы и заменяет адресные названия понятными подписями из словаря.

Подготовка и установка

Настраивайте параметры в личном кабинете: генератор создаёт полный код для вставки, без ручного изменения JavaScript.

  1. Подготовьте адреса страницСоздайте иерархию URL: например, /blog и /blog/moya-statya. В Tilda измените адрес в настройках страницы. Убедитесь, что родительские адреса действительно открываются; скрипт не создаёт страницы.
  2. Заполните словарьВ «Моих покупках» задайте название главной и пары segment=Название, по одной на строку: blog=Блог и moya-statya=Моя статья. В ключе используйте сегмент адреса без слешей.
  3. Настройте оформлениеВыберите фон, цвет обычных и текущей ссылки, размер шрифта. Для разделителя выберите символ либо HTTPS-ссылку на иконку. Укажите верхний отступ для каждого диапазона экранов.
  4. Получите и установите кодНажмите «Сгенерировать код» и скопируйте результат. Вставьте его в T123 на нужной странице либо в общем footer. Не вставляйте в текстовое поле и не дублируйте экземпляры.
  5. Опубликуйте и проверьтеОпубликуйте страницы. Крошки появятся после header, а если его нет — в начале страницы. Проверьте ссылки предков, текущую подпись и мобильные отступы. При фиксированном меню увеличьте верхний отступ.
  6. Сохраните старые переходыПри изменении адресов настройте редиректы со старых URL средствами Tilda. Модификация сама редиректы не создаёт. После изменения словаря заново сгенерируйте код и замените прежнюю копию.

Совместимость и ограничения

Иерархия определяется путём URL, а не расположением страниц в редакторе. Родительские страницы должны существовать. Без записи в словаре показывается читаемый сегмент адреса. Разметка BreadcrumbList добавляется только если на странице ещё нет такой разметки.

Проверка результата

Откройте опубликованную страницу в обычном браузере и на телефоне. Проверьте работу кнопок и ссылок, повторное открытие интерфейса и поведение после перезагрузки. Пример на LF Code показывает механику на демонстрационных элементах; перед установкой на рабочий магазин сохраните копию страницы.

Настройки и получение кода

После изменения параметров повторно сгенерируйте код, замените предыдущую копию в T123 и опубликуйте страницу. Разовая стоимость — 500 ₽.

Живой пример и инструкция

Полезные материалы