Charitable Pro beinhaltet eine native Integration mit dem WPBakery Page Builder (früher Visual Composer), mit der Sie ganz einfach Spendenformulare, Kampagnenanzeigen und Spendenbuttons mit dem visuellen Editor von WPBakery zu Ihren Seiten hinzufügen können.
Alle Charitable-Elemente befinden sich in der Kategorie „Charitable“, wenn Sie Elemente in WPBakery hinzufügen. Klicken Sie einfach auf die Schaltfläche „+“ in WPBakery, navigieren Sie zur Kategorie Charitable und wählen Sie das benötigte Element aus.
Schnellübersicht
| Elementname | Zweck | Wichtige Einstellungen | Bester Anwendungsfall |
|---|---|---|---|
| Charitable-Kampagne | Zeigt eine einzelne Kampagne mit allen Details an | Kampagnenauswahl | Kampagnendetailseiten, hervorgehobene Kampagnenbereiche |
| Charitable-Spendenformular | Zeigt ein vollständiges Spendenformular für eine Kampagne an | Kampagnenauswahl | Dedizierte Spendenseiten, Kampagnenseiten |
| Charitable-Spenden-Button | Zeigt einen Button oder Link zur Spendenseite an | Kampagne, Button-Text, Button-Typ, Option für neues Tab | Call-to-Action-Bereiche, Sidebar-Widgets, Banner |
| Charitable-Kampagnen | Zeigt ein Raster oder eine Liste mehrerer Kampagnen an | Anzahl, Spalten, Reihenfolge, Filter, Anzeigeoptionen | Kampagnen-Listing-Seiten, Homepage-Bereiche |
Die vier Elemente
1. Charitable Kampagne
Was es tut: Zeigt eine einzelne Kampagne mit allen Informationen an, einschließlich Kampagnenbeschreibung, Fortschrittsbalken, Spendenformular (falls aktiviert) und Kampagnendetails.
Wann es verwendet werden soll: Verwenden Sie dieses Element, wenn Sie eine bestimmte Kampagne auf einer Seite hervorheben möchten. Perfekt für Kampagnendetailseiten, hervorgehobene Kampagnenbereiche oder zur Hervorhebung einer bestimmten Spendenaktion.
Einstellungen & Optionen:
Kampagne – Wählen Sie aus dem Dropdown-Menü, welche Kampagne angezeigt werden soll. Nur veröffentlichte Kampagnen sind verfügbar.
Anpassungsoptionen:
- Zusätzlicher Klassenname: Benutzerdefinierte CSS-Klassen für Styling hinzufügen
- Element-ID: Eindeutige ID für CSS-Targeting oder JavaScript zuweisen
- CSS-Box (Designoptionen): Verwenden Sie den integrierten CSS-Editor von WPBakery für benutzerdefiniertes Styling
Hinweis: Dieses Element zeigt die vollständige Kampagnenvorlage an, die alle in Ihren Kampagneneinstellungen konfigurierten Kampagneninformationen enthält.
2. Charitable Spendenformular
Was es tut: Zeigt ein vollständiges Spendenformular für eine bestimmte Kampagne an. Unterstützt sowohl visuelle Formulare (neuer Formular-Builder) als auch ältere Formulare.
Wann es verwendet werden soll: Verwenden Sie dieses Element, wenn Sie ein Spendenformular direkt auf einer Seite einbetten möchten. Ideal für spezielle Spendenseiten, Kampagnenseiten oder jede Seite, auf der Sie Spenden annehmen möchten.
Einstellungen & Optionen:
Kampagne – Wählen Sie, welches Spendenformular einer Kampagne angezeigt werden soll. Das Formular wird basierend auf den Formulareinstellungen der Kampagne konfiguriert.
Unterstützte Formulararten:
- Visuelle Formulare: Moderner Formular-Builder mit Drag-and-Drop-Feldkonfiguration
- Ältere Formulare: Traditionelles Formularlayout (wenn visuelles Formular nicht aktiviert ist)
Vorschauverhalten:
- Formulare werden im WPBakery-Editor aus Sicherheits- und Leistungsgründen als schreibgeschützte Vorschauen angezeigt
- Mehrschrittige Formulare zeigen in der Vorschau nur den ersten Schritt an
- Die Auswahl der Zahlungsmethode wird in der Vorschau nicht angezeigt (Platzhalternachricht wird angezeigt)
- Die volle Funktionalität ist im Frontend verfügbar, wenn Besucher die Seite ansehen
Anpassungsoptionen:
- Zusätzlicher Klassenname: Benutzerdefinierte CSS-Klassen für die Formulargestaltung hinzufügen
- Element-ID: Eindeutige ID für CSS-Targeting oder JavaScript zuweisen
- CSS-Box (Designoptionen): Verwenden Sie den integrierten CSS-Editor von WPBakery für benutzerdefiniertes Styling
Wichtig: Die Formularvorschau in WPBakery ist schreibgeschützt und zeigt möglicherweise nicht alle Felder an. Testen Sie immer den tatsächlichen Spendenprozess im Frontend, um sicherzustellen, dass alles korrekt funktioniert.
3. Charitable Spenden-Button
Was es tut: Erstellt einen Button oder Link, der Besucher zur Spendenseite einer Kampagne weiterleitet.
Wann es verwendet werden soll: Verwenden Sie dieses Element für Call-to-Action-Buttons, Seitenleisten-Widgets, Banner oder überall dort, wo Sie eine einfache Möglichkeit suchen, Besucher zum Spenden weiterzuleiten. Perfekt, wenn Sie nicht das vollständige Formular auf der Seite benötigen.
Einstellungen & Optionen:
Kampagne – Wählen Sie, zu welcher Kampagne der Button verlinken soll.
Button-Text – Passen Sie den Text an, der auf dem Button angezeigt wird. Standard: „Spenden“
Button-Typ – Wählen Sie, wie der Button angezeigt werden soll:
- Button – Gestalteter Button mit Hintergrund und Padding
- Link – Textlink mit Unterstreichung (keine Button-Gestaltung)
Standard: Button
In neuem Tab öffnen – Aktivieren Sie dieses Kontrollkästchen, um die Spendenseite beim Klicken in einem neuen Browser-Tab zu öffnen.
Anpassungsoptionen:
- Zusätzlicher Klassenname: Benutzerdefinierte CSS-Klassen für die Button-Gestaltung hinzufügen
- Element-ID: Eindeutige ID für CSS-Targeting oder JavaScript zuweisen
- CSS-Box (Designoptionen): Verwenden Sie den integrierten CSS-Editor von WPBakery für benutzerdefiniertes Styling
Tipp: Verwenden Sie den Schaltflächentyp „Link“ für eine dezentere Handlungsaufforderung oder den Typ „Schaltfläche“ für eine auffällige, hervorstechende Spendenaufforderung.
4. Charitable Kampagnen
Funktionsweise: Zeigt ein Raster oder eine Liste mehrerer Kampagnen mit Filter-, Sortier- und Anzeigeoptionen an.
Wann zu verwenden: Verwenden Sie dieses Element für Kampagnen-Listing-Seiten, Startseitenbereiche, die mehrere Kampagnen präsentieren, oder jede Seite, auf der Sie mehrere Spendenkampagnen gleichzeitig anzeigen möchten.
Einstellungen & Optionen:
Grundeinstellungen:
Anzahl der Kampagnen – Wie viele Kampagnen angezeigt werden sollen. Standard: Einstellung für Beiträge pro Seite Ihrer Website
Spalten – Anzahl der Spalten im Rasterlayout (1, 2, 3 oder 4). Standard: 2
Sortieren nach – Wie Kampagnen sortiert werden sollen:
- Datum – Neueste zuerst erstellt
- Beliebtheit – Meiste Spenden zuerst
- Endet bald – Kampagnen, die am schnellsten enden, zuerst
- Titel – Alphabetisch nach Kampagnenname
- Zufällig – Zufällige Reihenfolge
- Gesammelter Betrag – Höchster gesammelter Betrag zuerst
Standard: Datum
Reihenfolge – Sortierrichtung (Aufsteigend oder Absteigend). Standard: Absteigend
Filteroptionen:
Kategorien – Filtern nach Kampagnenkategorie-Slugs. Geben Sie durch Kommas getrennte Kategorie-Slugs ein (z. B. „bildung,gesundheitswesen“).
Kampagnen ausschließen – Bestimmte Kampagnen nach ID ausblenden. Geben Sie durch Kommas getrennte Kampagnen-IDs ein (z. B. „12,34,56“).
Inaktive Kampagnen einschließen – Aktivieren, um beendete oder inaktive Kampagnen in die Liste aufzunehmen.
Tags – Filtern nach Kampagnen-Tag-Slugs. Geben Sie durch Kommas getrennte Tag-Slugs ein (z. B. „dringend,vorgestellt“).
Übergeordnete Kampagnen – Nur untergeordnete Kampagnen von angegebenen übergeordneten Kampagnen-IDs anzeigen. Geben Sie durch Kommas getrennte übergeordnete Kampagnen-IDs ein (z. B. „12,34“).
Nur übergeordnete – Aktivieren, um nur oberste Kampagnen anzuzeigen (Kampagnen ohne übergeordnete).
Anzeigeoptionen:
Schaltflächentyp – Was auf jeder Kampagnenkarte angezeigt wird:
- Spenden-Schaltfläche – „Spenden“-Schaltfläche auf jeder Karte
- Weiterlesen-Link – „Weiterlesen“-Link auf jeder Karte
- Keine Schaltfläche – Keine Schaltfläche oder Link (nur die Kampagneninformationen)
Standard: Spenden-Schaltfläche
Beschreibungslimit – Maximale Zeichen für die Kampagnenbeschreibung (0-500). Standard: 100
Responsives Raster – Aktiviert ein responsives Rasterlayout, das sich an die Bildschirmgröße anpasst. Standard: Aktiviert
Masonry-Layout – Aktivieren Sie das Masonry-Grid-Layout (im Pinterest-Stil), bei dem Elemente so angeordnet werden, dass Lücken gefüllt werden.
Anpassungsoptionen:
- Zusätzlicher Klassenname: Benutzerdefinierte CSS-Klassen für die Grid-Gestaltung hinzufügen
- Element-ID: Eindeutige ID für CSS-Targeting oder JavaScript zuweisen
- CSS-Box (Designoptionen): Verwenden Sie den integrierten CSS-Editor von WPBakery für benutzerdefiniertes Styling
Tipp: Kombinieren Sie Filteroptionen, um benutzerdefinierte Kampagnenanzeigen zu erstellen. Zeigen Sie beispielsweise nur „empfohlene“ Kampagnen aus der Kategorie „Bildung“ an, sortiert nach dem gesammelten Betrag.
Gemeinsame Funktionen (Alle Elemente)
Alle vier Charitable-Elemente teilen sich diese gemeinsamen Anpassungsoptionen:
Styling-Parameter
Zusätzlicher Klassenname (el_class)
Fügen Sie dem Element eine oder mehrere benutzerdefinierte CSS-Klassen hinzu. Trennen Sie mehrere Klassen durch Leerzeichen. Dies ermöglicht es Ihnen, das Element mit benutzerdefiniertem CSS in Ihrem Theme oder über den Customizer anzusprechen.
Beispiel: meine-benutzerdefinierte-kampagne benutzerdefinierter-rand
Element-ID (el_id)
Weisen Sie dem Element ein eindeutiges HTML-ID-Attribut zu. Dies ist nützlich für:
- CSS-Targeting mit
#ihre-id - JavaScript-Interaktionen
- Ankerlinks (Sprung zu einem Abschnitt auf der Seite)
Wichtig: IDs müssen auf der Seite eindeutig sein. Verwenden Sie nicht dieselbe ID für mehrere Elemente.
CSS-Box (Designoptionen)
WPBakeries integrierter CSS-Editor, mit dem Sie benutzerdefiniertes CSS direkt zum Element hinzufügen können. Sie können Folgendes gestalten:
- Ränder und Abstände
- Rahmen und Hintergründe
- Typografie
- Responsive Breakpoints
Dieses CSS ist auf das spezifische Element beschränkt, sodass es keine anderen Elemente auf der Seite beeinflusst.
Feedback-Tab
Alle Charitable-Elemente enthalten einen „Feedback“-Tab in ihrem Einstellungsfenster. Dieser Tab enthält ein Feedback-Formular, in dem Sie Folgendes mitteilen können:
- Vorschläge für neue Funktionen
- Ideen für zusätzliche WPBakery-Elemente
- Fehlerberichte oder Probleme, auf die Sie gestoßen sind
- Allgemeines Feedback zur Integration
Ihr Feedback hilft uns, die WPBakery-Integration zu verbessern und neue Funktionen zu priorisieren. Jedes Feedback wird von unserem Entwicklungsteam geprüft.
Hinweis: Das Feedback-Formular wird in einem neuen Tab geöffnet, sodass Sie Ihre Arbeit im WPBakery-Editor nicht verlieren.
Entwicklerhinweise
Technische Details
- Alle Charitable-Elemente verwenden Standard-WPBakery-Shortcodes, die programmatisch angepasst werden können
- Elemente können mit Standard-WordPress-CSS-Methoden gestaltet werden (Theme-Stylesheets, Customizer oder Inline-CSS über Design-Optionen)
- Die Integration respektiert die Einschränkungen des WPBakery-Vorschaumodus für Leistung und Sicherheit
- Alle Elemente sind vollständig responsiv und funktionieren mit den responsiven Designfunktionen von WPBakery
Shortcode-Entsprechungen
Jedes WPBakery-Element entspricht einem Charitable-Shortcode:
- Charitable-Kampagne →
[campaign id="123"] - Charitable Spendenformular →
[charitable_donation_form campaign_id="123"] - Charitable Spenden-Button →
[charitable_donate_button campaign="123"] - Charitable Kampagnen →
[campaigns number="6" columns="2"]
Sie können diese Shortcodes auch direkt in Ihrem Inhalt verwenden, wenn Sie dies bevorzugen, oder sie programmatisch in den PHP-Dateien Ihres Themes anpassen.
Anpassung über CSS
Alle Elemente können mit CSS angepasst werden. Hier sind einige gängige Anpassungsansätze:
- Zusätzlicher Klassenname: Fügen Sie eine Klasse hinzu und zielen Sie dann in der Stylesheet Ihres Themes darauf ab
- Design-Optionen: Verwenden Sie die CSS-Box von WPBakery für element-spezifisches Styling
- Theme-Stylesheet: Zielen Sie auf die Standardklassen von Charitable (z. B.
.charitable-campaign,.charitable-donation-form) - Child Theme: Überschreiben Sie Charitable-Vorlagen, wenn Sie umfangreichere Anpassungen benötigen
Bekannte Einschränkungen
Einschränkungen im Vorschaumodus
Aus Sicherheits- und Leistungsgründen funktionieren einige Funktionen im Vorschaumodus von WPBakery anders als im Frontend:
- Spendenformulare: Formulare werden im Editor als schreibgeschützte Vorschauen angezeigt. Besucher können mit Formularen im Frontend normal interagieren.
- Mehrstufige Formulare: Im Vorschaumodus wird nur der erste Schritt angezeigt. Alle Schritte sind im Frontend verfügbar.
- Zahlungsmethoden: Die Auswahl der Zahlungsgateways wird in der Vorschau nicht angezeigt (eine Platzhalternachricht wird angezeigt). Vollständige Zahlungsoptionen werden im Frontend angezeigt.
- Formularinteraktionen: Formularfelder können im Vorschaumodus nicht ausgefüllt oder gesendet werden. Dies ist aus Sicherheitsgründen beabsichtigt.
Wichtig: Testen Sie Spendenformulare immer im Frontend, um sicherzustellen, dass der gesamte Spendenprozess korrekt funktioniert.
Leistungsaspekte
- Kampagnenlisten sind in der WPBakery-Vorschau aus Leistungsgründen auf 6 Kampagnen beschränkt
- Die Paginierung ist im Vorschaumodus deaktiviert
- Einige JavaScript-Funktionen können in der Vorschau deaktiviert sein, um Konflikte mit dem Editor von WPBakery zu vermeiden
Fehlerbehebung
Elemente werden in WPBakery nicht angezeigt
- WPBakery-Version prüfen: Stellen Sie sicher, dass Sie WPBakery 6.0 oder höher verwenden. Ältere Versionen werden nicht unterstützt.
- Charitable Pro-Version prüfen: Stellen Sie sicher, dass Sie Charitable Pro 1.8.10.5 oder höher verwenden.
- Cache leeren: Leeren Sie alle Caching-Plugins und den Browser-Cache, und aktualisieren Sie dann den WPBakery-Editor.
- Kategorie prüfen: Suchen Sie nach der Kategorie „Charitable“ im Element-Auswahlfeld (nicht nach „Inhalt“ oder anderen Kategorien).
Formularvorschau funktioniert nicht
- Kampagneneinstellungen prüfen: Stellen Sie sicher, dass für die ausgewählte Kampagne ein Spendenformular in den Einstellungen aktiviert ist.
- Formular-Typ prüfen: Überprüfen Sie, ob die Kampagne im Kampagnen-Editor ein visuelles Formular oder ein Legacy-Formular verwendet.
- Vorschau-Einschränkungen: Denken Sie daran, dass Formulare in der Vorschau schreibgeschützt sind. Testen Sie im Frontend für die volle Funktionalität.
Styling wird nicht angewendet
- CSS-Spezifität prüfen: Möglicherweise ist eine höhere Spezifität für Ihr benutzerdefiniertes CSS erforderlich, um Standardstile zu überschreiben.
- Design-Optionen verwenden: Versuchen Sie, die CSS-Box von WPBakery (Design-Optionen) für element-spezifisches Styling zu verwenden.
- Cache leeren: Leeren Sie den Browser- und WordPress-Cache, um Stiländerungen zu sehen.
- Theme-Konflikte prüfen: Einige Themes überschreiben möglicherweise Charitable-Stile. Verwenden Sie die Entwicklertools des Browsers, um Elemente zu inspizieren.
Kampagnen werden nicht angezeigt
- Filter prüfen: Überprüfen Sie Ihre Filteroptionen (Kategorien, Tags, Ausschlusslisten) – sie sind möglicherweise zu restriktiv.
- Kampagnenstatus prüfen: Stellen Sie sicher, dass Kampagnen veröffentlicht sind. Nicht veröffentlichte Kampagnen werden nicht angezeigt, es sei denn, „Inaktive einschließen“ ist aktiviert.
- Zahleneinstellung prüfen: Überprüfen Sie, ob die Einstellung „Anzahl der Kampagnen“ nicht auf 0 gesetzt ist.
Feedback & Vorschläge
Wir arbeiten ständig daran, die WPBakery-Integration basierend auf Benutzerfeedback zu verbessern. Ihr Input hilft uns, neue Funktionen und Verbesserungen zu priorisieren.
So übermitteln Sie Feedback
Sie können Feedback auf zwei Arten übermitteln:
- Über Element-Einstellungen: Öffnen Sie ein beliebiges Charitable-Element in WPBakery, klicken Sie auf die Registerkarte „Feedback“ und verwenden Sie das Feedback-Formular.
- Über den Support: Kontaktieren Sie unser Support-Team mit Ihren Vorschlägen oder Funktionswünschen.
Was wir suchen
Wir würden uns freuen, Ihre Ideen zu hören für:
- Neue Elemente: Welche zusätzlichen Charitable-Elemente wären in WPBakery nützlich?
- Funktionsverbesserungen: Wie können wir bestehende Elemente verbessern?
- Anzeigeoptionen: Welche neuen Anzeige- oder Layoutoptionen wären für Sie hilfreich?
- Integrationsverbesserungen: Was würde die Integration einfacher zu bedienen machen?
- Workflow-Verbesserungen: Wie können wir Ihren Workflow beim Erstellen von Spenden-Seiten optimieren?
Zukünftige Erweiterungspläne
Basierend auf dem Feedback der Benutzer erwägen wir Folgendes hinzuzufügen:
- Zusätzliche Kampagnen-Anzeigelayouts
- Weitere Filter- und Sortieroptionen
- Benutzerdefinierte Vorlagenoptionen
- Integration mit den erweiterten Funktionen von WPBakery
Haben Sie einen Vorschlag? Wir wollen ihn hören! Nutzen Sie den Feedback-Tab in jedem Charitable-Element oder kontaktieren Sie unser Support-Team.
Vielen Dank!
Vielen Dank, dass Sie Charitable Pro mit dem WPBakery Page Builder verwenden. Ihr Feedback und Ihre Vorschläge helfen uns, bessere Werkzeuge für das Fundraising und zur positiven Veränderung der Welt zu schaffen.
Support & Ressourcen
- Charitable Pro Dokumentation: https://www.wpcharitable.com/documentation/
- Support-Foren: Holen Sie sich Hilfe von der Community und unserem Support-Team
- WPBakery Dokumentation: Erfahren Sie mehr über die Funktionen des WPBakery Page Builders
