Wir haben etwas in den Spendenformularen unserer Nutzer bemerkt: Wir sehen, dass sich die Leute viel Mühe mit ihrer Kampagnenseite geben, und das Spendenformular, das sich direkt in der Mitte befand, sah aus, als würde es zu einer anderen Website gehören.

Falsches Blau, falsche Ecken, keinerlei Bezug zum Logo drei Zoll darüber.

Wir wollten es für jeden in Ihrer gemeinnützigen Organisation so einfach wie möglich machen, ein Formular einzurichten, das aussieht, als würde es auf Ihre Website gehören.

Deshalb haben wir die meiste Zeit dieser Version darauf verwendet. Es heißt der Stile-Tab, er befindet sich im Kampagnen-Builder und ist die Schlagzeile von Charitable Pro 1.8.17. 🎨

Im Kampagnen-Builder sehen Sie ihn direkt neben dem Tab „Allgemein“. Lassen Sie uns eintauchen, was er für Sie tun kann.

Warum das Aussehen Ihres Formulars darüber entscheidet, ob Menschen spenden

Hier ist die Sache, die mich beim Erstellen immer wieder beschäftigt hat: Vertrauen ist im Grunde die gesamte Transaktion online. Niemand kann Ihnen die Hand schütteln oder Ihre Körpersprache lesen, bevor er eine Kartennummer übergibt, also muss die Seite diese Arbeit stattdessen leisten. Ein Formular, das seltsam aussieht, als wäre es ein nachträglicher Einfall, der an Ihre Website angehängt wurde, erzeugt eine halbe Sekunde Zweifel genau dann, wenn Sie das Gegenteil brauchen.

Bei vielen Fundraising-Tools bedeutete die Schließung dieser Lücke benutzerdefiniertes CSS, einen Entwickler oder ein Support-Ticket, weshalb so viele gute Kampagnen mit einem Formular versendet werden, das fast, aber nicht ganz, zur Marke Ihrer gemeinnützigen Organisation passt.

Ich wollte, dass Charitable dieses Problem nie für Sie verursacht. Die Designkontrolle befindet sich jetzt im Builder, neben allem anderen, was Sie bereits verwalten, sodass „markengerecht“ einfach zum Standard wird.

In Aktion sehen

So sieht es aus, wenn Sie es zum ersten Mal öffnen:

Wann Sie den Unterschied spüren werden

Ein paar der Momente, die ich beim Erstellen im Sinn hatte:

🎯 Ein Marken-Refresh: Neues Logo und neue Farben in diesem Jahr? Wenden Sie Ihre Palette einmal als globale Farben an und jedes Feld passt sich an, ohne seitenweise Bearbeitung.
🏢 Mehrere Anliegen, eine Website: Geben Sie Ihrer Katastrophenhilfe-Kampagne ein dringendes Rot und Ihrem Stipendienfonds ein ruhiges Grün, die jeweils zu ihrer eigenen Botschaft passen.
✨ Ein herausragender Jahresendappell: Gestalten Sie das Formular neu, um es zu einem besonderen Moment zu machen, mit einem kräftigen Akzent auf dem Spenden-Button und einem hervorgehobenen vorgeschlagenen Betrag.
🤝 Kundenarbeit bei einer Agentur: Geben Sie jedem Kunden ein Formular, das zu seiner Marke passt, ohne für jede Website eine Zeile benutzerdefinierten CSS zu schreiben.
♿ Ein barrierebewusstes Team: Reduzieren Sie die Bewegung auf null und lassen Sie den Builder Besucher ehren, die reduzierte Bewegung bevorzugen, automatisch.

Design ohne Entwickler

Der Tab "Styles" befindet sich im Design-Panel des Campaign Builders. Halten Sie Ausschau nach dem NEU-Badge, wenn Sie ihn nicht sofort finden. Jede Änderung, die Sie vornehmen, wird sofort in der Live-Vorschau daneben angezeigt. Keine Speichertaste, kein Aktualisieren, kein Rätselraten, ob es tatsächlich funktioniert hat.

Wir haben 4 Voreinstellungen mitgeliefert, weil wir nicht wollten, dass das Erste, was Sie sehen, eine leere Seite ist: Purple Bold, Ocean Blue, Forest Green und Bold Red. Wählen Sie eine aus und Sie erhalten ein koordiniertes Set aus Farben, Typografie und Animationen mit einem einzigen Klick, etwas Greifbares zum Reagieren und Anpassen, anstatt bei Null anzufangen.

