UP TITLE
Сторис в Тильде
Сторис в Тильде
Сторис в Тильде — это мощный инструмент, который позволяет бизнесу привлекать внимание и удерживать интерес аудитории. Это короткие, интерактивные рассказы, которые можно размещать на сайте. Они напоминают сторис в социальных сетях, таких как 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», нажмите на кнопку «Контент», скопируйте в него код модификации, сохраните изменения и опубликуйте страницу
<style>
.stleft-icon, .stright-icon {
    display: block; /* Замените block на none, чтобы полностью скрыть иконки управления */
    width: 40px;
    user-select: none;
    transition: transform 0.3s ease;
}
.stleft-icon:hover, .stright-icon:hover {
     transform: scale(1.1);
}

.stright-icon {
    margin-bottom: 120px;
}
.uc-st-wrapper {
  overflow: hidden;
  display: flex;
  z-index: 100;
}
.uc-st-container {
  position: relative;
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
}
.uc-story {
  min-width: 100vw;
  width: 100vw;
}
#stleft {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  cursor: pointer;
  z-index: 9999999999;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
}
#stright {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  cursor: pointer;
  z-index: 9999999999;
  margin-top: 60px;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}

.indicator-wrapper {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px; 
    background-color: transparent;
    margin-top: 10px;
    
    z-index: 9999999999;
}

.stindicators {
    display: flex;
    height: 100%;
    z-index: 9999999999;
    padding-left: 10px !important;
    padding-right:10px !important;
}

.stindicators .indicator {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    position: relative;
    margin: 0 1px; 
    z-index: 9999999999;
}

.stindicators .indicator.fill {
    background-color: white; 
    transition: width 0.1s linear; 
    z-index: 9999999999;
}
@media screen and (max-width: 980px) {
    .stleft-icon, .stright-icon {
        display: none;
    }
}
</style>
<div  id='stleft'>
    <!--Ссылка на иконку для левой кнопки-->
    <img src='https://lf-cloud.ru/uploads/66cc43eed8de1.svg' class="stleft-icon">
</div>
<div id='stright'>
    <!--Ссылка на иконку для правой кнопки-->
    <img src='https://lf-cloud.ru/uploads/66cc43fabbbda.svg' class="stright-icon">
</div>
<div class='indicator-wrapper'>
    <div class='stindicators'></div>
