Zero Block на Тильде
с нуля

Конспект урока

Первая страница: от пустого блока до публикации

В первом уроке мы собираем страницу кулинарного мастер-класса: на тёмном фоне появляется надпись, за бургером горит огонь, а листья и блики двигаются вслед за курсором. Это учебная работа, на которой удобно познакомиться с композицией, слоями, анимацией и адаптацией под разные экраны.

Сначала повторить, затем придумать своё

На старте не обязательно уметь рисовать или программировать. Сначала повторите работу из урока и разберитесь, как она устроена. Когда элементы начинают слушаться, можно менять композицию и делать собственные варианты. Дополнительное задание как раз оставляет место для фантазии: придумать страну и собрать страницу путешествия в неё.

Разговор о заработке в начале записи — о соразмерных ожиданиях и практике. Приведённые в записи суммы и сроки не являются обещанием дохода: результат зависит от опыта, времени и конкретных заказов.

Лендинг, стандартные блоки и Zero Block

Лендинг посвящён определённому предложению и помогает посетителю совершить действие: оставить заявку, позвонить или купить. Обычно в нём есть обложка, заголовки, текст, изображения, контакты и форма. Состав страницы зависит от задачи.

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

Подготовить рабочее место и изображения

Для работы нужен браузер и аккаунт Тильды. Если аккаунт уже есть, можно перейти к главе 24:49. В записи отдельно показаны регистрация и режим инкогнито — отдельное окно браузера, позволяющее работать с другой сессией входа. Интерфейсы и условия регистрации со времени записи могли измениться.

Сохраните изображения для практики в отдельную папку и дайте файлам понятные названия. В примере используются бургер, надписи, лента, листья, блики, огонь и искры. PNG поддерживает прозрачность, JPEG её не поддерживает, а GIF может содержать анимацию. Само расширение PNG ещё не означает, что у конкретной картинки нет фона.

Собрать композицию и разобраться со слоями

Создайте пустую страницу, добавьте Zero Block и удалите демонстрационные элементы. В примере высота рабочего пространства — 1080 пикселей, фон — чёрный. Загрузите изображения и сначала расставьте основные элементы: бургер, заголовок, подпись мастер-класса и ленту. Декоративные детали добавляйте после этого.

Откройте панель Layers. Верхние слои перекрывают нижние: искры и огонь должны оказаться за бургером, а некоторые блики — перед ним. Если объект мешает выбрать другой, временно скройте его значком глаза или заблокируйте замком. Масштаб редактора можно уменьшить, чтобы видеть композицию целиком.

У огня в примере заметны края изображения. Параметр Opacity позволяет сделать его менее заметным: в записи используются небольшие значения, примерно 10–20%. Проверяйте результат в композиции, а не только на отдельной картинке.

Добавить появление и параллакс

В разделе Basic Animation выберите эффект появления. В уроке используются Fade In, Fade In Up и Fade In Down. Distance задаёт расстояние движения, Delay — задержку начала, Duration — длительность. Для связанных надписей в примере используются небольшие задержки около 0,2 секунды, а декоративные элементы появляются чуть позже.

Play Element показывает анимацию выбранного элемента, Play All — всей композиции. Проверяйте последовательность: сначала основная информация, затем украшения.

Для листьев и бликов включите Parallax → Mouse. В записи используются разные значения по горизонтали и вертикали: 20/20 для одного слоя и 50/50 для другого. Разная скорость создаёт ощущение глубины. Подбирайте движение так, чтобы оно не мешало читать текст.

Сделать версии для телефона и планшета

Настройка большого экрана не гарантирует, что композиция поместится на телефоне. Переключитесь на узкий экран, уменьшите и переставьте изображения. Сохраните главное: название, дату или условия, бургер и цену. Затем проверьте промежуточные размеры.

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

Опубликовать и проверить

Сохраните изменения и опубликуйте страницу. Если Тильда просит подтвердить почту, откройте письмо подтверждения; если письма нет, проверьте спам. После публикации откройте получившуюся ссылку вне редактора и проверьте композицию, анимацию и разные размеры экрана.

Придумать путешествие в несуществующую страну

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

Сервисы и их условия меняются. Для учебного проекта используйте доступные вам инструменты и проверяйте права на изображения. Если исходный сервис не работает, можно взять другой или подходящие изображения с разрешённым использованием.

Что считать результатом

У вас должна получиться опубликованная страница с бургером, которую удобно смотреть на компьютере, планшете и телефоне. Если сделали дополнительное задание — ещё и собственный лендинг вымышленного путешествия. Сохраните ссылки и коротко запишите, что получилось, а что пришлось переделать: это поможет увидеть прогресс в следующих уроках.