support-icon

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

Tilda PublishingПодписка

Слайдер в зеро блоке Тильды

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

Слайдер в зеро блоке — это популярное решение для создания интерактивных и привлекательных сайтов на платформе Tilda Publishing. Плагодаря группам в zero block и нашей Тильда модификации можно быстро и просто настроить слайдер под любые потребности, добавляя уникальный функционал и стиль.

Как создать слайдер в зеро блоке

  1. Создайте зеро блок
  2. Создайте в нем контент для отображения на первом слайде
  3. Выделите весь контент первого слайда и нажмите комбинацию клавиш Ctrl+G, чтобы сгруппировать элементы
  4. Нажмите левой кнопкой мыши на группу, в правом меню, в выпадающем списке GROUP выберите Object
  5. Нажмите правой кнопкой мыши на группу и выберите Add CSS Class Name
  6. В появившемся поле пропишите класс zero-slide-item
  7. Адаптируйте группу для всех экранов
  8. Продублируйте эту группу. Копия группы будет контентом для второго слайда. Каждая группа – отдельный контент для отдельного слайда
  9. Измените содержимое групп
  10. Выделите все созданные группы и центрируйте их по отношению друг к другу
  11. После этого расположите выделенные группы там, где это требуется
  12. В левом меню LAYERS группы должны располагаться по убыванию (сначала последняя группа(слайд), а потом остальные)
  13. Создайте два IMG элемента (Add Image) и загрузите в каждый из них иконки для переключения слайдов
  14. Левой иконке присвойте класс zero-left, правой иконке присвойте класс zer-right
  15. Начиная с третьего экрана (Мобильные устройства) вынесите иконки управленя за границы блока, чтобы не показывать их на мобильных (При желании. На мобильных слайдер переключается свайпами влево и вправо )
  16. Для мобильных экранов создайте html элемент и скопируйте в него код индикатора свайпа
  17. После всех блоков на странице создайте HTML блок Т123 скопируйте в него код модификации и опубликуйте страницу

Индикатор свайпа для мобильных устройств

<div class="t-store__scroll-icon-wrapper" style="mix-blend-mode: multiply;"><svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 300" height="42" width="42"><rect class="tooltip-horizontal-scroll-icon_card" x="480" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect><rect class="tooltip-horizontal-scroll-icon_card" y="0" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect><rect class="tooltip-horizontal-scroll-icon_card" x="240" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect><path class="tooltip-horizontal-scroll-icon_hand" d="M78.9579 285.7C78.9579 285.7 37.8579 212.5 20.5579 180.8C-2.44209 138.6 -6.2422 120.8 9.6579 112C19.5579 106.5 33.2579 108.8 41.6579 123.4L61.2579 154.6V32.3C61.2579 32.3 60.0579 0 83.0579 0C107.558 0 105.458 32.3 105.458 32.3V91.7C105.458 91.7 118.358 82.4 133.458 86.6C141.158 88.7 150.158 92.4 154.958 104.6C154.958 104.6 185.658 89.7 200.958 121.4C200.958 121.4 236.358 114.4 236.358 151.1C236.358 187.8 192.158 285.7 192.158 285.7H78.9579Z" fill="rgba(190,190,190,1)"></path><style>.tooltip-horizontal-scroll-icon_hand {animation: tooltip-horizontal-scroll-icon_anim-scroll-hand 2s infinite}.tooltip-horizontal-scroll-icon_card {animation: tooltip-horizontal-scroll-icon_anim-scroll-card 2s infinite}@keyframes tooltip-horizontal-scroll-icon_anim-scroll-hand {0% { transform: translateX(80px) scale(1); opacity: 0 }10% { transform: translateX(80px) scale(1); opacity: 1 }20%,60% { transform: translateX(175px) scale(.6); opacity: 1 }80% { transform: translateX(5px) scale(.6); opacity: 1 } to { transform: translateX(5px) scale(.6); opacity: 0 }}@keyframes tooltip-horizontal-scroll-icon_anim-scroll-card {0%,60% { transform: translateX(0) }80%,to { transform: translateX(-240px) }}</style></svg></div>

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

Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:

– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud

Оформить подписку

Советы по настройке слайдера

  1. Оптимизируйте изображения. Убедитесь, что изображения для слайдера имеют небольшой вес, чтобы сайт загружался быстрее.
  2. Lazyload. Отключите функцию lazyload на всех изображениях внутри слайдера.
  3. Тестируйте адаптивность. Проверьте, как слайдер отображается на разных устройствах.
  4. Добавьте SEO-описания. Используйте alt-теги для изображений и текстовые описания, чтобы улучшить SEO.

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

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

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