> ## Documentation Index
> Fetch the complete documentation index at: https://foliant-help.iforiti.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Переключение между визуальным режимом и кодом

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

В основе любого шаблона лежат Liquid и HTML. Редактор **Визуальный** создает этот код за вас из блоков и стилей документа, а редактор **Код** показывает сам код. Переключайтесь с помощью вкладок **Визуальный** и **Код** вверху редактора. При переключении Foliant никогда не удаляет код: все, что нельзя превратить в обычный блок, сохраняется как блок **Свой Liquid**.

## Перед началом

Доступность вкладки **Визуальный** зависит от вашего плана. Если она недоступна, на вкладке указан план, в который она входит, а редактор кода работает как обычно. См. [Доступность визуального редактора в планах](https://foliant-help.iforiti.com/ru/template-editor/visual-editor-plans.md).

## Преобразование шаблона из кода в блоки

1. Откройте шаблон в редакторе. Он откроется в режиме **Код**.
2. Нажмите вкладку **Визуальный**. Откроется диалог **Преобразовать в визуальный**.
3. Выберите, с чего начать:

| Вариант | Что происходит |
| - | - |
| **Начать с готового макета из блоков** | Выберите **Макет** (например, **Счёт**, **Упаковочный лист** или **Форма возврата**) и нажмите **Использовать макет из блоков**. Ваш текущий код будет заменен этим макетом. До сохранения кнопка **Отменить** вернет ваш код; после сохранения он останется в истории версий. |
| **Сохранить мой код как блок «Свой Liquid»** | Нажмите **Сохранить мой код**. Ваш код сохранится, и вы сможете добавлять вокруг него новые блоки. Распознанные разделы (например, шапку, адреса, таблицу товаров или итоги) Foliant превратит в обычные блоки, если они выводят те же данные заказа, а все остальное оставит на своих местах как блоки «Свой Liquid». |

4. Проверьте страницу и сохраните.

Набор макетов зависит от шаблона: один документ на заказ (счёт, кредит-нота, коммерческое предложение, упаковочный лист, форма возврата, коммерческий инвойс, заказ на покупку, общий документ заказа, транспортная этикетка, чек) или один документ на все выбранные заказы (лист комплектации, сводка заказов). Если у шаблона нет типа документа, макет задает ему свой тип: например, шаблон с макетом счёта нумеруется как счёт.

## Просмотр и изменение кода визуального шаблона

1. В визуальном шаблоне нажмите вкладку **Код**. Вы увидите **Скомпилированный Liquid** — код, который Foliant создает из ваших блоков и стилей документа. Он доступен только для чтения.
2. Чтобы изменить его, нажмите **Изменить код**. С этого момента активен редактор кода, и при сохранении сохраняется ваш код.
3. При сохранении Foliant заново считывает блоки из вашего кода, поэтому шаблон остается визуальным.

Можно также открыть скомпилированный код отдельного блока: выберите блок и нажмите **Посмотреть скомпилированный Liquid** на его вкладке **Содержимое**.

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

Нажмите вкладку **Визуальный**. Foliant считает блоки из вашего кода:

* Блоки, код которых вы не меняли, вернутся в прежнем виде.
* Если какой-то код больше не соответствует своему блоку или написан вне блоков, в диалоге **Вернуться в визуальный режим?** эти части будут перечислены в разделе **Части, сохраненные как «Свой Liquid»** с указанием причины:
  * **Код изменен**: код блока изменился, поэтому он становится блоком «Свой Liquid».
  * **Написано вне блоков**: новый код, который вы добавили между блоками.
* Нажмите **Перейти в визуальный режим**, чтобы продолжить, или **Остаться в Liquid**, чтобы продолжить редактировать код.

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

## Замена шаблона стартовым

Кнопка **Заменить стартовым шаблоном…** на верхней панели заменяет все содержимое редактора стартовым шаблоном или дизайном. Стартовые шаблоны написаны кодом, поэтому визуальный шаблон станет шаблоном в коде. До сохранения ничего не меняется, а кнопка **Отменить** вернет прежнее содержимое.

## Полезно знать

* Блоки «Свой Liquid» можно перемещать, оформлять и задавать для них условия, как для любых других блоков. Их код выводится в точности так, как написан.
* Преобразование выполняется для каждого шаблона отдельно и только по вашему выбору.
* Шаблоны, созданные из купленного дизайна, используют редактор дизайна, и здесь их нельзя переключить в режим **Визуальный** или **Код**.

## Похожие статьи

* [Открытие редактора шаблонов](https://foliant-help.iforiti.com/ru/template-editor/editor-overview.md)
* [Изменение кода шаблона](https://foliant-help.iforiti.com/ru/template-editor/code-editor.md)
* [Справочник блоков](https://foliant-help.iforiti.com/ru/template-editor/block-catalogue.md)
* [Доступность визуального редактора в планах](https://foliant-help.iforiti.com/ru/template-editor/visual-editor-plans.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.