Раздел Редактор приложений

Что это за раздел

Редактор приложений - это рабочий экран, в котором компания настраивает приложение прямо на живом предпросмотре.

Если говорить совсем просто, это один из самых важных инструментов CMS, потому что он объединяет в одном месте:

• выбор приложения
• живой предпросмотр в формате телефона
• глобальную настройку внешнего вида
• редактирование страниц
• редактирование компонентов
• настройку настраиваемых свойств компонентов

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

Через Редактор приложений удобно:

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

Связанные документы по этому разделу:

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

Релевантные разделы

• Приложения - если нужно проверить базовые параметры приложения.
• Страницы - если нужно понять структуру экранов вне предпросмотра.
• Компоненты - если нужно открыть карточку блока отдельно.
• Конструктор приложений - если приложение еще не создано и в редакторе пока нечего открывать.
• Клиентский опыт в приложении - если через редактор вы проверяете витрину глазами покупателя.

Как пользоваться комплектом документов

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

Если нужен быстрый ответ на типовой вопрос, открывайте:

• FAQ

Если нужен готовый маршрут в формате что делать шаг за шагом, открывайте:

• Пошаговые сценарии работы

Если редактор ведет себя не так, как ожидается, предпросмотр не обновляется или действия на экране не работают, открывайте:

• Проблемы и решения

Раздел Редактор приложений тесно связан:

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

Как этот раздел связан с клиентским приложением

Для владельца компании и менеджера здесь важно понимать простую связь:

1. В редакторе открывается уже существующее приложение компании.
2. Справа показывается его живой экран в формате телефона.
3. Слева сотрудник меняет параметры приложения или конкретного компонента.
4. Предпросмотр сразу показывает, как это выглядит для клиента.
5. После сохранения изменения становятся частью приложения.

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

Кто работает с разделом

Владелец компании

Обычно использует раздел для:

• быстрой проверки готовности витрины
• контроля итогового внешнего вида
• согласования главной страницы и ключевых экранов
• проверки того, как выглядит приложение в реальном клиентском виде

Менеджер

Обычно:

• открывает нужное приложение в редакторе
• проверяет маршрут клиента по страницам
• настраивает глобальный внешний вид
• добавляет и переставляет компоненты
• открывает детальное редактирование страниц и компонентов

Контент-менеджер

Обычно:

• редактирует содержимое компонентов
• проверяет баннеры, тексты, меню и контентные страницы
• настраивает внешний вид отдельных блоков
• быстро проверяет результат прямо на живом экране

Что важно понять до начала работы

До начала работы с Редактором приложений полезно зафиксировать несколько правил.

Это не отдельная копия приложения

Редактор работает не с отвлеченным макетом, а с реальным приложением компании.

Поэтому все действия здесь нужно воспринимать как работу с настоящей клиентской витриной.

У глобальных изменений и изменений компонентов разная логика сохранения

Это очень важно.

В редакторе есть два разных сценария:

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

Обычный режим и режим редактирования - это два разных способа работы

Когда Режим редактирования выключен:

• предпросмотр ведет себя как обычное приложение
• по нему можно переходить и смотреть реальные экраны

Когда Режим редактирования включен:

• на слотах и компонентах появляются служебные рамки и кнопки
• содержимое перестает быть обычной кликабельной клиентской поверхностью
• экран превращается в рабочее поле для редактирования

Не все действия в редакторе меняют базу сразу

Например:

• закрытие панели глобальной настройки не отменяет уже внесенные, но еще не примененные изменения
• закрытие панели редактирования компонента без сохранения отменяет несохраненные изменения этого компонента

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

1. Где находится раздел и когда его открывать

Обычно путь такой:

Управление -> CMS -> Редактор приложений

Этот раздел чаще всего открывают в нескольких сценариях.

Когда нужно быстро проверить приложение целиком

Например:

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

Когда нужно изменить общий стиль приложения

Например:

• поменять палитру
• сменить шрифты
• сделать интерфейс крупнее или компактнее
• изменить скругления и отступы

