> ## 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.

# Alternar entre Visual e Código

> Converta um modelo de código em blocos, edite o código de um modelo visual e veja o que acontece com seu trabalho quando você volta.

Todo modelo é, por baixo, Liquid e HTML. O editor **Visual** monta esse código para você a partir de blocos e estilos do documento; o editor **Código** mostra o próprio código. Você alterna entre eles com as abas **Visual** e **Código** no topo do editor. O Foliant nunca descarta código quando você alterna: tudo o que ele não consegue transformar em um bloco comum é mantido como um bloco de **Liquid personalizado**.

## Antes de começar

A aba **Visual** depende do seu plano. Se o seu plano não a inclui, a aba mostra o plano que a inclui, e o editor de código funciona normalmente. Veja [Disponibilidade do editor visual por plano](https://foliant-help.iforiti.com/pt-BR/template-editor/visual-editor-plans.md).

## Converter um modelo de código em blocos

1. Abra o modelo no editor. Ele abre em **Código**.
2. Clique na aba **Visual**. A caixa de diálogo **Converter para visual** é aberta.
3. Escolha como começar:

| Opção | O que acontece |
| - | - |
| **Começar com um layout de blocos** | Escolha um **Layout** (por exemplo, **Fatura**, **Nota de envio** ou **Formulário de devolução**) e clique em **Usar o layout de blocos**. Seu código atual é substituído por esse layout. Até você salvar, **Descartar** traz seu código de volta; depois de salvar, ele fica no histórico de versões. |
| **Manter meu código como um bloco de Liquid personalizado** | Clique em **Manter meu código**. Seu código é mantido, e você pode adicionar novos blocos ao redor dele. O Foliant transforma as seções que reconhece (como o cabeçalho, os endereços, a tabela de itens ou os totais) em blocos comuns quando elas imprimem os mesmos dados do pedido, e mantém todo o resto como blocos de Liquid personalizado, no mesmo lugar. |

4. Confira a página e salve.

Os layouts oferecidos dependem do modelo: um documento por pedido (Fatura, Nota de crédito, Orçamento, Nota de envio, Formulário de devolução, Fatura comercial, Pedido de compra, Documento geral do pedido, Etiqueta de envio, Recibo) ou um documento para todos os pedidos selecionados (Lista de separação, Resumo de pedidos). Um layout de um tipo de documento atribui esse tipo a um modelo sem tipo, então um layout de fatura é numerado como fatura.

## Ver ou editar o código de um modelo visual

1. Em um modelo visual, clique na aba **Código**. Você vê o **Liquid compilado**: o código que o Foliant gera a partir dos seus blocos e estilos do documento. Ele é somente leitura.
2. Para alterá-lo, clique em **Editar código**. A partir daí, o editor de código fica ativo e salvar salva o seu código.
3. Quando você salva, o Foliant lê os blocos de volta a partir do seu código, então o modelo continua visual.

Você também pode abrir o código compilado de um único bloco: selecione-o e clique em **Ver o Liquid compilado** na aba **Conteúdo** dele.

## Voltar para Visual depois de editar o código

Clique na aba **Visual**. O Foliant lê os blocos a partir do seu código:

* Os blocos cujo código você não alterou voltam como estavam.
* Se algum código não corresponder mais ao seu bloco, ou tiver sido escrito fora de qualquer bloco, a caixa de diálogo **Voltar para Visual?** lista essas partes em **Partes mantidas como Liquid personalizado**, com o motivo:
  * **Código editado**: o código do bloco mudou, então ele vira um bloco de Liquid personalizado.
  * **Escrito fora de qualquer bloco**: código novo que você adicionou entre blocos.
* Clique em **Mudar para Visual** para continuar ou em **Continuar no Liquid** para seguir editando o código.

Nada é removido, e você pode desfazer a mudança. Você precisa corrigir os erros de código antes de poder mudar.

## Substituir um modelo por um modelo inicial

**Substituir por um modelo inicial…** na barra superior substitui tudo no editor por um modelo inicial ou design. Os modelos iniciais são modelos de código, então um modelo visual vira um modelo de código. Nada muda até você salvar, e **Descartar** traz de volta o que você tinha.

## Bom saber

* Os blocos de Liquid personalizado podem ser movidos, estilizados e receber condições como qualquer outro bloco. O código deles é impresso exatamente como foi escrito.
* A conversão é feita por modelo e só acontece quando você escolhe.
* Os modelos criados a partir de um design comprado usam o editor de design e não podem ser alternados para Visual ou Código aqui.

## Artigos relacionados

* [Abrir o editor de modelos](https://foliant-help.iforiti.com/pt-BR/template-editor/editor-overview.md)
* [Editar o código de um modelo](https://foliant-help.iforiti.com/pt-BR/template-editor/code-editor.md)
* [Referência de blocos](https://foliant-help.iforiti.com/pt-BR/template-editor/block-catalogue.md)
* [Disponibilidade do editor visual por plano](https://foliant-help.iforiti.com/pt-BR/template-editor/visual-editor-plans.md)


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