Studio de design : créez des modèles d'attestation numérique personnalisés

Temps de lecture : 10 minutes

Aperçu

Le Studio de design est l'éditeur visuel d'attestations numériques de CertLister. Concevez une attestation numérique entièrement personnalisée en plaçant des textes, des jetons d'attributs, des éléments décoratifs et des images sur un arrière-plan professionnel — puis générez des PDF de qualité d'impression pour une attestation ou en lot.

Ce que vous pouvez faire :

• Choisir parmi 10 modèles d'arrière-plan JPG professionnels
• Téléverser votre propre image d'arrière-plan JPG ou PNG comme canevas d'attestation (Pro)
• Ajouter et positionner du texte, des étiquettes et des jetons de données dynamiques
• Insérer des éléments SVG décoratifs, des icônes, des rubans et des séparateurs
• Téléverser vos propres images — logos, signatures, sceaux (Pro)
• Enregistrer plusieurs designs nommés et passer de l'un à l'autre
• Générer des PDF pour une attestation ou des centaines à la fois

Disponible sur : tous les forfaits (Gratuit : 1 design, 1 modèle ; Basic : 5 designs, tous les modèles ; Pro : illimité + arrière-plans personnalisés)

Studio de design vs générateur classique

CertLister offre deux méthodes de génération de PDF. Le Studio de design est l'option recommandée pour tout nouveau travail.

Le générateur classique demeure disponible et est décrit dans un article d'aide distinct. Si vous partez de zéro, utilisez le Studio de design.

Comment ouvrir le Studio de design

1. Connectez-vous à CertLister à https://app.certlister.com
2. Cliquez sur Studio de design dans la navigation de gauche
3. Le Studio de design s'ouvre avec votre design actuel ou par défaut chargé

URL directe : https://app.certlister.com/credentials/generator

La disposition à trois panneaux

Le Studio de design s'organise en trois zones :

1. Barre latérale d'outils (à l'extrême gauche, étroite) Une bande verticale d'icônes pour basculer entre les outils actifs :

• Modèles — Choisir un arrière-plan
• Texte — Ajouter et styliser des éléments de texte
• Attributs — Insérer des jetons de données dynamiques
• Éléments — Ajouter des formes SVG décoratives, icônes, rubans et séparateurs
• Téléversements — Ajouter vos propres images (Pro)

2. Panneau de sélection (à gauche, plus large) Affiche les options de l'outil actuellement actif — par exemple, l'outil Texte affiche les contrôles de police, taille, couleur et alignement.

3. Canevas (au centre) Votre design en direct. Cliquez sur n'importe quel élément pour le sélectionner. Glissez les éléments pour les repositionner. Glissez les poignées de coin pour les redimensionner.

Étape 1 : choisir un modèle d'arrière-plan

1. Cliquez sur l'icône Modèles (en haut de la barre d'outils gauche)
2. Le panneau de sélection affiche 10 options d'arrière-plan :

3. Cliquez sur la vignette d'un modèle pour l'appliquer instantanément au canevas

Note sur les forfaits : Classic-01 est disponible sur tous les forfaits. Les modèles 2 à 10 nécessitent un forfait Basic ou Pro. Les utilisateurs du forfait Gratuit verront une icône de cadenas sur ces modèles.

Téléverser votre propre arrière-plan (Pro)

Si aucun des modèles intégrés ne correspond à votre marque, vous pouvez téléverser une image d'arrière-plan JPG ou PNG personnalisée.

Comment téléverser :

1. Cliquez sur l'icône Modèles dans la barre d'outils gauche
2. La section Mes modèles apparaît en haut du panneau (forfaits Pro seulement)
3. Cliquez sur la carte de téléversement +
4. Sélectionnez un fichier JPG ou PNG — maximum 5 Mo
5. L'image est téléversée dans le stockage privé de votre organisation et apparaît comme vignette dans la galerie
6. Cliquez sur la vignette pour l'appliquer comme arrière-plan du canevas

Exigences relatives à l'image :