Когда нужно править конкретный экран или блок

Например:

• поправить баннер
• заменить текст
• изменить внешний вид поиска
• переставить блоки местами
• удалить лишний компонент

Когда нужно быстро показать результат владельцу компании

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

2. Как устроен экран редактора

Экран редактора делится на две основные части.

Левая часть

Это Панель управления.

Здесь находятся:

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

Правая часть

Это Live Preview, то есть живой предпросмотр.

Здесь показываются:

• текущая страница приложения
• кнопка перехода к странице
• телефонный макет
• экран самого приложения внутри него

3. Выбор приложения

Верхняя часть левой панели начинается с выбора приложения.

Поле называется Приложение.

Пока приложение не выбрано:

• в панели показывается пояснение, что нужно выбрать mini-app
• кнопки глобальной настройки недоступны
• режим редактирования выключен и недоступен
• справа вместо живого экрана показывается заглушка

После выбора приложения:

• редактор загружает полную карточку приложения
• справа появляется живой предпросмотр
• становятся доступны кнопки настройки
• можно включать режим редактирования

4. Заглушка предпросмотра до выбора приложения

Если приложение еще не выбрано, справа показывается пустой экран с сообщением:

• Предпросмотр недоступен
• Для начала выберите приложение

Это нормальное состояние редактора до начала работы.

5. Переключатель Режим редактирования

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

Это одна из самых важных точек всего экрана.

Когда режим выключен

Когда переключатель выключен:

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

Этот режим удобен для:

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

Когда режим включен

Когда переключатель включен:

• вокруг слотов появляются служебные рамки
• у слотов появляются элементы управления
• при наведении на компоненты появляются служебные кнопки
• обычные нажатия по содержимому экрана больше не являются главным сценарием

Этот режим удобен для:

• добавления компонентов
• редактирования компонентов
• удаления и перестановки блоков
• точной работы со структурой экрана

6. Блок Готовые наборы параметров

Ниже находится блок Готовые наборы параметров.

В нем четыре кнопки:

• Цвета
• Шрифты
• Размеры
• Скругления

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

Как это работает

1. Сотрудник нажимает нужную кнопку.
2. Открывается окно выбора готового набора.
3. Выбирается подходящий вариант.
4. Результат сразу применяется к предпросмотру.
5. После этого изменения можно либо оставить, либо отдельно сохранить кнопкой Применить изменения.

Когда использовать готовые наборы

Обычно этот блок полезен, если:

• нужно быстро примерить другой стиль
• нужно найти удачную стартовую основу
• не хочется вручную менять десятки параметров

7. Блок Глобальная конфигурация приложения

Ниже блока готовых наборов находится блок Глобальная конфигурация приложения.

Это основной набор ручных глобальных панелей настройки.

Здесь доступны кнопки:

• Цветовая палитра
• Отступы
• Скругление углов
• Толщина шрифта
• Межсимвольные интервалы
• Размеры шрифта
• Межстрочные интервалы
• Семейства шрифтов

Каждая кнопка открывает поверх левой панели отдельную рабочую панель настройки.

8. Кнопка Применить изменения

Под глобальными кнопками находится зеленая кнопка Применить изменения.

Ее смысл очень важен:

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

Когда кнопка активна

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

Что важно помнить

Если вы просто открыли панель, поменяли значения и закрыли ее:

• изменения могут остаться в текущем сеансе редактора
• но без нажатия Применить изменения их не стоит считать окончательно сохраненными

9. Как устроена выезжающая панель настройки слева

Когда открывается любая глобальная панель или редактор компонента, поверх левой части появляется отдельная рабочая панель.

У нее есть:

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

Кнопка отмены изменений

Она показывается не всегда.

Обычно она доступна:

• при глобальной настройке приложения
• при настройке настраиваемых свойств компонента

И обычно недоступна:

• при открытии полного редактора данных компонента

Кнопка закрытия

Закрывает текущую рабочую панель.

При этом важно понимать, что разные типы редактирования ведут себя по-разному:

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

