Full page scroll в Tilda: как создать эффектный тильда сайт с пошаговой прокруткой

Введение

Любой владелец или разработчик сайтов стараются создавать такие сайты, которые будут выделяться из массы однотипных и неинтересных сайтов. Они стараются находить и внедрять оригинальные решения, чтобы придать сайту уникальности. Одним из таких решений является использование пошаговой прокрутки страниц на сайте или Full page scroll в Tilda. В этой статье мы разберемся в том, как создать Full page scroll в Tilda используя как стандартные блоки, так и зеро блоки.

Что такое Full page scroll в Tilda и зачем он нужен

Full page scroll в Tilda – это эффект прокрутки веб-страницы, при котором пользователь может пролистывать ее постепенно, блок за блоком. Этот эффект позволяет создавать уникальные и привлекательные лендинги, которые не оставят равнодушными посетителей.

Tilda – это один из лучших инструментов для создания сайтов. Этот сервис позволяет быстро и легко создавать высококачественные сайты с различными эффектами, включая Full page scroll.

Как создать Full page scroll в Tilda из zero block

В этой главе мы научимся создавать Full page scroll в Tilda, используя несколько нулевых блоков:

1. Создайте zero block.
2. Зайдите в редактор блока.
3. Добавьте любой желаемый контент и настройте экраны адаптивности.
4. В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100», чтобы блок занимал всю видимую высоту на любом экране.
5. Сохраните изменения и выйдите из зеро блока.
6. Зайдите в настройки zero block и нажмите на «Добавить CSS Class Name».
7. В появившемся поле пропишите класс «uc-mydiv».
8. Сохраните изменения и закройте настройки.

Теперь этот zero block полностью подготовлен для пошаговой прокрутки (Full page scroll). Вы можете создать бесконечное множество разных блоков, используя zero block, но в каждом из них должны быть выполнены эти шаги:

1. В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100».
2. Зайдите в настройки zero block и нажмите на «Добавить CSS Class Name».
3. В появившемся поле пропишите класс «uc-mydiv».

То есть все блоки, которые будут использоваться для пошаговой прокрутки, должны иметь одинаковый класс «uc-mydiv».

После того, как вы создадите и настроите все зеро блоки, выполните следующие действия:

1. После всех блоков нажмите на кнопку «+» и добавьте HTML блок «Т123».
2. Нажмите на кнопку «Контент» в html блоке.
3. Скопируйте и вставьте следующий код в «Контент»:

<style>
    .uc-mydiv{<br />
    position: relative;<br />
    height: 100vh;<br />
    width: 100%;<br />
    font-size: 10vh;<br />
}<br />
</style><script><br />
    $(function() {</p>
<p>  var divs = $('.uc-mydiv');<br />
  var div = 0;<br />
  div = -1<br />
  divs.each(function(i) {<br />
    if (div < 0 && ($(this).offset().top >=       $(window).scrollTop())) {<br />
        div = i;<br />
    }<br />
  });<br />
  $(window).on('mousewheel DOMMouseScroll', function(e) {<br />
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      if (div > 0) {<br />
        div--;<br />
      }<br />
    } else {<br />
      if (div < divs.length) {
        div++;
      }
    }
    $('html,body').stop().animate({
      scrollTop: divs.eq(div).offset().top
    }, 200);
    return false;
  });
  $(window).resize(function() {
    $('html,body').scrollTop(divs.eq(div).offset().top);
  });

});
</script>

4. Cохраните изменения и опубликуйте страницу.

Этот метод использования Full page scroll полностью адаптивный и будет одинаково работать на всех экранах. Всё, что вам нужно сделать – это адаптировать ваш контент, который находится в зеро блоках.

Как создать Full page scroll в Tilda из стандартных блоков

Процесс создания Full page scroll, используя стандартные блоки Тильды практически аналогичен варианту с зеро блоками:

1. Добавьте нужные вам стандартные блоки.
2. Каждому созданному блоку в настройках присвойте класс «uc-mydiv».
3. После всех блоков нажмите на кнопку «+» и добавьте HTML блок «Т123».
4. Нажмите на кнопку «Контент» в html блоке.
5. Скопируйте и вставьте следующий код в «Контент»:

<style>
    .uc-mydiv{<br />
    position: relative;<br />
    height: 100vh;<br />
    width: 100%;<br />
    font-size: 10vh;<br />
}<br />
</style><script><br />
    $(function() {</p>
<p>  var divs = $('.uc-mydiv');<br />
  var div = 0;<br />
  div = -1<br />
  divs.each(function(i) {<br />
    if (div < 0 && ($(this).offset().top >=       $(window).scrollTop())) {<br />
        div = i;<br />
    }<br />
  });<br />
  $(window).on('mousewheel DOMMouseScroll', function(e) {<br />
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      if (div > 0) {<br />
        div--;<br />
      }<br />
    } else {<br />
      if (div < divs.length) {
        div++;
      }
    }
    $('html,body').stop().animate({
      scrollTop: divs.eq(div).offset().top
    }, 200);
    return false;
  });
  $(window).resize(function() {
    $('html,body').scrollTop(divs.eq(div).offset().top);
  });

});
</script>

6. Cохраните изменения и опубликуйте страницу.

Если вы используете стандартные блоки в пошаговой прокрутке, то они автоматически будут адаптированы под все размеры экранов.

Преимущества использования Full page scroll в Tilda

Увеличение конверсии

Full page scroll может помочь увеличить конверсию вашего лендинга. Это происходит благодаря тому, что такой эффект захватывает внимание пользователя и позволяет ему узнать больше о вашем продукте или услуге.

Улучшение визуальной привлекательности

Full page scroll делает ваш лендинг более привлекательным и запоминающимся. Этот эффект позволяет создать более динамичный и интерактивный пользовательский опыт.

Повышение удобства использования

Full page scroll делает использование вашего лендинга более удобным для пользователя. Он может легко просматривать содержимое лендинга, не тратя время на прокрутку страницы.

Недостатки использования Full page scroll в Tilda

Затруднение доступа к контенту

Full page scroll может затруднить доступ к контенту для некоторых пользователей. Например, если пользователь хочет быстро найти нужную информацию на лендинге, ему может потребоваться потратить больше времени на прокрутку страницы.

Ограничение функционала

Full page scroll может ограничить функциональность вашего лендинга. Например, если вы хотите добавить слайдер или другой сложный элемент на страницу, это может стать проблемой при использовании Full page scroll.

Заключение

Full page scroll – это эффективный способ создания уникальных лендингов с высокой визуальной привлекательностью. Если вы хотите использовать Full page scroll на своем лендинге в Tilda, рекомендуется обеспечить удобный доступ к контенту, использовать этот эффект в умеренных количествах и не забывать об оптимальной поисковой оптимизации и функциональности вашего лендинга. Также рекомендуется проводить тестирование и оптимизацию вашего лендинга с использованием Full page scroll, чтобы выявить и устранить возможные проблемы.

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

Больше обучающих статей тут