Как сделать меню сайта
Чтобы добавить на сайт меню, откройте библиотеку блоков, категорию «Меню» и выберите подходящий тип. Настройте его через кнопку «Контент».
О дизайне меню — то, как меню работает и как оно выглядит, читайте в статье:
Дизайн меню и применение на практике
В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Настройка пунктов меню
Пункты в меню можно настроить двумя способами:
1. Прописать название пунктов меню и ссылки вручную
Укажите абсолютную ссылку на страницу, например:
http://mysite.com/about
Либо относительную:
/about
Адреса отдельных страниц задаются в настройках каждой страницы:
Не указывайте внутренний адрес страницы в редакторе Тильды, например:
По этому адресу открыть страницу можете только вы. В меню она работать не будет.
2. Воспользоваться помощником для расстановки ссылок
Наведите мышку на пункт меню. Вы увидите два варианта, как можно поставить ссылку: «Выбрать страницу» и «Выбрать блок».
Если нажать «Выбрать страницу», то появится список страниц вашего сайта. Кликайте на нужную страницу и ссылка поставится автоматически.
Если нужно поставить ссылку к блоку на странице, нажмите «Выбрать блок». Вы переместитесь на страницу для выбора блока. Кликните в тот блок, к которому должен быть совершен переход, при нажатии на пункт меню и ссылка поставится автоматически.
Как сделать меню сразу для всех страниц
Чтобы сделать меню сразу для всех страниц проекта (сайта), создайте пустую страницу, добавьте на нее блок меню и настройте его. Затем перейдите в настройки сайта, на вкладку «Шапка и подвал» и назначьте эту страницу как Header. Нажмите «Опубликовать все страницы».
Меню для перемещения внутри одной страницы
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec586533845), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec586533845), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Если вы хотите, чтобы в ссылке был не номер блока, а название раздела, используйте якорные ссылки.
Чтобы переход по странице был плавным, добавьте модификатор «Плавный скрол до локальной якорной ссылки». Это блок Т178 в категории «Другое».
Меню для двуязычного сайта
Чтобы сделать двуязычный сайт, создайте два проекта. Обычно удобно сделать сначала версию на одном языке, а потом скопировать проект и перевести на другой язык.
Настройте «шапку» в обоих проектах, добавив в нее блок меню, в котором есть настройка языков: ME204, МЕ301, ME302, ME303, ME304, ME401, МЕ402, МЕ403. В содержании блока укажите языки и ссылки на проекты.
Как сделать второй уровень меню
Создать меню второго уровня можно двумя способами:
1. Добавить подпункты меню в основном блоке
Добавьте на страницу блок меню.
Перейдите в Контент блока → Список пунктов меню → нажмите «Добавить пункты второго уровня» — слева появятся иконки «+» .
Чтобы добавить второй уровень, нажмите на «+», укажите заголовок подпункта и его ссылку. Нажмите на «+» несколько раз, чтобы добавить необходимое количество подпунктов.
Нажимайте на иконку «+», чтобы увеличить количество подпунктов.
Опубликуйте страницу и посмотрите как выглядит меню второго уровня.
На десктопных устройствах второй уровень меню отображается в виде выпадающего списка при наведении курсора, на мобильных открытие происходит по тапу.
Важно : основной пункт, для которого используется подменю, не будет кликабельным при наличии подпунктов. Если нужно, чтобы он был активен, продублируйте его заголовок и ссылку в меню второго уровня.
Чтобы подсказать посетителям сайта пункты меню, в которых есть второй уровень, включите иконку в Настройках блока меню → Настройки подменю → Показывать иконку меню второго уровня.
2. Использовать блок ME601/ME601A
Добавьте на страницу любой блок меню — это будет меню первого уровня. Затем добавьте блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке МЕ601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus
Pop-up блоки
Вы можете добавить на страницу всплывающие окна (pop-up), которые будут появляться в зависимости от поведения пользователя: при клике на ссылку, при скролле , по времени или при закрытии страницы .
Появление блока при клике на ссылку
Чтобы при клике на кнопку появлялось окно с информацией или формой подписки, вам нужно задать специальную ссылку для кнопки. Ссылку можно создать в блоке с всплывающим окном.
1. Откройте Библиотеку блоков → категория «Форма» и добавьте pop-up блок. Подходящие блоки: BF501N, BF502N, BF503, BF504.
2. При добавлении блока в тексте на нем будет указана его ссылка (линкхук).
3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название. Например, #popup:superpopup.
4. Теперь эту ссылку можно добавить в кнопку. Откройте меню «Контент» блока с кнопкой и в поле «Ссылка для кнопки» поставьте ссылку вида: #popup:subscription
Опубликуйте страницу или перейдите в режим предпросмотра, чтобы увидеть, как работает всплывающее окно. Оно будет появляться при клике на кнопку.
Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.
- Выделите слово, при клике на которое должен появляться pop-up.
- Через появившееся контекстное меню задайте ссылку на всплывающее окно.
- Добавьте pop-up блок (категория «Форма»).
- В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword
Появление блока при скролле
Добавьте всплывающий блок, который должен появляться в момент пролистывания страницы. Например, форму подписки или информацию о выгодном предложении.
- В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).
2. Добавьте специальный блок-триггер, который будет вызывать появление элемента при скролле. Триггер находится в категории «Другое».
Нужен блок – T183.
3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.
Время, на которое запоминается посетитель
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.
Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
4. Опубликуйте страницу. Блок появится, когда посетитель проскролит до места, где вы разместили pop-up блок.
Как редактировать подвал в тильде
Обновление в библиотеке блоков Тильды — меню второго уровня с подменю ME601B из категории «Меню» и панель с логотипом, главными и второстепенными пунктами меню FT306 из категории «Подвал». Рассказываем подробно о новых блоках и показываем, как они выглядят.
Блок ME601B из категории «Меню». Второй уровень с подменю
Блок поможет создать многоуровневую навигацию по сайту с помощью меню второго уровня с подпунктами, которые открываются по клику или ховеру.
Можно задать разную ширину меню и подменю, настроить количество колонок и цвет фона, в том числе отдельно для мобильной версии. Также можно настроить толщину, цвет и радиус скругления бордюра, добавить тень, задать для меню отступ сверху и выбрать, отображать или скрывать иконку меню второго уровня.
Добавляются пункты с помощью карточек, которые удобно копировать и перемещать при создании навигации. В настройках блока можно изменить отступы между пунктами, выбрать стиль активного пункта меню и задать изменения стиля при наведении.
Блок FT306 из категории «Подвал». Панель с логотипом, главными и второстепенными пунктами меню
Новый футер с основными и второстепенными пунктами меню поможет выстроить иерархию в навигации. Основные пункты будут более заметны, второстепенные — меньше и прозрачнее.
Можно настроить ширину подвала и расстояние между пунктами, чтобы красиво разместить любое количество ссылок. Также можно добавить логотип или заголовок и настроить типографику.
3. Как в Тильде настроить шапку и подвал сайта
Шапка и подвал сайта — это те блоки, которые располагаются сверху и снизу на всех страницах сайта.
В этих блоках Вы можете размещать, например, меню, контактную информацию, различные всплывающие формы, блоки аналитики и т.д. То есть то, что должно быть внутри сайта независимо от того, что расположено внутри страницы.
Создадим пустую страницу:
Добавим в ней блок меню:
Получим:
В настройках страницы укажем название «Меню» и в ссылке напишем — header. Сохраним изменения:
После этого страницу необходимо опубликовать, чтобы она стала доступна по ссылке:
Перейдя по полученной ссылке, мы попадем на страницу с меню:
Страница:
Аналогично создадим еще одну новую страницу. Это будет Главная страница сайта. Разместим на ней пока блок с Обложкой:
У нас есть две страницы — Главная и Меню.
Зайдем в настройки сайта:
Переходим в раздел «Шапка и подвал» и выберем наше меню из выпадающего списка в качестве шапки сайта:
Сохраним изменения. Шапка сайта настроена.
Аналогично настраивается подвал сайта — создаем пустую страницу, в которой располагаем блок, например, с контактами. Сохраняем, публикуем, в настройках сайта указываем эту страницу в качестве подвала.
Хотелось бы обратить Ваше внимание на то, что если Вы вносите изменения в шапке или подвале сайта, Вам необходимо будет опубликовать как шапку/подвал, так и все остальные страницы сайта, иначе изменения на остальных страницах применены не будут.
Таким образом, мы познакомились с тем, как настраивать шапку и подвал в сайте на Тильде, и выяснили, зачем это нужно.