Vous voulez que votre formulaire de don ressemble réellement à celui de votre organisation à but non lucratif, au lieu d’un module générique greffé sur votre page de campagne ?

L’onglet Styles du Générateur de campagnes vous permet de définir les couleurs, les polices et le style par champ pour chaque campagne, le tout sans écrire une seule ligne de CSS.

Ce que contient ce guide ?

Ouverture de l’onglet Styles

L’onglet Styles se trouve dans le panneau Conception du Générateur de campagnes.

1. Dans wp-admin, allez dans Campagnes et ouvrez la campagne que vous souhaitez styliser, ou créez-en une nouvelle.
2. Cliquez sur Modifier avec le Générateur.
3. Dans le générateur, ouvrez le panneau Conception sur le côté droit, puis cliquez sur l’onglet Styles. Recherchez le badge NOUVEAU à côté, aux côtés de Général, Onglets et Avancé.

Remarque importante : Le Générateur de campagnes, y compris l’onglet Styles, nécessite Charitable Pro 1.8.17 ou une version ultérieure.

Choix d’un préréglage de conception

En haut de l’onglet Styles, sous Styles globaux, vous trouverez quatre préréglages de conception : Violet audacieux, Bleu océan, Vert forêt et Rouge audacieux.

Cliquez sur n’importe quel préréglage pour appliquer un ensemble coordonné de couleurs, de typographie et d’animation à l’ensemble de la campagne en un seul clic. Un préréglage est un point de départ, pas une réponse finale. Choisissez celui qui est le plus proche de votre marque, puis affinez les couleurs globales, la typographie et les animations ci-dessous.

[Capture d’écran : préréglages de styles globaux.png : la section Styles globaux montrant les quatre options de préréglage de conception]

Définition de vos couleurs globales

Les couleurs globales constituent la palette à partir de laquelle votre campagne entière puise. Définissez-la une fois et elle s’appliquera à tous les champs qui n’ont pas leur propre substitution.

Vous trouverez neuf couleurs globales, chacune avec un échantillon de couleur et un champ de valeur hexadécimale :

• Primaire : votre couleur de marque principale, utilisée pour les accents et les surlignages
• Secondaire : une couleur de soutien, utilisée pour des éléments tels que les bordures d’accent
• Arrière-plan : la couleur d’arrière-plan du formulaire
• Texte : la couleur de texte par défaut sur tout le formulaire
• Arrière-plan du bouton : la couleur de remplissage du bouton Faire un don
• Texte du bouton : la couleur de l’étiquette sur le bouton Faire un don
• Barre de progression : la couleur de remplissage de la barre de progression de la collecte de fonds
• Arrière-plan de l’onglet : la couleur d’arrière-plan des onglets de don
• Texte de l’onglet : la couleur de l’étiquette sur les onglets de don

Cliquez sur une nuance pour ouvrir le sélecteur de couleurs, ou tapez directement une valeur hexadécimale dans le champ à côté.

Astuce de pro : Si vous gérez des campagnes pour plusieurs causes sur un même site, donnez à chaque campagne ses propres Couleurs globales au lieu de vous fier à une palette partagée. Une campagne de secours d’urgence et un fonds de bourses n’ont pas à avoir le même aspect.

Définition de la typographie et des animations

Sous Couleurs globales, la section Typographie contrôle les polices et la taille de l’ensemble du formulaire.

• Famille de polices : choisissez Défaut du thème, Sans-serif, Serif ou Monospace
• Taille des titres : choisissez Petit, Moyen ou Grand
• Taille du corps du texte : choisissez Petit, Moyen ou Grand

Sous Typographie, la section Animations contrôle la façon dont le formulaire et la barre de progression se déplacent. Choisissez Aucun, Subtil ou Fluide.

Astuce de pro : Si vous ou vos donateurs préférez un mouvement réduit, réglez Animations sur Aucun. Le constructeur respecte ce choix partout où le formulaire et la barre de progression se déplaceraient autrement.

