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

# Basculer entre Visuel et Code

> Convertissez un modèle en code en blocs, modifiez le code d’un modèle visuel et découvrez ce que devient votre travail quand vous revenez en arrière.

Chaque modèle repose sur du Liquid et du HTML. L’éditeur **Visuel** génère ce code pour vous à partir de blocs et de styles de document. L’éditeur **Code** affiche le code lui-même. Vous basculez avec les onglets **Visuel** et **Code** en haut de l’éditeur. Foliant ne supprime jamais de code quand vous basculez : tout ce qu’il ne peut pas transformer en bloc standard est conservé comme bloc **Liquid personnalisé**.

## Avant de commencer

L’onglet **Visuel** dépend de votre forfait. S’il n’est pas inclus, l’onglet indique le forfait qui le propose, et l’éditeur de code fonctionne normalement. Consultez [Disponibilité de l’éditeur visuel selon les forfaits](https://foliant-help.iforiti.com/fr/template-editor/visual-editor-plans.md).

## Convertir un modèle en code en blocs

1. Ouvrez le modèle dans l’éditeur. Il s’ouvre en mode **Code**.
2. Cliquez sur l’onglet **Visuel**. La boîte de dialogue **Convertir en visuel** s’ouvre.
3. Choisissez comment commencer :

| Option | Ce qui se passe |
| - | - |
| **Partir d’une mise en page en blocs** | Choisissez une **Mise en page** (par exemple **Facture**, **Bordereau d’expédition** ou **Formulaire de retour**) et cliquez sur **Utiliser la mise en page en blocs**. Votre code actuel est remplacé par cette mise en page. Tant que vous n’avez pas enregistré, **Annuler les modifications** restaure votre code. Après l’enregistrement, il reste dans l’historique des versions. |
| **Conserver mon code comme bloc Liquid personnalisé** | Cliquez sur **Conserver mon code**. Votre code est conservé, et vous pouvez ajouter de nouveaux blocs autour. Foliant transforme les sections qu’il reconnaît (comme l’en-tête, les adresses, le tableau des articles ou les totaux) en blocs standard lorsqu’elles impriment les mêmes informations de commande. Il conserve tout le reste comme blocs Liquid personnalisé, à leur place. |

4. Vérifiez la page, puis enregistrez.

Les mises en page proposées dépendent du modèle : un document par commande (Facture, Avoir, Devis, Bordereau d’expédition, Formulaire de retour, Facture commerciale, Bon de commande, Document de commande général, Étiquette d’expédition, Reçu) ou un document pour toutes les commandes sélectionnées (Liste de préparation, Récapitulatif des commandes). Une mise en page liée à un type de document attribue ce type à un modèle qui n’en a pas. Ainsi, une mise en page de facture est numérotée comme une facture.

## Afficher ou modifier le code d’un modèle visuel

1. Dans un modèle visuel, cliquez sur l’onglet **Code**. Vous voyez le **Liquid compilé** : le code que Foliant génère à partir de vos blocs et de vos styles de document. Il est en lecture seule.
2. Pour le modifier, cliquez sur **Modifier le code**. L’éditeur de code est alors actif et l’enregistrement enregistre votre code.
3. Lorsque vous enregistrez, Foliant relit les blocs à partir de votre code, et le modèle reste donc visuel.

Vous pouvez aussi ouvrir le code compilé d’un seul bloc : sélectionnez-le et cliquez sur **Voir le Liquid compilé** dans son onglet **Contenu**.

## Revenir au mode Visuel après avoir modifié le code

Cliquez sur l’onglet **Visuel**. Foliant lit les blocs à partir de votre code :

* Les blocs dont vous n’avez pas modifié le code reviennent tels quels.
* Si une partie du code ne correspond plus à son bloc, ou a été écrite en dehors de tout bloc, la boîte de dialogue **Revenir au mode Visuel ?** liste ces parties sous **Parties conservées en Liquid personnalisé**, avec la raison :
  * **Code modifié** : le code du bloc a changé, il devient donc un bloc Liquid personnalisé.
  * **Écrit en dehors de tout bloc** : du nouveau code que vous avez ajouté entre des blocs.
* Cliquez sur **Passer en mode Visuel** pour continuer, ou sur **Rester en Liquid** pour continuer à modifier le code.

Rien n’est supprimé, et vous pouvez annuler le changement. Vous devez corriger les éventuelles erreurs de code avant de pouvoir basculer.

## Remplacer un modèle par un modèle de départ

**Remplacer par un modèle de départ…** dans la barre supérieure remplace tout le contenu de l’éditeur par un modèle de départ ou un design. Les modèles de départ sont des modèles en code : un modèle visuel devient donc un modèle en code. Rien ne change tant que vous n’avez pas enregistré, et **Annuler les modifications** restaure ce que vous aviez.

## Bon à savoir

* Les blocs Liquid personnalisé peuvent être déplacés, mis en forme et soumis à des conditions comme tout autre bloc. Leur code s’imprime exactement tel qu’il est écrit.
* La conversion se fait modèle par modèle, et uniquement quand vous le choisissez.
* Les modèles créés à partir d’un design acheté utilisent l’éditeur de design et ne peuvent pas être basculés en Visuel ou en Code ici.

## Articles connexes

* [Ouvrir l’éditeur de modèles](https://foliant-help.iforiti.com/fr/template-editor/editor-overview.md)
* [Modifier le code d’un modèle](https://foliant-help.iforiti.com/fr/template-editor/code-editor.md)
* [Référence des blocs](https://foliant-help.iforiti.com/fr/template-editor/block-catalogue.md)
* [Disponibilité de l’éditeur visuel selon les forfaits](https://foliant-help.iforiti.com/fr/template-editor/visual-editor-plans.md)


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