Все что нужно знать о Zero Block Тильды

• Приветствие и цель видео: исследование Zirro блока в Tilda.  

• План видео: обзор интерфейса, элементов и функций Zirro блока.  

• Начало работы с пустой страницей и добавление Zirro блока.  

• Редактор Zirro блока: сходство с Photoshop и Figma, но с уникальными функциями.  

• Кнопка "плюс" для добавления элементов: текст, картинка, фигура, кнопка, видео, всплывающая подсказка, аштимель код, форма, галерея.  

• Переключатели брейк-пойнтов для адаптивной верстки.  

• Кнопка "сохранить" для сохранения изменений.  

• Справочная система и ниспадающее меню.  

• Кнопка "хай юай" для оценки изменений без выхода из блока.  

• Слои и порядок элементов в Zirro блоке.  

• Переключение между блоками и удаление элементов.  

• Инструменты для детальной работы: зум, импорт, настройки Zirro блока.  

• Клавиатурные сокращения и их использование.  

• Настройки интерфейса и добавление направляющих линий.  

• Использование правой кнопки мыши для вставки элементов и блокировки.  

• Панель со слоями и её функции.  

• Добавление уникальных классов для элементов.  

• Настройки Zirro блока через ниспадающее меню и нижнее меню.  

• Сетка и грит-контейнер для адаптивности.  

• Ширина грит-контейнера 1200 пикселей для универсальности.  

• В стандартном дизайне используются 12 колонок, которые можно разделить на 4, 3 или 6 колонок.  

• Количество колонок можно уменьшить, например, до 7.  

• Толщина колонки рассчитывается автоматически, исходя из размера полотна и количества колонок.  

• Можно заблокировать размер колонок при пересчете.  

• Рекомендуется использовать отступы по 20 пикселей внутри и 40 пикселей по краям.  

• Горизонтальные направляющие сетки можно добавлять через правое верхнее меню.  

• Высота модуля позволяет наслаивать блоки и фиксировать высоту.  

• Можно задать количество строчек в блоке и отступы от краев.  

• Функция оверфлоу позволяет работать с блоками, выходящими за пределы контейнера.  

• Можно изменить цвет направляющих и прозрачность колонок.  

• По умолчанию направляющие синие, но можно сделать их белыми для темного фона.  

• Кнопка "Reset" сбрасывает настройки по умолчанию.  

• В Tilda есть стандартная и уменьшенная темы интерфейса.  

• Можно выбрать светлую или темную тему для работы с темными сайтами.  

• Интерфейс становится меньше, но классическая тема предпочтительнее.  

• Виндоус контейнер зависит от размера окна, а грид контейнер нет.  

• В грид контейнере элементы размещаются в пикселях, а в виндоус контейнере можно использовать проценты.  

• Виндоус контейнер позволяет размещать элементы в зависимости от размера экрана.  

• Виндоус контейнер полезен для создания элементов, которые всегда остаются на своих местах.  

• Можно разместить кнопку "Купить сейчас" в правом верхнем углу, чтобы она всегда была там.  

• Проценты в виндоус контейнере позволяют создавать элементы, которые занимают фиксированную часть экрана.  

• Разделение на четыре колонки, занимающие 25% ширины экрана.  

• Изменение расположения элементов по X в процентах.  

• Визуальное выравнивание элементов на разных экранах.  

• Изменение точки отсчета для элементов.  

• Использование шейпов для заливки фона.  

• Преимущества работы с шейпами для анимации и заливки.  

• Задание высоты Grid и Window контейнеров.  

• Использование шейпов для заполнения блоков.  

• Влияние высоты блока на отображение элементов.  

• Проблемы с автоскейлом и его использование.  

• Преимущества автоскейла для ленивых дизайнеров.  

• Пример использования автоскейла для композиции.  

• Изменение фона Zero Block.  

• Использование градиентов и картинок для фона.  

• Поведение картинки при скролле.  

• Настройка позиции картинки на Zero Block.  

• Использование фильтров для фона.  

• Управление поведением контейнера при выходе за границы экрана.  

• Настройка поведения контейнера при выходе за границы блока.  

• Использование OverFlow для управления элементами.  

• Примеры использования OverFlow для обрезки и наложения элементов.  

• Боковой скролл удобен на мобильных устройствах, но не на десктопах.  

• На десктопах элементы справа прокручиваются при скролле.  

• Для удобства скролла на десктопах можно использовать мышь.  

• Шейпы можно выравнивать по левому, правому краю, центру, оси X и оси Y.  

• Можно выравнивать элементы относительно друг друга или контейнера.  

• Функция "тайди ап" позволяет равномерно распределять элементы по контейнеру.  

