Редактирование прямо на холсте
Доработайте HTML-дизайн после генерации: измените текст и выбранные элементы, сохраните изменения и проверьте результат перед публикацией.
Выберите способ внесения изменений
| Ваша задача | Используйте | Что изменится |
|---|---|---|
| Вы точно знаете нужный текст, цвет или отступ | Edit | Выбранный HTML-файл — после подтверждения или сохранения правки |
| Вы хотите, чтобы агент переработал элемент | Comment → Send to chat | Агент получит инструкцию, относящуюся к конкретному элементу |
| Вы хотите пояснить изменения для визуальной области | Mark | В беседу будут добавлены снимок экрана и заметки |
Если нужно добавить новый раздел, настроить адаптивное поведение или внести изменение на нескольких экранах, дайте агенту четкое задание. Для небольшой визуальной корректировки используйте прямое редактирование. Два других способа описаны в разделе о комментариях и отмеченной обратной связи.
Откройте редактируемый предпросмотр
- Откройте HTML-артефакт в Design Files и выберите Preview. Для HTML-артефактов слайдов также используется редактор предпросмотра; доступные элементы управления зависят от файла.
- На панели инструментов предпросмотра выберите Edit, затем выберите элемент на холсте. Дождитесь появления рамки выделения и панели параметров.
- Выйдите из режима Edit, прежде чем проверять ссылки, формы или кнопки как обычный пользователь. Выбор элемента в режиме редактирования служит другой цели, чем работа с прототипом.
Измените строку текста
- В режиме Edit нажмите текст, который хотите изменить. Текст и подписи ссылок можно редактировать прямо на холсте.
- Введите новый текст. Нажмите Enter, чтобы подтвердить изменение; Shift+Enter вставляет разрыв строки. Нажмите Escape, чтобы отменить текущий ввод текста.
- Проверьте формулировку в обычном режиме Preview. Если страница генерирует этот текст с помощью JavaScript, также повторно проверьте действие, которое его отображает.
Настройте элемент или его компоновку
Выберите элемент, чтобы увидеть поддерживаемые им свойства. В инспекторе доступны типографика, цвет, размер, отступы, граница и радиус скругления. Для контейнеров Flex и Grid отображаются настройки компоновки, например направление, выравнивание и Gap. Для ссылки может быть доступно поле Href, а изображение можно заменить с помощью Upload image. Эти элементы управления зависят от контекста, поэтому не для каждого элемента доступны все поля.
Чтобы изменить положение выбранного элемента, его можно перетащить. Вносите небольшие изменения и проверяйте соседние элементы и мобильные макеты: если переместить элемент так, чтобы он подходил для одного десктопного представления, это не создаст адаптивную компоновку.
| Поле | Что ввести или проверить |
|---|---|
| Text / Href / Image URL / Alt text | Для текстовых элементов доступна формулировка, а для ссылок — также адрес назначения. Для изображений доступны источник и альтернативный текст. Набор полей зависит от выбранного элемента. |
| Text / Background / Border color | Используйте шестнадцатеричный цвет, например #262626. После сохранения проверьте контрастность и состояния при наведении. |
| Opacity | Число от 0 до 1: 0 означает полную прозрачность, а 1 — полную непрозрачность. Значение влияет на весь выбранный элемент, а не только на его фон. |
| Font / Size / Weight / Line height / Letter spacing | Выберите шрифт и начертание, затем настройте размер и межбуквенный интервал. В поле Line height можно указать положительное число или значение в px: 1.5 — это множитель, а 24px — фиксированная высота. |
| Width / Height | Обычное число преобразуется в px. Для этих размеров также принимаются значения в процентах. Прежде чем задавать фиксированную ширину, проверьте узкие макеты. |
| Padding / Margin | Настраивайте верхний, правый, нижний и левый отступы отдельно. Padding — это внутренний отступ элемента, а Margin отделяет его от соседних элементов. Для Margin можно использовать auto. |
| Border width / Style / Radius | Задавайте толщину, стиль и цвет границы вместе. Если указать толщину без видимого стиля, может показаться, что ничего не изменилось. Radius скругляет углы. |
| Direction / Distribution / Gap / Align | Элементы управления компоновкой доступны при выборе контейнера компоновки. Для обычного элемента Align изменяет выравнивание текста, а не перестраивает его родительский элемент. |
Большинство полей отступов принимают числа или значения в px, но не произвольные CSS-выражения. Если значение отклонено, проверьте единицу измерения и выбранный элемент, а не пытайтесь многократно сохранить его. Пустые поля могут означать наследуемые или вычисляемые стили, а не нулевое значение.
Сохранение, отмена или возврат изменений
| Действие | Что оно означает |
|---|---|
| Enter при редактировании текста | Подтвердить текущее изменение текста |
| Save на панели параметров | Записать в файл текущие изменения содержимого и стилей |
| Cancel / Reset | Отменить или сбросить текущий черновик; ранее подтвержденные изменения при этом не удаляются |
| Undo / Redo в редакторе | Отменить или повторно применить подтвержденные ручные правки |
| Delete element | Удалить выбранный элемент; проверьте зависимости и при необходимости используйте Undo |
Проверьте сохраненный результат
- Выйдите из режима Edit и перезагрузите предпросмотр. Убедитесь, что изменение сохранилось.
- Выберите мобильный размер в меню области просмотра и проверьте реальные элементы управления.
- Если нужна более ранняя версия HTML, используйте историю версий. Для общего файла после проверки новой версии обновите его ссылку.
Редактирование HTML-анимации не изменяет уже отрисованный MP4. Запросите новый рендеринг, а затем проверьте новое видео.
Если не удается выбрать элемент или сохранить изменения
Убедитесь, что вы открыли поддерживаемый HTML-файл в Preview и что проект доступен для редактирования. Общий проект с доступом только для чтения может разрешать комментарии, но запрещать редактирование. Выйдите из Edit и откройте этот режим снова, а при необходимости перезагрузите файл. Если после выбора по-прежнему не появляется рамка или инспектор, используйте Comment или Mark, чтобы описать изменение агенту, и при сообщении о проблеме укажите версию приложения. Не нажимайте Save повторно, если элемент не выбран или результат не подтвержден.