Blocs disponibles

Le builder fournit des blocs que vous glissez sur le canevas pour construire votre modèle. Les blocs sont organisés en trois catégories : Layout pour les éléments structurels, Content pour le texte, les images et les données, et Extra pour les composants spécialisés.

Layout

Les blocs Layout définissent la structure de votre modèle. Ils servent de conteneurs pour accueillir d’autres blocs.

Page

Le bloc Page est l’élément racine de chaque modèle : il représente une page PDF. Lorsque vous créez un nouveau modèle, un bloc Page est ajouté automatiquement.

Paramètres principaux :

• Paper format (Format de papier) : A0, A1, A2, A3, A4, A5, A6, Letter et Custom.
• Orientation (portrait ou paysage).
• Background color (Couleur d’arrière-plan) : définissez un arrière-plan de page via le panneau Styles.
• Padding (Marges internes) : contrôlez l’espacement intérieur autour des bords de la page dans la section Spacing du panneau Styles.

La plupart des autres blocs peuvent être placés à l’intérieur d’une Page. Vous avez généralement un bloc Page par modèle, mais vous pouvez en ajouter pour des mises en page multi-pages.

Container

Un Container est un élément de regroupement flexible. Voyez-le comme une <div> qui maintient d’autres blocs ensemble. Par défaut, un Container empile ses enfants verticalement (flex column).

Paramètres principaux :

• Display (Affichage) : block ou flex. Flex permet des capacités de mise en page avancées comme la direction, l’alignement et le contrôle de l’espacement.
• Layout direction (Direction de disposition) : vertical (colonne), horizontal (rangée) ou grille. Configurez dans la section Layout du panneau Styles.
• Gap (Espacement) : espace entre les éléments enfants.
• Alignment (Alignement) : contrôlez comment les enfants sont positionnés dans le conteneur (début, centre, fin, étirer, espace entre).

Content

Les blocs Content affichent les informations réelles de votre modèle : texte, titres, images, HTML brut et tableaux.

Text

Le bloc Text contient du texte enrichi. Sélectionnez-le et cliquez sur Edit Text Content dans le panneau Settings pour ouvrir l’éditeur de texte enrichi.

Options de mise en forme :

• Gras, italique, soulignement, barré
• Listes à puces et listes numérotées
• Liens
• Taille de police, couleur et alignement (via le panneau Styles)

Les blocs Text n’acceptent pas de blocs enfants.

Heading

Le bloc Heading affiche un élément de titre (h1 à h6). Il fonctionne comme le bloc Text mais est stylé comme un titre par défaut.

Paramètres principaux :

• Heading level (Niveau de titre) : sélectionnez h1, h2, h3, h4, h5 ou h6 dans le panneau Settings.
• Edit Heading Content : ouvre le même éditeur de texte enrichi que le bloc Text.

Utilisez les niveaux de titre pour créer une hiérarchie visuelle dans votre document, pas uniquement pour la taille de police. Les lecteurs d’écran et les outils d’accessibilité s’appuient sur la structure des titres.

Image

Le bloc Image affiche une image dans votre modèle. Vous configurez sa source dans le panneau Settings.

Options de source :

• Static URL (URL statique) : collez un lien direct vers une image.
• Upload : sélectionnez un fichier depuis votre ordinateur. Il est converti en URI de données et intégré dans le modèle.
• Dynamic binding (Liaison dynamique) : liez la source à un champ de vos données de test (par exemple, user.avatar) afin que chaque document généré puisse afficher une image différente.

Pour plus de détails, consultez Images.

HTML

Le bloc HTML vous permet d’insérer du contenu HTML brut à l’aide d’un éditeur de code. C’est utile lorsque vous avez besoin de balisage que les blocs visuels ne peuvent pas produire, comme des SVG personnalisés ou des mises en page de tableaux complexes.

Cliquez sur Edit HTML Content dans le panneau Settings pour ouvrir l’éditeur de code et écrire votre balisage.

Mise en forme

