support-icon

Уникальные модификации для Тильда сайтов, которые расширяют функционал вашего сайта и выделяют вас среди конкурентов!

Tilda Publishing

Вертикальный слайдер в Tilda zero block

Введение

Tilda Publishing – это платформа для создания веб-сайтов, которая предоставляет разнообразные инструменты для дизайна и функциональности. В этой статье мы сосредоточимся на вертикальных слайдерах в zero block. Узнаем, как создать и настроить вертикальный слайдер в Tilda, а также почему такие слайдеры важны для вашего тильда сайта.

Zero block — это мощное средство, предоставляемое Тильдой для пользователей, чтобы они могли создавать разнообразные блоки на своих веб-сайтах. Этот инструмент позволяет вам начать с чистого листа и реализовать свои дизайнерские идеи без ограничений. Он также является отличным выбором для создания вертикальных слайдеров на вашем сайте.

Вертикальный слайдер в Tilda. Преимущества

Улучшенная навигация по сайту

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

Эффективный способ представления информации

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

Возможности для креативного дизайна

Создание вертикального слайдера в Tilda zero block также открывает перед вами множество креативных возможностей. Вы можете играть с различными стилями, анимациями и цветовыми схемами, чтобы сделать ваш tilda сайт уникальным и привлекательным.

Как создать вертикальный слайдер в Tilda zero block

Если вы решили внедрить вертикальный слайдер на свой сайт, сделанный на Тильде, то следуйте нашей простой инструкции:

  1. Создайте zero block
  2. Перейдите в редактор блока, очистите все содержимое и удалите цвет фона блока
  3. Сохраните и закройте этоn zero block
  4. Сразу после этого блока создайте еще один нулевой блок
  5. В этом блоке вы можете разместить контент, связанный со слайдером (описание, кнопки и т.д.)
  6. Адаптируйте этот блок для мобильных устройств и закройте его
  7. Создайте третий zero block, который будет содержать слайды
  8. В качестве слайдов вы можете использовать изображения, видео или shape
  9. Расположите слайды вертикально друг под другом, начиная с верней части блока
  10. Если у вас много слайдов, то часть из них окажется за пределами блока, но это не страшно
  11. Все слайды прижмите к левой стороне блока
  12. В основных настройках блока найдите пункт «OVERFLOW»
  13. В выпадающем окне выберите «auto»
  14. Сохраните и закройте zero block

Мы создали три зеро блока, один пустой, второй с контентом, третий со слайдером. Теперь необходимо блоки с контентом и слайдером расположить внутри пустого zero block. Для этого:

  1. После всех блоков на странице создайте html блок «Т123»
  2. Нажмите на кнопку «Контент»
  3. Вставьте внутрь «Контента» следующий код:
<style>
    /* ID пустого блока */	
    #rec642145205 {
        display: flex;
    }
    /* ID блока с контентом */
    #rec642151649 {
        width: 100%;
        height: 100%;
    }
    /* ID блока со слайдами */
     #rec642150836 {
        width: 100%;
        height: 100%;
    }
    /* Скрываем блок со слайдером, если размер экрана достигает 1200px */
    @media screen and (max-width: 1200px) {
    /* ID блока со слайдами */
        #rec642150836 { 
            display: none;
        }
    }
</style>
<script>
    var block1 = document.getElementById ("rec642145205"); // ID пустого блока
    let block2 = document.getElementById ("rec642151649"); // ID блока с контентом
    let block3 = document.getElementById ("rec642150836"); // ID блока со слайдами

    block1.appendChild(block2);
    block1.appendChild(block3);   
</script>
  1. Скопируйте ID трех нулевых блоков и вставьте их в соответствующие места в коде, помеченные комментариями
  2. Сохраните изменения и закройте блок «Т123»
  3. Сразу после этого блока создайте еще один блок «Т123»
  4. Перейдите в «Контент» и скопируйте в него следующий код:
<style>
    .scrollbooster-viewport {
        cursor: -webkit-grab;
        cursor: grab;
        padding-right: 30px; 
        margin-right: -30px; 
    }
    
    .scrollbooster-viewport:active {
        cursor: -webkit-grabbing;
        cursor: grabbing;
    }
    
    .scrollbooster-content {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {
    // Укажите ID Zero блока с лайдами
    let blockScrollId = '#rec642158657';

    let shiftSize;
    $(window).on('load resize', function(){
        
        if (window.matchMedia('(max-width: 480px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 320-480px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 640px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 481-640px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 960px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 641-960px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 1200px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 961-1200px
            shiftSize = '320px';
        }
        else {
            // Укажи величину сдвига при клике на стрелку для разрешения больше 1200px
            shiftSize = '320px';
        }

    });
   
    // Ваш код для ScrollBooster и кнопок переключения слайдов
    $(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
    $(blockScrollId + ' .t396').css('overflow','hidden');

    new ScrollBooster({
        viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
        content:  $(blockScrollId + ' .scrollbooster-content')[0],
        scrollMode: 'native',
        pointerMode: 'mouse',
        bounce: false,
        onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
    });

  
    $(blockScrollId + ' .scrollbooster-viewport').on('wheel', function(e) {
    e.preventDefault();
});

});
</script>
  1. Скопируйте ID блока со слайдером
  2. Вставьте скопированный ID код из второго блока «Т123» в указанное место
  3. Сохраните изменения и опубликуйте страницу

Заключение

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

Кроме того, вертикальные слайдеры также могут быть мощным инструментом SEO оптимизации вашего сайта. Правильное использование ключевых слов, оптимизированных изображений и мета-тегов может значительно улучшить видимость вашего сайта в поисковых результатах.

В заключение, вертикальные слайдеры в Tilda zero block – это не только стильное дополнение к вашему веб-сайту, но и мощный инструмент для улучшения пользовательского опыта и SEO оптимизации.

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

Читайте также: Автоматический скролл слайдер