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

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

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

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

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

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

Как сделать фиксированное скролл меню в Тильде с помощью 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, скопируйте в него код модификации и опубликуйте страницу

Получить код модификации

Вам также понравится:

• Двойные блоки
• Плавный scroll