Tildify
Vibe Block Code

Инструкция по Tildify Vibe Block

Переносите готовые блоки из браузера в Tilda Vibe Block, а затем подключайте каталог или поток через роли элементов.

Установить расширение Начать с быстрого старта

На этой странице

1. Базовый сценарий

Быстрый старт

Подходит для сайта, который уже открыт в браузере: результата из ИИ-генератора, готовой страницы или отдельной секции.

  1. 1Откройте сайт, нажмите иконку Tildify на панели расширений браузера и выберите режим Vibe Block Code. Если переносите витрину или публикации, включите «Каталог Tilda» или «Поток Tilda».
  2. 2Захватите один логический блок или весь сайт, если результат помещается в лимит Vibe Block — 150 000 байт.
  3. 3В Tilda добавьте Vibe Block, откройте редактор кода и вставьте результат из буфера обмена.
  4. 4Сохраните блок, проверьте его на компьютере и телефоне, затем назначайте роли, если нужен каталог или поток.
Окно расширения Tildify с выбранным режимом Vibe Block Code
В окне расширения выберите область захвата и состав переносимого кода.
2. Захват и вставка

Выберите подходящий режим

  • HTML + CSS + JS — внешний вид и простой интерактив вместе.
  • HTML + CSS — только дизайн, когда поведение не требуется или его нужно настроить позже.
  • Только JS — общий сценарий для уже добавленных секций.
  • Минификация — уменьшает размер результата перед вставкой.

После вставки текст, разметку и стили можно редактировать в Vibe Block. Сначала внешние изображения могут загружаться с исходного сайта; используйте кнопку загрузки изображений, которую Tildify добавляет в редактор, чтобы сохранить нужные файлы в Tilda.

Сохраните изображения в Tilda

Сразу после вставки внешние изображения продолжают загружаться с исходного сайта. Если исходная страница или файл станут недоступны, картинки могут пропасть и из вашего блока. Поэтому после вставки перенесите их в хранилище Tilda.

Кнопка загрузки всех изображений в редакторе кода Vibe Block
Кнопка над редактором кода загружает в Tilda все внешние изображения блока.
  • Общая кнопка загрузки изображений в редакторе Vibe Block переносит все внешние изображения блока сразу.
  • Для отдельной картинки используйте кнопку загрузки в панели настроек выбранного изображения.
Загрузка выбранного изображения через панель Стиль
Загрузка выбранной картинки через панель «Стиль».
Загрузка изображения через панель Контент
Та же команда доступна в содержимом изображения.

Обычная форма переносится как форма Tilda: после вставки выберите приёмщик заявок в настройках. Сценарии с оплатой, авторизацией, одноразовыми кодами или несколькими шагами требуют отдельной проверки.

3. Роли элементов

Как сделать блок живым

Роль связывает элемент вашего дизайна с данными Tilda. Выберите элемент на холсте Vibe Block — в боковой панели «Стиль» появится раздел «Каталог» или «Поток». Назначьте в нём нужную роль. Текст, изображение, кнопка или контейнер останутся вашими — изменится только источник данных или действие.

  1. 1Сначала подготовьте внешний вид карточки, списка, кнопок и попапов в Vibe Block.
  2. 2Для потока выберите источник и при необходимости его раздел. Для каталога проверьте подключение к нужным товарам.
  3. 3Назначьте роли элементам шаблона и кнопкам управления списком.
  4. 4Сохраните блок и проверьте результат на опубликованной странице.
Дополнительные кнопки Tildify в панели редактирования Vibe Block
Дополнительные команды Tildify позволяют создавать и настраивать элементы прямо в Vibe Block.

Кнопки Tildify в редакторе

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

Независимое дублирование
Создаёт копию выбранного элемента с собственными классами для него и всей вложенной структуры. Изменения копии не затронут исходный элемент.
Сделать стиль независимым
Добавляет выбранному элементу новый уникальный класс, сохраняя его текущий внешний вид. После этого элемент можно оформлять отдельно от похожих элементов.
Обернуть в контейнер
Помещает выбранный элемент в новый независимый контейнер, которому можно задать собственный макет, фон, отступы и другие свойства.
Изменить макет
Переключает выбранный элемент между обычным блоком, Flex-контейнером и Grid-контейнером.
Добавить элемент
Добавляет заголовок, текст, изображение, кнопку, контейнер или разделитель. Если выбран контейнер, новый элемент появится внутри него.
4. Каталог

Подключите товары к своему дизайну

Карточка и поля товара

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

Подключение каталога Tilda в редакторе Vibe Block
Подключите нужный каталог через кнопку «Настройки каталога» в редакторе Vibe Block.
  • Изображение, название, бренд, цена, старая цена и описание.
  • Артикул, наличие, бейдж, характеристики и варианты товара.
  • Кнопка «В корзину», избранное и ссылка на товар.
  • Название, описание и изображение раздела или подраздела.
Панель назначения роли элемента каталога в Tildify
После выбора элемента назначьте ему роль в разделе «Каталог».

Навигация и выдача

Для витрины можно назначить фильтры разных видов, строку поиска, сортировку и сброс. Счётчики покажут число найденных товаров или элементов категории. Пагинация, «Показать ещё» и выбор количества товаров на странице настраиваются независимо — используйте только нужные элементы управления.

  • Разделы и подразделы, а также данные активного раздела.
  • Фильтры в виде списка, кнопок, флажков или диапазона значений.
  • Поиск, сортировка и кнопка сброса активных условий.
  • Счётчик, номера страниц, «Показать ещё» и количество товаров на странице.
