Вертикальный слайдер в Tilda zero block
Введение
Tilda Publishing – это платформа для создания веб-сайтов, которая предоставляет разнообразные инструменты для дизайна и функциональности. В этой статье мы сосредоточимся на вертикальных слайдерах в zero block. Узнаем, как создать и настроить вертикальный слайдер в Tilda, а также почему такие слайдеры важны для вашего тильда сайта.
Zero block — это мощное средство, предоставляемое Тильдой для пользователей, чтобы они могли создавать разнообразные блоки на своих веб-сайтах. Этот инструмент позволяет вам начать с чистого листа и реализовать свои дизайнерские идеи без ограничений. Он также является отличным выбором для создания вертикальных слайдеров на вашем сайте.
Вертикальный слайдер в Tilda. Преимущества
Улучшенная навигация по сайту
Вертикальный слайдер в Tilda обеспечивает более удобную навигацию по вашему веб-сайту. Пользователи могут легко прокручивать содержание вверх и вниз, что делает доступ к информации быстрым и интуитивным.
Эффективный способ представления информации
Вертикальные zero block слайдеры предоставляют эффективное пространство для представления информации. Вы можете размещать текст, изображения и другой контент вертикально, что делает ваш сайт более структурированным и понятным для посетителей.
Возможности для креативного дизайна
Создание вертикального слайдера в Tilda zero block также открывает перед вами множество креативных возможностей. Вы можете играть с различными стилями, анимациями и цветовыми схемами, чтобы сделать ваш tilda сайт уникальным и привлекательным.
Как создать вертикальный слайдер в Tilda zero block
Если вы решили внедрить вертикальный слайдер на свой сайт, сделанный на Тильде, то следуйте нашей простой инструкции:
- Создайте zero block
- Перейдите в редактор блока, очистите все содержимое и удалите цвет фона блока
- Сохраните и закройте этоn zero block
- Сразу после этого блока создайте еще один нулевой блок
- В этом блоке вы можете разместить контент, связанный со слайдером (описание, кнопки и т.д.)
- Адаптируйте этот блок для мобильных устройств и закройте его
- Создайте третий zero block, который будет содержать слайды
- В качестве слайдов вы можете использовать изображения, видео или shape
- Расположите слайды вертикально друг под другом, начиная с верней части блока
- Если у вас много слайдов, то часть из них окажется за пределами блока, но это не страшно
- Все слайды прижмите к левой стороне блока
- В основных настройках блока найдите пункт «OVERFLOW»
- В выпадающем окне выберите «auto»
- Сохраните и закройте zero block
Мы создали три зеро блока, один пустой, второй с контентом, третий со слайдером. Теперь необходимо блоки с контентом и слайдером расположить внутри пустого zero block. Для этого:
- После всех блоков на странице создайте html блок «Т123»
- Нажмите на кнопку «Контент»
- Вставьте внутрь «Контента» следующий код:
<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>
- Скопируйте ID трех нулевых блоков и вставьте их в соответствующие места в коде, помеченные комментариями
- Сохраните изменения и закройте блок «Т123»
- Сразу после этого блока создайте еще один блок «Т123»
- Перейдите в «Контент» и скопируйте в него следующий код:
<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>
- Скопируйте ID блока со слайдером
- Вставьте скопированный ID код из второго блока «Т123» в указанное место
- Сохраните изменения и опубликуйте страницу
Заключение
Вертикальный слайдер в Tilda zero block представляет собой мощное средство для улучшения дизайна и функциональности вашего веб-сайта. Он обеспечивает легкую навигацию, эффективное представление информации и креативные возможности для привлечения посетителей. Как мы увидели, создание и настройка вертикальных слайдеров в Tilda достаточно просты, и это открывает перед вами широкие перспективы для улучшения пользовательского опыта.
Кроме того, вертикальные слайдеры также могут быть мощным инструментом SEO оптимизации вашего сайта. Правильное использование ключевых слов, оптимизированных изображений и мета-тегов может значительно улучшить видимость вашего сайта в поисковых результатах.
В заключение, вертикальные слайдеры в Tilda zero block – это не только стильное дополнение к вашему веб-сайту, но и мощный инструмент для улучшения пользовательского опыта и SEO оптимизации.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Автоматический скролл слайдер