Палитра элементов

Вкладка «Элементы» в левой панели редактора — это палитра готовых HTML-snippet'ов, из которых можно собирать страницу как из кубиков. Каждый snippet — кусочек размеченного и стилизованного HTML на Tailwind, готовый сразу работать.

Категории snippet'ов

В палитре собраны элементы по типичным потребностям сайта:

• Структурные — секции, контейнеры, гриды, флексы, разделители.
• Контент — заголовки, абзацы, списки, цитаты.
• Кнопки и ссылки — CTA-кнопки, текстовые ссылки, иконочные кнопки.
• Карточки — товары, услуги, отзывы, команда, прайс-листы.
• Шапки и подвалы — готовые header/footer с навигацией.
• Формы — инпуты, текстовые поля, чекбоксы. Подробнее: Создание форм.
• Медиа — картинки, видео, embed.

Как вставить snippet

Способ 1 — клик. Кликните на карточку snippet'а в палитре. Если в редакторе выделен какой-то элемент — snippet вставится рядом с ним. Если нет — добавится в конец страницы.

Способ 2 — drag-and-drop. Зажмите карточку snippet'а и перетащите её на нужное место в холсте. Подсветка покажет, где snippet встанет, когда вы отпустите мышь.

После вставки элемент сразу появляется на канвасе и в HTML-структуре. Дальше его можно править как любой другой элемент — через инспектор или попросить Framix AI переписать его.

Зачем нужна палитра, если есть AI

AI быстрее придумывает с нуля, но иногда хочется точно знать, что вставится. Палитра — для этих случаев:

• быстро добавить кнопку нужного стиля, не описывая её AI;
• врезать готовую секцию-отзывы и потом наполнить своим текстом;
• вставить инпут формы и привязать его к форме проекта;
• поставить разделитель между секциями.

Что после вставки

• Поправить текст — двойной клик по элементу на канвасе или поле «Текст» в инспекторе.
• Сменить классы — в инспекторе раздел «Классы» с Tailwind-автокомплитом.
• Заменить картинку — в инспекторе атрибут src → picker файлов из менеджера.
• Попросить AI — выделите элемент и в чате напишите «сделай эту кнопку зелёной» или «перепиши этот блок про доставку».