• Format : JPG ou PNG seulement (pas de SVG — les arrière-plans doivent être des images matricielles)
• Taille maximale : 5 Mo
• Résolution recommandée : 2480 × 1754 px (A4 paysage à 300 DPI)
• Rapport d'aspect : environ 1,41:1 (identique au papier A4). Les images avec un rapport différent seront étirées pour remplir le canevas et pourraient paraître déformées

Astuce : Cliquez sur l'icône d'information (i) à côté de « Mes modèles » pour consulter ces exigences à tout moment.

Supprimer un arrière-plan personnalisé :

Survolez la vignette d'un modèle personnalisé et cliquez sur l'icône de corbeille qui apparaît. Si des designs enregistrés font référence à cet arrière-plan, un avertissement indiquera combien sont touchés. Vous pouvez tout de même le supprimer — les designs touchés afficheront une alerte la prochaine fois qu'ils seront ouverts, vous invitant à choisir un nouvel arrière-plan. Les PDF déjà générés ne sont pas affectés.

Note de rétrogradation : Si vous passez de Pro à Basic ou Gratuit, vous ne pouvez plus téléverser de nouveaux arrière-plans personnalisés, mais vos téléversements existants demeurent visibles et utilisables.

Étape 2 : ajouter des éléments de texte

1. Cliquez sur l'icône Texte dans la barre d'outils gauche
2. Dans le panneau de sélection, cliquez sur l'un des trois styles de texte pour l'ajouter au canevas :
   • Titre — Texte large et proéminent. À utiliser pour le nom du titulaire ou le titre de l'attestation.
   • Sous-titre — Texte de taille moyenne. À utiliser pour le nom du cours, la catégorie ou l'organisation.
   • Corps — Texte plus petit de soutien. À utiliser pour les dates, descriptions ou mentions.
3. L'élément apparaît sur le canevas — glissez-le à la position souhaitée
4. Double-cliquez sur l'élément du canevas pour modifier directement son contenu textuel
5. Utilisez les contrôles de police, taille, couleur et alignement du panneau de sélection pour le styliser

Polices disponibles : Playfair Display, Roboto, Open Sans, Lato, Montserrat, Merriweather, Oswald, Raleway, Dancing Script, Great Vibes

Étape 3 : insérer des jetons d'attributs d'attestation

Les jetons d'attributs sont des espaces réservés dynamiques qui sont remplacés par les vraies données de l'attestation lors de la génération du PDF. Par exemple, {{recipient.name}} devient « Sarah Tremblay » dans le PDF final.

1. Cliquez sur l'icône Attributs dans la barre d'outils gauche
2. Le panneau de sélection affiche deux sections :

Code QR de vérification

En haut du panneau se trouve un élément Code QR de vérification. Cliquez dessus ou glissez-le sur le canevas pour ajouter un code QR à votre design.

Lors de la génération, le code QR est automatiquement remplacé par un vrai code QR qui mène directement à la page publique de vérification de cette attestation. Quiconque le scanne avec un téléphone peut vérifier instantanément l'attestation — sans rien à taper.

• Ajoutez-le à votre design une seule fois ; chaque PDF généré reçoit son propre code QR unique
• Redimensionnez et repositionnez-le comme tout autre élément
• Fonctionne sur tous les forfaits — aucune mise à niveau requise

Champs dynamiques

3. Cliquez sur un bouton de jeton pour l'ajouter au canevas à une position par défaut, ou glissez le bouton directement sur le canevas à l'endroit voulu
4. Stylisez l'élément jeton comme tout autre élément de texte — police, taille, couleur, alignement

Astuce : Placez {{recipient.name}} comme un grand Titre. C'est l'information la plus importante sur la plupart des designs d'attestation.

Les attributs personnalisés sont une fonctionnalité Pro. Consultez l'article d'aide sur les attributs d'attestation personnalisés pour un guide complet.

Étape 4 : ajouter des éléments décoratifs

1. Cliquez sur l'icône Éléments dans la barre d'outils gauche
2. Parcourez le panneau :
   • Icônes et rubans — Icônes de prix, formes de rubans, badges numériques, sceaux
   • Formes — Formes géométriques et cadres
   • Lignes — Séparateurs horizontaux ou verticaux pour structurer votre design
