Сторис в Тильде

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

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

Как создать сторис в Тильде

Чтобы создать сторис в Тильде, вам нужно выполнить несколько простых шагов:

1. Создайте в зеро блоке любой элемент, которому можно присвоить класс и привязать URL ссылку, например shape
2. Нажмите правой кнопкой мыши по этому элементу, выберите «Add CSS Class Name» и пропишите класс «show-stories»
3. Откройте URL вкладку этого элемента и пропишите любую ссылку, например #stories
4. Создайте зеро блок, удалите из него все элементы и фоновый цвет
5. В поле «GRID CONTAINER HEIGHT, PX» пропишите цифру 1
6. Сохраните изменения и закройте блок
7. Откройте настройки этого зеро блока, нажмите на «BLOCK CSS CLASS NAME», в появившемся поле пропишите «uc-st-wrapper»
8. После этого создайте еще один пустой зеро блок без фонового цвета
9. Этому зеро блоку в «BLOCK CSS CLASS NAME», присвойте класс «uc-st-container»
10. Теперь создайте третий зеро блок и присвойте ему класс «uc-story»
11. Этот зеро блок будет первым сторис, в него можно загружать вертикальные видео и любой другой контент
12. Чтобы загрузить видео, нажмите на кнопку «+» и выберите «Add Video»
13. Нажмите на видео элемент, в поле «TYPE» выберите «МР4»
14. В поле «URL» скопируйте ссылку на ваш видео файл
15. Прямую ссылку на файл можно получить, загрузив видео в сервис прямых ссылок LF Cloud
16. В поле «AUTOPLAY» выберите «Autoplay»
17. В поле «CONTROLS» выберите «Hide»
18. В поле «OBJECT FIT» выберите «Cover»
19. Нажмите правой кнопкой мыши по видео, выберите «Add CSS Class Name» и пропишите класс «video»
20. Нажмите на «+container»,в поле «CONTAINER» выберите «Window Container»
21. В «AXIS X» и «AXIS Y» выберите «Center»
22. Для всех экранов шириной от 480px видео элемент можете расположить по своему усмотрению и настроить нужные вам размеры
23. А для экранов от 320 до 480px у видео должна быть 100 процентная ширина и высота (W-100%, H-100%)

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

Таким же образом, вместо видео элементов вы можете создавать сторис из абсолютного любых элементов, будь то шейп, текст, кнопки, ссылки и т.д. Общий принцип создания таких сторис схож с созданием видео сторис, только класс «video» уже присваивать не нужно.

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

1. Добавьте блок «Т1093» под названием «Popup: Zero Block в попапе»
2. Нажмите на кнопку «Контент», в поле «ID Нулевого блока» выберите самый первый пустой зеро блок с высотой в 1px
3. В поле «Ссылка на pop-up» пропишите ссылку, которую вы присвоили кнопке открытия сторис. В нашем случае это #stories
4. Откройте настройки пустого зеро блока с классом «uc-st-wrapper» и удалите его верхний и нижний отступы
5. Добавьте HTML блок «Т123», нажмите на кнопку «Контент», скопируйте в него код модификации, сохраните изменения и опубликуйте страницу

Модификация для создания видео сторис в Тильде

Как управлять сторис в Тильде

На ПК версии сайта сторис переключаются нажатием на стрелки, нажатием по краям окна браузера и автоматически, когда видео в сторис воспроизведется до конца.

Изменить кнопки переключения или вовсе их скрыть можно в коде модификации.

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

Свайп вниз закрывает окно со сторис.

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

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

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

Почему стоит использовать Сторис?

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

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

Заключение

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

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

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