Создание проекта и знакомство с интерфейсом

Во второй инструкции вы создадите первый проект и разберётесь, как устроен интерфейс редактора.


Как создать новый проект

После входа в Шаблонизатор откроется окно «Выберите проект». Если проектов ещё нет — вы увидите одну кнопку.

  1. Нажмите «Создать новый проект».
  2. Введите название (например, «Мой первый лендинг») и краткое описание.
  3. Нажмите «Создать проект».

Проект создастся с одной пустой страницей — и вы попадёте в редактор.

Как открыть существующий проект

Если у вас уже есть проекты, они отобразятся карточками в окне выбора. Кликните на нужную карточку и нажмите «Открыть» — загрузится последняя сохранённая версия.

Интерфейс редактора: три панели

Рабочее пространство разделено на три области:

Левая панель — Блоки

Здесь расположена палитра HTML-тегов и готовых блоков, сгруппированных в аккордеон по категориям: структурные теги, текстовые элементы, медиа, формы, списки, готовые секции. Отсюда вы перетаскиваете элементы на канву.

Центральная область — Канва

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

Правая панель — Редактор стилей

Появляется при выделении элемента на канве. Показывает CSS-свойства выбранного блока: размеры, отступы, цвета, шрифты, Flexbox/Grid, рамки, эффекты. Все изменения применяются мгновенно.

Библиотека изображений

Для тега <img> в правой панели доступна кнопка «Выбрать изображение». Она открывает встроенную библиотеку файлов Шаблонизатора.

  • Загрузить — добавляет файл в библиотеку.
  • Вставить — подставляет выбранное изображение в тег <img> на канве.
  • В корзину — переносит файл в корзину (без мгновенного физического удаления).
  • Восстановить — возвращает файл из корзины в активные.
  • Удалить — удаляет файл из корзины безвозвратно.

Важно: после загрузки изображение не вставляется автоматически на канву. Вставка происходит только по кнопке «Вставить».

Верхняя панель

Кнопки действий: Сохранить (сохранить для продолжения работы), Опубликовать (получить чистый HTML/CSS и публичную ссылку), Удалить (удалить шаблон).

Страницы проекта

Над канвой расположены табы страниц. Переключайтесь между ними одним кликом.

  • Чтобы добавить новую страницу, нажмите «+ Страница» и введите название.
  • Количество страниц зависит от тарифа: на «Стартовом» — до 5, на «Профессиональном» и «Бизнес» — без ограничений.

Автосохранение

Шаблонизатор автоматически сохраняет вашу работу каждые 30 секунд. Текущий статус отображается на кнопке сохранения:

  • ✅ Сохранено — все изменения на месте.
  • ● Не сохранено — есть несохранённые правки.
  • ⏳ Сохранение… — идёт процесс.

Ручное сохранение доступно в любой момент по кнопке «Сохранить».


Далее: Сборка структуры страницы →