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

Пример модификации

Введение

Если у вас есть опыт в создании веб-сайтов с использованием платформы Tilda, то вы, вероятно, знакомы с тем, насколько важно иметь эффективную навигацию для пользователей. Одним из способов улучшить навигацию и повысить удобство пользования вашим сайтом является добавление фиксированного бокового меню. В этой статье мы разберем как создать фиксированное боковое меню в тильда, используя небольшую tilda модификацию. Меню будет адаптивным, как и вес контент рядом с ним.

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

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

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

Создать фиксированное боковое меню в Тильда zero block довольно просто. Вот пошаговая инструкция:

1. Абсолютно всем блокам на вашей странице (страницах) присвойте класс «uc-content»
2. Создайте зеро блок в начале страницы или в header, если ваш сайт многостраничный
3. Откройте настройки блока, нажмите на ссылку «Добавить CSS Class Name» и пропишите класс «uc-sidebar»
4. Откройте редактор блока, удалите из него стандартные элементы
5. В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру 100
6. Нажмите на кнопку «+» и выберите «Add Shape»
7. В настройках шейпа нажмите на «+CONTAINER», выберите «Window Container» и расположите шейп слева и по центру
8. Высоту шейпа в поле «H» сделайте 100%, а ширину в поле «W» 300px
9. Стилизуйте шейп по своему усмотрению
10. Добавьте на шейп текстовый элемент, который будет первым пунктом меню
11. Нажмите правой кнопкой мыши по текстовому элементу и выберите «Add CSS Class Name»
12. В появившемся поле пропишите класс «sidebar-items»
13. В поле «URL» пропишите ссылку на соответствующую якорную ссылку
14. Таким же образом создайте оставшиеся пункты меню
15. Все пункт меню добавьте в «Window Container»
16. Удалите цвет заливки пунктов меню, если хотите, чтобы они меняли цвет при наведении на них курсора мыши
17. Удалите фоновую заливку всего блока, сохраните изменения и закройте зеро блок
18. После всех блоков на странице либо в header создайте html блок «Т123»
19. Нажмите на кнопку «Контент» и скопируйте в него код модификации (Код найдете после инструкции)
20. В коде можно менять цвет пунктов меню, цвет при наведении, цвет активных пунктов меню, размеры самого меню и т.д.
21. Сохраните изменения и опубликуйте страницу

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

Как настроить фиксированное боковое меню для мобильных устройств?

Модификация разработана так, что при размере экрана меньше 1200 пикселей (это значение регулируется в коде) фиксированное меню исчезает. Соответственно, для мобильных устройств нужно создать отдельное меню, либо изменить модификацию так, чтобы фиксированное меню перестраивалось в бургер меню.

Все стандартные блоки автоматически будут адаптироваться под размер экрана, а зеро блоки нужно подгонять под нужные размеры вручную.

Заключение

Добавление фиксированного бокового меню в Тильда зеро блок — это простой и эффективный способ улучшить навигацию на вашем сайте. Это поможет повысить удобство пользования вашим ресурсом и улучшить пользовательский опыт. Пользуйтесь этим инструментом, чтобы сделать ваш сайт более функциональным и привлекательным для посетителей.

Часто задаваемые вопросы (FAQs)

1. Как изменить дизайн фиксированного бокового меню?
   • Вы можете изменить дизайн бокового меню, используя CSS-стили в коде или настройки в редакторе нулевого блока.
2. Можно ли добавить иконки в боковое меню?
   • Да, вы можете добавить иконки и любые элементы на shape в зеро блоке, что сделает его более наглядным и привлекательным.
3. Как сделать боковое меню адаптивным?
   • Меню по умолчанию адаптивное и скрывается при размере экрана меньше 1200 пикселей. Это значение регулируется в коде.
4. Как добавить анимацию к боковому меню?
   • Чтобы добавить анимацию к боковому меню, используйте базовую или пошаговую анимацию элементов в зеро блоке. Вы можете создать эффекты появления, исчезания или сдвига для более привлекательного внешнего вида меню.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda