Elements erstellen und verwenden
Geändert am: Do, 3 Sep, 2026 um 4:33 NACHMITTAGS
INHALTSVERZEICHNIS
- Was sind Elements?
- Element erstellen
- Element auf Deiner Webseite einbinden
- Elements verwalten
- Spendenbutton erstellen und gestalten
- QR-Code erstellen und herunterladen
- Häufige Probleme
Mit Elements ergänzt Du Deine Spendenformulare um zusätzliche Funktionen für Deine Webseite. In diesem Artikel erfährst Du, wie Du Elements erstellst, konfigurierst, einbindest und verwaltest. Aktuell stehen Dir unter anderem Spendenbuttons und QR-Codes zur Verfügung.
Artikel für bisherige Spendenformulare
Dieser Hilfe-Artikel beschreibt unsere bisherigen Spendenformulare. Du nutzt bereits die neue Donation Form Suite? Dann findest Du hier den passenden Hilfe-Artikel.
Was sind Elements?
Elements sind zusätzliche Anwendungselemente für Deine Spendenformulare. Du kannst sie auf Deiner Webseite einsetzen, um Spender*innen weitere Möglichkeiten rund um Dein Spendenformular anzubieten.
Die verfügbaren Element-Typen werden im Laufe der Zeit um weitere Optionen ergänzt.
Element erstellen
In der Elements-Übersicht kannst Du ein neues Element anlegen und anschließend konfigurieren.
- Öffne links im Menü Elements.
- Wähle den Element-Typ aus, den Du erstellen möchtest.
- Klicke beim gewünschten Element auf Jetzt erstellen!.
- Nimm die Einstellungen für das Element vor.
- Speichere Deine Konfiguration.
Element auf Deiner Webseite einbinden
Nachdem Du ein Element konfiguriert und gespeichert hast, stellt Dir die FundraisingBox den benötigten Einbettungscode zur Verfügung. Diesen fügst Du in Deine Webseite ein.
Einbettungscodes verwenden
Für die Einbindung eines Spendenbuttons benötigst Du zwei Codes:
- Kopiere den angezeigten Initial-Code (dies ist der obere Code).
- Füge ihn einmal in den
<head>-Bereich Deiner Webseite ein. Derselbe Initial-Code kann anschließend auch für weitere Spendenbutton-Elements verwendet werden. - Kopiere anschließend den individuellen Code des Elements.
- Füge diesen an der Stelle im
<body>-Bereich Deiner Webseite ein, an der das Element erscheinen soll.
Hinweis: Den konkreten Einbettungscode erhältst Du direkt in der FundraisingBox, nachdem Du Dein Element gespeichert hast.
Elements verwalten
In der Übersicht siehst Du alle Elements, die Du bereits angelegt hast. Dort kannst Du unter anderem erkennen:
- welches Element Du erstellt hast,
- ob das Element aktiv oder inaktiv ist,
- mit welchem Spendenformular es verknüpft ist,
- und das Element bearbeiten oder löschen.
Wichtig: Wird das mit einem Element verknüpfte Spendenformular deaktiviert oder gelöscht, wird auch das zugehörige Element deaktiviert.
Der Status bestimmt automatisch, ob ein eingebundenes Element auf Deiner Webseite angezeigt wird. Ein aktives Element ist sichtbar, ein inaktives Element wird ausgeblendet.
Um ein deaktiviertes Element wieder zu aktivieren, verknüpfst Du es erneut mit einem aktiven Spendenformular oder aktivierst das bereits zugeordnete Formular wieder.
Spendenbutton erstellen und gestalten
Mit dem Element-Typ Spendenbutton erstellst Du eine Schaltfläche für Deine Webseite. Klicken Besucher*innen auf den Button, wird das hinterlegte Ziel in einem neuen Tab geöffnet.
Name, Formular und Ziel-URL festlegen
- Vergib einen Namen für den Spendenbutton. Dieser dient nur Deiner internen Orientierung und ist für Spender*innen nicht sichtbar.
- Wähle das Formular aus, mit dem Du den Spendenbutton verknüpfen möchtest.
- Prüfe die Ziel-URL. Sie wird zunächst aus dem ausgewählten Spendenformular übernommen.
- Passe die Ziel-URL bei Bedarf an, beispielsweise wenn Du auf eine andere Seite verlinken oder Tracking-Parameter ergänzen möchtest.
Button-Text und Icon festlegen
Im Bereich Inhalt legst Du fest, was auf Deinem Spendenbutton angezeigt wird:
- Button-Text: Bestimmt den sichtbaren Text des Buttons.
- Button-Icon: Bestimmt, ob vor dem Text ein Icon angezeigt wird. Als Option steht unter anderem ein Herz zur Verfügung.
Design des Spendenbuttons anpassen
Im Bereich Design passt Du das Erscheinungsbild Deines Spendenbuttons an. Zu den verfügbaren Einstellungen gehören unter anderem:
- Schriftart, Schriftgröße und Schriftstil,
- Textfarbe,
- Hintergrundfarbe,
- Rahmen, Rahmenbreite und abgerundete Ecken,
- Farbe und Größe des Icons,
- Animation,
- Position auf der Webseite.
Schriftart auswählen
Für Deinen Spendenbutton kannst Du eine websichere Schriftart (Web Safe Font) auswählen. Diese Schriftarten werden von den meisten Systemen unterstützt.
Soll der Button stattdessen dieselbe Schriftart wie Deine Webseite verwenden, wähle Schriftart von eingebetteter Webseite übernehmen. Eine eigene Schriftart kannst Du über die Erweiterten Einstellungen definieren.
Animation festlegen
Mit einer Animation kannst Du die Aufmerksamkeit der Besucher*innen dezent auf den Spendenbutton lenken. Die Animation wird nach einiger Zeit wiederholt und endet nach mehreren Wiederholungen, damit sie das Nutzungserlebnis nicht dauerhaft beeinträchtigt.
Hinweis: Unterstützt ein Browser die Einstellung prefers-reduced-motion und haben Besucher*innen reduzierte Animationen aktiviert, wird die Animation des Spendenbuttons nicht abgespielt.
Position des Spendenbuttons bestimmen
Du kannst festlegen, wie der Button auf Deiner Webseite positioniert wird:
- Fließend im Seiteninhalt: Der Button wird ohne feste Position in Deinen Seiteninhalt eingebunden.
- Auf Seite fixiert: Der Button bleibt an einer festgelegten Stelle sichtbar, auch wenn Besucher*innen auf der Seite scrollen.
Tipp: Prüfe bei einer fixierten Position, ob sich an derselben Stelle bereits andere Steuerelemente Deiner Webseite befinden. Überlagerungen können die Bedienbarkeit der Elemente einschränken oder verhindern.
QR-Code erstellen und herunterladen
Mit dem Element-Typ QR-Code kannst Du einen scanbaren Code erstellen, der beispielsweise direkt zu Deinem Spendenformular führt. So können Spender*innen das gewünschte Ziel bequem mit einem Smartphone öffnen.
Viele aktuelle Smartphones können QR-Codes direkt über die Kamera erfassen. Auf älteren Geräten kann dafür eine separate QR-Code-Reader-App erforderlich sein.
Name, Formular und Ziel-URL festlegen
- Vergib einen Namen für Deinen QR-Code. Der Name dient ausschließlich Deiner internen Orientierung und wird Spender*innen nicht angezeigt.
- Wähle das Formular aus, auf das der QR-Code verlinken soll.
- Prüfe die automatisch aus dem gewählten Spendenformular übernommene Ziel-URL.
- Passe die Ziel-URL bei Bedarf an. Du kannst beispielsweise auf eine andere Seite verlinken oder Parameter für Tracking und andere Vorbelegungen ergänzen.
Design des QR-Codes anpassen
Im Bereich Design kannst Du das Aussehen Deines QR-Codes an das Design Deiner Organisation anpassen. Dafür stehen unter anderem folgende Einstellungen zur Verfügung:
- Hintergrundfarbe,
- Punktfarbe,
- Ankerfarbe außen,
- Ankerfarbe innen,
- Punktform,
- Außenabstand,
- Hintergrund abrunden,
- Abstand zwischen Punkten.
Wichtig: Achte auf einen ausreichenden Kontrast zwischen Punkten, Ankern und Hintergrund, damit der QR-Code zuverlässig gescannt werden kann.
QR-Code in der Vorschau prüfen
Die Live-Vorschau zeigt Deine Änderungen direkt an. So kannst Du das Ergebnis während der Konfiguration prüfen und das Design bei Bedarf weiter anpassen.
QR-Code herunterladen
Wenn Du Deinen QR-Code fertig konfiguriert hast, kannst Du ihn für die weitere Verwendung herunterladen.
- Prüfe Deine Einstellungen und die Vorschau.
- Klicke auf Speichern.
- Nach dem Speichern gelangst Du automatisch zum Downloadbereich.
- Wähle das gewünschte Dateiformat aus.
Der QR-Code steht Dir in drei Dateiformaten zur Verfügung:
- SVG
- PNG
- JPG
Damit kannst Du den QR-Code je nach Bedarf in digitalen Medien oder Printmedien einsetzen.
Häufige Probleme
Mein Element wird auf der Webseite nicht angezeigt
Prüfe in der Elements-Übersicht den Status des Elements und das zugehörige Spendenformular. Ist das verknüpfte Formular deaktiviert oder wurde es gelöscht, wird auch das Element deaktiviert und auf Deiner Webseite ausgeblendet.
Mein fixierter Spendenbutton überlagert andere Inhalte
Prüfe die gewählte Position des Buttons. Befindet sich dort bereits ein fixiertes Steuerelement Deiner Webseite, können sich beide Elemente überlagern. Wähle in diesem Fall eine andere Position oder binde den Button fließend in den Seiteninhalt ein.
Die Animation des Spendenbuttons wird nicht angezeigt
Wenn Besucher*innen in ihrem Browser oder Betriebssystem reduzierte Animationen aktiviert haben, kann die Animation aufgrund der Einstellung prefers-reduced-motion deaktiviert sein.
Der QR-Code lässt sich schlecht scannen
Prüfe den Kontrast zwischen Hintergrund, Punkten und Ankern. Ein ausreichender Farbkontrast ist wichtig, damit der QR-Code zuverlässig erkannt werden kann.
War diese Antwort hilfreich? Ja Nein