10. Панель Цветовая палитра

Панель Цветовая палитра нужна для настройки цветовых переменных приложения.

В ней видно:

• список цветовых переменных
• отдельное поле для светлой темы
• отдельное поле для темной темы

Проще говоря, одна и та же цветовая роль может быть настроена отдельно:

• для светлого варианта
• для темного варианта

Это особенно важно для:

• контраста
• читабельности
• правильного вида кнопок, текста и фонов

Что делает сотрудник в этой панели

Обычно:

1. Находит нужную строку цвета.
2. Меняет значение в колонке Light.
3. При необходимости меняет значение в колонке Dark.
4. Сразу смотрит, как меняется экран.

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

11. Панель Отступы

Панель Отступы задает системные расстояния внутри интерфейса.

Именно через нее меняется ощущение плотности или свободы приложения.

Эта панель влияет на:

• внутренние интервалы
• внешние промежутки
• визуальную “воздушность” интерфейса

Если сделать значения меньше:

• приложение станет компактнее

Если сделать значения больше:

• интерфейс станет свободнее и мягче

12. Панель Скругление углов

Панель Скругление углов меняет системные радиусы элементов.

Она влияет на:

• кнопки
• карточки
• контейнеры
• поля ввода

Через нее приложение можно сделать:

• более строгим
• более мягким
• более современным
• более дружелюбным

13. Панель Толщина шрифта

Эта панель управляет системной толщиной текста.

Она полезна, если:

• интерфейс выглядит слишком тонким
• заголовки недостаточно выразительны
• нужно сделать текст чуть легче или плотнее

14. Панель Межсимвольные интервалы

Эта панель задает расстояние между буквами.

Она влияет на восприятие:

• заголовков
• коротких акцентных подписей
• интерфейсных элементов

Обычно ее меняют осторожно, потому что слишком сильное изменение быстро меняет характер интерфейса.

15. Панель Размеры шрифта

Эта панель управляет системными размерами текста.

Именно через нее можно сделать приложение:

• более компактным
• более крупным
• более удобным для чтения

Она особенно важна, если компания хочет привести к единому виду:

• заголовки
• подписи
• основной текст
• мелкие служебные элементы

16. Панель Межстрочные интервалы

Эта панель влияет на расстояние между строками текста.

Она помогает:

• сделать текст более читаемым
• убрать ощущение тесноты
• сделать блоки текста спокойнее

Особенно заметно это на:

• длинных текстах
• описаниях
• информационных страницах

17. Панель Семейства шрифтов

Эта панель задает наборы шрифтов для разных ролей интерфейса.

Внутри обычно настраиваются такие группы:

• primary
• secondary
• accent
• code
• display

Если говорить проще, это разные шрифтовые роли внутри приложения.

Эта панель полезна, если нужно:

• выстроить более выразительную типографику
• привести тексты к фирменному стилю
• отделить акцентный текст от обычного

18. Правая часть: Live Preview

Правая часть редактора называется Live Preview.

Это живой экран приложения внутри телефонного макета.

Он нужен не для красоты, а для постоянной проверки результата.

Верхняя часть предпросмотра содержит:

• подпись Live Preview
• название текущей страницы
• кнопку с иконкой карандаша

Название текущей страницы

Редактор показывает, какой экран сейчас открыт внутри приложения.

Это удобно, когда сотрудник уже перешел на нужную страницу внутри предпросмотра и хочет понимать, что именно он сейчас редактирует.

Кнопка с карандашом у страницы

Эта кнопка открывает переход к самой странице в разделе Страницы.

Перед переходом редактор предупреждает, что несохраненные данные могут быть потеряны.

Это полезно, если:

• нужен полный редактор страницы
• нужно работать уже не только с живым экраном, но и с карточкой страницы

19. Как работает предпросмотр в обычном режиме

Когда Режим редактирования выключен, предпросмотр ведет себя как обычное приложение.

Это значит, что сотрудник может:

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

Этот режим особенно полезен для:

