Фиксированное скролл меню в Тильде из зеро блока

Фиксированное скролл меню в Тильде — это удобный способ улучшить навигацию по сайту, особенно если он содержит много секций. В этой статье разберём, как реализовать фиксированное меню с помощью Zero Block и нашего tilda скрипта. Вы можете создать стильное и функциональное меню, которое остаётся на экране при прокрутке страницы. Это не только удобно, но и повышает конверсию.

Дзен

YouTube

Как сделать фиксированное скролл меню в Тильде с помощью Zero Block

1. Перед тем, как создать и настроить фиксированное скролл меню, для начала необходимо перед блоками на вашей странице создать якорные ссылки (блок Т173) и в контенте каждой ссылки присвоить ей уникальное имя
2. После всех блоков на странице создайте блок Т178 для плавной прокрутки страницы
3. В любом месте страницы создайте зеро блок
4. Удалите из него лишние элементы и фоновый цвет
5. В поле WINDOW CONTAINER HEIGHT,% пропишите цифру 100
6. Откройте пункт POSITION AND OVERFLOW и в поле POSITION выберите Fixed
7. В поле Z-INDEX пропишите максимальное значение, например 9999999
8. Нажмите на кнопку + и выберите Add Text
9. Добавленный текстовый элемент будет первым пунктом меню. Измените в нем текст. В поле URL введите имя соответствующей якорной ссылки с хештегом (Пример: #contacts)
10. Нажмите правой кнопкой мыши на первый пункт меню и выберите Add CSS Class Name
11. В появившемся поле пропишите класс scroll-menu-item
12. Ширину текстового элемента сделайте в два раза больше его содержимого, чтобы избежать переноса строки
13. Стилизуйте пункт меню по своему усмотрению
14. Продублируйте этот текстовый элемент нужное вам количество раз для создания остальных пунктов меню
15. В дублях измените только текст и имя якорной ссылки. Класс должен оставаться тем же
16. Выделите все пункты меню и нажмите CTRL+G, чтобы сгруппировать их
17. Нажмите на созданную группу, в поле GROUP выберите Object (Beta)
18. Нажмите правой кнопкой мыши на созданную группу и выберите Add CSS Class Name
19. В появившемся поле пропишите класс scroll-menu-container
20. Модификация не предназначена для мобильных устройств, поэтому группу с пунктами меню вынесите за границы блока на всех экранах, ширина которых меньше 960px
21. Сохраните изменения и закройте зеро блока
22. После всех блоков на странице создайте HTML блок Т123, скопируйте в него код модификации и опубликуйте страницу

В коде можно изменить отступ слева от меню, цвет и жирность активного пункта меню.

Модификация для создания фиксированного скролл меню в тильде

Что такое фиксированное скролл меню в Тильде?

Фиксированное скролл меню в Тильде — это меню, которое “прилипает” к определённой позиции на экране и остаётся на месте даже при прокрутке страницы. Это особенно полезно для лендингов и многостраничных секций.

Преимущества фиксированного меню на Tilda

• Улучшенная навигация
• Эффект “прилипающего” блока
• Адаптивность благодаря Zero Block
• Гибкость: можно использовать с любыми блоками и элементами

Фиксированное скролл меню в Тильде — это отличное решение для удобной и стильной навигации. Вы легко создадите функциональный элемент с помощью нашей модификации и зеро блока. Добавьте немного анимации и внимания к UX — и ваш сайт на tilda publishing будет выглядеть профессионально.

Узнайте как сделать своё избранное в tilda и добавить его в zero block в нашей статье или на YouTube канале.