Full page scroll в Tilda: как создать эффектный тильда сайт с пошаговой прокруткой
Введение
Каждый владелец или разработчик сайтов стремится создавать ресурсы, которые будут выделяться на фоне однообразных и скучных сайтов. Для этого они ищут и внедряют уникальные решения, чтобы придать проекту оригинальность. Одним из таких решений является использование пошаговой прокрутки или Full Page Scroll на платформе Tilda. В этой статье мы подробно рассмотрим, как реализовать Full Page Scroll в Tilda, используя как стандартные блоки, так и Zero Blocks.
Что такое Full page scroll в Tilda и зачем он нужен
Full Page Scroll в Tilda — это эффект прокрутки, при котором пользователь перемещается по веб-странице блок за блоком. Такой подход позволяет создавать оригинальные и привлекательные лендинги, которые впечатляют посетителей.
Tilda — один из лучших инструментов для разработки сайтов. Платформа предоставляет возможность быстро и легко создавать качественные сайты с различными эффектами, включая Full Page Scroll.
Как создать Full page scroll в Tilda из zero block
В этой главе мы научимся создавать Full page scroll в Tilda, используя несколько нулевых блоков:
- Создайте zero block.
- Зайдите в редактор блока.
- Добавьте любой желаемый контент и настройте экраны адаптивности.
- В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100», чтобы блок занимал всю видимую высоту на любом экране.
- Сохраните изменения и выйдите из зеро блока.
- Зайдите в настройки zero block и нажмите на «Добавить CSS Class Name».
- В появившемся поле пропишите класс «uc-mydiv».
- Сохраните изменения и закройте настройки.
Теперь этот zero block полностью подготовлен для пошаговой прокрутки (Full page scroll). Вы можете создать бесконечное множество разных блоков, используя zero block, но в каждом из них должны быть выполнены эти шаги:
- В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100».
- Зайдите в настройки zero block и нажмите на «Добавить CSS Class Name».
- В появившемся поле пропишите класс «uc-mydiv».
То есть все блоки, которые будут использоваться для пошаговой прокрутки, должны иметь одинаковый класс «uc-mydiv». После того, как вы создадите и настроите все зеро блоки, выполните следующие действия:
- После всех блоков нажмите на кнопку «+» и добавьте HTML блок «Т123».
- Нажмите на кнопку «Контент» в html блоке.
- Скопируйте и вставьте код в «Контент»
- Cохраните изменения и опубликуйте страницу.
Этот метод использования Full page scroll полностью адаптивный и будет одинаково работать на всех экранах. Всё, что вам нужно сделать – это адаптировать ваш контент, который находится в зеро блоках.
Как создать Full page scroll в Tilda из стандартных блоков
Процесс создания Full page scroll, используя стандартные блоки Тильды практически аналогичен варианту с зеро блоками:
- Добавьте нужные вам стандартные блоки.
- Каждому созданному блоку в настройках присвойте класс «uc-mydiv».
- После всех блоков нажмите на кнопку «+» и добавьте HTML блок «Т123».
- Нажмите на кнопку «Контент» в html блоке.
- Скопируйте и вставьте в «Контент» код из предыдущей главы
- Cохраните изменения и опубликуйте страницу.
Если вы используете стандартные блоки в пошаговой прокрутке, то они автоматически будут адаптированы под все размеры экранов.
Преимущества использования Full page scroll в Tilda
Увеличение конверсии Использование эффекта Full page scroll может способствовать росту конверсии на вашем лендинге. Этот эффект привлекает внимание пользователя, предоставляя ему больше информации о вашем продукте или услуге. Улучшение визуальной привлекательности Full page scroll делает лендинг более стильным и запоминающимся. Он создает динамичный и интерактивный опыт для пользователя. Повышение удобства использования Эффект Full page scroll упрощает навигацию по лендингу. Пользователь может легко прокручивать страницу, экономя время на поиске нужной информации.
Недостатки использования Full page scroll в Tilda
Затрудненный доступ к контенту
Full page scroll может усложнить доступ к информации для некоторых пользователей. Например, если нужно быстро найти конкретную информацию, прокрутка страницы может занять больше времени.