NLM210 • Время настройки: 5 минут
Автоматические хлебные крошки на Тильда из URL
Модификация автоматически формирует путь по URL страницы, позволяя вам при этом настроить отображение сегментов и внешний вид цепочки. Это удобный инструмент, который делает структуру сайта яснее как для посетителей, так и для поисковиков.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Html code will be here
Смотрите, как быстро установить модификацию
Инструкция
Шаг 1.
Важно! Если хлебные крошки нужны на всём сайте, установите код на страницу шапки сайта, или в head в настройках сайта глобально.
Для установки вам понадобится создать два блока t123 в Tilda:
Заполни поля в генераторе.
Теперь перейдите в Генератор модификации и настройте следующее:
Когда всё готово — копируешь HTML-код и вставляешь его в блок T123 на странице, где должен работать поиск, или размести код в шапке сайта.
Имей ввиду:
Важно! Если хлебные крошки нужны на всём сайте, установите код на страницу шапки сайта, или в head в настройках сайта глобально.
Для установки вам понадобится создать два блока t123 в Tilda:
- Блок для Скрипта: Сюда вы вставите весь код, сгенерированный в Генераторе.
- Блок-Контейнер: Это будет пустой блок (еще один T123), куда скрипт автоматически поместит сами хлебные крошки. Он должен остаться пустым, в нем вы можете только задавать ширину хлебных крошек, отступы в колонках слева, расположение крошек.
Заполни поля в генераторе.
Теперь перейдите в Генератор модификации и настройте следующее:
- ID блока T123: Укажите здесь ID вашего Блока-Контейнера (того, куда скрипт будет вставлять хлебные крошки из Шага 1).
- Добавить пункт «Главная»: Отметьте галочкой, если хотите, чтобы хлебные крошки начинались со ссылки на главную страницу.
- Стиль разделителя: Выберите символ, который будет разделять пункты (например, / или >) и укажите его цвет. При необходимости можно вписать свой разделитель, подойдет любой текстовый символ который существует. :)
- Расположение хлебных крошек: Настройте внешние отступы (сверху, снизу, слева) для всего блока хлебных крошек на десктопной версии сайта.
- Настройка для мобильной версии (до 640px): Укажите отдельные внешние отступы (сверху, снизу, слева) и размер шрифта для хлебных крошек на мобильных устройствах.
- Настройка шрифта: Выберите шрифт, его размер и насыщенность (жирность), а также цвет текста для обычных (неактивных) пунктов хлебных крошек.
- Активный пункт: Настройте насыщенность (жирность), цвет и прозрачность текста для активного (последнего) пункта хлебных крошек (названия текущей страницы).
- При наведении: Настройте, как будут выглядеть пункты-ссылки при наведении курсора: цвет текста, прозрачность и стиль подчеркивания (толщина и цвет).
- Добавить Перевод: Используйте эту опцию, чтобы заменить части URL-адреса страниц (например, /about-us/) на свои собственные, более понятные названия в хлебных крошках (например, «О компании»). Для каждого нужного перевода добавьте отдельное правило, указывая оригинальный сегмент URL и новое название. Пример.
Когда всё готово — копируешь HTML-код и вставляешь его в блок T123 на странице, где должен работать поиск, или размести код в шапке сайта.
Имей ввиду:
- Для хлебных крошек в товарах нужно использовать модификацию NLM145.
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Хлебные крошки на Tilda — навигация и SEO в одном решении
Хлебные крошки выполняют две функции: помогают пользователю понять, где он находится, и вернуться на уровень выше, а также добавляют структурированную разметку BreadcrumbList для поисковых систем.
Модификация NLM210 от Nolim автоматически формирует хлебные крошки из URL страницы. Это удобно для каталогов, блогов, разделов с услугами и многоуровневых сайтов, где вручную прописывать путь на каждой странице долго и легко ошибиться.
Модификация NLM210 от Nolim автоматически формирует хлебные крошки из URL страницы. Это удобно для каталогов, блогов, разделов с услугами и многоуровневых сайтов, где вручную прописывать путь на каждой странице долго и легко ошибиться.
Как установить за 5 минут
Для установки нужны два блока T123. В первый вставляется код из генератора. Второй остаётся пустым — это контейнер, куда скрипт автоматически выведет хлебные крошки. В этом блоке можно настроить ширину, отступы и расположение крошек на странице.
Если хлебные крошки нужны на всём сайте, код лучше добавить в страницу шапки или глобально в head в настройках сайта. Так не придётся дублировать установку на каждой странице.
Если хлебные крошки нужны на всём сайте, код лучше добавить в страницу шапки или глобально в head в настройках сайта. Так не придётся дублировать установку на каждой странице.
Что значит «автоматически из URL»
Модификация читает адрес страницы и строит путь из его частей. Например, из URL `/catalog/lamps/table` можно получить цепочку: Главная → Каталог → Лампы → Настольные.
Чтобы крошки выглядели нормально, в генераторе можно добавить переводы URL-сегментов: `catalog` заменить на «Каталог», `lamps` — на «Лампы», `table` — на «Настольные». В итоге адрес остаётся техническим, а пользователь видит понятную навигацию.
Чтобы крошки выглядели нормально, в генераторе можно добавить переводы URL-сегментов: `catalog` заменить на «Каталог», `lamps` — на «Лампы», `table` — на «Настольные». В итоге адрес остаётся техническим, а пользователь видит понятную навигацию.
Что можно настроить
В генераторе можно добавить пункт «Главная», выбрать разделитель между пунктами, настроить шрифт, размер, насыщенность, цвет обычных ссылок и активного пункта. Для мобильной версии задаются отдельные отступы и размер текста.
Также можно настроить hover-состояние: цвет, прозрачность, подчёркивание и толщину линии. Это помогает встроить хлебные крошки в дизайн сайта, а не просто вывести техническую строку над контентом.
Также можно настроить hover-состояние: цвет, прозрачность, подчёркивание и толщину линии. Это помогает встроить хлебные крошки в дизайн сайта, а не просто вывести техническую строку над контентом.
Где использовать хлебные крошки
Хлебные крошки особенно полезны на сайтах с вложенной структурой: каталогах товаров, базе знаний, блоге, страницах услуг, шаблонах, инструкциях и разделах с большим количеством материалов.
На простом лендинге из одной страницы они обычно не нужны. Но если пользователь может попасть на внутреннюю страницу из поиска, рекламы или мессенджера, хлебные крошки помогают быстрее понять контекст и перейти на уровень выше.
На простом лендинге из одной страницы они обычно не нужны. Но если пользователь может попасть на внутреннюю страницу из поиска, рекламы или мессенджера, хлебные крошки помогают быстрее понять контекст и перейти на уровень выше.
Что проверить после публикации
Проверь несколько страниц с разной вложенностью: раздел, подраздел и конечную страницу. Убедись, что все сегменты URL переведены понятно, активный пункт не выглядит как ссылка, а хлебные крошки не ломаются на мобильной версии.
Для товарных страниц используй отдельную модификацию NLM145. У товаров другая логика формирования пути, поэтому NLM210 лучше применять для обычных страниц, разделов, статей и каталогов без товарной специфики.
Для товарных страниц используй отдельную модификацию NLM145. У товаров другая логика формирования пути, поэтому NLM210 лучше применять для обычных страниц, разделов, статей и каталогов без товарной специфики.
Популярные решения для вашего сайта
Часто задаваемые вопросы
Используй модификацию NLM210 от Nolim. Создай два блока T123: в первый вставь код из генератора, второй оставь пустым как контейнер для хлебных крошек. В генераторе укажи ID блока-контейнера, настрой пункт «Главная», разделитель, шрифты, отступы и переводы сегментов URL. Если хлебные крошки нужны на всём сайте, размести код в шапке сайта или глобально в head.
Модификация читает URL текущей страницы и автоматически строит путь. Например, для URL /catalog/lamps/table путь будет: Главная → Каталог → Лампы → Настольные. Ты задаёшь только словарь соответствия (slug → русское название) — всё остальное происходит автоматически.
Да. Хлебные крошки добавляют микроразметку BreadcrumbList в HTML, которую Яндекс и Google используют для отображения структуры сайта в результатах поиска. Это улучшает внешний вид сниппета и может повысить CTR в поиске. Модификация NLM210 включает эту разметку автоматически.
Было: пользователи каталога мебели не понимали где находятся — перешли в «Диваны» из «Гостиной», но обратный путь был неочевиден.
Стало: добавили хлебные крошки тильда через модификацию Nolim — путь «Главная → Гостиная → Диваны» стал виден на каждой странице. Навигация по каталогу улучшилась, отказы снизились на 22%.
Стало: добавили хлебные крошки тильда через модификацию Nolim — путь «Главная → Гостиная → Диваны» стал виден на каждой странице. Навигация по каталогу улучшилась, отказы снизились на 22%.