</div>
<script>
 var stWrapper = document.querySelector('.uc-st-wrapper');
    var stContainer = document.querySelector('.uc-st-container');
    var stleftButton = document.getElementById('stleft');
    var strightButton = document.getElementById('stright');
    var indicatorWrapper = document.querySelector('.indicator-wrapper');
    var isScrolling = false;
    var visibleSlideIndex = 0;

    function updateSlideVisibility() {
        var slides = document.querySelectorAll('.uc-story');
        slides.forEach(function(slide, index) {
            slide.style.display = (index === visibleSlideIndex) ? 'block' : 'none';
        });
    }

    function slideRight() {
        if (!isScrolling) {
            isScrolling = true;
            var slides = document.querySelectorAll('.uc-story');
            visibleSlideIndex = (visibleSlideIndex + 1) % slides.length;
            updateSlideVisibility();
            updateIndicators();

            setTimeout(function() {
                isScrolling = false;
            }, 1000);
        }
    }

    function slideLeft() {
        if (!isScrolling) {
            isScrolling = true;
            var slides = document.querySelectorAll('.uc-story');
            visibleSlideIndex = (visibleSlideIndex - 1 + slides.length) % slides.length;
            updateSlideVisibility();
            updateIndicators();

            setTimeout(function() {
                isScrolling = false;
            }, 1000);
        }
    }

    function createIndicators() {
        var indicatorsContainer = document.querySelector('.stindicators');
        indicatorsContainer.innerHTML = ''; 
        var slides = document.querySelectorAll('.uc-story');
        slides.forEach(function() {
            var indicator = document.createElement('div');
            indicator.className = 'indicator';
            indicatorsContainer.appendChild(indicator);
        });
        updateIndicators();
    }

    function updateIndicators() {
        var indicators = document.querySelectorAll('.stindicators .indicator');
        indicators.forEach(function(indicator, index) {
            if (index === visibleSlideIndex) {
                indicator.classList.add('fill');
            } else {
                indicator.classList.remove('fill');
            }
        });
    }

    function hideButtons() {
        if (stleftButton !== null) {
            stleftButton.style.display = 'none';
        }
        if (strightButton !== null) {
            strightButton.style.display = 'none';
        }
        if (indicatorWrapper !== null) {
            indicatorWrapper.style.display = 'none';
        }
    }

    function showButtons() {
        if (stleftButton !== null) {
            stleftButton.style.display = 'flex';
        }
        if (strightButton !== null) {
            strightButton.style.display = 'flex';
        }
        if (indicatorWrapper !== null) {
            indicatorWrapper.style.display = 'block';
        }
    }

    if (stleftButton !== null && strightButton !== null) {
        stleftButton.addEventListener('click', function() {
            slideLeft();
        });

        strightButton.addEventListener('click', function() {
            slideRight();
        });
    }

    var slides = document.querySelectorAll('.uc-story');
    stWrapper.appendChild(stContainer);

    slides.forEach(function(slide) {
        stContainer.appendChild(slide);
    });

    createIndicators(); 

    var touchstartX = 0;
    var touchendX = 0;
    var touchstartY = 0;
    var touchendY = 0;

    stContainer.addEventListener('touchstart', function(event) {
        touchstartX = event.changedTouches[0].screenX;
        touchstartY = event.changedTouches[0].screenY;
    });

    stContainer.addEventListener('touchend', function(event) {
        touchendX = event.changedTouches[0].screenX;
        touchendY = event.changedTouches[0].screenY;
        handleGesture();
    });

    function handleGesture() {
        var xDiff = touchendX - touchstartX;
        var yDiff = touchendY - touchstartY;

        if (Math.abs(xDiff) > Math.abs(yDiff)) { 
            if (xDiff < 0) {
                slideRight();
            } else if (xDiff > 0) {
                slideLeft();
            }
        } else { 
            if (yDiff > 0) { 
                var tPopupClose = document.querySelector('.t-popup__close');
                if (tPopupClose) {
                    tPopupClose.click();
                }
            }
        }
    }

    window.addEventListener('resize', function() {
        var slideWidth = stContainer.querySelector('.uc-story').offsetWidth;
        var scrollDistance = stContainer.scrollLeft;
        var index = Math.round(scrollDistance / slideWidth);
        visibleSlideIndex = index;
        updateSlideVisibility();
        updateIndicators();
    });

    var showStoriesButtons = document.querySelectorAll('.show-stories');
showStoriesButtons.forEach(function(button) {
    button.addEventListener('click', function() {
        showButtons(); 
        var videos = document.querySelectorAll('.uc-story video');
        videos.forEach(function(video) {
            video.muted = false;
        });
    });
});

    var tPopupClose = document.querySelector('.t-popup__close');

    if (tPopupClose !== null) {
        tPopupClose.addEventListener('click', hideButtons);
    }
    document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' || event.key === 'Esc') {
        hideButtons();
    }
});

    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var videos = entry.target.querySelectorAll('video');
                videos.forEach(function(video) {
                    video.play();
                    video.muted = false;
                    
                    clearTimeout(video.timeout);
                    
                    video.timeout = setTimeout(function() {
                        slideRight();
                    }, video.duration * 1000);

                    console.log('Длительность видео:', video.duration, 'секунд');
                });
            } else {
                var videos = entry.target.querySelectorAll('video');
                videos.forEach(function(video) {
                    video.pause();
                    video.currentTime = 0;
                    clearTimeout(video.timeout);
                });
            }
        });
    }, { threshold: 0.5 });

    slides.forEach(function(slide) {
        observer.observe(slide);
    });

    updateSlideVisibility();
</script>
<script>
function preventPopupClick(event) {
        if (event.target.closest('.t-popup__close')) {
            return;
        }
        event.stopImmediatePropagation();
    }

    
    function blockPopupClick() {
        const tPopupElement = document.querySelector('.t-popup');
        if (tPopupElement) {
            tPopupElement.addEventListener('click', preventPopupClick);
        }
    }

    setInterval(blockPopupClick, 100);
</script>
Как управлять сторис в Тильде
На ПК версии сайта сторис переключаются нажатием на стрелки, нажатием по краям окна браузера и автоматически, когда видео в сторис воспроизведется до конца.
Изменить кнопки переключения или вовсе их скрыть можно в коде модификации.

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

© Mark Lungrin
Made on
Tilda