Von dort aus haben Sie 9 globale Farben, die Sie selbst gestalten können: Primär, Sekundär, Hintergrund, Text, Schaltflächenhintergrund, Schaltflächentext, Fortschrittsbalken und die Farben des Spenden-Tabs. Legen Sie sie einmal fest und sie fließen in jede Kampagne ein. Typografie funktioniert auf die gleiche Weise. Wählen Sie eine Schriftfamilie (Theme Standard, Sans-Serif, Serif oder Monospace) und legen Sie die Größen für Überschriften und Textkörper auf Klein, Mittel oder Groß fest.

Animationen erhalten ebenfalls drei Optionen: Keine, Subtil oder Sanft, für die Bewegung des Formulars und des Fortschrittsbalkens. Ich gebe zu, ich bin immer wieder zu diesem Tab zurückgekehrt, als ich ihn erstellt habe, hauptsächlich weil das Beobachten einer Farbaktualisierung in Echtzeit nie wirklich langweilig wurde.

Einzelne Felder gestalten, bis ins Detail

Manchmal muss ein einzelnes Feld hervorstechen oder sich einfügen. Wir haben pro Feld Box Styles genau dafür hinzugefügt, damit Sie die volle Kontrolle über die Felder haben, die auf der Seite das größte Gewicht tragen.

Bei Text- und Listenfeldern können Sie Hintergrundfarbe, Rahmenstil (Kein Rahmen, Nur linker Rahmen oder Vollständiger Rahmen), Rahmenfarbe, Rahmenbreite, Radius und Ausrichtung festlegen, ein Feld nach dem anderen. Das gleiche Styling gilt für Fotos, Countdowns, den Fortschrittsbalken, Tabs und andere Felder, sodass nichts auf dem Formular wie vor Jahren veraltet aussieht.

Eine Standardeinstellung, mit der ich besonders zufrieden bin: Der Akzentrahmen eines Listenfeldes zieht automatisch die Sekundärfarbe Ihrer Kampagne, anstatt standardmäßig auf ein festes Blau zu fallen. Sie müssen dieses Feld nicht anfassen, damit es bereits übereinstimmt. Was auch immer Sie einstellen, bis hin zur Zeilenhöhe des Textkörpers und den Überschriften, wird auf dem Live-Spendenformular genau so angezeigt, wie Sie es gestaltet haben.

Erste Schritte: Gestalten Sie Ihre erste Kampagne

Ich habe mich neulich selbst gestoppt. Vom Öffnen einer Kampagne bis zu einem vollständig neu gestalteten Formular dauerte es unter fünf Minuten, und das beinhaltet zweimaliges Anhalten, um eine Farbe zu überdenken. Sie können Ihr Spendenformular genauso schnell anpassen. Hier ist der Weg, den ich genommen habe.

1. Gehen Sie in wp-admin zu Kampagnen und öffnen Sie eine Kampagne oder erstellen Sie eine neue, dann klicken Sie auf Mit Builder bearbeiten.
2. Öffnen Sie im Builder das Design -Panel auf der rechten Seite und klicken Sie auf den Styles -Tab (achten Sie auf das NEU-Badge).
3. Wählen Sie unter Globale Stile ein Design-Voreinstellung , um das Gesamterscheinungsbild festzulegen, und optimieren Sie dann Ihre Globalen Farben , Typografie und Animationen.
4. Klicken Sie auf ein beliebiges Feld in der Vorschau, um dessen Box Styles zu öffnen und Rahmen, Hintergrund und Abstände für dieses Feld anzupassen.
5. Beobachten Sie, wie sich die Live-Vorschau während der Bearbeitung aktualisiert, und klicken Sie dann auf Speichern. Ihr neues Styling wird sofort auf der Kampagnenseite wirksam.

Für Agenturen und Entwickler

Erweitern Sie den Tab „Styles“ mit Ihren eigenen Steuerelementen

Wir haben dies so konzipiert, dass es erweitert werden kann, nicht nur verwendet. Registrieren Sie benutzerdefinierte Steuerelemente pro Feld in JavaScript über window.charitableDesignFieldControls und greifen Sie mit den Aktionen charitable_design_styles_global und charitable_design_styles_field auf das serverseitige Rendering zu.

