Модуль 3 Урок 4: TILDA — Профессиональный крафт и Zero Block
🎨 0 XP
1 / 26
Модуль 3 · Урок 4

TILDA
— Профессиональный крафт

Создаём настоящие сайты: AI Assistant, Zero Block и практика на реальных проектах

25 заданий +2000 XP
04

Темы урока

  • AI Assistant — генерация сайта за 30 сек
  • Регистрация и безопасность
  • Шаблоны и HEX-цвета
  • Zero Block — полная свобода
  • Якорные ссылки и навигация
  • Практика: кафе, портфолио, события
  • Сложные задания с нуля
Теория · Блок 1

Что такое Tilda и зачем она нужна?

🏗️
Конструктор сайтов

Платформа для создания сайтов без кода. Создана Никитой Обуховым в 2014 году. Сегодня — более 2 млн сайтов.

⚡
Без программистов

То, что раньше стоило 500 000 тенге и 3 месяца — теперь делается за 30 минут одним человеком.

🎨
Профессиональный результат

Логотип Сбербанка, блог 2ГИС, магазины и стартапы — всё на одной платформе рядом с тобой.

🤖
AI внутри

AI Assistant генерирует структуру и тексты по твоему описанию. Zero Block даёт полную свободу дизайна.

Теория · Блок 2

Регистрация и цифровая безопасность

1
Адрес сайта: tilda.cc

Только официальный домен. Не .ru, не .com, не «тильда-бесплатно». Фишинговые сайты-двойники воруют твои данные.

2
Уникальный пароль

Придумай пароль, который не используешь нигде. Запиши в дневник — это не старомодно, это надёжно.

3
Понятное название проекта

«AI Trend School» вместо «Проект 1». Через месяц сам скажешь спасибо — у тебя будет несколько проектов.

4
Проверяй ИИ-контент

ИИ может сгенерировать ошибочный или оскорбительный текст. Всегда читай перед публикацией — мы редакторы, не просто пользователи.

Теория · Блок 3

AI Assistant — убиваем синдром белого листа

📝
Тематика сайта

Описывай конкретно: не «онлайн-школа», а «школа для подростков 12-17 лет по ИИ в Казахстане». Конкретика = точный результат.

🏗️
Задача страницы

Структура: какие блоки нужны, целевая аудитория, призывы к действию. Используй кнопку «Сгенерировать задачу» если не знаешь с чего начать.

🎨
HEX-цвета бренда

HEX — это GPS-координаты цвета. #685BC7 — наш фиолетовый, #B5ED18 — акцент. Вставляй свои коды из Canva.

🔍
Проверка результата

ИИ — помощник, не начальник. Редактируй тексты, заменяй картинки, убирай ошибки. Твоя история — только твоя.

⭐
Кнопка-звезда

После создания страницы — нажми звезду в правом верхнем углу. Откроется ИИ-чат для редактирования любого блока.

🖼️
Главная картинка

Не устраивает сгенерированное фото? Всегда можно перевыбрать. Используй картинки из прошлого урока — они уже в твоём стиле.

Теория · Блок 4

Zero Block — полная свобода

Обычные блоки = готовая мебель из магазина. Zero Block = мебель, сделанная под тебя. Пять инструментов:

→
Стрелка

Выделение и перемещение элементов. Твой главный инструмент управления.

T
Текст

Любые надписи. Меняй шрифт, размер, начертание, цвет прямо на холсте.

🖼
Изображение

Фото, фон, логотип. Автомасштабирование по ширине окна — без пустых полос по краям.

⬡
Фигуры

Прямоугольники, круги, линии. Скругление через вкладку «Обводка». Цвет, размер — всё вручную.

🔘
Кнопки

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

⚓
Якорные ссылки

Дай блоку ID (например, «courses»). Кнопка с этим ID будет точно вести на нужный раздел.

Практика · Промпты

Промпты для AI Assistant

🇷🇺 Русский

Создай сайт для небольшого кафе «Облако» в Астане. Меню: кофе, десерты, завтраки. Целевая аудитория: молодёжь 18-30 лет, студенты. Нужны блоки: обложка с призывом, меню с фото и ценами, история заведения, отзывы гостей, форма бронирования столика, карта и время работы.

🇬🇧 English

Create a website for a small café called "Cloud" in Astana, Kazakhstan. Menu: coffee, desserts, breakfasts. Target audience: youth aged 18-30, students. Required sections: hero banner with CTA, menu with photos and prices, café story, guest reviews, table reservation form, map and working hours.

Практика · Задание 1

Кафе «Облако»

