Как сделать фиксированную Кастомную кнопку в тильде

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

Почему фиксированная кнопка важна?

Фиксированная кнопка, которая всегда остается в поле зрения пользователя, независимо от того, как далеко он прокрутил страницу, обладает рядом преимуществ:

• Увеличение конверсии: Пользователь не должен искать кнопку, она всегда под рукой, что повышает вероятность клика.
• Улучшение юзабилити: Фиксированная кнопка делает сайт более удобным в использовании, особенно на мобильных устройствах.
• Повышение узнаваемости бренда: Фиксированная кнопка, оформленная в фирменных цветах, становится узнаваемым элементом вашего сайта.

Пошаговая инструкция:

1. Создание Zero Block:

• Начните с создания Zero Block, который будет служить основой для вашей фиксированной кнопки.
• Zero Block — это специальный блок, который имеет нулевую высоту и не занимает места на странице.
• В настройках Zero Block установите параметр "visible" (видимость) — это позволит блоку быть невидимым на странице.
• Установите высоту блока 0 px, чтобы он не занимал места на странице.
• Удалите фон, чтобы блок не мешал отображению других элементов.

2. Создание кнопки:

• Внутри Zero Block создайте свою кнопку.
• Вы можете использовать стандартные блоки Tilda, такие как «Кнопка», или создать свою кнопку с помощью HTML-кода.
• Оформите кнопку в соответствии с дизайном вашего сайта.
• Важно, чтобы кнопка была четко различима на фоне страницы.

3. Добавление блока HTML:

• Добавьте блок HTML на страницу.
• Вставьте в него следующий код, заменив "ID zero-блока" на реальный ID вашего Zero Block.

1. html

html

<script>

window.addEventListener('scroll', function() {

let zeroBlock = document.getElementById('ID zero-блока');

zeroBlock.style.position = 'fixed';

zeroBlock.style.bottom = '20px'; // Установите желаемое расстояние от нижнего края страницы

});

</script>

• Этот код фиксирует Zero Block с кнопкой в нижней части страницы. Вы можете изменить значение bottom на top для фиксации в верхней части страницы.

4. Проверка и публикация:

• Проверьте, как работает фиксированная кнопка.
• Проверьте, что кнопка не перекрывает другие элементы на странице.
• Опубликуйте страницу.

Дополнительные советы:

• Анимация: Добавьте анимацию, чтобы сделать появление кнопки более привлекательным.
• Позиционирование: Экспериментируйте с разными вариантами позиционирования кнопки, чтобы найти оптимальное место для нее.
• Responsive дизайн: Убедитесь, что кнопка правильно отображается на всех устройствах, включая мобильные.

FAQ:

• Как сделать фиксированную кнопку только для мобильной версии?
• Используйте настройки блока "Pop-up" в редакторе Tilda.
• Выберите опцию «Зафиксировать кнопку покупки для мобильной версии».
• Как сделать кнопку, которая появляется только после прокрутки на определенную высоту?
• Используйте атрибут Appear Offset в настройках Zero Block.
• Можно ли зафиксировать кнопку в верхней части страницы?
• Да, установите значение top вместо bottom в коде блока HTML.
• Можно ли использовать фиксированную кнопку для других элементов, кроме кнопок?
• Да, вы можете зафиксировать любой элемент, используя Zero Block и код HTML.

Заключение:

Фиксированная кнопка — это простой, но эффективный инструмент, который может сделать ваш сайт более привлекательным и удобным для пользователей. Используйте эту технику, чтобы сделать свой сайт лучше!