3. Cliquez sur un élément pour l'ajouter au canevas, ou glissez-le à une position précise
4. Pour les éléments SVG, utilisez le sélecteur de couleur du panneau pour modifier la couleur de l'élément afin qu'elle corresponde à votre marque

Astuce : Un séparateur horizontal entre le titre de l'attestation et le nom du titulaire donne au design un aspect épuré et structuré.

Étape 5 : téléverser vos propres images (Pro)

1. Cliquez sur l'icône Téléversements dans la barre d'outils gauche
2. Cliquez sur Téléverser une image et sélectionnez un fichier JPG, PNG ou SVG (max 2 Mo par fichier)
3. L'image téléversée apparaît dans votre galerie et persiste entre les sessions
4. Cliquez sur la vignette de l'image pour l'ajouter au canevas, ou glissez-la directement sur le canevas

Utilisations courantes : Logos d'organisation, images de signature, sceaux officiels, timbres, filigranes

Forfait Pro requis. Les utilisateurs des forfaits Basic et Gratuit voient une icône de cadenas sur le panneau Téléversements.

Travailler avec les éléments sur le canevas

Une fois les éléments sur le canevas :

• Déplacer : Cliquez et glissez pour repositionner
• Redimensionner : Glissez les poignées de coin ou de bord
• Sélectionner : Cliquez sur un élément pour le sélectionner (les poignées apparaissent autour)
• Supprimer : Sélectionnez un élément, puis cliquez sur Supprimer l'élément dans le panneau de sélection — ou appuyez sur la touche Supprimer/Retour arrière
• Ordre des couches : Les éléments placés plus tard apparaissent à l'avant. Si des éléments se chevauchent et que vous devez les réordonner, supprimez et rajoutez l'élément dans le bon ordre

Gérer plusieurs designs

Votre organisation peut enregistrer plusieurs designs nommés et utiliser différents designs pour différents types d'attestations.

Basculer entre les designs

1. Cliquez sur le menu déroulant du nom du design dans la barre d'en-tête supérieure
2. Sélectionnez n'importe quel design enregistré pour le charger sur le canevas

Créer un nouveau design

1. Cliquez sur le menu déroulant du nom du design
2. Sélectionnez Nouveau design
3. Entrez un nom (p. ex. « Prix annuel 2026 », « Modèle de certification RCR »)
4. Commencez avec un canevas vierge ou choisissez un modèle d'arrière-plan

Renommer, dupliquer ou supprimer un design

Cliquez sur le menu de débordement (trois points) à côté du menu déroulant du nom du design pour accéder à :

• Renommer — Mettre à jour le nom du design
• Enregistrer comme nouveau — Dupliquer le design actuel sous un nouveau nom
• Définir par défaut — Marquer ce design comme par défaut (utilisé pour la génération PDF en lot)
• Supprimer — Supprimer définitivement le design (au moins un design doit demeurer)

Modifications non enregistrées

Un point orange apparaît à côté du nom du design lorsqu'il y a des modifications non enregistrées. Si vous tentez de quitter la page, le navigateur vous avertira. Cliquez sur Enregistrer avant de naviguer ailleurs.

Limites de design par forfait

Enregistrer votre design

Cliquez sur Enregistrer dans le coin supérieur droit de l'en-tête. Un message de confirmation apparaît lorsque le design est enregistré avec succès.

Remarque : Seuls les utilisateurs Admin peuvent créer, modifier ou supprimer des designs. Les rôles Manager et User peuvent voir les designs mais ne peuvent pas enregistrer de modifications.

Générer des PDF à partir de votre design

Une fois votre design enregistré, utilisez-le pour générer des PDF d'attestation.

PDF d'une seule attestation

1. Allez à Attestations
2. Trouvez l'attestation voulue
3. Cliquez sur l'action Générer le PDF (ou utilisez le menu d'actions de l'attestation)
4. Sélectionnez votre design dans le sélecteur
5. Cliquez sur Générer — le PDF est créé et joint au dossier de l'attestation

Génération PDF en lot (Basic et Pro)

La façon la plus simple de générer des PDF en lot est via la page dédiée Générer des PDF :