🟢 Лёгкое Кафе / Ресторан
Сайт кафе с AI Assistant
Используй AI Assistant в Tilda чтобы создать сайт для уютного кафе в Астане. Фокус на атмосфере и меню.
Что должно быть на сайте
  • Обложка с красивой фотографией и слоганом
  • Меню с разделами: кофе, десерты, завтраки (с ценами)
  • История заведения (2-3 абзаца)
  • Отзывы 3+ гостей с именами и оценками
  • Форма бронирования столика
  • Адрес, карта, время работы
0 / 500 символов
Практика · Задание 2

Портфолио ИИ-специалиста

🟡 Среднее Портфолио
Личный сайт-портфолио в Zero Block
Создай свой профессиональный сайт, который можно показать на собеседовании или отправить будущему работодателю. Используй Zero Block для обложки и AI Assistant для остальных блоков.
Обязательные элементы
  • Zero Block: обложка с твоим фото/аватаром, именем и специализацией
  • Раздел «Обо мне»: навыки, интересы, цели (AI Assistant)
  • Портфолио: минимум 3 проекта (скриншот + описание + ссылка)
  • Раздел с инструментами: иконки Tilda, Canva, ChatGPT, Gamma и тд
  • Контакты: соцсети, email, Discord
  • Навигация через якорные ссылки (минимум 3 якоря)
0 / 500 символов
Практика · Задание 3

Сайт мероприятия

🟡 Среднее Событие / Концерт
Лендинг для AI Hackathon в Астане
Создай лендинг для хакатона или любого события. Задача страницы — убедить людей зарегистрироваться и прийти. Используй шаблон «Событие» в Tilda и доработай под своё мероприятие.
Структура лендинга
  • Hero: название события, дата, место, кнопка «Зарегистрироваться»
  • Блок «О чём»: тема и формат хакатона, задачи участников
  • Программа: расписание по часам (8 утра – 8 вечера)
  • Спикеры/менторы: минимум 3 карточки с фото и описанием
  • Призы: 1 место, 2 место, 3 место с указанием награды
  • FAQ: 5 вопросов и ответов
  • Форма регистрации с email и командой
0 / 500 символов
Практика · Задание 4

Фитнес-студия «Pulse»

🟡 Среднее Фитнес / Здоровье
Сайт фитнес-студии с расписанием
Создай сайт для современной фитнес-студии. Ключевая фишка — интерактивное расписание занятий. Аудитория: молодёжь 18-35 лет, активный образ жизни.
Что должно быть
  • Обложка: фото зала, слоган, кнопка «Первая тренировка бесплатно»
  • Виды занятий: йога, HIIT, box, стретчинг — карточки с фото и описанием
  • Тренеры: минимум 4 карточки с фото, именем, специализацией
  • Расписание: таблица по дням недели (создай вручную в Zero Block)
  • Абонементы: 3 тарифа с ценами и кнопками «Выбрать»
  • Трансформации учеников: фото до/после + история
  • Форма: имя, телефон, выбор направления
0 / 500 символов
Практика · Задание 5

Онлайн-магазин «Handmade»

🔴 Сложное E-commerce
Магазин ручной работы с каталогом
Создай полноценный интернет-магазин для продажи handmade изделий. Это сложное задание — нужно совместить AI Assistant для текстов и Zero Block для кастомных карточек товаров.
Требования
  • Zero Block: обложка с фоновым фото и текстом поверх, кнопка «В каталог»
  • Каталог: минимум 6 товаров (фото, название, цена, кнопка «Купить»)
  • Фильтры категорий: украшения, посуда, текстиль, свечи
  • О мастере: история создания, ценности, фото мастерской
  • Процесс создания: 4-5 шагов с фото
  • Instagram-галерея: встрой виджет или добавь скриншоты постов
  • Оформление заказа: форма + способы оплаты + доставка
  • Якорные ссылки для всех разделов навигации
0 / 500 символов
Практика · Задание 6

Сайт музыканта

🔴 Сложное Музыка / Творчество
Промо-сайт для исполнителя
Создай промо-сайт для музыканта или группы. Задача — передать атмосферу, стиль и привлечь слушателей и организаторов концертов.
Обязательно сделай
  • Zero Block: тёмная обложка с именем артиста крупным шрифтом, жанр и настроение через визуал
  • Дискография: карточки альбомов/синглов с обложкой, датой, ссылкой на Spotify/YouTube
  • Встроенное видео клипа (YouTube embed через Tilda)
  • Концерты: список дат, город, площадка, кнопка «Купить билет»
  • Биография: история артиста, вдохновение, достижения
  • Пресс-кит: фото для СМИ (минимум 3), пресс-релиз для скачивания
  • Booking: форма для организаторов с типом мероприятия и бюджетом
0 / 500 символов
Практика · Задание 7

Онлайн-школа «Kurator»

