Éditeur de modèles
Docs/Modèles de conception

S'orienter dans l'éditeur

Apprenez à connaître Structure, à modifier les onglets, les aperçus et les données de saisie afin de savoir par où commencer dans l'éditeur.

5 minutes de lecture5 rubriques
Sur cette page

L’ouverture d’un modèle rassemble sa structure, ses outils d’édition et son aperçu. Sélectionnez une pièce à modifier, puis regardez l’aperçu pour voir le résultat sans quitter l’éditeur.

Commencez dans Structure pour sélectionner ce que vous souhaitez modifier, utilisez les onglets à côté pour apporter des modifications, puis ouvrez Run pour générer un PDF. Les illustrations ci-dessous montrent chaque domaine dans son contexte.

1. Structure : choisissez ce que vous souhaitez modifier

Structure est à gauche. Il montre les pages et les sections qui composent le modèle. La sélection d’un élément ouvre ses options d’édition dans le panneau à côté de lui.

  • Global contient les paramètres partagés dans le modèle.
  • Page représente une page dans la mise en page, avec ses sections à l’intérieur.
  • Section est un bloc de contenu, tel que les détails du client ou un tableau de services.
  • En-tête/pied de page contient le contenu de l’en-tête ou du pied de page lorsque le modèle l’utilise.

Par exemple, sélectionnez Parties de facturation pour modifier les étiquettes dans la section des détails du client. Sélectionnez Global pour les paramètres partagés tels que les polices ou l’arrière-plan.

STRUCTURE+
⌄   Global 1/2
▤   Pied de page
⌄   01 page 3
▤   Titre
▤   Contenu 4p
▤  Résumé
Structure → sélectionnez une section pour ouvrir ses outils d'édition

2. HTML, CSS, Props et Config

Après avoir sélectionné un élément dans Structure, le panneau suivant affiche ses onglets disponibles :

  • HTML : le contenu et la structure de la section.
  • CSS : présentation, telle que les couleurs, la taille des polices et l’espacement.
  • Props : valeurs enregistrées avec le modèle, souvent des étiquettes, des couleurs ou du texte réutilisable.
  • Config : paramètres de l’élément sélectionné, tels que les marges, les arrière-plans ou les sauts de page.

Avec un modèle existant, ouvrez Props pour modifier une étiquette sans modifier HTML/CSS. L’illustration ci-dessous montre un accessoire heading sur la section sélectionnée ; son HTML lit la valeur via {{ props.heading }}.

Les onglets disponibles dépendent de votre sélection. Global a Props et Config, tandis qu’une section peut avoir HTML, CSS, Props et Config. Une variante qui hérite de la base peut offrir moins d’options d’édition.

HTMLCSSPropsConfig
SECTION · Contenu
rubriqueTexte
VALEURTitre du document{{ props.heading }}
Section → Props → valeur utilisée dans HTML

3. Implantation et PDF : voir le résultat

L’aperçu à côté du panneau d’édition comporte deux modes : Mise en page et PDF.

Mise en page vous aide à voir comment les sections s’emboîtent pendant que vous travaillez. PDF affiche le document sous forme de pages, ce qui est utile pour vérifier les marges, les en-têtes, les pieds de page et le contenu qui passe sur la page suivante.

Dans Mise en page, vous travaillez avec les pages et les sections du modèle. PDF affiche le résultat paginé, y compris les feuilles supplémentaires créées lorsque le contenu s’étend sur une page.

DispositionPDF
Page 1
Tembuilder1 / 2
Page 2
Tembuilder2 / 2
La mise en page montre la structure · PDF affiche les feuilles paginées

La mise en page reflète vos modifications actuelles. PDF restitue le contenu du modèle enregistré, alors enregistrez la conception et régénérez l’aperçu PDF après les modifications. Les paramètres d’aperçu proviennent des valeurs de l’éditeur, initialement Defaults ; les valeurs saisies dans Run s’appliquent uniquement aux tâches Run. Un aperçu PDF précédent ne s’actualise pas automatiquement.

4. Parameters : données pour chaque document

Parameters est à droite. Il affiche les données acceptées par le modèle, telles qu’un nom de client, un numéro de facture ou une liste de services.

Choisissez Schema pour inspecter les champs, les types et les valeurs par défaut. Choisissez Payload pour afficher les données sous la forme JSON. Les noms de champs doivent correspondre aux expressions utilisées dans le HTML du modèle.

Par exemple, un champ nommé recipient fournit l’expression {{ params.recipient }} pour votre HTML. Sa valeur par défaut réside dans Schema ; les données de chaque PDF sont saisies dans Run.

Voir Parameters et Props pour savoir lequel utiliser.

Parameters+ Ajouter
SchemaPayload
destinataireTexte
PAR DÉFAUTTembuilder{{ params.recipient }}
Parameters → Schema / Payload

5. Run et historique

Après avoir enregistré et publié le modèle, ouvrez Run pour choisir une clé, une version et une variante, et saisissez les données pour générer un PDF. Suivez Créez votre premier PDF lorsque vous souhaitez essayer ce flux de travail.

Lorsque vous examinez votre travail, utilisez l’historique du modèle pour les modifications de conception enregistrées et Renders pour les tâches PDF et leurs résultats. Cela vous aide à trouver soit la version de conception, soit le fichier généré dont vous avez besoin.

Mon modèle v1
EnregistrerPublier
COURIRϟ Run
VERSIONv1
VARIANTENorme
{ "recipient": "Tembuilder" }
RendersPDF · Terminé ↗
Enregistrer → Publier → Run · Renders conserve les résultats

Rechercher de la documentation