Видео на фон в Zero блоке
Вместо .tn-elem__2946290291616420206251 укажите класс своего HTML-элемента. Задать произвольный класс элементу в Zero блоке можно с помощью контекстного меню (вызывается правой кнопкой мыши по элементу) и нажать «Add CSS Class Name».
Фоновое видео пропорционально ширине и высоте экрана устройства
Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.
.videoBackground > video Фоновое видео на всю страницу в Тильде
Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.
.videoBackground > video Как сделать на Тильде
свой видеовиджет?
2. Перед загрузкой видео в Kinescope убедитесь в следующем:
- Видео в формате mp4, если нет его можно перевести в этот формат при помощи бесплатного сервиса Cloudconvert;
- Разрешение видео должен быть не больше 1080х1920px (В пропорциях 9:16);
- Размер видео, чем меньше, тем быстрее загрузка как сайта, так и самого видео. Для сжатия рекомендуем использовать данный сервис;
Что бы наша модификация восприняла ссылку с видео она должна быть в таком формате https://kinescope.io/201558518/720p — где на конце мы указываем разрешение файла 360p 480p или 720p
4. В генераторе указываем ссылку для кнопки, popup, якорная, id блока или любая другая ссылка;
5. Настраиваем положение видеовиджета и отступы от края экрана;
6. Настраиваем визуальную часть в свернутом виде и развернутом: цвета, толщину, размеры, проценты увеличения, шрифт и т.д.;
7. Если нужно настраиваем Яндекс метрику или Google аналитику;
8. Добавляем блок Т123 и вставляем в него сгенерированный HTML код;
ВАЖНО: Dropbox больше не отдает бесплатные ссылки на видео
Как создать сайт на тильде
Тильда по моему мнению лучший конструктор сайтов в мире, а я их видел много, и зарубежных то же. В этой инструкции вы научитесь быстро создать сайт на бесплатном тарифе конструктора сайтов Тильда.
Видео: как создать сайт на Тильде
Конструктор сайтов Тильда основан на блоках, вы можете использовать шаблонные блоки или блоки Zero. На Zero-блоках можно создавать уникальный дизайн, такой что никто не поймет, что сайт создан на Тильде. Для начинающих я рекомендую использовать готовые шаблоны сайтов. В Тильда есть готовые шаблоны сайтов на различные темы, например: сайт юриста, психолога, салон красоты, автоюнинг. В видео пример создания сайта на шаблоне бизнеса автотюнинга. Попробуйте другие шаблоны сайтов, вы всегда можете изменить блоки из которых состоит сайт под себя, под свой бизнес и требования.
Выбор шаблонов сайта (кадр из видео)
На изображении показан выбор шаблонов для сайтов для различных видов бизнеса.
Настройка меню сйта (кадр из видео)
Вот так настраивается меню в конструкторе сайтов Тильда, в данном примере делаются ссылки на разделы одной страницы. Так делается меню для лендинга. Полную инструкцию как сделать сайт на тильда смотрите в видео выше.
Получите 1 месяц бесплатно, зарегистрируйтесь по ссылке и тариф PRO конструктора сайтов Тильда для вас будет бесплатным.
Как добавить video в ZeroBlock и запускать его при наведении в Tilda
В этот элемент вставили первый код
В этом коде указали ссылку на наш mp4 файл (не youtube, не vimeo)
https://310401.selcdn.ru/MIXED/Mahmut-Orhan-Without_You.mp4
(как добавлять видео)
И ссылку на обложку
https://static.tildacdn.com/tild6565-6530-4131-a265-376661643334/buray-mecnun-mahmut-.jpg
И ссылку на кнопку https://yandex.ru
Добавили второй код в блок Другое — Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Добавляем видео в Zero. Запускаем его при наведении. Загружаем mp4 файл на dropbox
Фрагмент видео
Библиотека для примера
.videowrapper < position: relative; overflow: hidden; >.videowrapper, .tn-atom.tn-atom__html < width: inherit; height: inherit; >.bg_image < position: absolute; top: 0; left: 0; background-size: cover; background-position: center; width: 100%; height: 100%; pointer-events: none; transition: all 0.2s; >.video-btn < position: absolute; background-color: rgb(0 0 0 / 70%); width: 100%; height: 40px; display: flex; align-items: center; box-sizing: border-box; bottom: 0; left: 0; transition: all 0.2s; transform: translateY(100%); backdrop-filter: invert(1); >.video-btn a, .video-btn div < width: inherit; height: inherit; >.video-btn div < display: flex; align-items: center; padding-left: 20px; >.video-btn div < transition: all 0.2s 0.2s; transform: translateY(100%); >.videowrapper:hover .video-btn div < transform: translateY(0); >.video-btn a < font-family: 'Open Sans',Arial,sans-serif; font-weight: 300; color: #fff !important; font-size: 16px; >.videowrapper:hover .video-btn < transform: translateY(0); >.videowrapper:hover .bg_image video
Доступ на 1 месяц
ко всем видео ( список )
400 р. / мес
- Поддержка
- Советы
- Подсказки
Подписаться на 1 месяц
Доступ на 1 год
ко всем видео ( список )
1800 р. / год
- Поддержка
- Советы
- Подсказки
- Скидка на курсы 10%
Подписаться на 1 год
Бесконечный доступ
ко всем видео ( список )
- Поддержка
- Советы
- Подсказки
- Скидка на курсы 20%
Подписаться без ограничений
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.