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

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

Введение

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

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

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

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

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

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

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

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

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

Элементы управления видео слайдером в 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. Вставьте в него следующий код и опубликуйте страницу:

Заключение

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

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

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