1. Cliquez sur Générer des PDF dans la barre de navigation gauche
2. Étape 1 — Sélectionnez les attestations voulues (toutes les attestations sans PDF sont présélectionnées)
3. Étape 2 — Choisissez un design parmi vos designs enregistrés
4. Étape 3 — Vérifiez le résumé et cliquez sur Générer — une barre de progression en direct suit chaque PDF

Consultez le guide Générer des PDF pour tous les détails.

Vous pouvez aussi déclencher la génération en lot directement depuis la liste des attestations :

1. Allez à Attestations
2. Cochez les cases à côté des attestations voulues
3. Cliquez sur Générer des PDF dans la barre d'actions en lot qui apparaît
4. Sélectionnez un design et cliquez sur Générer

Dépannage

Les modifications ne sont pas enregistrées

• Cliquez sur Enregistrer dans le coin supérieur droit avant de naviguer ailleurs
• Vérifiez la présence du point orange de modifications non enregistrées à côté du nom du design
• Confirmez que vous avez le rôle Admin — les Managers et Users ne peuvent pas enregistrer de modifications de design

Un modèle affiche une icône de cadenas

• Ce modèle nécessite un forfait Basic ou Pro
• Mettez à niveau à https://app.certlister.com/billing

Les jetons d'attributs personnalisés s'affichent comme [fieldname] dans l'aperçu du canevas

C'est normal. L'aperçu du design n'a pas de vraies données d'attestation, donc {{custom.score}} est affiché comme [score] à titre d'espace réservé. Lorsque vous générez un vrai PDF, l'espace réservé est remplacé par la vraie valeur (p. ex. « 92 % »).

Le panneau Téléversements affiche une icône de cadenas

• Les téléversements d'images nécessitent un forfait Pro
• Mettez à niveau à https://app.certlister.com/billing

Mon arrière-plan personnalisé semble étiré ou écrasé

• Le canevas mesure toujours 2480 × 1754 px (A4 paysage). Si votre image téléversée a un rapport d'aspect différent, elle sera étirée pour remplir le canevas
• Téléversez à nouveau l'image à 2480 × 1754 px, ou recadrez-la à un rapport 1,41:1 (identique à A4) avant le téléversement

Un design affiche « L'image d'arrière-plan de ce design a été supprimée »

• Un modèle d'arrière-plan personnalisé référencé par ce design a été supprimé
• Ouvrez le panneau Modèles et choisissez un nouvel arrière-plan — vos textes et éléments existants sont préservés
• Enregistrez le design pour confirmer le nouvel arrière-plan

La carte de téléversement « Mes modèles » affiche une icône de cadenas

• Le téléversement d'arrière-plans personnalisés nécessite un forfait Pro
• Cliquez sur la carte pour aller à la page de facturation et faire la mise à niveau

Le texte est tronqué dans le PDF généré

• L'élément de texte sur le canevas peut être trop étroit pour la taille de la police
• Sélectionnez l'élément et élargissez-le ou réduisez la taille de la police
• Régénérez le PDF après avoir enregistré la modification du design

Le PDF généré a un aspect légèrement différent de l'aperçu du canevas

Des différences mineures de rendu de police entre le canevas (navigateur) et le moteur PDF sont normales. L'aperçu est précis à environ 95-98 %. Téléchargez et examinez toujours un PDF échantillon avant la génération en lot.

Foire aux questions

Q : Le code QR sur le PDF mène-t-il à la bonne attestation ?

R : Oui. Chaque PDF généré reçoit son propre code QR unique pointant vers la page de vérification de cette attestation précise. Le scanner avec un téléphone ouvre la page publique de vérification avec les détails de l'attestation préchargés — aucune recherche manuelle requise. Le code QR est généré au moment de la création du PDF et utilise l'URL correcte selon l'environnement (préproduction ou production).

Q : Puis-je utiliser le Studio de design avec le forfait Gratuit ?

R : Oui. Le forfait Gratuit comprend un design enregistré et l'accès au modèle d'arrière-plan Classic-01. La mise à niveau vers Basic débloque les 10 modèles d'arrière-plan et jusqu'à 5 designs enregistrés. Pro vous donne des designs illimités et tous les modèles.

Q : Plusieurs membres de l'équipe peuvent-ils modifier le même design en même temps ?

R : Le Studio de design ne verrouille pas actuellement