Wie man Coupon-Karten mit WordPress-Blöcken erstellt – WP Tavern

20. Mai 2022
Wie man Coupon-Karten mit WordPress-Blöcken erstellt - WP Tavern

Letztes Jahr habe ich mehrere Muster für die Darstellung von Gutscheincodes auf einer Website entworfen. Sie waren Teil eines größeren Theme-Projekts, das ich nie fertiggestellt habe. Es hat mir aber sehr viel Spaß gemacht, mit den Variationen zu spielen. Da ich nicht wollte, dass sie auf der Festplatte meines Laptops vor sich hin dümpeln, dachte ich mir, ich würde sie mit den Tavern-Besuchern teilen.

Die Basis-Couponkarte sieht wie folgt aus:

Ein weihnachtlicher Gutscheincode mit einem Baum und einem Ornament auf dem Bild. Darunter findest du eine Liste der Angebote und einen Code.

Als ich diesen und die anderen Codes entworfen habe, hatte ich Weihnachten im Kopf (falls das auf dem Screenshot nicht offensichtlich war). Natürlich denke ich immer an die Feiertage und fange in der Regel spätestens im Juli mit meinen Einkäufen an.

Abgesehen von dem Bild habe ich das Design absichtlich allgemein gehalten, damit es auch für andere Feiertage und Ereignisse verwendet werden kann.

Dieses Tutorial in der Bauen mit Blöcken Serie wird dich durch die einzelnen Schritte der Erstellung von benutzerdefinierten Gutscheinkarten mit dem Editor führen. Am Ende werde ich auch ein paar Ideen für Variationen vorstellen.

Schritt 1: Hinzufügen eines Gruppenblocks

WordPress-Beitragseditor mit einem grau gefärbten Gruppenblock im Beitragseditor.
Hinzufügen eines Gruppenblocks mit benutzerdefiniertem Hintergrund und Rahmen.

Wie bei den meisten Mustern solltest du mit einem containerartigen Block beginnen. Für die Couponkarte fügst du zunächst eine Gruppe ein. Es steht dir frei, diese nach Belieben zu personalisieren. Um jedoch das gleiche Layout wie im Tutorial zu verwenden, solltest du zumindest das Padding des Blocks auf 0px und die Blockabstandsoption auf 0px. Diese müssen auf Null gesetzt werden, damit der Rest des Entwurfs funktioniert.

Ich habe meinen Gruppenblock so angepasst, dass er eine hellgraue Hintergrundfarbe hat. Dann fügte ich eine 4px gestrichelten Rahmen und eine 8px Rahmen-Radius. Jedes dieser Gestaltungswerkzeuge ist im Blockinspektor in der Seitenleiste verfügbar. Probiere die Farben und andere Einstellungen aus, bis du etwas findest, das dir gefällt.

Schritt 2: Ein Bild hinzufügen

WordPress-Beitragseditor mit einem Bild in einem Gruppenblock mit grauem Rahmen und Hintergrund.
Einfügen eines Bildblocks in die Gruppe.

Dieser Schritt ist ganz einfach. Füge einen Bildblock in die Gruppe aus Schritt 1 ein. Es sind keine besonderen Einstellungen erforderlich.

Natürlich solltest du ihn über die Schaltfläche "Link einfügen" in der Symbolleiste mit etwas verknüpfen. Vermutlich verkaufst du ein Produkt und willst, dass die Leute darauf klicken.

Schritt 3: Inhaltsgruppe hinzufügen

WordPress-Post-Editor mit einem Gruppenblock, der ein Bild und einen weiteren Gruppenblock enthält.
Hinzufügen eines verschachtelten Gruppenblocks.

Dies sollte ein weiterer einfacher Schritt sein. Füge unter dem Bild-Block aus Schritt #2 eine neue Gruppe hinzu. Darin wird der "Inhalt" untergebracht, den du in Schritt 4 hinzufügen wirst.

Die wichtigste Einstellung für diesen Block ist das Hinzufügen von Polsterungen über die Blockdesign-Tools im Seitenleisten-Panel. Ich habe mich entschieden für 2rem um es an mein Thema anzupassen. Erinnere dich daran, dass du in Schritt 1 die Polsterung der äußeren Gruppe entfernt hast. Jetzt musst du noch etwas hinzufügen, damit der Inhalt nicht an den Rand des Containers stößt.

Schritt 4: Inhalt hinzufügen

