Möchten Sie, dass Ihr Spendenformular tatsächlich so aussieht, als würde es zu Ihrer gemeinnützigen Organisation gehören, anstatt wie ein generisches Add-on, das auf Ihre Kampagnenseite aufgeschraubt wurde?

Der Stile-Tab im Kampagnen-Builder ermöglicht es Ihnen, Farben, Schriftarten und feldspezifische Stile für jede Kampagne festzulegen, ohne eine einzige Zeile CSS zu schreiben.

Was dieser Leitfaden enthält?

Öffnen des Stile-Tabs

Der Stile-Tab befindet sich im Design-Panel des Kampagnen-Builders.

1. Gehen Sie in wp-admin zu Kampagnen und öffnen Sie die Kampagne, die Sie gestalten möchten, oder erstellen Sie eine neue.
2. Klicken Sie auf Mit Builder bearbeiten.
3. Öffnen Sie im Builder das Design-Panel auf der rechten Seite und klicken Sie dann auf den Stile-Tab. Suchen Sie nach dem NEU-Badge daneben, zusammen mit Allgemein, Tabs und Erweitert.

Wichtiger Hinweis: Der Kampagnen-Builder, einschließlich des Stile-Tabs, erfordert Charitable Pro 1.8.17 oder neuer.

Auswählen einer Design-Vorgabe

Oben im Stile-Tab finden Sie unter Globale Stile vier Design-Vorgaben: Lila Fett, Ozeanblau, Waldgrün und Fett Rot.

Klicken Sie auf eine beliebige Vorgabe, um einen koordinierten Satz von Farben, Typografie und Animationen mit einem Klick auf die gesamte Kampagne anzuwenden. Eine Vorgabe ist ein Ausgangspunkt, keine endgültige Antwort. Wählen Sie diejenige aus, die Ihrer Marke am nächsten kommt, und verfeinern Sie dann die globalen Farben, Typografie und Animationen darunter.

[Screenshot: globale Stile Design-Vorgaben.png: der Abschnitt Globale Stile, der die vier Design-Vorgabe-Optionen zeigt]

Festlegen Ihrer globalen Farben

Globale Farben sind die Palette, aus der Ihre gesamte Kampagne schöpft. Legen Sie sie einmal fest und sie fließt in jedes Feld ein, das keine eigene Überschreibung hat.

Sie finden neun globale Farben, jede mit einer Farbfeld- und einem Hex-Wert-Feld:

• Primär: Ihre Hauptmarkenfarbe, die für Akzente und Hervorhebungen verwendet wird
• Sekundär: eine unterstützende Farbe, die für Dinge wie Akzentrahmen verwendet wird
• Hintergrund: die Hintergrundfarbe des Formulars
• Text: die Standardtextfarbe im gesamten Formular
• Schaltflächenhintergrund: die Füllfarbe für die Spenden-Schaltfläche
• Button-Text: Die Beschriftungsfarbe auf der Spenden-Schaltfläche
• Fortschrittsbalken: Die Füllfarbe des Spenden-Fortschrittsbalkens
• Tab-Hintergrund: Die Hintergrundfarbe für Spenden-Tabs
• Tab-Text: Die Beschriftungsfarbe auf Spenden-Tabs

Klicken Sie auf eine Farbprobe, um die Farbauswahl zu öffnen, oder geben Sie direkt einen Hex-Wert in das Feld daneben ein.

Profi-Tipp: Wenn Sie Kampagnen für mehrere Zwecke auf einer Website verwalten, geben Sie jeder Kampagne ihre eigenen globalen Farben, anstatt sich auf eine gemeinsame Farbpalette zu verlassen. Eine Katastrophenhilfe-Kampagne und ein Stipendienfonds müssen nicht gleich aussehen.

Festlegen von Typografie und Animationen

Unter den globalen Farben steuert der Abschnitt Typografie die Schriftarten und Größen für das gesamte Formular.

• Schriftfamilie: Wählen Sie Standard des Themas, Sans-Serif, Serif oder Monospace
• Überschriften-Größe: Wählen Sie Klein, Mittel oder Groß
• Textkörper-Größe: Wählen Sie Klein, Mittel oder Groß

Unter Typografie steuert der Abschnitt Animationen, wie sich das Formular und der Fortschrittsbalken bewegen. Wählen Sie Keine, Dezent oder Fließend.