• Можно добавлять цвета в палитру и использовать их на новых элементах.  

• Можно менять цвет шейпа, делать его градиентом или радиальным градиентом.  

• Возможность загружать бэкграунд-изображения в шейпы.  

• Возможность оставлять скролл или фиксит.  

• Функция зум-абла позволяет увеличивать фотографию по клику.  

• Возможность загружать фотографии в full HD разрешении.  

• Прозрачность текущего слоя можно менять.  

• Порядок слоев можно менять в панели со слоями.  

• Функция блокировки слоя позволяет зафиксировать его положение.  

• Набор визуальных эффектов: блюр, яркость, контраст, инверсия цветов.  

• Возможность применять эффекты к слоям под элементом.  

• Поддержка абсолютных и относительных ссылок.  

• Возможность настраивать границы: цвет, радиус скругления, толщина.  

• Функция шедоу позволяет добавлять тени с различными настройками.  

• Возможность размывать тени с помощью блюра и спреда.  

• Набор базовой анимации: фейд, фейдаут, увеличение дистанции.  

• Возможность вставлять параллакс для движения элементов.  

• Возможность экспериментировать с анимацией и эффектами.  

• Правая часть зафиксирована, левая движется вверх быстрее прокрутки страницы.  

• Параллакс от мышки: элемент движется в обратную сторону от движения мышки.  

• Фиксация элемента по центру экрана на дистанции 10 тысяч пикселей.  

• Возможность выбора шрифта, размера, межстрочного расстояния и выравнивания.  

• Автоматическое преобразование текста в заглавные или строчные буквы.  

• Задание ширины и высоты текста, а также использование тегов H1, H2, H3.  

• Изображения можно использовать для альтега, но высота рассчитывается автоматически.  

• Lazy Load ускоряет загрузку сайта, подгружая только нужные изображения.  

• Возможность отключения Lazy Load для каждого элемента.  

• Кнопки могут иметь надпись и менять цвет при наведении.  

• Возможность задания времени работы анимации.  

• Вставка ссылок и настройка таргета для открытия в новом окне.  

• Видео можно вставить с платформы YouTube или Vimeo.  

• Задание параметров автоплея и мута для автоматического запуска.  

• Возможность зацикливания видео и растяжения его на весь экран.  

• Настройка всплывающих подсказок с возможностью загрузки изображений и текста.  

• Использование подсказок для схем карт и других элементов.  

• Добавление различных типов полей: имя, телефон, email, поле ввода, чекбокс, файл, дата, время, количество, слайдер, ссылка, комментарий, скрытое поле, калькулируемое поле.  

• Подключение сервисов и настройка форм: вертикальная и горизонтальная формы, изменение размера шрифта и цвета, настройка перенаправления и сообщений об ошибках.  

• Загрузка нескольких фотографий и добавление подписей или видео.  

• Настройка размеров и пропорций фотографий, использование стрейч-контейнера.  

• Настройка анимации смены фотографий и использование автоплей.  

• Пошаговая анимация: выбор события, триггер, задержка, повторение, тест.  

• Добавление шагов анимации: движение, прозрачность, поворот.  

• Настройка триггеров для смещения анимации относительно центра экрана.  

• Установка начальной позиции элемента перед анимацией.  

• Использование параметра луп для бесконечной анимации.  

• Настройка других событий и параметров анимации.  

• События бывают блок скрин и элемент он скрин.  

• Блок скрин запускается при достижении центром или верхом блока.  

• Элемент он скрин запускается при достижении центром элемента.  

• За дистанцию скроллинга элемент перемещается влево и вниз.  

• Элемент может вращаться и увеличиваться.  

• Можно добавлять множество шагов и задержек.  

• Фикс фиксирует элемент на определенном расстоянии.  

• Можно добавить один шаг с параметром фикс для закрепления.  

• Ховер запускается по наведению, он клик по клику.  

• Можно настроить анимацию по клику и добавить триггер.  

• Триггер определяет элемент, который запускает анимацию.  

• Можно добавить несколько триггеров для разных элементов.  

• Анимация может повторяться и останавливаться по нажатию.  

• Важно тестировать анимацию на десктопной версии перед мобильной версткой.  

• Шарик отскакивает от квадратика по событию он клик.  

• Анимация напоминает реальный отскок элемента.  

• Важно изменять анимацию для разных устройств.  

• Можно скопировать анимацию для другого элемента.  

• Два элемента могут двигаться вместе по одной анимации.  

• Автор рассказал все, что можно было рассказать о Zira.  

• Призывает ставить лайки, оставлять комментарии и подписываться на канал.