Фиксированное боковое меню в Тильда зеро блок
Введение
Если у вас есть опыт в создании веб-сайтов с использованием платформы Tilda, то вы, вероятно, знакомы с тем, насколько важно иметь эффективную навигацию для пользователей. Одним из способов улучшить навигацию и повысить удобство пользования вашим сайтом является добавление фиксированного бокового меню. В этой статье мы разберем как создать фиксированное боковое меню в тильда, используя небольшую tilda модификацию. Меню будет адаптивным, как и вес контент рядом с ним.
Что такое фиксированное боковое меню в тильда?
Фиксированное боковое меню — это навигационное меню, которое остается видимым на экране пользователя, даже когда он прокручивает страницу вниз. Это обеспечивает постоянный доступ к важным разделам сайта, что делает его более удобным для пользователей.
Как добавить фиксированное боковое меню в Тильда зеро блок?
Создать фиксированное боковое меню в Тильда zero block довольно просто. Вот пошаговая инструкция:
- Абсолютно всем блокам на вашей странице (страницах) присвойте класс «uc-content»
- Создайте зеро блок в начале страницы или в header, если ваш сайт многостраничный
- Откройте настройки блока, нажмите на ссылку «Добавить CSS Class Name» и пропишите класс «uc-sidebar»
- Откройте редактор блока, удалите из него стандартные элементы
- В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру 100
- Нажмите на кнопку «+» и выберите «Add Shape»
- В настройках шейпа нажмите на «+CONTAINER», выберите «Window Container» и расположите шейп слева и по центру
- Высоту шейпа в поле «H» сделайте 100%, а ширину в поле «W» 300px
- Стилизуйте шейп по своему усмотрению
- Добавьте на шейп текстовый элемент, который будет первым пунктом меню
- Нажмите правой кнопкой мыши по текстовому элементу и выберите «Add CSS Class Name»
- В появившемся поле пропишите класс «sidebar-items»
- В поле «URL» пропишите ссылку на соответствующую якорную ссылку
- Таким же образом создайте оставшиеся пункты меню
- Все пункт меню добавьте в «Window Container»
- Удалите цвет заливки пунктов меню, если хотите, чтобы они меняли цвет при наведении на них курсора мыши
- Удалите фоновую заливку всего блока, сохраните изменения и закройте зеро блок
- После всех блоков на странице либо в header создайте html блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него код модификации (Код найдете после инструкции)
- В коде можно менять цвет пунктов меню, цвет при наведении, цвет активных пунктов меню, размеры самого меню и т.д.
- Сохраните изменения и опубликуйте страницу
Модификация для создания фиксированного меню в зеро блоке тильды
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
Как настроить фиксированное боковое меню для мобильных устройств?
Модификация разработана так, что при размере экрана меньше 1200 пикселей (это значение регулируется в коде) фиксированное меню исчезает. Соответственно, для мобильных устройств нужно создать отдельное меню, либо изменить модификацию так, чтобы фиксированное меню перестраивалось в бургер меню.
Все стандартные блоки автоматически будут адаптироваться под размер экрана, а зеро блоки нужно подгонять под нужные размеры вручную.
Заключение
Добавление фиксированного бокового меню в Тильда зеро блок — это простой и эффективный способ улучшить навигацию на вашем сайте. Это поможет повысить удобство пользования вашим ресурсом и улучшить пользовательский опыт. Пользуйтесь этим инструментом, чтобы сделать ваш сайт более функциональным и привлекательным для посетителей.
Часто задаваемые вопросы (FAQs)
- Как изменить дизайн фиксированного бокового меню?
- Вы можете изменить дизайн бокового меню, используя CSS-стили в коде или настройки в редакторе нулевого блока.
- Можно ли добавить иконки в боковое меню?
- Да, вы можете добавить иконки и любые элементы на shape в зеро блоке, что сделает его более наглядным и привлекательным.
- Как сделать боковое меню адаптивным?
- Меню по умолчанию адаптивное и скрывается при размере экрана меньше 1200 пикселей. Это значение регулируется в коде.
- Как добавить анимацию к боковому меню?
- Чтобы добавить анимацию к боковому меню, используйте базовую или пошаговую анимацию элементов в зеро блоке. Вы можете создать эффекты появления, исчезания или сдвига для более привлекательного внешнего вида меню.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda