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

Последнее обновление: 2026-03-27
Визуальный редактор — это WYSIWYG-интерфейс на основе браузера, который отображает вашу целевую страницу в живом iframe — точно так, как её видят посетители. Нажмите на любой элемент, чтобы редактировать текст, настроить стили или обновить ссылки. Перетащите разделы, чтобы изменить их порядок. Замените изображения или создайте новые с помощью ИИ. Перегенерируйте отдельные разделы, применяйте правки всей страницы или элементов, управляйте всплывающими формами, просматривайте страницу на разных устройствах или переключайтесь в режим кода.

Как его использовать

  1. Открыть редактор

    В подробном представлении целевой страницы нажмите «Открыть визуальный редактор». Страница загружается в холсте iframe с панелью свойств справа.

  2. Нажмите, чтобы выбрать

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

  3. Дважды щелкните, чтобы редактировать текст

    Дважды щелкните любой текстовый элемент, чтобы войти в режим редактирования. Используйте плавающую панель инструментов для выделения жирным шрифтом, курсивом и подчеркиванием. Нажмите снаружи, чтобы подтвердить.

  4. Заменить или создать изображения

    Нажмите изображение, затем на панели «Свойства» нажмите «Заменить», чтобы загрузить собственную фотографию (JPG/PNG/WebP, не более 5 МБ), или нажмите «Создать с помощью AI», чтобы описать новое изображение. Генерация изображений ИИ учитывает роли (герой/услуга/преимущество/обзор) и выполняется как фоновая задача.

  5. Редактировать ссылки

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

  6. Настройка стилей элемента

    Выберите любой элемент и откройте раскрывающуюся панель «Стили» в боковой панели «Свойства». Настройте режим отображения, выравнивание текста, отступы, поля, ширину, высоту, размер шрифта, жирность, цвет шрифта, высоту строки, цвет фона, радиус скругления и рамку — применяется как встроенные стили, не затрагивая CSS страницы.

  7. Перетащите разделы, чтобы изменить порядок

    Щелкните любой раздел, чтобы отобразить маркер перетаскивания (левый верхний угол). Перетащите его вверх или вниз, чтобы изменить порядок. Синяя линия отмечает место падения.

  8. Предпросмотр на разных устройствах

    Нажмите значки устройств на верхней панели, чтобы переключаться между режимами Десктоп, Планшет и Мобильный. Холст масштабируется до выбранной ширины области просмотра, чтобы вы могли проверить адаптивную вёрстку перед публикацией.

  9. Восстановить раздел с помощью ИИ

    Выберите раздел в редакторе, затем нажмите «Регенерировать раздел» на панели «Свойства». Опишите, что вы хотите изменить, на естественном языке — ИИ перепишет только этот раздел, оставив остальную часть страницы нетронутой.

  10. Переключиться в режим кода

    Нажмите кнопку </> на верхней панели. Отредактируйте необработанный HTML-код с предварительным просмотром рядом с ним. Изменения синхронизируются обратно с визуальным полотном при сохранении.

  11. Используйте ИИ Редактировать

    Нажмите фиолетовую кнопку AI (блестящий значок) на верхней панели. Панель сдвигается вниз в двух режимах: «Вся страница» перезаписывает полный макет в соответствии с вашими инструкциями; Элемент редактирует только выбранный элемент. Введите инструкцию и нажмите «Применить».

  12. Управление всплывающими окнами

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

  13. Сохранять

    Меняет автосохранение каждые 5 секунд. Нажмите «Сохранить» для немедленного сохранения вручную. Сохраняется до 20 снимков версий — восстановите любой из них из панели «История».

Часто задаваемые вопросы

Могу ли я отменить изменения?
Да. Ctrl+Z / ⌘+Z для отмены, Ctrl+Shift+Z / ⌘+Shift+Z для повтора. Редактор хранит в памяти историю из 50 шагов.
Существует ли максимальный размер страницы?
Нет жестких ограничений на размер HTML. Загруженные изображения имеют ширину не более 1200 пикселей и конвертируются в WebP (максимум 5 МБ на загрузку).
Как восстановить предыдущую версию?
Нажмите «История» на верхней панели, чтобы просмотреть до 20 сохраненных версий. Нажмите «Восстановить» — перед восстановлением создается новый снимок, поэтому вы всегда можете отменить восстановление.
В чем разница между режимом страницы редактирования AI и режимом элемента?
В режиме «Вся страница» ИИ отправляет весь HTML-код целевой страницы вместе с вашими инструкциями и перезаписывает полный макет — результат сохраняется автоматически и создается снимок новой версии. В режиме элемента отправляется только HTML-код выбранного элемента, поэтому вы можете уточнить отдельный заголовок, абзац или кнопку, не затрагивая остальную часть страницы. Изменения в режиме элемента просматриваются в редакторе и сохраняются только при нажатии кнопки «Сохранить».
Что такое регенерация раздела и чем она отличается от AI Edit?
Регенерация раздела нацелена на определенный раздел страницы (например, блок героев или отзывов) и перезаписывает только этот раздел. AI Edit в режиме элемента работает с одним элементом HTML (например, с одним заголовком). Регенерация раздела лучше подходит для замены целых областей содержимого; Режим «Элемент» предназначен для точной настройки отдельных частей.
Потребляет ли AI Edit кредиты AI?
Да. Редактирование AI и регенерация разделов используют тот же пул кредитов, что и создание страниц. Редактирование в постраничном режиме стоит примерно 5–15 кредитов (только текст). Режим элемента и регенерация раздела обходятся дешевле, поскольку обрабатывается только фрагмент.
Сколько времени занимает редактирование AI?
AI Edit работает как фоновая задача. Результаты появляются в редакторе автоматически — обычно в течение 15–60 секунд для элементного режима и 30–90 секунд для полностраничного режима.

Связанный