Charitable bietet jetzt eine native Integration mit dem Elementor Page Builder, die vier speziell entwickelte Widgets enthält, mit denen Sie professionelle Spendenseiten ohne Programmierkenntnisse erstellen können.
Diese Widgets lassen sich nahtlos in Ihre bestehenden Elementor-Designs integrieren und bieten die volle Kontrolle über Ihre Fundraising-Inhalte.
Diese Anleitung zeigt Ihnen, wie Sie die Charitable-Widgets im Elementor-Builder verwenden.
Charitable noch nicht installiert? Sie müssen es zuerst installieren. Die Funktion für Elementor-Widgets ist im Charitable Pro-Plugin enthalten).
Inhaltsverzeichnis
Charitable-Widgets in Elementor finden
Wenn Sie Seiten mit dem Elementor Page Builder erstellen, können Sie in der linken Taskleiste auf das +-Symbol klicken, um auf das Menü Elemente zuzugreifen.

Sie können nach diesen Widgets suchen. Um beispielsweise den Spenden-Button zu suchen, geben Sie einfach „Spenden“ in die Suchleiste ein, und Sie werden ihn sehen. Sie können auch nach unten scrollen, um vier vorgefertigte Charitable-Widgets zu finden, die sich nahtlos in Ihr Design integrieren:
- Kampagnen
- Spenden-Button
- Spendenformular
- Kampagnen (Galerie-Stil)

Hinzufügen des Kampagnen-Widgets
Das Kampagnen-Widget ermöglicht es Ihnen, einzelne Kampagnen mit all ihren überzeugenden Details anzuzeigen.
Um dieses Widget zu Ihrer Seite hinzuzufügen, ziehen Sie es per Drag & Drop in Ihr Design, wo es erscheinen soll.

In der linken Taskleiste können Sie einen Titel für diesen Abschnitt hinzufügen. Darunter erscheint ein Dropdown-Menü. Wählen Sie Ihre Kampagne aus, und eine Vorschau wird in Ihrem Design angezeigt.

Jetzt können Sie mit Leichtigkeit Vorschauen anzeigen, speichern und veröffentlichen.
Hinzufügen des Spenden-Button-Widgets
Dieses Spenden-Button-Widget eignet sich perfekt, um Spenden-CTAs auf Ihrer gesamten Website hinzuzufügen – in Ihrer Kopfzeile, Seitenleiste oder am Ende von Blogbeiträgen.
Um diesen einfachen „Spenden“-Button zu Ihrer Seite hinzuzufügen, ziehen Sie das Widget per Drag & Drop in Ihr Seitendesign.

Jetzt können Sie eine Beschriftung für den Button hinzufügen. Dies ist der Text, der auf dem Button angezeigt wird.
Zuvor können Sie die Kampagne auswählen, die Sie für diesen Button wünschen.

Wenn die Kampagne in einem neuen Tab geöffnet werden soll, verwenden Sie den Schalter hier, um diese Funktion zu aktivieren.
Die letzte Option hier ermöglicht es Ihnen, dieses Widget als Button oder als Linktext anzuzeigen.
Hinzufügen des Spendenformular-Widgets
Fügen Sie das Spendenformular-Widget zu Ihrem Seitendesign hinzu, indem Sie es per Drag & Drop ziehen.

Um das Formular direkt im Elementor-Builder in der Vorschau anzuzeigen (aufgrund der Funktionsweise von Formularen), klicken Sie einfach auf die Vorschau-Schaltfläche oder veröffentlichen Sie, um es live zu sehen.

Sie können Ihr Seitendesign in der Vorschau anzeigen oder auf die Schaltfläche „Veröffentlichen“ klicken, um Ihr Formular in Aktion zu sehen.
Hinzufügen des Kampagnen-Widgets
Das Kampagnen-Widget ermöglicht es Ihnen, eine Galerie Ihrer Kampagnen zu erstellen. So können Spender alle Kampagnen sehen, die Sie präsentieren möchten, und entsprechend ihrer Leidenschaft und Neigung spenden.

Wenn Sie das Kampagnen-Widget zu Ihrer Seite hinzufügen, sehen Sie alle Ihre Kampagnen wie folgt mit Optionen zur Bearbeitung der Galerie in der linken Taskleiste:

In dieser Taskleiste können Sie die Einstellungen anpassen:
- Anzahl der anzuzeigenden Kampagnen
- Sortieren nach Datum, Beliebtheit, bald endend, Titel oder Zufall
- Sortieren in aufsteigender oder absteigender Reihenfolge
- Kategorien hinzufügen
- Von bestimmten Benutzern erstellte Kampagnen anzeigen
- Bestimmte Kampagnen bei Bedarf ausschließen
- Inaktive Kampagnen einschließen/ausschließen
- Spaltenlayout (2, 3, 4 Spalten)
Mit diesem Widget können Sie alle Arten von gefilterten Ansichten erstellen, um die Kampagnenübersicht zu erstellen, die Sie benötigen.
Das Kampagnen-Widget hilft dabei, Ihre Projekte und Spendenaktionen zu organisieren und zu präsentieren. Hier sind einige Möglichkeiten, wie Sie dieses Widget auf Seiten verwenden können:
- Kampagnen-Galerie
- Spendenmöglichkeiten
- Partnerprojekte
- Gemeinschaftskooperationen
- Gesponserte Kampagnen
- Peer-to-Peer-Spendenaktionen
- Botschafter-Kampagnen
- Verdoppeln Sie Ihre Wirkung
- Fokus auf Anliegen
Nun haben Sie gelernt, wie Sie diese Widgets zu Ihren Seiten in Elementor hinzufügen. Als Nächstes lernen wir, wie Sie sie gestalten.
Styling der Charitable-Widgets in Elementor
Für alle vier Widgets können Sie sie mit den regulären Elementor-Styling-Optionen gestalten.
Unter dem Tab Stil oder Erweitert stehen Standard-Elementor-Button-Styling-Optionen zur Verfügung.

Hier können Sie:
- Farben, Typografie, Abstände, Rahmen ändern
- Ausrichtung, Breite, Größe, Position ändern
- Hover-Effekte und Animationen hinzufügen
- CSS-ID und Klassen hinzufügen
- Den Hintergrund ändern
Sobald Sie Ihr Widget hinzugefügt und angepasst haben, stellen Sie sicher, dass Sie Ihre Änderungen speichern. Vorschau und Veröffentlichung Ihrer Seite in Elementor.
Das ist alles. Sie wissen nicht, wie Sie eine Spendenaktion erstellen? Erfahren Sie So richten Sie Ihre erste Kampagne ein »


