So erstellen Sie eine Landing Page für Giving Tuesday mit Divi und GiveWP

Falls Sie es noch nicht gehört haben, wir bereiten uns hier bei Elegant Themes darauf vor, eine massive Black Friday- und Cyber ​​Monday-Kampagne zu starten. Aber zu dieser Jahreszeit passiert noch eine andere coole Sache. Es heißt Giving Tuesday (in diesem Jahr fällt es auf den 28. November) und es ist ein Versuch von gemeinnützigen Organisationen der Welt, alle daran zu erinnern, dass sie, während sie ihre Brieftaschen für persönliche Einkäufe zücken, in Betracht ziehen sollten, an diejenigen zu spenden, die in muss. Was für eine coole Idee! Und da wir unsere Community stärken möchten, dachten wir, es wäre eine gute Idee, denen zu helfen, die Divi (oder Extra) verwenden und für gemeinnützige Organisationen arbeiten, um die beste Landingpage für Giving Tuesday-Spenden zu erstellen, die sie sind fähig dazu.

Hier ist ein kurzer Blick auf das, was wir heute erstellen werden.

Endergebnisvorschau

Im heutigen Beitrag werden wir eine schöne Landingpage für Giving Tuesday erstellen, komplett mit einem optisch beeindruckenden (und natürlich funktionalen) Spendenformular.

Installiere das GiveWP Plugin & erstelle ein neues Formular

Das Spendenformular, das wir in diesem Tutorial verwenden werden, wird vom GiveWP-Plugin generiert. Um es zu installieren, navigieren Sie in Ihrem WordPress-Admin zu Plugins > Neu hinzufügen . Verwenden Sie dort die Suchfunktion, um das Give-Plugin zu finden. Klicken Sie auf die Schaltfläche „Jetzt installieren“ und aktivieren Sie diese.

Gehen Sie als Nächstes zu Spenden > Formular hinzufügen . Geben Sie einen Formulartitel ein. Ich habe mich für „Unterstützen Sie Ihre lokalen Bauern und eine nachhaltige Landwirtschaft“ entschieden.

Als Nächstes werden Ihnen die Optionen für das Spendenformular angezeigt. Lassen Sie uns sie Tab für Tab durchgehen.

Konfigurieren Sie im ersten Tab namens Spendenoptionen die folgenden Einstellungen im oberen Bereich.

Spendenoption: Mehrstufige Spende

Spendenanzeige: Schaltflächen

Benutzerdefinierter Betrag: Aktiviert

Richten Sie im Abschnitt Spendenstufe die folgenden Spendenstufen ein: 1 $, 5 $, 10 $, 25 $, 50 $, 100 $. Stellen Sie sicher, dass Sie das Spendenniveau von 5,00 USD als neuen Standard festlegen.

Wechseln Sie nun zur Registerkarte Formularanzeige. Das einzige, was Sie hier tun müssen, ist die Einstellung der Anzeigeoptionen in Modal zu ändern.