5. Потоки

Публикации, статьи и разделы

Выберите исходную карточку-шаблон. В разделе «Поток» боковой панели укажите источник и при необходимости нужный раздел. Поддерживаются обычные и настраиваемые потоки.

Выбор источника и роли публикации в панели Поток
Выберите поток и назначьте роль выбранному элементу карточки публикации.

Шаблон публикации и поля

Выберите карточку публикации как шаблон, затем назначьте роли её элементам. Доступны стандартные поля публикации, пользовательские поля из настроек потока и системные поля. Галерею назначайте как изображение — тогда в дизайне отобразится нужное фото публикации.

  • Заголовок, текст, дата, автор, ссылка и другие стандартные поля.
  • Пользовательские поля настраиваемого потока.
  • Системные поля, доступные для публикации.
  • Изображение или изображение из галереи публикации.

Разделы и управление списком

Назначьте элементы для разделов публикаций, активного раздела и счётчиков. Как и в каталоге, можно добавить пагинацию, «Показать ещё» и выбор числа публикаций на странице.

6. Формы

Настройте поля и действие после отправки

Если в перенесённом блоке есть форма, выберите её или любой элемент внутри. В панели «Редактор формы» можно временно включить выбор отдельных полей и настроить их без перехода по дереву слоёв.

Панель редактора формы с режимом выбора полей и своей ссылкой после отправки
Включите режим «Редактор», чтобы выбирать поля формы. Здесь же можно задать собственное действие после успешной отправки.

Для выбранного поля доступны подпись, имя переменной, placeholder, тип проверки и обязательность. Имя переменной определяет, под каким названием значение попадёт в заявку.

Настройки выбранного поля формы в Tildify
Настройки отдельного поля формы: подпись, переменная, подсказка, проверка и обязательность.
  • Якорь вида #popup откроет собственный попап Tilda после успешной отправки.
  • Адрес /thanks или https://… перенаправит посетителя на указанную страницу.
  • Тип проверки должен соответствовать содержимому поля: имени, телефону, email или другому значению.
  • Перед публикацией отключите режим «Редактор», иначе форма не будет отправляться.
7. Перед публикацией

Проверка и типовые ситуации

  1. 1Проверьте, что карточка-шаблон содержит все нужные роли, а источник и раздел выбраны правильно.
  2. 2Проверьте пустой результат: обычно это активный фильтр, пустой раздел или несовпадение выбранного источника.
  3. 3Проверьте поиск, сортировку, сброс, пагинацию и «Показать ещё» вместе — они должны управлять одним списком.
  4. 4Откройте товар через подключённый стандартный товарный блок и публикацию через FD302N на опубликованной странице.
  5. 5Проверьте мобильную версию, изображения и отправку формы, если она есть в блоке.

Генерируете сайт с помощью AI?

Чтобы блоки переносились точнее, попросите AI использовать HTML, CSS и Vanilla JavaScript без фреймворков и внешних зависимостей.

Подойдёт для дополнения к обычному запросу
Полный промпт для сайта, который планируется переносить в Tilda
Важно: этот сайт позже будет перенесён в Tilda Vibe Block через Tildify.

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

— используй обычные HTML, CSS и Vanilla JavaScript;
— не используй React, Vue, Angular, jQuery, Tailwind и другие библиотеки или фреймворки;
— не используй npm-пакеты, сборщик, CSS-in-JS и JavaScript-модули;
— основная разметка, текст и контент должны сразу присутствовать в HTML, а не создаваться JavaScript после загрузки;
— не загружай основной интерфейс и контент через API или fetch, если это не требуется функциональностью сайта;
— JavaScript используй только для поведения элементов: вкладок, аккордеонов, галерей, меню, модальных окон и других интерактивных компонентов;
— каждый интерактивный блок должен работать независимо от остальных частей страницы;
— несколько экземпляров одного интерактивного блока должны корректно работать одновременно на одной странице;
— перед подключением обработчиков проверяй существование необходимых элементов;
— ищи элементы интерактивного блока только внутри его собственного корневого контейнера;
— подключай события через addEventListener, не используй inline-обработчики вроде onclick и глобальные функции;
— изолируй JavaScript каждого компонента внутри отдельной функции или IIFE;
— не создавай глобальные JavaScript-переменные и не связывай независимые блоки через общий runtime;
— используй обычные CSS-классы с понятными названиями;
— стили компонента по возможности ограничивай его корневым контейнером и избегай слишком общих глобальных селекторов;
— постоянное оформление задавай через CSS-классы, а inline-стили используй только для значений, которые меняются во время работы;
— для иконок используй встроенный SVG с явно заданными размерами, а не внешние библиотеки и нестандартные теги;
— формы создавай через тег form, используй поля с name, type и при необходимости required, кнопку отправки делай type="submit";
— анимации появления, наведения и простых переходов по возможности реализуй через CSS;
— основной контент страницы должен оставаться видимым без выполнения JavaScript;
— раздели страницу на самостоятельные смысловые секции, которые можно скопировать и использовать отдельно;
— не используй Canvas для обычного текста, изображений и вёрстки;
— не вставляй изображения в формате base64: используй обычные ссылки на файлы;
— не добавляй служебные панели, логотипы конструктора и отладочный код.

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

FAQ