Charitable Pro inclut une intégration native avec WPBakery Page Builder (anciennement Visual Composer), vous permettant d'ajouter facilement des formulaires de don, des affichages de campagnes et des boutons de don à vos pages à l'aide de l'éditeur visuel de WPBakery.
Tous les éléments Charitable se trouvent dans la catégorie « Charitable » lors de l'ajout d'éléments dans WPBakery. Cliquez simplement sur le bouton « + » dans WPBakery, accédez à la catégorie Charitable, et sélectionnez l'élément dont vous avez besoin.
Référence rapide
| Nom de l'élément | Objectif | Paramètres clés | Meilleur cas d'utilisation |
|---|---|---|---|
| Campagne Charitable | Afficher une seule campagne avec tous ses détails | Sélection de la campagne | Pages de détails de campagne, sections de campagne en vedette |
| Formulaire de don Charitable | Afficher un formulaire de don complet pour une campagne | Sélection de la campagne | Pages de don dédiées, pages de campagne |
| Bouton de don Charitable | Afficher un bouton ou un lien vers la page de don | Campagne, Texte du bouton, Type de bouton, Option nouvel onglet | Sections d'appel à l'action, widgets de barre latérale, bannières |
| Campagnes Charitable | Afficher une grille ou une liste de plusieurs campagnes | Nombre, Colonnes, Ordre, Filtres, Options d'affichage | Pages de liste de campagnes, sections de la page d'accueil |
Les quatre éléments
1. Campagne Charitable
Ce qu'il fait : Affiche une seule campagne avec toutes ses informations, y compris la description de la campagne, la barre de progression, le formulaire de don (si activé) et les détails de la campagne.
Quand l'utiliser : Utilisez cet élément lorsque vous souhaitez présenter une campagne spécifique sur une page. Parfait pour les pages de détails de campagne, les sections de campagne en vedette ou pour mettre en évidence un effort de collecte de fonds particulier.
Paramètres et options :
Campagne – Sélectionnez la campagne à afficher dans le menu déroulant. Seules les campagnes publiées sont disponibles.
Options de personnalisation :
- Nom de classe supplémentaire : Ajoutez des classes CSS personnalisées pour la mise en forme
- ID d’élément : Attribuez un ID unique pour le ciblage CSS ou JavaScript
- Boîte CSS (Options de conception) : Utilisez l’éditeur CSS intégré de WPBakery pour une mise en forme personnalisée
Remarque : Cet élément affiche le modèle de campagne complet, qui inclut toutes les informations de campagne configurées dans vos paramètres de campagne.
2. Formulaire de don Charitable
Ce qu’il fait : Affiche un formulaire de don complet pour une campagne spécifique. Prend en charge les formulaires visuels (nouveau générateur de formulaires) et les formulaires hérités.
Quand l’utiliser : Utilisez cet élément lorsque vous souhaitez intégrer un formulaire de don directement sur une page. Idéal pour les pages de dons dédiées, les pages de campagne ou toute page où vous souhaitez accepter des dons.
Paramètres et options :
Campagne – Sélectionnez le formulaire de don de la campagne à afficher. Le formulaire sera configuré en fonction des paramètres du formulaire de la campagne.
Types de formulaires pris en charge :
- Formulaires visuels : Générateur de formulaires moderne avec configuration des champs par glisser-déposer
- Formulaires hérités : Disposition de formulaire traditionnelle (si le formulaire visuel n’est pas activé)
Comportement de l’aperçu :
- Les formulaires sont affichés comme aperçus en lecture seule dans l’éditeur WPBakery pour des raisons de sécurité et de performance
- Les formulaires en plusieurs étapes n’affichent que la première étape dans l’aperçu
- La sélection du mode de paiement n’est pas affichée dans l’aperçu (un message d’espace réservé est affiché)
- Toutes les fonctionnalités sont disponibles sur le frontend lorsque les visiteurs consultent la page
Options de personnalisation :
- Nom de classe supplémentaire : Ajoutez des classes CSS personnalisées pour la mise en forme du formulaire
- ID d’élément : Attribuez un ID unique pour le ciblage CSS ou JavaScript
- Boîte CSS (Options de conception) : Utilisez l’éditeur CSS intégré de WPBakery pour une mise en forme personnalisée
Important : L’aperçu du formulaire dans WPBakery est en lecture seule et peut ne pas afficher tous les champs. Testez toujours le processus de don réel sur le frontend pour vous assurer que tout fonctionne correctement.
3. Bouton de don Charitable
Ce qu’il fait : Crée un bouton ou un lien qui dirige les visiteurs vers la page de dons d’une campagne.
Quand l’utiliser : Utilisez cet élément pour les boutons d’appel à l’action, les widgets de barre latérale, les bannières ou partout où vous souhaitez un moyen simple de diriger les visiteurs vers un don. Parfait lorsque vous n’avez pas besoin du formulaire complet sur la page.
Paramètres et options :
Campagne – Sélectionnez la campagne vers laquelle le bouton doit pointer.
Texte du bouton – Personnalisez le texte affiché sur le bouton. Par défaut : « Faire un don »
Type de bouton – Choisissez l’apparence du bouton :
- Bouton – Bouton stylisé avec arrière-plan et remplissage
- Lien – Lien texte avec soulignement (pas de style de bouton)
Par défaut : Bouton
Ouvrir dans un nouvel onglet – Cochez cette case pour ouvrir la page de dons dans un nouvel onglet du navigateur lorsque vous cliquez dessus.
Options de personnalisation :
- Nom de classe supplémentaire : Ajoutez des classes CSS personnalisées pour la mise en forme du bouton
- ID d’élément : Attribuez un ID unique pour le ciblage CSS ou JavaScript
- Boîte CSS (Options de conception) : Utilisez l’éditeur CSS intégré de WPBakery pour une mise en forme personnalisée
Astuce : Utilisez le type de bouton « Lien » pour un appel à l’action plus subtil, ou le type « Bouton » pour une invite de don proéminente et accrocheuse.
4. Campagnes Charitable
Ce qu’il fait : Affiche une grille ou une liste de plusieurs campagnes avec des options de filtrage, de tri et d’affichage.
Quand l’utiliser : Utilisez cet élément pour les pages de liste de campagnes, les sections de la page d’accueil présentant plusieurs campagnes, ou toute page où vous souhaitez afficher plusieurs campagnes de collecte de fonds à la fois.
Paramètres et options :
Paramètres de base :
Nombre de campagnes – Nombre de campagnes à afficher. Par défaut : le réglage des articles par page de votre site
Colonnes – Nombre de colonnes dans la mise en page de la grille (1, 2, 3 ou 4). Par défaut : 2
Trier par – Comment trier les campagnes :
- Date – Les plus récemment créées en premier
- Popularité – Les plus de dons en premier
- Fin bientôt – Les campagnes qui se terminent bientôt en premier
- Titre – Par ordre alphabétique du nom de la campagne
- Aléatoire – Ordre aléatoire
- Montant collecté – Le montant le plus élevé collecté en premier
Par défaut : Date
Ordre – Sens de tri (Ascendant ou Descendant). Par défaut : Descendant
Options de filtrage :
Catégories – Filtrer par les slugs de catégories de campagnes. Entrez des slugs de catégories séparés par des virgules (par exemple, « éducation,santé »).
Exclure les campagnes – Masquer des campagnes spécifiques par ID. Entrez des ID de campagnes séparés par des virgules (par exemple, « 12,34,56 »).
Inclure les campagnes inactives – Cochez pour inclure les campagnes terminées ou inactives dans la liste.
Tags – Filtrer par les slugs de tags de campagnes. Entrez des slugs de tags séparés par des virgules (par exemple, « urgent,en vedette »).
Campagnes parentes – Afficher uniquement les campagnes enfants des ID de campagnes parentes spécifiées. Entrez des ID de campagnes parentes séparés par des virgules (par exemple, « 12,34 »).
Parent uniquement – Cochez pour afficher uniquement les campagnes de niveau supérieur (campagnes sans parent).
Options d’affichage :
Type de bouton – Ce qui apparaît sur chaque carte de campagne :
- Bouton Faire un don – Bouton « Faire un don » sur chaque carte
- Lien Lire la suite – Lien « Lire la suite » sur chaque carte
- Pas de bouton – Pas de bouton ni de lien (juste les informations de la campagne)
Par défaut : Bouton Faire un don
Limite de description – Nombre maximum de caractères pour la description de la campagne (0-500). Par défaut : 100
Grille responsive – Activer la mise en page de grille responsive qui s’adapte à la taille de l’écran. Par défaut : Activé
Mise en page Masonry – Activez la mise en page en grille de type masonry (style Pinterest) où les éléments sont disposés pour combler les espaces.
Options de personnalisation :
- Nom de classe supplémentaire : Ajoutez des classes CSS personnalisées pour le style de la grille
- ID d’élément : Attribuez un ID unique pour le ciblage CSS ou JavaScript
- Boîte CSS (Options de conception) : Utilisez l’éditeur CSS intégré de WPBakery pour une mise en forme personnalisée
Astuce : Combinez les options de filtrage pour créer des affichages de campagnes personnalisés. Par exemple, affichez uniquement les campagnes « mises en avant » de la catégorie « éducation », triées par montant collecté.
Fonctionnalités communes (Tous les éléments)
Les quatre éléments Charitable partagent ces options de personnalisation communes :
Paramètres de style
Nom de classe supplémentaire (el_class)
Ajoutez une ou plusieurs classes CSS personnalisées à l'élément. Séparez plusieurs classes par des espaces. Cela vous permet de cibler l'élément avec du CSS personnalisé dans votre thème ou via le Customizer.
Exemple : ma-campagne-personnalisee bordure-personnalisee
ID de l'élément (el_id)
Attribuez un attribut d'ID HTML unique à l'élément. Ceci est utile pour :
- Ciblage CSS avec
#votre-id - Interactions JavaScript
- Liens d'ancrage (sauter à une section de la page)
Important : Les ID doivent être uniques sur la page. N'utilisez pas le même ID pour plusieurs éléments.
Boîte CSS (Options de conception)
L'éditeur CSS intégré de WPBakery qui vous permet d'ajouter du CSS personnalisé directement à l'élément. Vous pouvez styliser :
- Marges et remplissage
- Bordures et arrière-plans
- Typographie
- Points d'arrêt réactifs
Ce CSS est limité à l'élément spécifique, il n'affectera donc pas les autres éléments de la page.
Onglet de commentaires
Tous les éléments Charitable incluent un onglet « Commentaires » dans leur panneau de paramètres. Cet onglet contient un formulaire de commentaires où vous pouvez partager :
- Suggestions de nouvelles fonctionnalités
- Idées d'éléments WPBakery supplémentaires
- Rapports de bugs ou problèmes rencontrés
- Commentaires généraux sur l'intégration
Vos commentaires nous aident à améliorer l'intégration WPBakery et à prioriser les nouvelles fonctionnalités. Tous les commentaires sont examinés par notre équipe de développement.
Remarque : Le formulaire de commentaires s'ouvre dans un nouvel onglet, vous ne perdrez donc pas votre travail dans l'éditeur WPBakery.
Notes pour les développeurs
Détails techniques
- Tous les éléments Charitable utilisent des shortcodes WPBakery standard qui peuvent être personnalisés par programmation
- Les éléments peuvent être stylisés à l'aide des méthodes CSS WordPress standard (feuilles de style du thème, personnaliseur ou CSS en ligne via les options de conception)
- L'intégration respecte les limitations du mode aperçu de WPBakery pour les performances et la sécurité
- Tous les éléments sont entièrement réactifs et fonctionnent avec les fonctionnalités de conception réactive de WPBakery
Équivalents de shortcodes
Chaque élément WPBakery correspond à un shortcode Charitable :
- Campagne Charitable →
[campaign id="123"] - Formulaire de don Charitable →
[charitable_donation_form campaign_id="123"] - Bouton de don Charitable →
[charitable_donate_button campaign="123"] - Campagnes Charitable →
[campaigns number="6" columns="2"]
Vous pouvez utiliser ces shortcodes directement dans votre contenu si vous préférez, ou les personnaliser par programmation dans les fichiers PHP de votre thème.
Personnalisation via CSS
Tous les éléments peuvent être personnalisés à l'aide de CSS. Voici quelques approches de personnalisation courantes :
- Nom de classe supplémentaire : Ajoutez une classe, puis ciblez-la dans la feuille de style de votre thème
- Options de conception : Utilisez la boîte CSS de WPBakery pour le style spécifique à l'élément
- Feuille de style du thème : Ciblez les classes par défaut de Charitable (par exemple,
.charitable-campaign,.charitable-donation-form) - Thème enfant : Remplacez les modèles Charitable si vous avez besoin d'une personnalisation plus poussée
Limitations connues
Limitations du mode aperçu
Pour des raisons de sécurité et de performances, certaines fonctionnalités fonctionnent différemment dans le mode aperçu de WPBakery par rapport au frontend :
- Formulaires de don : Les formulaires sont affichés comme des aperçus en lecture seule dans l'éditeur. Les visiteurs peuvent interagir normalement avec les formulaires sur le frontend.
- Formulaires en plusieurs étapes : Seule la première étape est affichée dans l'aperçu. Toutes les étapes sont disponibles sur le frontend.
- Méthodes de paiement : La sélection de la passerelle de paiement n'est pas affichée dans l'aperçu (un message d'espace réservé est affiché). Les options de paiement complètes apparaissent sur le frontend.
- Interactions avec le formulaire : Les champs du formulaire ne peuvent pas être remplis ni soumis en mode aperçu. Ceci est intentionnel pour des raisons de sécurité.
Important : Testez toujours les formulaires de don sur le frontend pour vous assurer que le processus de don complet fonctionne correctement.
Considérations relatives aux performances
- Les listes de campagnes sont limitées à 6 campagnes dans l'aperçu WPBakery pour des raisons de performances
- La pagination est désactivée en mode aperçu
- Certaines fonctionnalités JavaScript peuvent être désactivées dans l'aperçu pour éviter les conflits avec l'éditeur de WPBakery
Dépannage
Éléments non affichés dans WPBakery
- Vérifier la version de WPBakery : Assurez-vous d'exécuter WPBakery 6.0 ou une version ultérieure. Les versions antérieures ne sont pas prises en charge.
- Vérifier la version Pro de Charitable : Assurez-vous d'exécuter Charitable Pro 1.8.10.5 ou une version ultérieure.
- Vider le cache : Videz tous les plugins de cache et le cache du navigateur, puis actualisez l'éditeur WPBakery.
- Vérifier la catégorie : Recherchez la catégorie « Charitable » dans le sélecteur d'éléments (pas « Contenu » ou d'autres catégories).
Aperçu du formulaire non fonctionnel
- Vérifier les paramètres de la campagne : Assurez-vous que la campagne sélectionnée a un formulaire de don activé dans ses paramètres.
- Vérifier le type de formulaire : Vérifiez si la campagne utilise un formulaire visuel ou un formulaire hérité dans l'éditeur de campagne.
- Limitations de l'aperçu : N'oubliez pas que les formulaires sont en lecture seule dans l'aperçu. Testez sur le frontend pour une fonctionnalité complète.
Style non appliqué
- Vérifier la spécificité CSS : Votre CSS personnalisé peut nécessiter une spécificité plus élevée pour remplacer les styles par défaut.
- Utiliser les options de conception : Essayez d'utiliser la boîte CSS de WPBakery (Options de conception) pour un style spécifique à l'élément.
- Vider le cache : Videz le cache du navigateur et de WordPress pour voir les changements de style.
- Vérifier les conflits de thème : Certains thèmes peuvent remplacer les styles de Charitable. Utilisez les outils de développement du navigateur pour inspecter les éléments.
Campagnes non affichées
- Vérifier les filtres : Examinez vos options de filtrage (catégories, étiquettes, listes d'exclusion) – elles peuvent être trop restrictives.
- Vérifier le statut de la campagne : Assurez-vous que les campagnes sont publiées. Les campagnes non publiées n'apparaîtront pas à moins que « Inclure les inactives » ne soit coché.
- Vérifier le paramètre Nombre : Vérifiez que le paramètre « Nombre de campagnes » n'est pas défini sur 0.
Commentaires et suggestions
Nous travaillons constamment à améliorer l'intégration WPBakery en fonction des commentaires des utilisateurs. Votre contribution nous aide à prioriser les nouvelles fonctionnalités et améliorations.
Comment soumettre vos commentaires
Vous pouvez soumettre vos commentaires de deux manières :
- Via les paramètres de l'élément : Ouvrez n'importe quel élément Charitable dans WPBakery, cliquez sur l'onglet « Commentaires » et utilisez le formulaire de commentaires.
- Via le support : Contactez notre équipe de support avec vos suggestions ou demandes de fonctionnalités.
Ce que nous recherchons
Nous aimerions connaître vos idées pour :
- Nouveaux éléments : Quels éléments Charitable supplémentaires seraient utiles dans WPBakery ?
- Améliorations des fonctionnalités : Comment pouvons-nous améliorer les éléments existants ?
- Options d'affichage : Quelles nouvelles options d'affichage ou de mise en page trouveriez-vous utiles ?
- Améliorations de l'intégration : Qu'est-ce qui rendrait l'intégration plus facile à utiliser ?
- Améliorations du flux de travail : Comment pouvons-nous rationaliser votre flux de travail lors de la création de pages de dons ?
Plans d'expansion futurs
Sur la base des commentaires des utilisateurs, nous envisageons d'ajouter :
- Dispositions supplémentaires d'affichage de campagne
- Plus d'options de filtrage et de tri
- Options de modèle personnalisées
- Intégration avec les fonctionnalités avancées de WPBakery
Vous avez une suggestion ? Nous voulons l'entendre ! Utilisez l'onglet Commentaires dans n'importe quel élément Charitable ou contactez notre équipe de support.
Merci !
Merci d'utiliser Charitable Pro avec WPBakery Page Builder. Vos commentaires et suggestions nous aident à créer de meilleurs outils pour la collecte de fonds et pour faire une différence dans le monde.
Support et ressources
- Documentation Charitable Pro : https://www.wpcharitable.com/documentation/
- Forums de support : Obtenez de l'aide de la communauté et de notre équipe de support
- Documentation WPBakery : En savoir plus sur les fonctionnalités de WPBakery Page Builder
