Tilda PublishingПодписка

Как создать видео слайдер в Tilda Publishing: подробное руководство

Введение

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

Видео слайдер в Tilda Publishing

Видео слайдер в Tilda Publishing

Для начала давайте рассмотрим, что такое видео слайдер и почему он может быть полезен на вашем сайте Tilda. Видео слайдер представляет собой удобный способ отображения видео контента в форме слайдов, что делает его привлекательным и интересным для посетителей. Есть возможность добавлять в один слайд до 4 отдельных видео роликов, использовать свои кастомные элементы управления и так далее.

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

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

Контейнер для видео-слайдера в Tilda

Контейнер для видео-слайдера в Tilda
  1. Создайте zero block
  2. Откройте настройки зеро блока
  3. Нажмите на ссылку «Добавить CSS Class Name»
  4. В появившемся поле введите «uc-slider-container»
  5. Откройте редактор зеро блока и удалите все содержимое
  6. В поле «GRID CONTAINER HEIGHT» пропишите цифру 1, чтобы сделать высоту блока равной одному пикселю
  7. Удалите фоновую заливку блока
  8. Сохраните изменения и выйдите из нулевого блока

Слайды для видео слайдера в Tilda

Слайды для видео слайдера в Tilda
  1. Созадайте любой блок из набора блоков «Видео» (Рекомендуем использовать блок «VD05» для загрузки своих видео по прямой ссылке или блок «VD06N» для загрузки видео из YouTube)
  2. Зайдите в настройки блока, который вы выбрали, в ссылке «Добавить CSS Class Name» введите «uc-video-sld»
  3. Задайте цвет фона для этого блока, по желанию, и сохраните изменения. Этот блок будет первым слайдом
  4. Продублируйте этот блок столько раз, сколько слайдов подразумевается в вашем слайдере
  5. В меню «Контент» каждого блока-слайда пропишите ссылки на ваши видео ролики

Элементы управления видео слайдером в Tilda

Элементы управления видео слайдером в Tilda
  1. После всех слайдов создайте еще один zero block
  2. Нажмите на ссылку «Добавить CSS Class Name»
  3. В появившемся поле введите «uc-slider-buttons»
  4. Откройте редактор блока и очистите его содержимое
  5. Удалите фоновый цвет блока
  6. В меню «POSITION AND OVERFLOW» в пункте «POSITION» выберите «Absolute», а в пункте «OVERFLOW» выберите «Visible»
  7. Добавьте элементы управления слайдером (стрелки слева и справа)
  8. В этом примере используются заранее подготовленные иконки, которые загружаются через «Add Image»
  9. Нажмите на левую иконку правой кнопкой мыши и выберите «Add CSS Class Name»
  10. В появившемся поле введите «leftsld»
  11. Нажмите на «+CONTAINER» и выберите «Window Container»
  12. В «AXIS X» и «AXIS Y» выберите «Left» и «Top»
  13. Правой иконке задайте класс «rightsld»
  14. В «AXIS X» измените «Left» на «Right»
  15. В «GRID CONTAINER HEIGHT» пропишите высоту блока, равную высоте иконки управления
  16. Обе иконки разместите так, чтобы верхняя граница блока оказалась ровно по середине иконок управления
  17. Сдвиньте иконки влево и вправо, чтобы они не прилипали вплотную к границам блока слева и справа
  18. Адаптируйте отображение иконок под другие размеры экранов

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

  1. После всех блоков на странице создайте html блок «Т123»
  2. Вставьте в него следующий код и опубликуйте страницу:

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

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

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

Заключение

Создание видео слайдера в Tilda Publishing — это простой способ сделать ваш сайт более привлекательным и информативным. Следуя нашему пошаговому руководству, вы легко сможете интегрировать видео-контент и улучшить визуальное восприятие вашего сайта. Не забывайте экспериментировать с различными настройками для достижения наилучших результатов.

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

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

Добавить комментарий