Alles für eine Kampagne lebt in einem campaign_style_tokens Meta-Wert, sodass es einfach zu lesen, zu verschieben und zu verstehen ist, egal ob Sie oder ich es sechs Monate später betrachten.

Auf einem Token-System aufgebaut

Farben, Typografie und Animationen werden als Design-Tokens gespeichert, anstatt als verstreute Inline-Stile. Das war eine bewusste Entscheidung meinerseits. Es hält die Ausgabe sauber und macht eine Kampagne portabel, falls Sie sie jemals woanders hin verschieben müssen.

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, Ihre bestehenden Kampagnen behalten ihr Aussehen. Kampagnen, die vor dem Token-System erstellt wurden, werden automatisch in das neue Styles-System migriert, ohne Datenverlust, sodass nichts kaputt geht und alles bearbeitbar bleibt.

Muss ich CSS kennen? 

Nein, und das war der Sinn der Sache. Alles ist visuell. Entwickler können es immer noch mit Hooks und Filtern erweitern, wenn sie weiter gehen wollen, aber Sie werden niemals Code benötigen, nur um es zu verwenden.

Wird mein Styling auf Mobilgeräten richtig aussehen? 

Ja. Die Farben, Typografie und Feldgestaltung des Styles-Tabs werden alle auf das Live-Spendenformular auf jeder Bildschirmgröße übertragen.

Kann ich ein Aussehen über Kampagnen hinweg wiederverwenden? 

Wenden Sie dasselbe Design-Preset und dieselben globalen Farben auf jede Kampagne an, um ein konsistentes, markenkonformes Gefühl zu bewahren, während jede Kampagne, die hervorstechen muss, dazu frei ist.

Erste Schritte mit dem Styles-Tab

Der Styles-Tab ist jetzt in Charitable Pro 1.8.17 live. Öffnen Sie eine Kampagne, klicken Sie auf den Styles-Tab und sehen Sie, wie schnell Ihr Formular anfängt, so auszusehen, als würde es Ihnen tatsächlich gehören.

Lesen Sie die Dokumentation zum Campaign Builder Styles →

Mehr in Charitable Pro 1.8.17

Der Styles-Tab war das größte Ding auf meinem Teller in dieser Version, aber es war nicht das Einzige, was ausgeliefert wurde.

Außerdem neu:

• Die Beacon Vorlagen
• Campaign Hero Feld
• Der Donation Form Gutenberg-Block
• Visuelle Spendenbeträge mit Bildern pro Betrag
• Neue Spenden-Widgets für Elementor, WPBakery und Divi.

Was ist neu in Charitable

Wir haben auch kürzlich mehrere leistungsstarke Funktionen und Verbesserungen eingeführt:

Wir fügen Charitable ständig Funktionen und Verbesserungen hinzu, die darauf ausgelegt sind, Ihnen zu helfen, mehr zu sammeln und Ihre Spender besser zu bedienen. Sehen Sie alles, was wir veröffentlicht haben, im Charitable Changelog.

Noch kein Charitable Pro-Benutzer? Melden Sie sich noch heute an und erhalten Sie bis zu 50 % Rabatt auf Ihren Plan. Wir sind zuversichtlich, dass Sie es lieben werden, mit Charitable Spenden zu sammeln. Wenn Charitable aus irgendeinem Grund nicht das Richtige für Sie ist, erstatten wir Ihnen den Kaufbetrag im Rahmen unserer 14-tägigen Geld-zurück-Garantie zurück. Holen Sie sich jetzt Charitable Pro »

Wenn Sie Fragen haben oder Hilfe beim Einrichten benötigen, ist unser Support-Team bereit, Ihnen zu helfen, Ihre Kampagnen bestmöglich aussehen zu lassen.

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

🤖 Nutzen Sie Charitable mit Ihrem KI-Assistenten

Erfahren Sie mehr über Charitable + KI →

⬇️ 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 →

David Bisset Projektmanager

David ist seit 2022 Projektmanager von Charitable. David arbeitet mit mehreren gemeinnützigen Organisationen (eine wird von seiner Frau betrieben) zusammen, während er gleichzeitig Funktionen, Support und Marketing für Charitable verwaltet und entwickelt. Ist seit 2006 mit WordPress beschäftigt und war Hauptorganisator mehrerer Konferenzen, Veranstaltungen und Treffen.

Vollständige Biografie anzeigen