WordPress-Post-Editor mit einem Gruppenblock, der ein Bild, eine Überschrift und einen Absatz enthält.
Hinzufügen des Verkaufsgesprächs.

Mit dem Gruppenblock aus Schritt 3 hast du nun einen neuen Bereich, in den du deine Verkaufsargumente für potenzielle Kunden einfügen kannst. Das kann eine einfache Überschrift sein, gefolgt von einem Absatz, oder etwas viel Komplexeres. Am besten ist es, wenn du dich kurz und bündig fasst.

Schritt 5: Gutscheincode-Zeile

WordPress-Post-Editor mit einem Gruppenblock, der ein Bild enthält, einer zweiten Gruppe mit Inhalt und einem neuen Zeilenblock.
Einfügen eines Zeilenblocks für den Coupon-Code-Bereich.

Um den Gutscheincode hervorzuheben, fügst du einen neuen Zeilenblock unter dem in Schritt 3 hinzugefügten Gruppenblock ein. So kannst du im nächsten Schritt einen Abschnitt für den Code und das Ablaufdatum einfügen.

Wähle die Option "Abstand zwischen den Elementen" für die Ausrichtungssteuerung. Mit dieser Einstellung wird jeder verschachtelte Block von den anderen weggeschoben.

Wähle dann eine benutzerdefinierte Hintergrundfarbe. Dadurch sollte der Zeilenblock automatisch aufgefüllt werden. Wenn du keine Farbe festlegst, solltest du die Auffüllung manuell an den darüber liegenden Gruppenblock anpassen.

Schritt 6: Code und Verfall hinzufügen

WordPress-Post-Editor mit einem Gruppenblock, der ein Bild, eine zweite Gruppe mit Inhalt und eine Zeile mit einem Gutscheincode enthält.
Benutzerdefinierter Gutscheincode und Ablaufdatum.

Der letzte Schritt ist das Hinzufügen von zwei Absatzblöcken in den Zeilencontainer. Der erste sollte in etwa lauten: "Coupon: XMAS2022", und der zweite sollte lauten "Expires: 31. Dezember".

Natürlich ist es deine Karte, also viel Spaß beim Anpassen.

Variationen

Das Wunderbare am WordPress-Block-Editor ist, dass es so viele Möglichkeiten gibt, die Ausgabe einer Reihe von Blöcken wie der obigen zu verändern. Schon eine einfache Änderung der Farben kann einen völlig anderen Look ergeben. Und wenn du ein oder zwei Blöcke neu anordnest, kannst du etwas ganz Eigenes kreieren.

Eine der einfachsten Möglichkeiten, den obigen Gutscheincode anzupassen, ist das Einfügen von ein paar Emoji, wie im folgenden Screenshot zu sehen:

WordPress-Beitragseditor mit einem Gruppenblock, der ein Bild, eine zweite Gruppe mit Inhalt und eine Zeile mit einem Gutscheincode enthält. Darunter sind weihnachtliche Emoji gemischt.
Emoji-Variante.

OKAY. Das war nur ein kleiner Spaß. Aber im Ernst: Es gibt viele Möglichkeiten, an der Formel herumzubasteln und etwas Neues zu schaffen.

Ich habe nur ein paar Augenblicke gebraucht, um die Schritte 2 und 4 von vorhin zusammenzufügen (und Schritt 3 zu überspringen), um das Folgende zu erstellen:

WordPress-Beitragseditor mit einem Gruppenblock, der einen Media & Textblock mit einer Werbebotschaft enthält. Darunter befindet sich ein Zeilenblock mit einem Gutscheincode und einem Verfallsdatum.
Media & Text Variation.

Das ist ein Media & Text-Block in der Mischung. Ich überlasse es dir, diese Variante nachzubauen, ohne eine vollständige Anleitung zu geben. Wenn du nicht weiterkommst, sieh dir meine vorherige Anleitung, in dem Media & Text ausführlich behandelt wird.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/how-to-build-coupon-cards-with-wordpress-blocks

Abonniere den RSS-Feed von unseren WP News und verpasse keine Meldung: https://die-mainagentur.de/feed/?post_type=wp-news

Alternativ kannst du unseren WP-Newsletter abonnieren

Mit dem Eintrag in den WP-Newsletter bekommst du per Mail über neue Artikel zugesendet. Du kannst den Newsletter jederzeit abbestellen.
Mehr dazu in der Datenschutzerklärung