обсудить проект
проекты
услуги
о студии
ДИЗАЙНЕРАМ
Вам не нужно иметь четкий план.
Мы разработаем концепцию с нуля!
Обсудить проект
ANBOX-Live-Tuner-guide-and-research-final-survey Страница 1 из 1 100 % ANBOX Live Tuner — инструкция для Tilda и Browser
A ANBOXLIVE TUNER Начать тестирование ↗
Коммерческая тайна
Конфиденциально. Копирование кода и элементов страницы, публикация и передача третьим лицам без письменного согласия правообладателя запрещены.
Условия неразглашения

Уведомление о конфиденциальности. Материалы этой страницы, включая программный код, структуру, интерфейс, тексты, графику, описание функциональности и результаты тестирования, предоставляются исключительно для закрытого ознакомления и проведения теста.

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

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

Правообладатель: ИП Плавская Анна Владиславовна. До публикации укажите здесь адрес правообладателя: [АДРЕС].

Экран 01 Инструкция + исследование
Всё работает локально

Визуальный редактор кода для Tilda

Правьте сайт.
Не бойтесь кода.

Пошаговая инструкция по двум версиям ANBOX Live Tuner: встроенной в опубликованную страницу Tilda и отдельной браузерной версии для работы с кодом в изолированном интерфейсе.

Экран 02 Быстрый старт
6 действий до первого изменения

Версия 01 · внутри опубликованной страницы

Запустите Tilda Safe.

Работайте на копии страницы. Интерфейс открывается только при параметре ?anbox-tuner=1; по обычному адресу тюнер скрыт.

Создайте копию страницы

Добавьте VibeBlock, который будете настраивать. Корневой section, main или article блока должен иметь уникальный id.

Добавьте сервисный VibeBlock

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

Вставьте safe-код

Скопируйте весь файл ANBOX-live-tuner-tilda-safe.html в сервисный блок. Browser Embed предназначен для отдельной страницы и не заменяет этот код.

Опубликуйте страницу

Тюнер работает на опубликованном URL, а не внутри редактора Tilda. После каждой замены кода страницу нужно публиковать повторно.

Откройте специальный адрес

Добавьте параметр к опубликованному URL. Если в адресе уже есть параметры, используйте &anbox-tuner=1.

/?anbox-tuner=1

Выберите VibeBlock и объект

В поле «Экран / VibeBlock» выберите блок или включите «Редактирование» и кликните по объекту. Затем задайте уровень: «Элемент», «Контейнер» или «Блок».

Важно: черновик сохраняется в localStorage этого браузера и привязан к пути страницы. До экспорта код в Tilda не меняется; не очищайте данные сайта и не переходите в другой браузер.
Экран 03 Браузерная версия
Отдельная страница · без сервисного блока на проекте

Версия 02 · отдельное рабочее пространство

Запустите Live Tuner Browser.

Browser-версия открывается внутри отдельной страницы через iframe. Она не подключается к редактируемой странице как сервисный блок и не требует параметра ?anbox-tuner=1.

Создайте отдельную страницу для тюнера

Используйте пустую служебную страницу Tilda, не страницу клиента и не экран, код которого вы собираетесь редактировать.

Вставьте Browser Embed

Добавьте один VibeBlock или T123 и вставьте в него целиком файл ANBOX-Live-Tuner-Browser-Tilda-embed.html. Этот файл является оболочкой: он загружает браузерное приложение в iframe.

Опубликуйте и откройте на компьютере

Откройте опубликованную страницу в обычном браузере. Для точного выбора объектов и работы с макетом нужна ширина экрана не менее 1024 px; на меньшем экране интерфейс заменяется предупреждением.

Передайте исходный код

Browser-версия не может автоматически прочитать VibeBlock с другой опубликованной страницы. Загрузите файл или вставьте полный HTML/CSS/JS редактируемого блока через стартовый экран браузерного приложения.

Настройте макет в изолированной среде

Выбирайте элементы, меняйте размер, текст, стиль и сетку, проверяйте Desktop, Tablet и Mobile. Правки существуют только в текущем браузерном проекте и не изменяют опубликованную страницу Tilda напрямую.

Скачайте результат и замените код

Экспортируйте полный обновлённый HTML, затем полностью замените им код соответствующего VibeBlock в Tilda, сохраните и опубликуйте страницу. Не вставляйте экспорт в конец старого кода.

Экран 04 Карта инструментов
Интерфейс build 05

Интерактивная инструкция

Что можно настроить.

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

Выбор и геометрия

Размер

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

  • Выбор через страницу или список «Экран / VibeBlock»
  • Уровни «Элемент», «Контейнер» и «Блок»
  • Сдвиг X/Y, ширина, max-width, высота и min-height
  • Padding, margin, gap, радиус, выравнивание и параметры изображения
  • Режимы «Только этот», «Похожие в блоке» и «На странице» появляются только при безопасном совпадении селектора

Предпросмотр и область CSS — не одно и то же. 1440 и 1200 используют Desktop; 1024 и 768 — Tablet; 390, 360 и 320 — Mobile. «Live» берёт область по текущей ширине окна.

Экран 05 Сохранение результата
Автозахват → HTML / ZIP

Рекомендуемый процесс build 05

Экспортируйте полный код блока.

Тюнер удаляет предыдущий управляемый слой ANBOX, повторно собирает изменения и выдаёт цельный HTML/CSS/JS без накопления нескольких патчей.

Откройте «Экспорт»

Кнопка есть в верхней панели и в левой командной рейке. В блоке экспорта появится число изменённых VibeBlock.

Проверьте автоматический исходник

После выбора объекта тюнер сам захватывает код его VibeBlock. Статус должен содержать правильный #id. При необходимости нажмите «Обновить код со страницы».

Скачайте один блок или ZIP

Для текущего блока используйте «Скачать обновлённый HTML». Для всех изменённых блоков — «Скачать все изменённые блоки · ZIP»; внутри будет README с соответствием файлов и id.

Используйте резервный режим только при ошибке

Если автоматическое чтение ограничено или найден другой id, вставьте полный исходник нужного VibeBlock вручную. Не вставляйте оболочку всего документа с <html>, <head> и <body>.

Замените соответствующие блоки в Tilda

Откройте каждый VibeBlock из README, полностью замените его код файлом *.updated.html и сохраните. Не добавляйте новый код в конец старого.

Опубликуйте, проверьте и удалите тюнер

Проверьте обычный URL и адрес с параметром на Desktop, Tablet и Mobile. Только после успешной проверки удалите сервисный VibeBlock и опубликуйте страницу ещё раз.

Экран 06 Интерактивный опрос
27 вопросов · без открытых ответов

После тестирования Browser и Live

Оцените продукт перед запуском.

Все вопросы заполняются выбором вариантов или оценкой. Свободный ввод используется только для цен. Черновик сохраняется локально в браузере.

01 / Контекст

Опыт и рабочая задача.

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

1. Какая у вас основная роль? *
2. Как давно вы работаете с Tilda? *
3. Как часто вы работаете с VibeBlock, T123 или другими блоками с собственным кодом? *
4. Как вы обычно вносите изменения в кодовые блоки Tilda? *

Можно выбрать не более трёх вариантов.

5. Какие задачи вызывают у вас наибольшие сложности? *

Выберите не более трёх вариантов.

ANBOX Live Tuner / Local research kit Инструкция собрана по актуальному интерфейсу · анкета Browser + Live · 27 вопросов · данные хранятся локально
ANBOX-Live-Tuner-guide-and-research-final-survey. На экране.