Profi-Tipp: Wenn Sie oder Ihre Spender reduzierte Bewegungen bevorzugen, stellen Sie Animationen auf Keine. Der Builder berücksichtigt diese Wahl überall dort, wo sich das Formular und der Fortschrittsbalken sonst bewegen würden.

Gestalten einzelner Felder

Globale Farben und Typografie legen das Gesamterscheinungsbild fest. Wenn ein bestimmtes Feld hervorstechen oder sich einfügen soll, klicken Sie direkt auf dieses Feld in der Live-Vorschau, um seine eigenen Feld-Stile zu öffnen.

Die genauen Steuerelemente ändern sich je nach Feldtyp, aber hier sind die, die Sie bei den gängigsten finden.

Text- und Listenfelder

Klicken Sie in der Vorschau auf ein Text- oder Listenfeld, und Sie sehen drei Gruppen von Steuerelementen: Überschrift, Textkörper und Feld-Stile.

• Überschrift: Farbe und Schriftgröße
• Textkörper: Farbe, Schriftgröße und Zeilenhöhe
• Feld-Stile: Hintergrundfarbe, Rahmenstil (Kein Rahmen, Nur linker Rahmen oder Vollständiger Rahmen), Rahmenfarbe, Rahmenbreite, Radius des Rahmens und Textausrichtung

Spenden-Button

Klicken Sie auf die Schaltfläche Spenden in der Vorschau, um ihre Hintergrundfarbe, Textfarbe, den Radius des Rahmens, die Texttransformation (z. B. Großbuchstaben) und die Schriftgröße festzulegen.

Fotos

Klicken Sie auf ein Foto-Feld, um seinen Foto-Rahmen festzulegen: Rahmenfarbe, Rahmengröße und Radius des Rahmens.

Fortschrittsbalken

Klicken Sie auf den Fortschrittsbalken, um seine Balkenfarbe, Balkenhöhe und Überschriftenfarbe festzulegen.

Die gleiche Art von feldspezifischem Styling erreicht auch Countdown-Zähler, Spenden-Tabs und andere Feldtypen, sodass nichts im Formular fehl am Platz ist.

Verstehen von benutzerdefinierten vs. geerbten Stilen

Neben einigen Farbsteuerungen in den Feld-Stilen sehen Sie ein kleines Tag, auf dem entweder BENUTZERDEFINIERT oder GEERBT steht.

• GEERBT bedeutet, dass das Feld seine Farbe von den globalen Farben bezieht. Ändern Sie die globale Farbe, und dieses Feld wird automatisch aktualisiert.
• BENUTZERDEFINIERT bedeutet, dass Sie eine Überschreibung für dieses spezielle Feld festgelegt haben. Es ändert sich nicht, wenn Sie die globalen Farben aktualisieren.

Zum Beispiel zieht der Akzentrand eines Listenfeldes automatisch die Sekundärfarbe Ihrer Kampagne, sodass es als VERERBT angezeigt wird, bis Sie ihm eine eigene Farbe zuweisen. So können Sie eine Palette einmal festlegen und die meisten Felder passen sich an, während Sie immer noch die Möglichkeit haben, jedes einzelne Feld individuell zu gestalten.

Speichern und Vorschauen Ihrer Änderungen

Jede Änderung im Tab „Stile“ aktualisiert die Live-Vorschau daneben sofort. Es gibt keinen separaten Vorschau-Button und nichts, was aktualisiert werden müsste.

Wichtig: Die Live-Vorschau zeigt Ihre Änderungen sofort an, aber sie werden erst auf der veröffentlichten Kampagnenseite angewendet, wenn Sie auf Speichern klicken.

Was passiert mit bestehenden Kampagnen

Wenn Sie eine Kampagne erstellt haben, bevor es den Tab „Stile“ gab, müssen Sie nichts tun. Ihre Kampagne wurde automatisch in das neue Styling-System migriert, ohne Datenverlust, und behält ihr ursprüngliches Aussehen, bis Sie entscheiden, den Tab „Stile“ zu öffnen und etwas zu ändern.

Für Entwickler und Agenturen

Alles, was Sie im Tab „Stile“ festlegen, wird in einem einzigen campaign_style_tokens Meta-Wert als Design-Tokens gespeichert, nicht als verstreute Inline-Stile. Das hält die Ausgabe sauber und macht das Styling einer Kampagne leicht lesbar, verschiebbar oder woanders wiederverwendbar.

Wenn Sie für Kunden entwickeln, können Sie den Tab „Stile“ mit eigenen Steuerelementen erweitern:

• Registrieren Sie benutzerdefinierte Steuerelemente pro Feld in JavaScript über window.charitableDesignFieldControls.
• Haken Sie in das serverseitige Rendering mit den Aktionen charitable_design_styles_global und charitable_design_styles_field ein.

Nichts davon ist erforderlich, um den Tab „Stile“ im täglichen Gebrauch zu nutzen. Er ist für Agenturen und Entwickler gedacht, die weiter gehen wollen.

FAQs zum Stile-Tab

Benötigt dies Charitable Pro?

Ja. Der Kampagnen-Builder, einschließlich des Tabs „Stile“, ist eine Funktion von Charitable Pro und erfordert Charitable Pro 1.8.17 oder neuer.

Wird es bereits erstellte Kampagnen verändern?

Nein. Bestehende Kampagnen behalten ihr aktuelles Aussehen. Sie werden automatisch in das Styles-System migriert, ohne Datenverlust, und bleiben genau so, wie sie waren, bis Sie sie bearbeiten.

Muss ich CSS kennen?

Nein. Jede Steuerung im Tab „Stile“ ist visuell. Entwickler können ihn mit Hooks und Filtern weiter erweitern, aber Sie benötigen niemals Code, nur um ihn zu verwenden.

Wird mein Styling auf Mobilgeräten richtig aussehen?
Ja. Farben, Typografie und Feld-Styling werden alle auf das Live-Spendenformular auf jeder Bildschirmgröße übertragen.

Kann ich ein Aussehen über Kampagnen hinweg wiederverwenden?

Ja. Wenden Sie dasselbe Design-Preset und dieselben globalen Farben auf jede Kampagne an, um ein konsistentes, markenkonformes Gefühl zu erhalten. Jede Kampagne, die hervorstechen muss, kann immer noch ihre eigenen Farben und Feld-Styles verwenden.

Das ist alles! Sie haben gelernt, wie Sie den Tab „Stile“ verwenden, um ein markenkonformes Spendenformular zu gestalten, von der Gesamtpalette bis hin zu einzelnen Feldern.

Als Nächstes möchten Sie vielleicht mehr über den Kampagnen-Builder erfahren oder wie Sie Ihr Spendenformular anpassen können.

Bleiben Sie verbunden für weitere Ressourcen für gemeinnützige Organisationen

Für weitere Tutorials und Videos, die auf gemeinnützige Organisationen zugeschnitten sind, abonnieren Sie unseren YouTube-Kanal. Wir veröffentlichen regelmäßig Expertentipps, Schritt-für-Schritt-Anleitungen zu Online-Spenden, Fundraising-Strategien und praktische Ressourcen, die Ihrer Organisation zum Erfolg verhelfen.

🗞️ Erhalten Sie wöchentliche Tipps und exklusive Anleitungen in Ihrem Posteingang
Melden Sie sich für unseren Newsletter an →  

🎥 Sehen Sie sich Schritt-für-Schritt-Tutorials und Erfolgsgeschichten an
Abonnieren Sie unseren YouTube-Kanal →  

👩🏽‍💻 Vernetzen Sie sich mit unserer Community und erhalten Sie tägliche Einblicke in gemeinnützige Organisationen
Folgen Sie uns auf LinkedIn →

🥳 Lustige Reels und Einblicke in gemeinnützige Organisationen
Folgen Sie uns auf Instagram → 

👀 Aufschlussreiche & unterhaltsame Videos, die Ihnen helfen, Ihre Sache voranzubringen
Folgen Sie uns auf TikTok→  

🌎 Abonnieren und folgen Sie uns für allgemeine Fundraising-Tipps
Holen Sie sich Fundraising-Tipps auf TikTok → 

Leistungsstarke Fundraising-Ressourcen

⬇️ Laden Sie bewährte Strategien, Kampagnenideen und Experten-Tools herunter
Holen Sie sich das Fundraising-Kit →  

💸 Holen Sie sich kostenlose Fundraising-Ressourcen
Besuchen Sie den Charitable Fundraising Hub →

🤔 Haben Sie Fragen zu Charitable?
Charitable FAQs →

🏎️ Probieren Sie Charitable aus
Erstellen Sie Ihre Charitable Demo →

Verstehen Sie Begriffe und Jargon von gemeinnützigen Organisationen
Glossar für gemeinnützige Organisationen→

% Suchen Sie nach Angeboten und Rabatten für gemeinnützige Organisationen?
Beste Angebote und Rabatte für gemeinnützige Organisationen →