Aktivieren Sie auf der Registerkarte Spendenziel zunächst die Option Spendenziel. Sobald Sie das getan haben, legen Sie Ihren Zielbetrag fest. Ich habe meine auf 1.000 Dollar gesetzt. Ich habe auch das Zielformat auf Prozent gesetzt. Dadurch erfahren die Zuschauer des Formulars, wie viel Prozent unseres Ziels wir erreicht haben, und nicht wie viel Geld wir tatsächlich gesammelt haben. Und schließlich habe ich die Farbe des Fortschrittsbalkens leicht geändert, um dem gleichen Grün zu entsprechen, das im Rest meiner Website verwendet wird (#07c907).

Zuletzt müssen wir noch einige Formularinhalte hinzufügen. Aktivieren Sie auf der Registerkarte Formularinhalt die Option Inhalt anzeigen. Fügen Sie dann dem Inhaltsbereich etwas Text hinzu.

Für die Zwecke dieses Tutorials sind dies alle Einstellungen für das Give-Formular, die wir konfigurieren müssen. Klicken Sie auf die Schaltfläche Veröffentlichen und beachten Sie, dass Sie den Shortcode dieses Spendenformulars später benötigen.

Wenn Sie dieses Formular wirklich einrichten, müssen Sie auch zu Spenden > Einstellungen gehen und Dinge wie Ihre Zahlungsgateways, E-Mails usw. konfigurieren.

Bereiten Sie Ihre Bild-Assets vor

Außerdem benötigen wir ein benutzerdefiniertes Hintergrundbild für unseren Formularbereich. Dies ist natürlich optional und hat keinen Einfluss auf die Funktionsweise des Formulars. Aber es sieht cool aus und fügt unserem Bauernmarkt-Beispiel eine schöne Designverbindung hinzu.

Um dieses Bild zu erstellen, habe ich Photoshop verwendet, aber Sie können wahrscheinlich auch eine kostenlose Software namens Gimp verwenden. Es ist ein Open-Source-Tool, das viele der gleichen Funktionen hat.

So erstellen Sie es.

Suchen Sie sich zunächst ein Bild mit Elementen aus, die sich auf Ihre gemeinnützige Organisation beziehen. Da das Beispiel, das ich verwende, für einen Bauernmarkt ist, habe ich mich für Gemüse entschieden. Ich habe auf einer Stock-Image-Website nach „isoliertem Gemüse“ gesucht. Normalerweise bezieht sich der Begriff „isoliert“ auf einer Stock-Image-Website auf Artikel auf weißem Hintergrund. Dies macht sie leicht zu isolieren, indem der Hintergrund gelöscht wird. Genau das habe ich getan.

Hier ist das Bild, das ich gefunden habe.

Das Bild habe ich dann in Photoshop geöffnet.

Da die erste Ebene standardmäßig gesperrt ist, duplizieren Sie sie, indem Sie mit der rechten Maustaste darauf klicken und "Ebene duplizieren" auswählen. Blenden Sie dann die erste Ebene aus, indem Sie auf das Augensymbol daneben klicken.

Verwenden Sie als Nächstes das Zauberstabwerkzeug, um den gesamten weißen Raum um und innerhalb der Gemüseelemente auszuwählen. Drücken Sie die Rücktaste, um es zu löschen.

Navigieren Sie als Nächstes in Ihrem oberen Menü zu Bild> Leinwandgröße und ändern Sie die Größe Ihrer Leinwand auf 1920 × 1080. Wenn Sie dies tun, werden Ihre Elemente im Vergleich zu Ihrer neuen, kleineren Leinwand wahrscheinlich sehr groß sein.

Drücken Sie auf Ihrer Tastatur Befehl + T oder gehen Sie zu Bearbeiten > Transformieren > Skalieren . Passen Sie die Größe der Ebene der isolierten Elemente an die neue Leinwandgröße an.

So weit gehen wir vorerst bei diesem Bild. Stellen Sie einfach sicher, dass Sie diese neue Photoshop-Datei gespeichert haben. Wir fahren unten fort, sobald wir unser neues Spendenformular als Größenreferenz haben.

Erstellen des Designs in Divi

Falls Sie dies noch nicht getan haben, sollten Sie unser brandneues (kostenloses) Farmers Market Layout Pack herunterladen und installieren. Befolgen Sie die Anweisungen in diesem Beitrag, um das Layout-Paket zu installieren. Befolgen Sie nach der Installation die Anweisungen in diesem Blogbeitrag, um Ihre Website für die nächste Anpassungsstufe einzurichten, die wir hier behandeln.

Wenn Sie fertig sind, navigieren Sie zu Ihrer Spendenseite und verwenden Sie die Schaltfläche oben auf der Seite, um den visuellen Builder zu aktivieren. Ich werde Sie Abschnitt für Abschnitt durch die Seite führen und Anpassungen vornehmen, während wir fortfahren.

Da wir diese Seite für eine Giving Tuesday-Kampagne vorbereiten, sollten wir das wahrscheinlich ganz oben erwähnen. Bewegen Sie den Mauszeiger über Ihren Heldenbereich und öffnen Sie die Moduleinstellungen, indem Sie auf das Zahnradsymbol in den grauen Modulsteuerungen klicken.

Scrollen Sie dann, während Sie sich noch auf der Registerkarte Inhalt befinden, nach unten und öffnen Sie die Linkeinstellungen. Geben Sie im Feldtitel Button #1 URL den Text „#donate“ ein. Dies dient als Ankerlink zu dem Formular, das wir unten erstellen werden.

Navigieren Sie schließlich zur Registerkarte Design und öffnen Sie die Einstellungen für den Untertiteltext. Stellen Sie die Schriftstärke der Untertitel auf fett ein.

Der erste Abschnitt ist nun abgeschlossen. Scrollen Sie nach unten zum dritten Abschnitt (der mit einem großen Zitat) und klicken Sie auf das Zahnradsymbol in den blauen Abschnittssteuerungen. Setzen Sie die Hintergrundfarbe auf #F6F6F6.

Öffnen Sie als Nächstes die Moduleinstellungen für das Angebotstextmodul. Ändern Sie auch den Hintergrund in #F6F6F6.

Auch dieser Abschnitt ist nun abgeschlossen. Fahren Sie mit dem vierten Abschnitt direkt darunter fort. Dies ist unser Spendenformular.

Da dieser Abschnitt im Layout-Paket vorhanden ist, handelt es sich eher um einen „Versprechen“-Abschnitt, in dem die Leute das Kontaktformular verwenden können, um Ihnen eine Zusage zu senden, wie viel sie spenden möchten. Aber wir werden daraus ein echtes Spendenformular machen, in dem wir Geld direkt annehmen können.

Beginnen wir mit den Abschnittseinstellungen und arbeiten wir uns ein. Zuerst müssen wir die Hintergrundfarbe ändern. Stellen Sie es auf das gleiche #F6F6F6 wie im obigen Abschnitt ein.

Öffnen Sie dann im Abschnitt Design-Registerkarte die Abstandsoptionen. Fügen Sie die folgende benutzerdefinierte Auffüllung hinzu:

Oben: 250px

Rechts: 40px

Unten: 250px

Links: 40px

Navigieren Sie schließlich, während Sie sich noch in den Abschnittseinstellungen befinden, zur Registerkarte Erweitert und öffnen Sie die CSS-ID- und Klassensteuerelemente. Schreiben Sie unter CSS-ID das Wort „spenden“.

Speichern Sie Ihre neuen Einstellungen.

Wir müssen jetzt unser Pfandformular loswerden. Es besteht aus zwei Textbausteinen und einem Kontaktformular. Fahren Sie fort und löschen Sie sie. Fügen Sie stattdessen ein Textmodul hinzu.

Fügen Sie im neuen Testmodul den Shortcode für das zuvor erstellte Spendenformular Give ein. Setzen Sie den Hintergrund auf durchgehend weiß (#ffffff).

Navigieren Sie nun zur Registerkarte Design. Ein wenig bekanntes Geheimnis ist, dass Elemente, die durch Shortcodes von Drittanbietern generiert werden, mithilfe der Designeinstellungen des Textmoduls bis zu einem gewissen Grad angepasst werden können.

Konfigurieren Sie unter den Textoptionen die folgenden Einstellungen:

Text Textgröße: 18px

Textzeilenhöhe: 1.8em

Konfigurieren Sie unter den Überschriftentextoptionen für H2 die folgenden Einstellungen:

Überschrift 2 Textgröße: 36px

Überschrift 2 Zeilenhöhe: 1.5em

Konfigurieren Sie unter den Abstandsoptionen die folgenden Einstellungen:

Benutzerdefiniertes Padding: 50xp (für alle Felder)

Wählen Sie unter den Box Shadow-Optionen die letzte Option in der oberen Reihe (ganz rechts). Konfigurieren Sie dann diese Option:

Stärke der Box-Schattenausbreitung: -2px

Konfigurieren Sie schließlich unter den Animationsoptionen diese Einstellungen:

Animationsstil: Bounce

Animationsrichtung: Nach oben

Animationsdauer: 800 ms

Animationsverzögerung: 400ms

Anfangsdeckkraft der Animation: 100 %

Wenn Sie alle diese Designeinstellungen konfiguriert haben, speichern Sie sie. Ihr Spendenformular sollte nun so aussehen.

Dies ist natürlich eine vollkommen akzeptable Form. Aber meiner Meinung nach ist es etwas langweilig. Es gibt zwei Dinge, die ich tun möchte, um es aufzupeppen. Zuerst werden wir den Stil der Schaltfläche "Jetzt spenden" an die anderen Schaltflächen für Spenden auf der gesamten Website anpassen.

Navigieren Sie zu Ihren Designoptionen, indem Sie zu Divi > Divi-Bibliothek > Allgemein gehen. Scrollen Sie nach unten zum Feld Benutzerdefiniertes CSS und fügen Sie die folgenden Schaltflächenstile dort ein:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

Speichern Sie Ihre Änderungen und gehen Sie zurück zu Ihrer Spendenseite. Aktualisieren Sie es und sehen Sie sich Ihr Formular an. So sollte es nun aussehen.

Jetzt kommen wir irgendwo hin! Lassen Sie uns den letzten Schliff hinzufügen. Das Hintergrundbild für den Abschnitt, das wir früher erstellt haben.

Um es abzuschließen, ändern Sie die Größe Ihres Browserfensters auf 1920 × 1120. Sie können eine Website wie whatsmybrowsersize.com verwenden.

Dann machen Sie einen Screenshot Ihrer Spendenseite mit unserem neuen Formular darauf. Es sollte so aussehen.

Öffnen Sie diesen neuen Screenshot in Photoshop zusammen mit der Photoshop-Datei, die wir zuvor erstellt haben.

Verwenden Sie das Rechteck-Markierungswerkzeug, um Ihr Formular auszuwählen. Gehen Sie dann zu Auswählen > Invers , um alles außer Ihrem Formular auszuwählen. Löschen Sie Ihre neue Auswahl. Sie sollten jetzt eine Leinwand haben, die so aussieht.

Sie haben jetzt ein "Formularmodell" in der richtigen Größe, das Sie als Referenz für Ihr Hintergrundbild verwenden können. Ziehen Sie bei geöffneten Photoshop-Dateien die Photoshop-Ebene, die Ihr isoliertes Formular enthält, in Ihre Hintergrundbilddatei.

Passen Sie in Ihrem Ebenenbedienfeld die Deckkraft Ihrer Formularebene auf 50 % an. Klicken Sie dann, während das Formular später noch ausgewählt ist, auf das Schlosssymbol und sperren Sie es. So sollte es nun aussehen.

Sie können jetzt Ihre Gemüseschicht im Ebenenbedienfeld auswählen. Verwenden Sie das Lasso-Tool, um einzelne Elemente auszuwählen und entweder zu löschen oder neu anzuordnen, bis Sie eine Konfiguration erhalten, die Ihnen gefällt. Meine endgültige Konfiguration sah so aus.

Sobald Sie Ihre eigene endgültige Konfiguration haben, gehen Sie zu Datei > Exportieren > Exportieren als und wählen Sie PNG, um den transparenten Hintergrund beizubehalten.

Jetzt können wir dieses Bild zum Abschnitt „Spendenformular“ unserer Spendenseite auf unserer Divi-Website hinzufügen.

Öffnen Sie die Abschnittseinstellungen. Lassen Sie unter Hintergrund die zuvor eingestellte Farbe allein und wählen Sie die Bildoption. Fügen Sie hier Ihr neues Hintergrundbild hinzu. Konfigurieren Sie dann die folgenden Einstellungen:

Hintergrundbildgröße: Tatsächliche Größe

Position des Hintergrundbilds: Mitte

Speichern Sie diese Einstellungen. Ihr Formularbereich sollte nun vollständig sein.

Um Ihr Design vollständig abzuschließen (um mit unserer vollständigen Seitenvorschau vom Anfang des Beitrags übereinzustimmen) ändern Sie einfach die Hintergrundfarben der verbleibenden Seitenabschnitte, damit sie denen im Screenshot entsprechen. Sie verwenden entweder Grau (#F6F6F6) oder Weiß (#ffffff).

Viel Spaß beim Fundraising!

Mit Divi und einem so leistungsstarken Plugin wie Give werden Ihre Giving Tuesday-Bemühungen sicher ein großer Erfolg. Danke fürs Mitmachen. Wenn Sie noch Hilfe bei den in diesem Tutorial behandelten Themen benötigen, werde ich heute um 15:00 Uhr einen Livestream auf unserer Facebook-Seite und unserem YouTube-Kanal durchführen, in dem ich den gesamten Prozess in einer einzigen Einstellung zeige. Ich werde auch Fragen beantworten, während wir weitermachen. Hoffe Sie dort zu sehen!