• проверки логики переходов
• проверки внешнего вида без служебных рамок
• демонстрации владельцу компании

20. Как работает предпросмотр в режиме редактирования

Когда Режим редактирования включен, экран превращается в рабочую поверхность редактора.

На нем появляются:

• рамки слотов
• название слота
• кнопка добавления компонента
• рамки компонентов
• служебная панель действий у компонента при наведении

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

21. Слоты в режиме редактирования

Каждый слот получает служебную рамку.

Как слот выглядит

Обычно у слота есть:

• пунктирная рамка
• название слота
• кнопка +

Когда сотрудник просто смотрит на слот:

• рамка выглядит спокойнее

Когда наводит курсор:

• рамка становится заметнее
• служебные элементы выделяются сильнее

Что показывает подпись слота

Подпись помогает понять, какая зона страницы перед вами.

Например, это может быть:

• контентная зона
• нижняя навигация
• зона логотипа
• служебный слот интерфейса

Что делает кнопка +

Кнопка + запускает сценарий добавления компонента в этот слот.

22. Как добавляется компонент в слот

При нажатии на кнопку + происходит такой сценарий:

1. Открывается выбор компонента.
2. Сотрудник выбирает нужный компонент из каталога.
3. Появляется подтверждение добавления.
4. После подтверждения компонент добавляется в начало слота.
5. Страница в предпросмотре перезагружается и показывает новый результат.

Это важно помнить:

• компонент добавляется именно в выбранный слот
• компонент добавляется в начало слота
• после этого его при необходимости можно переставить выше или ниже другими кнопками

23. Компоненты в режиме редактирования

Когда режим редактирования включен и курсор наводится на компонент, вокруг него появляется служебная рамка и верхняя панель действий.

Что показывает служебная панель компонента

В ней обычно есть:

• название компонента
• кнопка редактирования данных
• кнопка редактирования внешнего вида
• кнопка удаления из слота
• кнопка перемещения вверх
• кнопка перемещения вниз

Если компонент очень маленький или узкий, редактор может упростить отображение:

• имя компонента скрывается
• остаются только иконки действий

Это сделано для того, чтобы панель не ломала маленькие блоки на экране.

24. Кнопка редактирования данных компонента

Кнопка с иконкой редактирования открывает полный редактор данных компонента.

Это сценарий, когда нужно менять:

• текст
• заголовок
• содержимое баннера
• набор слайдов
• товары
• настройки самого компонента

После нажатия слева открывается большая панель редактирования компонента.

Что видно в верхней части этой панели

Верхняя часть обычно содержит поля:

• ID
• Тип
• Код
• Наименование
• Приоритет
• переключатель Активирован

Что идет ниже

Ниже показывается основной блок Настройки компонента.

Он уже зависит от типа компонента.

Например:

• у текста будет текстовый редактор
• у галереи будут слайды
• у меню будут пункты меню
• у формы заявки будут поля этой формы

Что важно в этом режиме

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

Если закрыть панель без сохранения, временные изменения обычно не должны считаться сохраненными.

25. Кнопка редактирования внешнего вида компонента

Кнопка с иконкой палитры открывает не полный редактор данных, а редактор настраиваемых свойств компонента.

Если говорить просто, это быстрый способ настроить внешний вид конкретного блока.

В этой панели сотрудник работает не с содержимым, а с такими параметрами, как:

• внутренние отступы
• внешние отступы
• цвета
• размеры
• радиусы
• шрифтовые значения
• другие настраиваемые свойства, если они есть у данного типа компонента

26. Как устроен редактор настраиваемых свойств компонента

В панели настраиваемых свойств каждая строка обычно содержит:

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

Описания свойств написаны простым языком: они объясняют, что изменится на экране покупателя, а не требуют знания CSS или внутренней реализации.

Что делает поле значения

Позволяет вручную ввести конкретное значение свойства.

Что делает иконка справки

Открывает короткую подсказку по конкретному типу значения.

В подсказке можно увидеть:

• примеры заполнения
• какие единицы измерения подходят
• когда лучше оставить системное значение

