DocumentationÉdition et publicationGuide de personnalisation

Guide de Personnalisation

Apprenez à modifier, styliser et étendre votre site Draftly sans toucher au code.

Fonctionnement de la Personnalisation

Draftly vous offre trois façons de personnaliser votre site après sa génération :

1. Clic-pour-Modifier (Édition en ligne) — Activez Modifier dans la barre d'outils de prévisualisation, puis cliquez sur n'importe quel texte ou élément. L'inspecteur affiche les contrôles de typographie, d'espacement, de couleurs et d'animation. Les modifications s'appliquent en direct.

2. Chat-pour-Modifier — Tapez une instruction ciblée par message (par exemple, "changer l'arrière-plan du héros en bleu marine foncé", "ajouter une section de prix"). Draftly ne modifie que les parties pertinentes — généralement 0,5 crédit par modification.

3. Régénérer l'Interface du Site — Cliquez sur ↺ Régénérer le site web pour lancer une nouvelle passe de conception IA tout en conservant vos vidéos, images et cadres de défilement.

Facultatif : passez à un modèle prédéfini depuis le sélecteur de modèles pour un échange de mise en page plus rapide.

Flux de Travail de Personnalisation Recommandé

Pour une expérience optimale, suivez cet ordre :

1.Prévisualiser dans un nouvel onglet — vérifiez le mouvement de défilement et la mise en page sans l'interface du constructeur
2.Édition en ligne — corrigez le texte exact, les étiquettes de boutons et les couleurs en cliquant sur les éléments
3.Chat — un changement par message pour les sections, les changements de thème ou les réécritures
4.Intégrations (onglet Expédier) — GA4, formulaire de contact, scripts d'en-tête personnalisés
5.Republier après les modifications pour que l'URL en direct corresponde à la prévisualisation

Évitez : les requêtes vagues comme "améliorez-le" — spécifiez ce qu'il faut changer. Utilisez le Guide (en-tête) ou demandez dans le chat : "Comment personnaliser le texte ?"

Modifier le Texte et les Couleurs

Pour modifier n'importe quel élément en ligne :

1.Assurez-vous d'être sur l'onglet Prévisualisation dans le constructeur.
2.Cliquez sur n'importe quel texte, titre ou bloc coloré dans la prévisualisation.
3.La superposition Édition en ligne s'ouvre à droite avec :
- Texte — modifiez le contenu directement
- Couleur — entrée hexadécimale ou sélecteur de couleurs
- Famille de Polices — menu déroulant avec 26 polices
- Taille de Police — curseur de plage
- Graisse de Police — 8 options de Fine à Noire
4.Cliquez sur Enregistrer pour appliquer, ou sur Annuler pour revenir en arrière.

Vous pouvez également cliquer sur Réécrire par IA pour laisser Draftly réécrire le texte sélectionné avec un meilleur ton, ou sur Remplacer l'Image pour échanger une image de fond ou de produit.

Utiliser les Préréglages de Design

Les Préréglages de Design vous permettent de changer le style visuel complet de votre site en un clic.

1.Cliquez sur le bouton Styles dans la barre d'outils du constructeur.
2.Le panneau des Préréglages s'ouvre avec trois onglets :
- Vertical — 25 préréglages par secteur (Restaurant, SaaS, Immobilier, Mode, etc.) — chacun applique une palette de couleurs, une association de polices et un style de mise en page sélectionnés.
- Couleurs — 12 échantillons d'accentuation + entrée hexadécimale personnalisée pour changer la couleur d'accentuation principale.
- Style — 5 styles de navigation, 5 mises en page de héros et 5 préréglages d'animation.
3.Cliquez sur n'importe quel préréglage pour le prévisualiser, puis cliquez sur Appliquer pour régénérer votre site avec le nouveau style.

Les préréglages se combinent avec votre contenu — votre texte, vos sections et votre nom de marque restent les mêmes ; seul le système visuel change.

Chat-pour-Modifier

Le chat-pour-modifier est le moyen le plus rapide d'apporter des modifications structurelles sans régénération complète.

Comment ça marche : Saisissez n'importe quelle instruction dans la barre de chat pendant que votre site est chargé. Exemples : - *"Changez le titre principal pour quelque chose de plus accrocheur"* - *"Ajoutez une section FAQ entre les tarifs et le contact"* - *"Rendez la palette de couleurs plus sombre et plus professionnelle"* - *"Réécrivez la section À propos pour la rendre plus personnelle"* - *"Remplacez le texte du bouton CTA principal par 'Obtenir un devis gratuit'"*

Draftly n'envoie à l'IA que la section pertinente du code HTML de votre site — pas la page entière — les modifications sont donc rapides et coûtent 0,5 crédit au lieu du coût de régénération complète.

Conseils : - Soyez précis : "changer l'arrière-plan de la navigation en noir" fonctionne mieux que "le rendre plus sombre" - Référencez les sections par leur nom : "la section services", "le pied de page" - Vous pouvez enchaîner les modifications — chaque message de chat est un nouveau correctif ciblé

Ajouter des analyses et du suivi

Connectez Google Analytics, Google Tag Manager, Facebook Pixel ou tout script de suivi personnalisé à votre site — aucun code requis.

1.Cliquez sur le bouton Intégrations (icône de prise) dans la barre d'outils de l'éditeur.
2.Le panneau Intégrations s'ouvre avec des champs pour :
- Google Analytics 4 — collez votre ID de mesure (format : G-XXXXXXXXXX). Trouvez-le dans GA4 → Admin → Flux de données.
- Google Tag Manager — collez votre ID de conteneur (format : GTM-XXXXXXX). Trouvez-le dans GTM → Admin → ID de conteneur.
- Facebook Pixel — collez votre ID de pixel à 15 chiffres. Trouvez-le dans Meta Events Manager.
- Script d'en-tête personnalisé — collez tout bloc <script> à injecter dans <head> (sources HTTPS uniquement).
3.Cliquez sur Enregistrer les intégrations.
4.La prochaine fois que vous générerez ou régénérerez votre site, les scripts de suivi seront automatiquement injectés.

Tous les scripts sont injectés dans le <head> du code HTML de votre site publié. GTM reçoit également l'iframe <noscript> requise injectée après <body>.

Ajouter un formulaire de contact

Chaque site Draftly peut inclure un formulaire de contact fonctionnel qui envoie les soumissions directement à votre boîte de réception Draftly et vous envoie une notification par e-mail.

1.Cliquez sur le bouton Intégrations dans la barre d'outils de l'éditeur.
2.Activez l'option Activer le formulaire de contact (activée par défaut pour les nouveaux sites).
3.Cliquez sur Enregistrer les intégrations.
4.Générez ou régénérez votre site — un formulaire de contact est automatiquement ajouté au site.

Comment ça marche : - Si votre site généré contient déjà un élément <form> (courant dans les sites avec une section Contact), Draftly le modifie pour qu'il soumette au backend de Draftly. - Si aucun formulaire n'existe, Draftly injecte une section de formulaire stylisée avant le pied de page. - Les soumissions sont stockées dans votre compte Draftly sous l'onglet Soumissions du site. - Vous recevez une notification par e-mail pour chaque nouvelle soumission avec le nom, l'e-mail et le message du visiteur.

Toutes les données restent au sein de Draftly — aucun service de formulaire tiers n'est requis.