Хлебные крошки в Тильде
Присутствие хлебных крошек на сайте в Тильде решает сразу две главных задачи сайта:
- Удобная навигация по сайту для пользователя
- Seo-оптимизация сайта. Хлебные крошки создают внутреннюю перелинковку на сайте. Чем важнее страница в структуре сайта, тем больше она получит ссылок и внутреннего веса всего сайта.
Особенно важно иметь хлебные крошки для больших проектов, у которых вложенность страниц более 3 уровней.
Как добавить хлебные крошки в сайт на Тильде
Зайдите в свой проект в Тильде и перейдите в режим редактирования той страницы, на которой вам нужны хлебные крошки.
Добавьте блок ME605 (Хлебные крошки). Найти его можно в Все блоки -> Меню:
После добавления блока зайдите в «Контент». Вам нужно проставить путь к этой странице:
Здесь ТЕКСТ 1 — обычно это Главная страница сайта.
ТЕКСТ 2 — в моем случае, общий каталог товаров.
И так далее по вашей схеме вложенности.
Тогда у вас получатся хлебные крошки в таком примерном виде:
Не забудьте опубликовать страницу.
Что-то не получилось или остались вопросы по хлебным крошкам? Опишите все подробно в комментариях к этой статье, мы постараемся вам помочь
Как создать меню вида «хлебные крошки»?
Вы можете создать хлебные крошки при помощи блока ME605, он находится в разделе «Меню».
Похожие вопросы
- Как добавить вкладки и переключать блоки?
- Как добавить меню второго уровня (многоуровневое меню)?
- Как сделать, чтобы одно меню накладывалось на первый блок, а второе появлялось при скролле?
- Как добавить одно меню на все страницы?
- Какие блоки меню фиксируются на мобильных?
Этот ответ был вам полезен?
Просмотры: 18332
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Как создать меню вида «хлебные крошки»? | Тильда Бесплатный Конструктор для Создания Сайтов
Курс по созданию и оптимизации сайта на Tilda — https://4esnokov.ru/kurs-po-sozdaniyu-saytov Услуги по Digital-маркетингу — https://4esnokov.ru/uslugi-po-digital-marketingu Только начинаете знакомиться с Tilda? Эти видео для вас: �� Полное описание возможностей Тильда (видеогид по основным функциям) — https://youtu.be/y5_2YE5-Hsc �� Начало Работы: Как устроена Тильда, Создание и Редактирование страниц — https://youtu.be/wE_QV2URF6Y �� Настройки Сайта: Домен, Настройки Форм, Аналитика, Главная Страница, Почта и пр. — https://youtu.be/c1qrSqRZ3E8 �� 13 секретов удобной навигации по сайту — https://youtu.be/EbKdk353idg �� Как создать интернет-магазин на Тильде и работать с ним? — https://youtu.be/nxyDBFBBv5I �� Отзывы для сайта: Зачем? Как? Где? — https://youtu.be/QELa7Vbk8YM �� Обзор сторонних виджетов (сервисов) для интеграции — https://youtu.be/CsAtK4Prfmk �� ЛайфХаки для Tilda: https://www.youtube.com/watch?v=mCjZASVQhUw&list=PLFpFHBX5nAWa639Vez3_JrlAbjwOLfqMI «ВидеоФотоСтудия Алексея Чеснокова» место, где я снимаю свои видео — https://фотовидеостудия.рф Меню вида «хлебные крошки» считается важной составляющей юзабилити и обеспечивает комфортность навигации для пользователя. Такой навигационный инструмент особенно полезен тем веб-ресурсам, которые содержат много контента и имеют сложную иерархию веб-страниц. «Хлебные крошки» показывают путь от главной страницы к текущей и помогают пользователю понять, в какой части сайта он находится, как ему попасть на другой интересующий его раздел. К сожалению, не всегда этому типу меню уделяют должное внимание, а зря. «Хлебные крошки» дополняют дизайн веб-сайта и демонстрируют своего рода заботу о пользователе. Решили создать меню вида «хлебные крошки» на своем сайте? Отлично! Смотрите этот ролик и вы узнаете, как создать «хлебные крошки» при помощи блока ME605 на конструкторе Тильда. Нет возможности на старте интернет-проекта оплатить дорогостоящие услуги web-дизайнеров и web-программистов? Тогда обратите внимание конструктор сайтов Tilda Publishing. Tilda дает возможность делать отличные лендинги и сайты-визитки без привлечения команды web-разработчиков. Вы сможете с минимальными вложениями запустить бизнес в интернете не обладая навыками программирования и web-дизайна. Было полезно данное видео и есть не преодолимое желание в дальнейшем смотреть новые? Подписывайтесь на канал «Маркетинг в огне с Алексеем Чесноковым» и кликайте на колокольчик! #Маркетинг #ИнтернетМаркетинг #АлексейЧесноков #Чесноков #DigitalMarketing #ОбучениеМаркетинг #Marketing #Tilda #Тильда #КонструкторСайтов #КонструкторСайтовБесплатно #ТильдаКонструкторСайтов #СоздатьСайтКонструктор #TildaКонструкторСайтов #ОнлайнКонструкторСайтов
Показать больше
Войдите , чтобы оставлять комментарии
Как сделать хлебные крошки в тильде
В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Материал посвящен дизайну меню — то, как меню работает и как оно выглядит. Если вам нужно разобраться как вообще создать меню сайта, добавить меню сразу на все страницы или сделать навигацию внутри страницы, пожалуйста прочитайте статью:
Как сделать меню сайта
Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Каждая ссылка — пункт меню. Меню необходимо для навигации: перехода между страницами или между разделами одной страницы.
Общие рекомендации
Меню должно помогать посетителю быстро найти необходимую информацию.
Меню должно быть лаконичным.
Пунктов меню не должно быть слишком много.
Оптимальное количество пунктов меню — 5 или меньше.
Названия пунктов меню лучше делать из одного слова.
Хорошо, если слова будут не слишком длинные.
Меню не должно быть тяжеловесным и отнимать внимание от контента.
Примеры хороших меню
Описание картинки
Прозрачное статичное меню поверх обложки
Как себя ведет:
Всегда находится вверху страницы, не отвлекает от содержания, при необходимости пользователь может легко к нему обратиться, так как оно расположено в привычном месте.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Посмотреть страницу с меню в браузере
Фиксированное меню
Как себя ведет:
Меню, которое всегда находится в поле зрения пользователя и он может обратиться к нему на любом месте на странице. У такого меню чаще всего прозрачный фон в начале страницы (на обложке), который меняется на непрозрачный во время скрола.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%
Посмотреть страницу с меню в браузере
Два разных меню: одно вверху страницы, другое появляется при скролле
Как себя ведет:
Вариант, похожий на предыдущий, только при скролле появляется меню с другим содержимым. Например, в начале страницы меню содержит логотип, пункты (ссылки на разделы сайта) и ссылки на социальные сети. А когда пользователь начинает пролистывать страницу, появляется и остается в поле зрения меню с логотипом, призывом к действию и кнопкой обратного звонка.
Добавить на страницу два блока ME301. И задать им следующие параметры:
Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%
Первое меню
Первое меню
Второе меню
Второе меню
Посмотреть страницу с меню в браузере
Меню «гамбургер»
Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.
Для чего используется:
В случаях, когда необходимо, чтобы отвлекающие элементы были сведены к минимуму и внимание пользователя было обращено только к контенту. Довольно часто меню «гамбургер» используется в мобильных версиях сайта. Например, можно добавить обычное меню и назначить ему видимость «только для компьютера», затем добавить меню «гамбургер» и назначить ему видимость «только для мобильных».
Как настроить видимость блока только для мобильных устройств
Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:
Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый
Посмотреть страницу с меню в браузере
Многоуровневое меню
Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.
Для чего используется:
В объемных сайтах со сложной структурой.
Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.
Пункты подменю основного блока
Добавить на страницу любой блок меню, который содержит пункты меню.
Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.
Нажать на иконку плюса напротив пункта к которому нужно добавить пункт второго уровня. Заполнить появившиеся поля названия пункта и его ссылку.
Чтобы добавить новый пункт подменю, нажмите на иконку плюса ещё раз.
Подпункты меню будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Блок ME601
Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus