La création d'une page de don personnalisée ou d'une vitrine de campagne nécessite souvent un codage complexe ou des outils tiers qui ne correspondent pas au design de votre site.
Charitable résout ce problème avec une intégration native pour Divi, offrant quatre modules spécialement conçus qui vous permettent de glisser-déposer des éléments de collecte de fonds directement dans vos mises en page.
Avec ces widgets, vous pouvez ajouter un simple bouton de don ou créer une page de destination de campagne complète.
Dans ce guide, nous vous montrerons comment utiliser les modules Charitable Divi pour personnaliser votre site Web de collecte de fonds sans aucune connaissance en codage.
Remarque : Les modules Divi sont une fonctionnalité premium disponible dans Charitable Pro.
Vous n’avez pas encore Charitable ? Vous devrez l’installer d’abord. La fonctionnalité de widgets Divi est disponible dans le plugin Charitable Pro.
Pas encore utilisateur de Charitable Pro ? Inscrivez-vous aujourd'hui et bénéficiez jusqu'à 50 % de réduction sur votre plan. Nous sommes convaincus que vous aimerez collecter des fonds avec Charitable. Si, pour une raison quelconque, Charitable ne vous convient pas, nous vous rembourserons votre achat grâce à notre garantie de remboursement de 14 jours. Obtenez Charitable Pro dès maintenant »
Table des matières
Prérequis
Avant de pouvoir commencer à utiliser les modules Divi de Charitable, vous devez avoir quelques éléments en place pour vous assurer que tout fonctionne correctement.
- Thème Divi ou plugin Divi Builder installé et actif
- Charitable (gratuit) ou Charitable Pro installé et actif
- Au moins une campagne créée dans Charitable
Trouver les modules Charitable
Les modules Charitable sont regroupés dans leur propre catégorie spécifique dans le constructeur Divi, ce qui les rend très faciles d’accès.
Tout d’abord, ouvrez n’importe quelle page ou publication où vous souhaitez ajouter des éléments de collecte de fonds à l’aide du Constructeur visuel Divi.
- Cliquez sur l’icône plus grise pour ajouter un nouveau module
- Recherchez la catégorie Charitable dans le sélecteur de modules
- Les quatre modules Charitable y seront listés
- Campagne Charitable : Affiche une seule campagne.
- Campagnes Charitable : Affiche une grille ou une liste de plusieurs campagnes.
- Formulaire de don Charitable : Intègre un formulaire de don.
- Bouton de don Charitable : Ajoute un bouton d’appel à l’action.
Maintenant, examinons comment utiliser efficacement chacun de ces modules.
Module de campagne Charitable
Le module Campagne est conçu pour afficher une campagne unique et spécifique sur votre page. Il récupère automatiquement les détails clés tels que le titre de la campagne, la description, la barre de progression et les statistiques de dons actuelles.
Quand utiliser ce module
- Présenter une campagne spécifique : Si vous menez une collecte de fonds majeure, vous pouvez placer ce module sur votre page d'accueil pour lui donner une visibilité maximale.
- Créer une page de destination : Il est parfait pour créer une page de destination dédiée à une cause spécifique, vous permettant de styliser les détails de la campagne pour qu'ils correspondent à votre image de marque.
- Mettre en avant une initiative : Utilisez-le pour attirer l'attention sur votre objectif de collecte de fonds le plus important du mois.
Module de campagnes Charitable
Si vous souhaitez afficher plus d'une collecte de fonds à la fois, le module Campagnes est le bon choix.
Ce module affiche une grille ou une liste de plusieurs campagnes, permettant aux visiteurs de parcourir vos initiatives actives.
Vous pouvez choisir l'option souhaitée en cliquant simplement dessus. Un bouton bleu « OUI » apparaîtra.
Quand utiliser ce module
- Section « Campagnes en cours » : Créez une section sur votre page d'accueil qui présente toutes vos collectes de fonds actives.
- Archives des campagnes : Créez une page dédiée où les donateurs peuvent consulter toutes les causes passées et présentes.
- Affichage dans la barre latérale ou le pied de page : Vous pouvez l'utiliser pour afficher des campagnes en vedette dans des zones plus petites comme un pied de page ou une barre latérale.
Module de formulaire de don Charitable
Le module Formulaire de don vous permet d'intégrer un formulaire de don complet pour une campagne spécifique directement dans n'importe quelle mise en page.
Remarque : Lorsque vous utilisez ce module dans le constructeur visuel, vous verrez une image de remplacement. Le formulaire de don interactif réel apparaîtra sur le frontend de votre site Web.
Quand utiliser ce module
- Pages de destination de campagne : Ajoutez le formulaire de don directement à une page de campagne pour réduire les frictions pour les donateurs.
- Page de don autonome : Créez une page spécifique uniquement dédiée à la réception de dons sans distractions.
- Fonctionnalité d'intégration : Vous pouvez facilement ajouter des fonctionnalités de don à n'importe quel article de blog ou mise en page.
Module de bouton de don Charitable
Le module Bouton de don crée un bouton ou un lien d'appel à l'action (CTA) qui dirige les visiteurs vers une campagne spécifique pour faire un don.
Quand utiliser ce module
- Appels à l'action (CTA) : Placez des boutons de don dans le contenu de votre site pour encourager les dons.
- En-têtes et sections principales : Placez des boutons « Faire un don maintenant » précis dans l'en-tête de votre site ou dans les sections d'images principales pour une grande visibilité.
- Liens de contenu : Ajoutez des liens de don dans vos articles de blog ou études de cas.
Personnaliser les widgets Divi
Lorsque vous ajoutez un module à votre page, tel que le module Campagnes, une fenêtre de paramètres apparaît avec une barre de tâches sur la gauche.
Divi divise ces paramètres en trois onglets : Contenu, Conception et Avancé. Voici comment vous pouvez les utiliser pour personnaliser vos éléments de collecte de fonds.
1. Onglet Contenu
Les options de cet onglet varient légèrement en fonction du module spécifique que vous avez sélectionné. Pour le module Campagnes , vous trouverez généralement :
- Filtrage : Permet de contrôler les campagnes affichées dans la grille.
- Commentaires : Envoyez des notes et suggestions à Charitable
- Arrière-plan : Vous pouvez personnaliser entièrement l'arrière-plan du module. Vous pouvez ajouter une couleur unie, télécharger une image ou une vidéo, et même appliquer des motifs ou des masques pour un look moderne.
- Libellé admin : Ceci vous permet de nommer le module afin de l'identifier facilement dans la vue du constructeur backend.
2. Onglet Conception
L'onglet Conception est l'endroit où vous contrôlez le style visuel de votre section de collecte de fonds. Vous avez un contrôle total sur :
- Texte : Personnalisez les polices, les tailles et les couleurs pour correspondre à votre thème.
- Mise en page : Ajustez la façon dont les campagnes sont organisées.
- Taille et espacement : Gérez la largeur, la hauteur, les marges et le remplissage.
- Bordure et ombre : Ajoutez des bordures, des coins arrondis et des ombres de boîte pour la profondeur.
- Effets : Vous pouvez même ajouter des filtres, des transformations et des animations pour que vos campagnes se démarquent.
3. Onglet Avancé
Pour les développeurs ou ceux qui ont besoin d'un contrôle précis, l'onglet Avancé offre des options pour :
- CSS personnalisé : Ajoutez votre propre CSS à des éléments spécifiques du module.
- Attributs : Gérez les attributs HTML.
- Conditions : Définissez une logique conditionnelle pour déterminer quand le module doit être affiché.
Vous pouvez également contrôler la visibilité, les transitions, les positions et les effets de défilement.
CSS personnalisé
Chaque module Charitable comprend une section CSS personnalisé dans l'onglet Avancé, vous permettant de cibler des éléments spécifiques :
Les cibles CSS courantes incluent :
- Titres des campagnes
- Barres de progression
- Boutons de don
- Champs de formulaire
- Cartes de campagne (en vue grille)
Conseils pour de meilleurs résultats
Pour tirer le meilleur parti des modules Divi de Charitable, voici quelques conseils rapides à garder à l'esprit lors de la création de vos pages.
- Aperçu du constructeur visuel : Les modules Campagne et Campagnes affichent des aperçus en direct directement dans le constructeur. Cependant, le module Formulaire de don affiche une image d'espace réservé lors de la modification. Ne vous inquiétez pas, le formulaire réel apparaîtra correctement sur le frontend.
- Cohérence du style : Pour un look professionnel, utilisez les paramètres de texte globaux dans l'onglet Conception pour faire correspondre vos polices à votre thème Divi.
- Optimisation mobile : Vérifiez toujours votre conception sur les vues mobiles. Vous voudrez peut-être réduire le nombre de colonnes dans la grille des campagnes pour les utilisateurs de tablettes et de téléphones afin de garantir que le texte reste lisible.
- Performance : Les options déroulantes des campagnes sont mises en cache pour améliorer les performances. Si vous venez de créer une campagne et que vous ne la voyez pas dans la liste, enregistrez votre mise en page en tant que brouillon et actualisez le constructeur.
Dépannage des problèmes courants
Si vous rencontrez des problèmes lors de la configuration de vos modules, voici les solutions les plus courantes :
- Modules non affichés ? Assurez-vous que le plugin Charitable et le Divi Builder (ou thème) sont actifs. S'ils le sont, essayez de vider le cache de votre navigateur.
- Liste déroulante des campagnes vide ? Vous devez avoir au moins une campagne avec le statut « Publiée » pour qu'elle apparaisse dans la liste. Les campagnes brouillons ne s'afficheront pas.
- Style non appliqué ? Il s'agit souvent d'un problème de mise en cache. Allez dans Divi » Options du thème » Builder » Avancé et videz le cache CSS statique de Divi. Vérifiez également les conflits CSS avec votre thème actif.
C'est tout ! Vous savez maintenant comment utiliser les modules Charitable Divi pour créer de magnifiques pages de collecte de fonds.
Vous ne savez pas comment créer une collecte de fonds ? Apprenez Comment configurer votre première campagne »
Voici quelques-uns des guides « comment faire » et articles d'aide les plus populaires pour les nouveaux utilisateurs :
- Créer et modifier des dons dans le tableau de bord WordPress
- Comment utiliser le système de gestion des donateurs
- Se connecter à Google Analytics
- Problèmes d'envoi d'e-mails de don non envoyés
- Renvoyer les e-mails de don depuis le tableau de bord
- Widgets et shortcodes
Vous voulez plus de conseils en matière de collecte de fonds et de conseils pour les organisations à but non lucratif ?
Nous partageons régulièrement des guides pratiques, des stratégies éprouvées et des conseils d'initiés pour vous aider à collecter plus de fonds et à établir des relations plus solides avec vos donateurs. Rejoignez des milliers d'organisations à but non lucratif qui reçoivent notre meilleur contenu directement :
- Rejoignez notre newsletter – Recevez des conseils hebdomadaires et des guides exclusifs dans votre boîte de réception
- Abonnez-vous à notre chaîne YouTube – Regardez des tutoriels étape par étape et des histoires de réussite
- Suivez-nous sur LinkedIn – Connectez-vous avec notre communauté et obtenez des informations quotidiennes sur les organisations à but non lucratif
- Suivez-nous sur TikTok – Vidéos instructives et amusantes pour vous aider à développer votre cause
- Suivez-nous sur Instagram – Reels amusants avec des idées et des conseils pour les organisations à but non lucratif
Pas de blabla, juste des conseils concrets de personnes qui comprennent les défis auxquels vous êtes confrontés chaque jour.
Existe-t-il des tutoriels vidéo pour Charitable ?
Oui ! Abonnez-vous à la chaîne YouTube Charitable pour des tutoriels étape par étape et des histoires de réussite.
Besoin d'aide ? Vous avez une question ? Si vous êtes un utilisateur lite/gratuit de Charitable, vous pouvez contacter notre équipe sur les forums de support de WordPress.org. Si vous avez une licence active, n'hésitez pas à nous contacter directement pour un support prioritaire.