Style des champs individuels

Les Couleurs globales et la Typographie définissent l’apparence générale. Lorsqu’un champ spécifique doit ressortir, ou se fondre, cliquez directement sur ce champ dans l’aperçu en direct pour ouvrir ses propres Styles de boîte.

Les contrôles exacts varient selon le type de champ, mais voici ce que vous trouverez sur les plus courants.

Champs de texte et de liste

Cliquez sur un champ de texte ou de liste dans l’aperçu et vous verrez trois groupes de contrôles : Titre, Corps du texte et Styles de boîte.

• Titre : Couleur et Taille de police
• Corps du texte : Couleur, Taille de police et Hauteur de ligne
• Styles de boîte : Couleur d’arrière-plan, Style de bordure (Aucune bordure, Bordure gauche uniquement ou Bordure complète), Couleur de bordure, Épaisseur de bordure, Rayon de bordure et Alignement du texte

Bouton de don

Cliquez sur le bouton Faire un don dans l’aperçu pour définir sa Couleur d’arrière-plan, sa Couleur de texte, son Rayon de bordure, sa Transformation de texte (par exemple, Majuscules) et sa Taille de police.

Photos

Cliquez sur un champ photo pour définir sa Bordure photo : Couleur de bordure, Taille de bordure et Rayon de bordure.

Barre de progression

Cliquez sur la barre de progression pour définir sa Couleur de barre, sa Hauteur de barre et sa Couleur de titre.

Le même type de style par champ s’applique aux comptes à rebours, aux onglets de don et à d’autres types de champs, de sorte que rien sur le formulaire ne semble déplacé.

Comprendre les styles personnalisés par rapport aux styles hérités

À côté de certains contrôles de couleur dans les Styles de boîte d’un champ, vous verrez une petite étiquette indiquant PERSONNALISÉ ou HÉRITÉ.

• HÉRITÉ signifie que le champ tire sa couleur des Couleurs globales. Modifiez la couleur globale et ce champ se met à jour automatiquement.
• PERSONNALISÉ signifie que vous avez défini une substitution pour ce champ spécifique. Il ne changera pas lorsque vous mettrez à jour les Couleurs globales.

Par exemple, la bordure d’accent d’un champ de liste utilise automatiquement la couleur secondaire de votre campagne, elle affiche donc HÉRITÉ jusqu’à ce que vous définissiez votre propre couleur pour celle-ci. C’est ce qui vous permet de définir une palette une fois et de faire en sorte que la plupart des champs suivent, tout en vous donnant la possibilité de personnaliser chaque champ individuellement.

Enregistrement et aperçu de vos modifications

Chaque modification dans l’onglet Styles met à jour instantanément l’aperçu en direct qui se trouve à côté. Il n’y a pas de bouton d’aperçu séparé et rien à actualiser.

Important : L’aperçu en direct montre vos modifications immédiatement, mais elles ne sont appliquées à la page de campagne publiée que lorsque vous cliquez sur Enregistrer.

Ce qui arrive aux campagnes existantes

Si vous avez créé une campagne avant l’existence de l’onglet Styles, vous n’avez rien à faire. Votre campagne a été automatiquement migrée vers le nouveau système de styles, sans perte de données, et elle conserve son apparence d’origine jusqu’à ce que vous décidiez d’ouvrir l’onglet Styles et de la modifier.

Pour les développeurs et les agences

Tout ce que vous définissez dans l’onglet Styles est stocké dans une seule valeur méta campaign_style_tokens sous forme de jetons de conception, et non sous forme de styles en ligne dispersés. Cela permet de garder la sortie propre et rend le style d’une campagne facile à lire, à déplacer ou à réutiliser ailleurs.

Si vous créez pour des clients, vous pouvez étendre l’onglet Styles avec vos propres contrôles :