Les blocs HTML contournent le système de styles visuels du builder. Le contenu d’un bloc HTML doit être stylé directement avec des styles en ligne, du CSS personnalisé ou des classes utilitaires Tailwind — Tailwind est chargé globalement et disponible dans l’ensemble du template, y compris dans les blocs HTML.

Table

Le bloc Table crée un tableau de données avec une structure auto-générée. Lorsque vous en ajoutez un, le builder crée toute la hiérarchie : thead, tbody, rangées, cellules d’en-tête et cellules de données, pour que vous commenciez avec un tableau prêt à l’emploi. Gérez les rangées et colonnes dans le panneau Settings, stylisez les cellules individuelles dans le panneau Styles, et utilisez le paramètre de répétition pour générer des rangées dynamiquement à partir de vos données.

Pour plus de détails, consultez Tableaux.

Extra

La catégorie Extra contient des blocs spécialisés pour des cas d’utilisation spécifiques.

QR Code

Le bloc QR Code génère une image de QR code directement dans votre modèle.

Paramètres principaux :

• Content (Contenu) : les données encodées dans le QR code. Peut être une valeur statique (comme une URL) ou liée à une variable de données.
• Size (Taille) : la largeur et la hauteur du QR code en pixels.
• Foreground/background colors (Couleurs premier plan/arrière-plan) : personnalisez les couleurs des points du QR code et de l’arrière-plan.
• Reliability level (Niveau de fiabilité) : niveau de correction d’erreur (L, M, Q ou H). Les niveaux supérieurs rendent le QR code plus résistant aux dommages mais augmentent sa densité.
• Dot style (Style de point) : square, dots, rounded, extra-rounded, classy ou classy-rounded.
• Corner style (Style de coin) : square, dot ou extra-rounded.
• Logo : une image optionnelle placée au centre du QR code. Peut être une URL statique ou une valeur liée aux données.

Pour plus de détails, consultez QR Codes.

Paramètres communs à tous les blocs

Chaque bloc partage quelques paramètres disponibles dans le panneau Settings :

• Élément info : affiche le type de bloc et la balise HTML qu’il utilise pour le rendu.
• Panneau Logic : configurez l’affichage conditionnel ou la répétition pour n’importe quel bloc sauf l’élément Document racine. Consultez Conditions et boucles pour plus de détails.

Le panneau Styles est également disponible pour chaque bloc, vous donnant le contrôle sur la disposition, les espacements, la typographie, les bordures, les arrière-plans et le positionnement. Pour des techniques de style avancées, consultez CSS personnalisée et Styles situationnels.

Prochaines étapes

• Suivez le tutoriel Votre premier modèle pour construire un modèle complet à partir de zéro.
• Découvrez les Conditions et boucles pour rendre vos modèles dynamiques.
• Explorez la CSS personnalisée et le JS personnalisé pour une personnalisation avancée.

Questions fréquentes

Quels types de blocs sont disponibles dans le builder visuel PDFMonkey ?

Le builder propose des blocs répartis en trois catégories : Layout (Page et Container), Content (Text, Heading, Image, HTML et Table) et Extra (QR Code). Chaque bloc peut être glissé sur le canevas et configuré via les panneaux Settings et Styles.

Qu'est-ce qu'un bloc Container dans PDFMonkey ?

Un Container est un élément de regroupement flexible qui contient d’autres blocs. Il prend en charge l’affichage block ou flex, les directions de disposition verticale/horizontale/grille, l’espacement (gap) et les contrôles d’alignement. Utilisez les Containers pour regrouper du contenu lié et appliquer une logique comme la visibilité conditionnelle ou la répétition.

Peut-on écrire du HTML brut dans un modèle builder PDFMonkey ?

Oui. Le bloc HTML vous permet d’insérer du HTML brut via un éditeur de code. C’est utile pour les SVG personnalisés, les mises en page complexes ou le balisage que les blocs visuels ne peuvent pas produire. Stylisez le contenu avec des styles en ligne, la CSS personnalisée ou les classes utilitaires Tailwind.