Tilda для чайников: из чего состоит платформа?

Tilda давно перестала быть «конструктором для дизайнеров». На ней собирают лендинги, блоги, магазины, образовательные проекты и даже сложные промо-сайты. Но первое знакомство у многих проходит по сценарию: «Нашёл шаблон → покликал блоки → запутался в настройках → закрыл вкладку».

Разберёмся, **из чего вообще состоит Tilda** и как устроен её интерфейс, если вы только заходите на платформу. Без воды, по шагам, в логике «что за чем идёт», чтобы через 15 минут у вас сложилась цельная картинка.

---

В Tilda есть несколько уровней:

1. **Аккаунт** Где хранятся все ваши проекты. Можно вести несколько сайтов в одном аккаунте (например: личный блог, сайт студии, лендинг курса).

2. **Проект (Project)** Это **сайт целиком**: со своими страницами, доменом, настройками, меню. Внутри проекта вы видите список страниц: главная, блог, «О компании», контакты и т.п.

3. **Страница (Page)** Это **конкретная веб-страница**, которую видит пользователь по адресу `site.ru/page1`. Каждая страница состоит из блоков.

4. **Блоки (Blocks)** Основной строительный элемент. Tilda — это не «тяну мышкой и рисую», а **сборка из готовых блоков**: заголовки, обложки, формы, отзывы, галереи и т.д.

5. **Zero Block (Z-или Zero-Block)** Отдельный режим для тех, кому мало стандартных блоков. Здесь вы можете **раскидывать элементы по пикселям**, как в графическом редакторе.

6. **Настройки (Settings)** Есть: - настройки проекта (сайта), - настройки страницы, - настройки конкретного блока, - настройки аккаунта.

Дальше — по слоям: начнём с проектов, затем страницы, потом блоки и в финале — настройки.

---

Когда вы заходите в Tilda, первым делом попадаете в **список проектов**.

- **Название и обложка проекта** Для удобства, чтобы не путаться, если у вас много сайтов.

- **Тип проекта** Чаще всего это обычный сайт / лендинг. Но есть и специальные типы: - магазин (с фокусом на каталог и корзину), - блог / медиа, - учебный проект (с личным кабинетом, уроками и т.п., через Tilda Education).

- **Домен** - На старте сайт живёт на техническом домене вида `project12345.tilda.ws`. - Потом можно подключить свой домен: `mysite.ru`.

- **Настройки проекта** Здесь задаются: - название сайта, - фавикон (иконка вкладки браузера), - глобальные шрифты и цвета, - подключение аналитики (GA, Я.Метрика), - интеграции (CRM, email-сервисы), - настройки магазина и оплаты.

Считайте проект **контейнером**, где лежат все страницы вашего сайта + общие настройки.

---

Внутри проекта — список страниц. Типичные элементы, которые вы увидите:

- **Название страницы** (для вас, в админке), - **URL (адрес)**: `/`, `/about`, `/blog/post-1` и т.п., - **Статусы**: - Черновик (не опубликована), - Опубликована (видна по ссылке), - Главная (root-страница, открывается по домену без хвоста), - **Кнопки действий**: - «Редактировать» — перейти к сборке страницы из блоков, - «Настройки» — параметры именно этой страницы, - «Публиковать» — отправить изменения «в интернет», - «Дубликат» — сделать копию.

- **Предпросмотр** — вы видите страницу как пользователь, но по временной ссылке. - **Публикация** — изменения уходят на сервер, и страница обновляется на основном домене или `.tilda.ws`.

Многие новички вносят изменения и удивляются: «На сайте ничего не поменялось». Причина почти всегда одна — **забыли нажать «Опубликовать» страницу (и иногда — весь сайт)**.

---

Редактор Tilda устроен просто: Вы попадаете на страницу, видите вертикальный список блоков. Каждый блок — секция сайта (экран).

Примеры:

- Обложка с заголовком и кнопкой - Текстовый блок - Галерея - Таблица цен - Отзывы - Форма заявки - Подвал

Все блоки сгруппированы по разделам:

- **Cover (обложки)** — большие первые экраны с фоном, заголовком и CTA. - **Typography (текст)** — заголовки, абзацы, списки, цитаты. - **Columns (колонки)** — карточки с иконками/фото, описанием, преимуществами. - **Gallery / Slider** — галереи, карусели, слайдеры. - **Form (формы)** — заявки, подписки, опросы. - **Menu / Header / Footer** — навигация, верхние и нижние части сайта. - **Store / Product** — карточки товаров, каталоги, корзины. - **Social** — иконки соцсетей, кнопки «Поделиться». - **Таблицы, расписания, FAQ, таймеры, карты**, и т.д.

Логика простая: **вы не рисуете с нуля**, вы подбираете подходящий блок и настраиваете его.

---

У каждого блока есть три основные зоны управления, обычно видимые при наведении:

1. **Контент (Content)** - Заполняете текст: заголовки, подзаголовки, описания. - Загружаете изображения, видео, иконки. - Меняете кнопки: текст, ссылки, действия (открыть попап, перейти к блоку и пр.).

2. **Настройки (Settings)** - Фон: цвет, градиент, картинка, видео. - Отступы: сверху/снизу, по сторонам. - Выравнивание: по центру, сверху, слева и т.д. - Поведение: - показать / скрыть на мобильных, - анимация появления, - параллакс, - фиксирование (fixed) и др.