• Enregistrez des contrôles personnalisés par champ en JavaScript via window.charitableDesignFieldControls.
• Accrochez-vous au rendu côté serveur avec les actions charitable_design_styles_global et charitable_design_styles_field.

Rien de tout cela n’est nécessaire pour utiliser l’onglet Styles au quotidien. Il est là pour les agences et les développeurs qui veulent aller plus loin.

FAQ sur l’onglet Styles

Cela nécessite-t-il Charitable Pro ?

Oui. Le générateur de campagnes, y compris l’onglet Styles, est une fonctionnalité de Charitable Pro et nécessite Charitable Pro 1.8.17 ou une version ultérieure.

Cela changera-t-il les campagnes que j’ai déjà créées ?

Non. Les campagnes existantes conservent leur apparence actuelle. Elles sont automatiquement migrées vers le système de styles, sans perte de données, et restent exactement comme elles étaient jusqu’à ce que vous les modifiiez.

Dois-je connaître le CSS ?

Non. Chaque contrôle de l’onglet Styles est visuel. Les développeurs peuvent l’étendre davantage avec des hooks et des filtres, mais vous n’aurez jamais besoin de code juste pour l’utiliser.

Mon style sera-t-il correct sur mobile ?
Oui. Les couleurs, la typographie et le style des champs se répercutent sur le formulaire de don en direct, quelle que soit la taille de l’écran.

Puis-je réutiliser un style sur plusieurs campagnes ?

Oui. Appliquez le même préréglage de conception et les mêmes couleurs globales à n’importe quelle campagne pour conserver une image de marque cohérente. Toute campagne qui a besoin de se démarquer est toujours libre d’utiliser ses propres couleurs et son propre style de champ.

C’est tout ! Vous avez appris à utiliser l’onglet Styles pour concevoir un formulaire de don qui correspond à votre image de marque, de la palette globale aux champs individuels.

Ensuite, vous voudrez peut-être en savoir plus sur le générateur de campagnes ou sur la façon de personnaliser votre formulaire de don.

Restez connecté pour plus de ressources pour les organisations à but non lucratif

Pour plus de tutoriels et de vidéos adaptés aux organisations à but non lucratif, abonnez-vous à notre chaîne YouTube. Nous publions régulièrement des conseils d'experts, des guides étape par étape sur les dons en ligne, des stratégies de collecte de fonds et des ressources pratiques pour aider votre organisation à réussir.

🗞️ Recevez des conseils hebdomadaires et des guides exclusifs dans votre boîte de réception
Rejoignez notre newsletter →  

🎥 Regardez des tutoriels étape par étape et des histoires de réussite
Abonnez-vous à notre chaîne YouTube →  

👩🏽‍💻 Connectez-vous avec notre communauté et obtenez des informations quotidiennes sur les organisations à but non lucratif
Suivez-nous sur LinkedIn →

🥳 Reels amusants et informations sur les organisations à but non lucratif
Suivez-nous sur Instagram → 

👀 Vidéos perspicaces et amusantes pour vous aider à développer votre cause
Suivez-nous sur TikTok→  

🌎 Abonnez-vous et suivez pour des conseils généraux sur la collecte de fonds
Obtenez des conseils sur la collecte de fonds sur TikTok → 

Ressources puissantes pour la collecte de fonds

⬇️ Téléchargez des stratégies éprouvées, des idées de campagnes et des outils d'experts
Obtenez le kit de collecte de fonds →  

💸 Obtenez des ressources gratuites pour la collecte de fonds
Rendez-vous sur le Hub de collecte de fonds Charitable →

🤔 Des questions sur Charitable ?
FAQ Charitable →

🏎️ Essayez Charitable
Créez votre démo Charitable →

Comprendre les termes et le jargon des organisations à but non lucratif
Glossaire des organisations à but non lucratif→

% Vous recherchez des offres et des réductions pour les organisations à but non lucratif ?
Meilleures offres et réductions pour les organisations à but non lucratif →