В этой инструкции вы научитесь собирать HTML-структуру страницы: перетаскивать теги, вкладывать элементы друг в друга и работать с текстом.
Перетаскивание тегов на канву
Откройте нужную категорию в левой панели, зажмите элемент мышью и перетащите его на канву. При наведении на зону, куда можно вложить элемент, появится синяя рамка-подсветка — отпустите мышь, и тег встанет на место.
Если канва пуста, при перетаскивании первого элемента вверху появится синяя линия — это индикатор точки вставки.
Какие теги и блоки доступны
В палитре собраны стандартные HTML5 теги, разбитые по группам:
- Структурные: div, section, header, footer, nav, main, article, aside
- Текстовые: h1–h6, p, span, a, button
- Медиа: img
- Списки: ul, ol, li
- Формы: form, input, textarea
- Таблицы: table
Кроме тегов есть готовые блоки — это собранные секции (Hero, Header, Footer, Pricing, FAQ и другие). Они ускоряют работу: перетащили блок, отредактировали текст и стили — секция готова.
Количество доступных тегов и блоков зависит от тарифа. На бесплатном — 10 тегов и 3 блока, на Стартовом — все теги и 10 блоков, на Профессиональном — 22 блока.
Вложенность элементов
Главная сила Шаблонизатора — работа со структурой. Любой контейнерный тег (div, section, header, nav и др.) может принимать в себя другие элементы.
Чтобы вложить элемент:
- Перетащите тег из палитры на контейнер, уже стоящий на канве.
- Дождитесь появления синей рамки вокруг контейнера-цели.
- Отпустите мышь — элемент окажется внутри.
Вложенность может быть многоуровневой: div внутри section внутри main — точно как в реальной вёрстке.
Работа со списками
Перетащите на канву тег ul (маркированный список) или ol (нумерованный). Внутри автоматически появится первый пункт li.
- Чтобы добавить ещё пункты — выделите список и нажмите «Добавить пункт» в правой панели.
- Новый пункт появится в конце списка. Можно сразу добавить несколько подряд — фокус остаётся на списке.
- Текст каждого пункта редактируется двойным кликом.
Операции с блоками
Кликните на любой элемент на канве — он выделится, и появится плавающий toolbar с кнопками:
- Копировать — создаёт дубликат блока со всеми стилями и вложенными элементами. Копия вставляется сразу после оригинала.
- Удалить — убирает блок с канвы.
- Вверх / Вниз — перемещает блок относительно соседей.
- Сбросить стили — возвращает элемент к исходному виду без CSS.
Редактирование текста
Дважды кликните на текстовый элемент (заголовок, абзац, ссылку, кнопку, пункт списка) — он перейдёт в режим редактирования. Пишите прямо на канве.
Над элементом появится мини-панель форматирования:
- B — жирный
- I — курсив
- U — подчёркивание
- Ссылка — вставка ссылки (откроется окно для ввода URL, выбора target и rel)
Для заголовков в правой панели доступен переключатель уровня: H1 → H2 → H3 → H4 → H5 → H6.