3. **Доп. функции (через «шестерёнку» / иконки)** - Скопировать блок, - Переместить вверх/вниз, - Скрыть блок (не удаляя), - Удалить блок.

Лучше не пытаться «упихнуть всё в один блок». Через Tilda быстрее и понятнее собирать экран за экраном:

1. Обложка, 2. Блок с преимуществами, 3. Блок с кейсами, 4. Отзывы, 5. Форма.

---

**Zero Block (или Z-блок)** — это внутренний визуальный редактор. Он нужен, когда стандартные блоки не дают нужной свободы.

В Zero вы можете:

- размещать элементы по координатам (X/Y), - задавать размеры в пикселях или процентах, - использовать собственную сетку, - включать адаптив под разные экраны (desktop/tablet/mobile отдельно), - рисовать сложные композиции: креативные обложки, нестандартные лендинги, промо.

Внутри Zero есть свои элементы:

- Текст, - Прямоугольник, круг, линии, - Картинки, иконки, SVG, - Кнопки, - Видео, - Формы.

Важно понимать: **Zero Block — надстройка над Tilda**, а не замена. Новичку лучше начать со стандартных блоков, а потом уже постепенно заходить в Zero для отдельных секций, где нужна гибкость.

---

У каждой страницы есть **отдельные настройки** (иконка шестерёнки рядом с её названием в списке страниц или сверху в редакторе).

Что там главное:

- **Название страницы (Title)** — заголовок во вкладке браузера и в поиске. - **Описание (Description)** — сниппет в поисковых системах. - **URL-адрес** — часть ссылки: `/about`, `/pricing`, `/blog/post-1`.

- Заголовок и описание для соцсетей (Open Graph), - Картинка предпросмотра (для ссылок в мессенджерах и соцсетях), - Индексация (разрешить / запретить поисковикам).

- Выбор картинки и текста, которые увидит пользователь при репосте ссылки.

- 404-страница, - редиректы (если вы меняете URL и не хотите терять трафик), - защита паролем (закрытые страницы).

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

---

На уровне проекта вы задаёте **глобальные параметры**, которые применяются ко всем страницам.

- Привязка своего домена (`mysite.ru`), - Настройки HTTPS (обычно Tilda подтягивает SSL автоматически после настройки DNS), - Технический домен `.tilda.ws` — удобно для черновиков и теста.

- Основные шрифты для заголовков и текста, - Базовые размеры и кегли, - Параметры интерфейса (цвета ссылок, кнопок, фона).

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

- **Аналитика**: - Google Analytics, - Яндекс.Метрика, - пиксели соцсетей. - **CRM и формы**: - amoCRM, Bitrix24, Pipedrive, - Telegram, email, Google Sheets и др. Всё это настраивается один раз, а потом подключается к формам на страницах.

Если вы делаете магазин, в настройках проекта задаются:

- Валюта, - Способы оплаты (Яндекс.Касса, CloudPayments и др.), - Доставка, - Налоги, - Статусы заказов.

---

Чтобы собрать первый сайт на Tilda, вам достаточно запомнить простую последовательность:

1. **Создаёте проект** Задаёте имя, выбираете тип (чаще всего — «Сайт»).

2. **Создаёте первую страницу (обычно — главную)** Можете взять готовый шаблон или начать с пустой.

3. **Добавляете блоки** - Обложка, - Блок о продукте, - Преимущества, - Кейсы / портфолио, - Отзывы, - Форма / кнопка действия, - Контакты + карта, - Подвал.

4. **Заполняете контент и настраиваете каждый блок** Тексты, изображения, отступы, выравнивание, кнопки.

5. **Проверяете мобильную версию** В редакторе есть переключатель «Desktop / Tablet / Mobile».

6. **Заполняете настройки страницы (Title, Description, URL)**.

7. **Настраиваете проект** Домен, шрифты, аналитику, интеграции.

8. **Публикуете страницу и сайт** Сначала — каждую страницу, потом (по необходимости) — проект целиком.

---

Коротко — типичные ошибки:

1. **«Я всё поменял, а на сайте старый текст»** — Страницу отредактировали, но **не опубликовали**.

2. **«Сайт выглядит странно на телефоне»** — Не проверили мобильную версию, не поправили отступы и размеры в адаптиве.

3. **«Форма есть, но заявки не приходят»** — Не настроен приём заявок в **настройках формы** и/или **интеграциях проекта**.

4. **«В поиске и при репосте отображается непонятный заголовок и картинка»** — Не заполнены **SEO и соцнастройки** страницы.

5. **«Хочу всё настроить пиксельно, но не понимаю, как»** — Это задача для **Zero Block**, а не для стандартных блоков.

---

Если вы «чайник» в Tilda, оптимальный подход:

1. Не прыгать сразу в Zero Block. 2. Собрать первый сайт **целиком из стандартных блоков**. 3. Освоить: - добавление/редактирование блоков, - публикацию страниц, - базовые настройки SEO и домена. 4. Только потом заходить в Zero для 1–2 нестандартных экранов.

Tilda устроена логично: **аккаунт → проект → страницы → блоки → настройки**. Поняв этот «скелет», вы перестаёте пугаться кнопок и начинаете думать уже не о платформе, а о контенте и задачах бизнеса.