🔴 Сложное EdTech / Образование
Лендинг онлайн-курса с продающей структурой
Создай продающий лендинг для онлайн-курса. Используй классическую структуру AIDA: Attention → Interest → Desire → Action. Каждый блок должен усиливать желание записаться.
Продающая структура AIDA
  • A — Hero: сильный заголовок «Что ты получишь», боль → обещание
  • I — «Для кого»: 3 портрета идеального ученика
  • I — Программа: 5-7 модулей с кратким описанием каждого
  • D — Результаты: цифры (сколько учеников, % трудоустройства и тп)
  • D — Тарифы: 3 варианта с разными возможностями и ценами
  • D — Отзывы: 5+ с фото, именем, профессией, конкретным результатом
  • A — CTA блок: «Записаться сейчас» + счётчик мест + гарантия
0 / 500 символов
Интерактив · Конструктор

Собери промпт для Tilda AI

Нажимай на блоки чтобы собрать идеальный промпт для AI Assistant. Потом скопируй результат!

Выбери тип сайта:

🍕 Ресторан / кафе
🎓 Онлайн-школа
💪 Фитнес-студия
🛍️ Интернет-магазин
🎵 Музыкант / артист
📸 Портфолио

Целевая аудитория:

👩‍🎓 Студенты 18-25 лет
👨‍💼 Бизнесмены 30-45
🧒 Подростки 13-17
👩‍👧 Родители с детьми

Акцентный цвет бренда:

#685BC7 Фиолетовый
#FF4757 Красный
#2ED573 Зелёный
#FFA502 Оранжевый

Результат:

Выбери блоки выше...
Практика · Задание 8

Барбершоп «FADED»

🟡 Среднее Услуги / Красота
Сайт барбершопа с онлайн-записью
Создай стильный сайт для барбершопа в тёмных тонах (чёрный + золотой). Аудитория — мужчины 18-40 лет, ценят стиль и качество.
Структура сайта
  • Zero Block: тёмная обложка с логотипом и фоновым фото зала
  • Услуги: стрижка, борода, укладка, шейв — карточки с ценами и временем
  • Барберы: фото, имя, специализация, Instagram
  • Галерея работ: минимум 6 фото стрижек
  • Онлайн-запись: форма с выбором барбера, услуги, даты и времени
  • Преимущества: 4-5 карточек «Почему к нам»
  • Адрес + Яндекс.Карты + время работы
0 / 500 символов
Практика · Задание 9

Travel-блог «Nomad KZ»

🔴 Сложное Блог / Туризм
Блог о путешествиях по Казахстану
Создай travel-блог о красотах Казахстана. Важно: передать атмосферу через фото и текст, сделать удобную навигацию по направлениям.
Что нужно сделать
  • Zero Block: панорамная обложка «Бескрайний Казахстан», заголовок, подзаголовок
  • Направления: Алматы, Астана, Чарын, Боровое, Мангышлак — карточки с фото и кратким описанием
  • Блог: 3 полноценных статьи с заголовком, подзаголовком, текстом и фото
  • Маршруты: карта с метками (можно создать скриншот или описательную схему)
  • Советы: «Топ-10 вещей, которые нужно знать перед поездкой в Казахстан»
  • Подписка: форма с email для получения новых маршрутов
  • Соцсети: виджеты или ссылки на Instagram и YouTube
0 / 500 символов
Квиз · Проверь себя

7 вопросов о Tilda

Вопрос 1 / 7

Мини-игра · Сортировка

Правильно или нет?

Нажми на карточку, потом нажми на нужную зону.

✅ Правильная практика
❌ Ошибка / плохая практика
Практика · Задание 10

Фотограф «Asel Photography»

🟡 Среднее Творчество / Услуги
Портфолио-сайт фотографа
Для фотографа сайт — это витрина. Задача Zero Block: создать визуально сильную галерею, где фотографии «говорят» сами за себя.
Что нужно
  • Zero Block: полноэкранное фото на обложке, имя мелко в углу, и больше ничего лишнего
  • Портфолио: сетка фотографий (свадьбы, портреты, репортажи, природа)
  • Услуги: пакеты съёмки с описанием, временем и ценой
  • Обо мне: история, философия фотографии, техника
  • Отзывы клиентов с фото и датой съёмки
  • Форма заявки: тип съёмки, дата, место, бюджет
0 / 500 символов
Практика · Задание 11

IT-стартап «GreenAI»

🔴 Сложное Стартап / Технологии
Питч-сайт для стартапа (для инвесторов)
Создай питч-сайт — это сайт для привлечения инвесторов. Каждое слово и каждый дизайн-решение должны убеждать: «вложи деньги сюда». Используй тёмную тему.
Классическая pitch-структура
  • Hero: проблема в 1 предложении + решение + раунд инвестиций
  • Проблема: данные/статистика, боль рынка, текущие решения и их слабости
  • Решение: как работает продукт, ключевые фичи, демо-видео или скриншоты
  • Рынок: TAM / SAM / SOM — размер рынка в цифрах и графиках
  • Бизнес-модель: как зарабатываем, каналы продаж, unit-экономика
  • Команда: фото, имя, роль, прошлый опыт (LinkedIn)
  • Контакт для инвесторов: email, deck для скачивания, форма заявки
