Zero Block: создание собственных блоков
В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.
В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
В элементах с изображением можно поменять размер, но пропорции исходной картинки всегда сохранятся .
В элементах с текстом высота меняется автоматически , в зависимости от объема текста.
Размер кнопки и фигуры меняется во всех направлениях.
Верхний ряд кнопок служит для быстрого выравнивания элемента относительно контейнера по вертикали и горизонтали .
Ниже — координаты положения элемента. Могут быть заданы в пикселях или в процентах. Ниже мы рассмотрим этот момент подробнее.
Начало координат обозначено синим крестиком .
Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.
Если вы хотите сделать фото в круге, задайте изображению радиус скругления.
Чтобы получился ровный круг, исходное фото должно быть квадратным, а радиус скругления равен половине длины стороны . То есть если у картинки размер 100×100 px, задайте радиус 50.
При добавлении фигуры на странице появляется квадрат, который можно трансформировать в прямоугольник, окружность или линию.
Прямоугольник : измените длины сторон, потянув мышкой за контрольные точки.
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.
Надпись на кнопке и ссылка задаются в настройках . Там же настраивается типографика: размер, тип, насыщенность и цвет шрифта.
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.
Тултипу можно настроить цвет, тень, размер, задать иконку, которая будет отображаться внутри кружка, загрузить изображение, которое будет всплывать при наведении и настроить анимацию.
Не забудьте после распределения всех элементов в блоке и использования тултипа проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась сверху или снизу блока или по его краям.
Рассмотрим настройки галереи:
Stretch. Имеет два параметра: Cover и Contain.
При параметре Cover изображения будут полностью заполнять область галереи, таким образом могут обрезаться, если отличаются по формату от галереи.
При параметре Contain изображения внутри галереи будут всегда в исходном формате, таким образом при любом формате галереи не будут обрезаться.
Position. Определяет положение изображения относительно области галереи. Например, при параметре Left Top изображение будет расположено относительно левого верхнего угла галереи.
Loop. Эта настройка зацикливает слайды (изображения) в галерее. Имеет два параметра: Loop и None.
При параметре Loop слайды в галерее будут перелистываться бесконечно, то есть после последнего слайда будет идти первый.
При параметре None зацикливания не будет и на последнем слайде галерея закончится.
Slide Speed. Определяет вид анимации смены слайдов. Имеет три параметра: None, Slow и Fast.
При параметре None будет слайды будут перелистываться без анимации.
При параметре Slow слайды будут перелистываться медленно.
При параметре Fast слайды будут перелистывать быстро.
Autoplay. Определяет скорость автоматической смены слайдов в секундах. Если значение в секундах не задано, то автоматической смены слайдов не будет.
Zoomable. Добавляет возможность увеличивать изображения галереи по клику. Имеет два параметра: Zoom on Click и None.
При параметре Zoom on Click изображения будут увеличиваться по клику.
При параметре None изображения не будут увеличиваться по клику.
Arrows. Набор настроек, который определяет внешний вид стрелок (кнопок).
Dots. Набор настроек, который определяет внешний вид точек под галереей. Точки отображают количество слайдов.
Как скруглить углы в видео на Tilda?
Модификация поможет скруглить углы на видео. Работает с видео в Zero Block и стандартными блоками видео
ГЕНЕРАТОР КОДА
- Инструкция
- Пример
1. Создаем Zreo Block или стандартный блок с видео
2. Копируем id блока и вставляем в генератор кода
3. Указываем радиус скругления углов
4. Копируем готовый код и вставляем в HTML блок Т123
Примечание! Если у вас несколько одинаковых блоков с видео(например 3 зеро блока с видео) и нужно применить эффект ко всем блокам 3 блокам, то в генераторе кода поле «id блока» оставляем пустым. Тогда эффект примениться ко всем блокам, а не только к выбранному
Как скруглить углы на видео в Zero блоке на Тильда
#Tilda #Zero block #Видео #скруглить углы В этом видео мы сделаем скругление углов на видео в Zero блоке на Tilda. Ссылка на страницу со стилем: Готовые дизайны сайтов Если материал оказался полезным не забудьте поставить палец вверх и поделиться этим видео. Регистрируйтесь на лучшем конструкторе для создания сайтов Tilda Ссылка на это видео: Заказать сайт или доработку сайта на Тильда, пишите в ВК _________________________________________________________________ Я в контакте Заказать сайт или шаблон: Поддержать автора канала можно здесь: Яндекс-кошелёк: 410014517715632 Qiwi +79787554831
Очень круто! Спасибо!
Еще бы цвет кнопки плей поменять на превью черный))
Как скруглить углы на видео в Zero блоке на Тильда
С кодом видео перестало воспроизводиться автоматически, как можно это исправить? Autoplay не работает..
Вика Виктория
Друзья, а может кто знает, как можно добавить видео в свою фигуру?
Elena Matesha
Вы бы подготовились к записи видео. впечатление такое, что вы просто рядом проходили
Спасибо) очень круто
Ангелина Растригина
а где найти сам стиль/код?
Алена Муратова
Алёна Полякова
Anna Pochueva
Класс! Спасибо большое!
ЕСІМХАН БЕЙСЕНХАНҰЛЫ
Урок супер . Как зделым Ограниченный видо . Сылка не берет можна так зделыт?
Mikhail Dyachenko
Теоретически , если уж так сильно надо было это сделать, а ты с кодом не умеешь работать, то можно было бы рамкой закруглённого шейпа накрыть и все)