Например, для размеров подсказка объясняет, что можно использовать px, rem, проценты, значения высоты экрана или переменные темы. Для цветов - переменные палитры, конкретный цвет или transparent.

Что делает кнопка выбора значения

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

Через нее можно подставить системное значение из уже настроенных наборов:

• цветов
• отступов
• скруглений
• размеров
• межстрочных интервалов
• шрифтовых семейств

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

Что делает кнопка Сохранить

Окончательно записывает настраиваемые свойства компонента.

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

Если для данного типа не описаны настраиваемые свойства, редактор так и сообщает, что для этого типа они не описаны.

27. Кнопка удаления компонента

Кнопка с иконкой удаления не удаляет компонент из системы полностью.

Ее смысл другой:

• убрать компонент именно из текущего слота

После нажатия редактор просит подтверждение и предупреждает, что сам компонент останется в базе.

Это полезно, если:

• блок больше не нужен на данной странице
• компонент должен сохраниться для использования в другом месте

28. Кнопки перемещения вверх и вниз

У компонента есть две кнопки перемещения:

• вверх
• вниз

Они меняют порядок компонента внутри текущего слота.

Это особенно полезно, если нужно:

• поднять баннер выше
• поменять местами два блока
• быстро перестроить порядок контента без перехода в другие разделы

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

29. Что происходит при переходе к странице из предпросмотра

Если нажать кнопку с карандашом рядом с названием текущей страницы в верхней части Live Preview, редактор спрашивает подтверждение.

Причина простая:

• несохраненные данные могут быть потеряны

Если сотрудник подтверждает переход, редактор открывает карточку страницы в разделе Страницы.

Это полезно, когда:

• нужно изменить саму страницу, а не только содержимое в живом экране
• нужно работать со слотами и структурой страницы на более детальном уровне

30. Что сохраняется сразу, а что нет

Это один из самых важных практических вопросов в Редакторе приложений.

Глобальные настройки приложения

Когда сотрудник меняет:

• палитру
• отступы
• размеры
• шрифты
• скругления

предпросмотр уже показывает результат.

Но для окончательной записи этих изменений нужно нажать:

• Применить изменения

Редактирование данных компонента

Когда сотрудник меняет данные компонента:

• предпросмотр может сразу показать изменения
• окончательное сохранение выполняется кнопкой Сохранить внутри панели компонента

Редактирование внешнего вида компонента

Когда сотрудник меняет настраиваемые свойства компонента:

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

Закрытие без сохранения

Важно различать:

• глобальные изменения после закрытия панели могут остаться в текущем рабочем состоянии редактора до отдельного применения или сброса
• несохраненные изменения конкретного компонента при закрытии панели обычно не стоит считать сохраненными

31. Практический порядок работы в редакторе

Самый удобный рабочий порядок обычно такой:

1. Открыть Редактор приложений.
2. Выбрать нужное приложение.
3. Посмотреть его в обычном режиме.
4. Пройти ключевые страницы глазами клиента.
5. Включить Режим редактирования.
6. Найти нужный слот или компонент.
7. Если нужно изменить общий стиль, открыть глобальную панель.
8. Если нужно изменить содержимое блока, открыть редактор данных компонента.
9. Если нужно изменить внешний вид блока, открыть редактор его настраиваемых свойств.
10. Сохранить изменения.
11. Еще раз пройти экран в обычном режиме и убедиться, что результат действительно устраивает.

32. Практические рекомендации

Сначала смотрите экран в обычном режиме

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

Включайте режим редактирования только когда нужен структурный монтаж

Так проще не запутаться между клиентским сценарием и служебным режимом редактирования.

Не смешивайте сразу слишком много изменений

Лучше:

• сначала поправить глобальный стиль
• затем отдельно пройтись по ключевым компонентам
• затем еще раз проверить экран целиком

После глобальных изменений не забывайте нажимать Применить изменения

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

После редактирования компонента всегда проверяйте экран целиком

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

Используйте редактор как основной визуальный инструмент контроля

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