0 / 500 символов
Практика · Задание 12

НКО «Жасыл Болашак»

🔴 Сложное НКО / Благотворительность
Сайт некоммерческой организации
Создай сайт для НКО. Главная задача — убедить посетителя пожертвовать деньги или стать волонтёром. Эмоции и истории важнее цифр.
Эмоциональная структура
  • Hero: сильное фото + эмоциональный заголовок + счётчик помощи «уже помогли X детям»
  • Проекты: 3-4 активных проекта с прогресс-баром сбора средств
  • Истории: 3 реальные истории изменений с фото до/после
  • Команда волонтёров: кто мы, ценности, фото
  • Пожертвование: выбор суммы (500/1000/5000/своя), платёжная форма
  • Стать волонтёром: форма с навыками и доступным временем
  • Прозрачность: отчёт о тратах + документы для скачивания
0 / 500 символов
Вызов · По уровням

Выбери свой уровень

🟢 Лёгкий
Кафе «Рассвет» — быстрый старт

Зарегистрируйся в Tilda, создай страницу через AI Assistant для кафе. Выбери шаблон «Ресторан», подставь свои HEX-цвета (фиолетовый + зелёный), опубликуй. Покажи ссылку куратору.

🟡 Средний
Портфолио + Zero Block обложка

Создай личный сайт-портфолио. Обложку — через Zero Block: тёмный фон, твоё имя крупным шрифтом, кнопка «Обо мне» с якорной ссылкой. Остальные блоки — AI Assistant. Минимум 3 якорных ссылки. Покажи работающую навигацию.

🔴 Сложный
Полноценный коммерческий сайт

Создай сайт для реального или выдуманного бизнеса: кафе, магазин, студия, стартап. Zero Block: обложка + навигация. AI Assistant: все остальные блоки. Обязательно: якорные ссылки, форма, минимум 5 разделов, опубликованный сайт с реальным URL. Добавь кастомный домен если есть.

Чек-лист · Урок 4

Что ты освоил?

✓
Зарегистрировался на tilda.cc (именно .cc, не .ru)
✓
Понимаю разницу между AI Assistant и Zero Block
✓
Создал страницу через AI Assistant с описанием своего проекта
✓
Вставил HEX-код фирменного цвета и увидел как сайт перекрасился
✓
Открыл Zero Block и разобрался в 5 инструментах (стрелка, текст, изображение, фигуры, кнопки)
✓
Создал навигационный блок с кнопками в Zero Block
✓
Настроил якорные ссылки — кнопки ведут на нужные блоки
✓
Опубликовал сайт и скопировал ссылку
✓
Проверил контент от ИИ — убрал ошибки и неточности
✓
Отредактировал блок через кнопку-звезду (AI в редакторе)
Практика · Задание 13

Клиника «Vita»

🔴 Сложное Медицина / Здоровье
Сайт частной клиники с онлайн-записью
Медицинский сайт требует особой точности и доверия. Каждый текст должен внушать уверенность. Используй светлую тему, чистый дизайн.
Структура
  • Hero: «Ваше здоровье — наш приоритет», кнопка «Записаться онлайн»
  • Услуги: 6+ направлений (терапия, педиатрия, стоматология и тд) — карточки с иконками
  • Врачи: минимум 5 докторов с фото, специализацией, опытом и образованием
  • Технологии: оборудование клиники, сертификаты
  • Онлайн-запись: выбор специалиста, дата/время, имя, телефон
  • Цены: прайс-лист по направлениям в виде таблицы
  • Страховые партнёры: логотипы страховых компаний
  • Контакты: 2 адреса (клиники), телефоны, карта, режим работы
0 / 500 символов
Домашнее задание

Создай свой первый сайт

📋 Задание

Выбери любую идею из урока (кафе, портфолио, событие, магазин или свою) и создай полноценный сайт на Tilda. Опубликуй и пришли ссылку в Discord.

⭐ Требования
  • →Минимум 5 разделов на сайте
  • →Zero Block для обложки
  • →Якорные ссылки в навигации
  • →Свои HEX-цвета из Canva
  • →Опубликованная ссылка
🏆 Бонус

+100 XP за сайт с формой обратной связи. +50 XP за добавленное видео. +200 XP за кастомный домен!

💬 Поделись в Discord

Опубликуй ссылку на сайт в нашем сервере. Получи фидбэк от куратора и одноклассников!

Discord →

Твой результат за урок

0 XP