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

# Cambiar entre Visual y Código

> Convierte una plantilla de código en bloques, edita el código de una plantilla visual y descubre qué pasa con tu trabajo al volver atrás.

Por debajo, toda plantilla es Liquid y HTML. El editor **Visual** genera ese código por ti a partir de bloques y estilos del documento; el editor **Código** muestra el código en sí. Para cambiar, usa las pestañas **Visual** y **Código** de la parte superior del editor. Foliant nunca descarta código al cambiar: todo lo que no puede convertir en un bloque normal se conserva como bloque de **Liquid personalizado**.

## Antes de empezar

La pestaña **Visual** depende de tu plan. Si tu plan no la incluye, la pestaña muestra el plan que la incluye y el editor de código funciona como siempre. Consulta [Disponibilidad del editor visual según el plan](https://foliant-help.iforiti.com/es/template-editor/visual-editor-plans.md).

## Convertir una plantilla de código en bloques

1. Abre la plantilla en el editor. Se abre en **Código**.
2. Haz clic en la pestaña **Visual**. Se abre el cuadro de diálogo **Convertir a visual**.
3. Elige cómo empezar:

| Opción | Qué pasa |
| - | - |
| **Empezar con un diseño de bloques** | Elige un **Diseño** (por ejemplo, **Factura**, **Albarán** o **Formulario de devoluciones**) y haz clic en **Usar el diseño de bloques**. Ese diseño reemplaza tu código actual. Hasta que guardes, **Descartar** recupera tu código; después de guardar, queda en el historial de versiones. |
| **Conservar mi código como bloque de Liquid personalizado** | Haz clic en **Conservar mi código**. Tu código se conserva y puedes añadir bloques nuevos a su alrededor. Foliant convierte en bloques normales las secciones que reconoce (como el encabezado, las direcciones, la tabla de artículos o los totales) cuando imprimen los mismos datos del pedido, y conserva todo lo demás como bloques de Liquid personalizado, en su sitio. |

4. Revisa la página y guarda.

Los diseños disponibles dependen de la plantilla: un documento por pedido (Factura, Nota de crédito, Presupuesto, Albarán, Formulario de devoluciones, Factura comercial, Orden de compra, Documento general del pedido, Etiqueta de envío, Recibo) o un documento para todos los pedidos seleccionados (Lista de preparación, Resumen de pedidos). Un diseño de un tipo de documento asigna ese tipo a una plantilla que no tiene tipo, así que un diseño de factura se numera como una factura.

## Ver o editar el código de una plantilla visual

1. En una plantilla visual, haz clic en la pestaña **Código**. Verás el **Liquid compilado**: el código que Foliant genera a partir de tus bloques y estilos del documento. Es de solo lectura.
2. Para modificarlo, haz clic en **Editar código**. A partir de ese momento, el editor de código está activo y al guardar se guarda tu código.
3. Al guardar, Foliant vuelve a leer los bloques a partir de tu código, así que la plantilla sigue siendo visual.

También puedes abrir el código compilado de un solo bloque: selecciónalo y haz clic en **Ver el Liquid compilado** en su pestaña **Contenido**.

## Volver a Visual después de editar el código

Haz clic en la pestaña **Visual**. Foliant lee los bloques a partir de tu código:

* Los bloques cuyo código no cambiaste vuelven tal como estaban.
* Si parte del código ya no coincide con su bloque, o se escribió fuera de cualquier bloque, el cuadro de diálogo **¿Volver a Visual?** muestra esas partes en **Partes conservadas como Liquid personalizado**, con el motivo:
  * **Código editado**: el código del bloque cambió, así que se convierte en un bloque de Liquid personalizado.
  * **Escrito fuera de cualquier bloque**: código nuevo que añadiste entre bloques.
* Haz clic en **Cambiar a Visual** para continuar o en **Seguir en Liquid** para seguir editando el código.

No se elimina nada y puedes deshacer el cambio. Tienes que corregir los errores del código antes de poder cambiar.

## Reemplazar una plantilla con una plantilla inicial

**Reemplazar con una plantilla inicial…**, en la barra superior, reemplaza todo el contenido del editor por una plantilla inicial o un diseño. Las plantillas iniciales son plantillas de código, así que una plantilla visual pasa a ser una plantilla de código. No cambia nada hasta que guardes, y **Descartar** recupera lo que tenías.

## Conviene saber

* Los bloques de Liquid personalizado se pueden mover, darles estilo y ponerles condiciones como cualquier otro bloque. Su código se imprime exactamente como está escrito.
* La conversión se hace por plantilla y solo cuando tú lo eliges.
* Las plantillas creadas a partir de un diseño comprado usan el editor de diseños y aquí no se pueden cambiar a Visual ni a Código.

## Artículos relacionados

* [Abrir el editor de plantillas](https://foliant-help.iforiti.com/es/template-editor/editor-overview.md)
* [Editar el código de una plantilla](https://foliant-help.iforiti.com/es/template-editor/code-editor.md)
* [Referencia de bloques](https://foliant-help.iforiti.com/es/template-editor/block-catalogue.md)
* [Disponibilidad del editor visual según el plan](https://foliant-help.iforiti.com/es/template-editor/visual-editor-plans.md)


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