So bringst du mit Affiliate Produktboxen dein Affiliate-Marketing auf die nächste Stufe

Die richtige Präsentation deines Produkts auf deiner Webseite kann entscheidend für einen Kauf sein. Professionell gestaltete Affiliate Produktboxen helfen dir dabei und steigern deine Affiliate-Marketing-Erträge enorm.

Grundsätzlich gibt es mehrere Möglichkeiten, wie du Affiliate Produktboxen auf deiner Webseite oder Blog einbinden kannst.

• Du gestaltest sie selbst. Für diesen Fall kannst du mein Tutorial nutzen. Hier zeige ich dir, wie du mithilfe von Kadence Blocks schnell und einfach Affiliate Produktboxen erstellen kannst.
• Du greifst auf eine kostenfreie Produktbibliothek zurück.
• Du nutzt eine kostenpflichtige Lösung.

Affiliate Produktboxen mit Kadence Blocks erstellen – Tutorial

Das geniale ist, dass du dazu nur das kostenlose Kadence Blocks Plugin benötigst. Kadence Blocks ist eines der beliebtesten WordPress-Plugins, und du wirst überrascht sein, was du alles mit diesem Plugin erstellen kannst.

Nachfolgend werden die einzelnen Arbeitsschritte zur Erstellung einer Affiliate-Produktbox mit Kadence-Blocks aufgelistet.

• Erstelle einen äußeres Row Layout, welches die Affiliate-Produktbox enthält
• Füge eine Überschrift für den Produkttitel ein
• Füge einen Row-Layout-Block mit 2 Spalten für die Produktbeschreibung ein 
• Füge die Produktmerkmale ein
• Setze die Produktbilder ein
• Füge die Schaltfläche „Bei Amazon kaufen“ und den Affiliate-Link hinzu
• Deine Produktbox kannst du in als „Wiederverwendbarer Block“ oder in der Kadence Cloud speichern. So steht er dir Plattformübergreifend zur Verfügung.

Professionell gestaltete Affiliate-Boxen innerhalb des Inhalts oder ein Affiliate-Widget in der Seitenleiste werden mit Sicherheit deine CTR (Click-Through-Rate) deiner Affiliateprodukte steigern.

Fertige Affiliate Produktbox

Grundlagen – So erstellst Du Affiliate Produktboxen mit Kadence-Blocks

Bei Kadence Blocks wird ein Row-Layout-Block (Zeilen-Layout-Block) kreiert, in dem dann automatisch ein Section-Block erstellt wird. Darin wird die Produkt-Box abgebildet.

Die Box enthält eine Produktbeschreibung, Produktmerkmale, mehrere Bilder und mehrere CTA-Schaltflächen.

Idealerweise platzierst du die Box gleich nach der Produktvorstellung. Denn dann ist die Wahrscheinlichkeit groß, dass deine Leser auf die CTA-Schaltflächen klicken und konvertieren, bevor sie den gesamten Beitrag lesen.

Diese Affiliate-Box wurde für einer Website mit Sidebar erstellt. Wenn du keine Seitenleiste hast, dann stelle das Layout deiner Webseite auf 1200 Pixel ein.

Wenn du eine Sidebar hast, wähle im Theme-Customizer ein Layout mit einer Sidebar und reduziere gegebenenfalls die Schriftgröße des Textes in der Affiliate-Box. So lässt sich alles in 800 Pixeln Breite unterbringen.

Beachte, dass wir ein 3-Spalten-Layout in dieser Affiliate-Produktbox erstellen werden, sodass 800 Pixel die Mindestbreite ist, die du dafür brauchst. Ich werde mit einem Layout von 900 Pixeln arbeiten.

Der erste Block, mit dem wir beginnen, ist das äußere Kadence Row Layout. Füge dieses als einspaltigen Block ein.

Die gesamte Produktbox wird innerhalb dieses Blocks platziert.

Anpassen des äußeren Zeilenlayoutblocks

Im nächsten Schritt werden wir einen weiteren Zeilenlayoutblock einfügen und diesem Block einen Rahmen geben.

Hinzufügen eines Zeilenlayoutblocks zum Einfügen des Produkttitels

Klicke auf den Abschnittsblock des inneren Hauptzeilen-Layoutblocks und füge einen weiteren Zeilenlayoutblock mit einer Spalte hinzu, um den Produkttitel einzufügen.

Passe den Zeilenlayoutblock wie folgt an;

• Abstand Rechts – 20 Pixel
• Abstand unten – 25 Pixel
• Abstand Links – 20 Pixel
• Breite des unteren Randes – 2 Pixel
• Farbe des Rahmens – CA2C68 (oder globale Farbpalette)

Klicke dann auf den Abschnitt des Zeilenlayoutblocks, füge einen Kadence Advanced Text Block hinzu, und ändere das Tag in Absatz.

Sie stellst du sicher, dass Überschriften innerhalb der Affiliate-Box die SEO deiner Seite oder deines Beitrags nicht beeinträchtigen.

Richte den Text mittig aus, mache ihn fett, ändere die Schriftgröße und -farbe.

Zeilenlayoutblock für Produktbeschreibung einfügen

Wir müssen einen zweispaltigen Abschnitt entwerfen, der die Produktbeschreibung enthält.

Eine Spalte wird die Beschriftung „Beschreibung“ enthalten und die andere die eigentliche Beschreibung.

Dazu musst du auf den Block Abschnitt des inneren Zeilenlayoutblocks klicken und einen weiteren zweispaltigen Zeilenlayoutblock hinzufügen.

Der erste Abschnitt soll 25 % der Layout-Breite einnehmen, der zweite Abschnitt 75 %.

Standardmäßig ist diese Option in den Einstellungen auf der rechten Seite nicht verfügbar.

Klicke daher auf die Abschnittsgrößenanpassung und setze sie manuell auf 25/75.

Einstellungen für den Zeilenlayout-Block;

• Oberer Abstand – 25 Pixel
• Rechter Abstand – 20 Pixel
• Unterer Abstand – 25 Pixel
• Linker Abstand – 20 Pixel

Produktbezeichnung

Wie du bereits aus dem vorherigen Schritt ersehen könntest, gibt es zwei Abschnitte.

Lass uns nun beide Abschnitte nacheinander bearbeiten.

Um die beiden Abschnitte voneinander zu unterscheiden, habe ich einen rechten Rand und eine Mindesthöhe angegeben.

Abschnittsanpassung:

• Mindesthöhe – 110 Pixel
• Rechter Rand – 2 Pixel
• Farbe des Rahmens – CA2C68 (oder globale Farbpalette)

Um die Beschriftung „Beschreibung“ hinzufügen, benötigen wir einen Advanced Text Block. Diesen kannst du problemlos dem Abschnitt hinzufügen.

Definiere den Text als Absatz und richte diesen.

Anpassen des Advanced Text Blocks für die Detailbeschreibung

• Tag – Absatz-Tag
• Textausrichtung – Zentriert
• Oben Padding – 20 Pixel
• Schriftgröße – 22 Pixel
• Schriftfarbe – CA2C68 (oder globale Farbpalette)

Hinzufügen der Produktbeschreibung im rechten Abschnitt

Klicke in der Listenansicht auf den nächsten Abschnittsblock und füge einen normalen Gutenberg-Absatzblock ein. Reduziere außerdem die Schriftgröße auf 18 Pixel. Nun gebe die Beschreibung ein.

Einfügen eines Kadence-Zeilenlayoutblocks für Produktmerkmale

Dupliziere in der Listenansicht den obigen Zeilenlayoutblock und erweitere die Spalten von 2 auf 3.

Da du nun 3 Spalten hast, musst du die Spaltengröße anpassen.

Passe sie so an, dass der rechte Rand des ersten Abschnitts direkt mit dem rechten Rand des darüber liegenden Abschnitts übereinstimmt.

Änder Sie auch die Mindesthöhe des ersten Abschnitts auf 140 Pixel.

Schreibe die Produktmerkmale in die beiden anderen Abschnittsblöcke

Verwende zum Schreiben von Produktmerkmalen den Block Kadence Icon List.

Klicke in der Listenansicht auf den zweiten Abschnitt und fügen einen Icon-List-Block hinzu. Schreibe 3 bis 4 Merkmale in jeden Abschnitt.

Gehe unter Icon List auf Edit All Icon Style Together und ändere die Größe und Farbe des Icons. Führe dies für beide Icon List-Blöcke durch. Rchte außerdem die Icons oben aus, unter Listensteuerung.

Zeilenlayoutblock für Produktgalerie hinzufügen

Klickeauf den obigen Zeilenlayoutblock duplizieren diesen.

Der neue Block wird ebenfalls 3 Spalten (Abschnitte) enthalten, wobei der erste Abschnitt die Beschriftung “Galerie” enthält und die beiden anderen Abschnitte Produktbilder zeigen werden.

• Ändere den Text im ersten Abschnitt von “Spezifikationen” in “Galerie”.

Anpassen des Zeilenlayouts:

• Padding Oben – 10 Pixel
• Padding Rechts – 20 Pixel
• Padding Unten – 5 Pixel
• Padding Rechts – 20 Pixel

Einfügen der Produktbilder in die Affiliate-Produktbox

In die beiden nächsten Abschnitte werden nun die Produktbilder eingefügt.

Klicke auf den nächsten Abschnitt in der Listenansicht und wähle den Block Kadence Advanced Image. Dann lade das entsprechende Produktbild hoch und wiederhole das Gleiche für den nächsten Abschnitt.

Kadence-Zeilenlayout-Block für Affiliate-Buttons einfügen

Dupliziere den obigen Zeilenlayout-Block, aber gehe diesmal in den Bereich Spaltenlayout und wähle eine Spalte.

Füge einen Amazon Button hinzu.

Klicke auf den Abschnitt und füge einen Kadence Advanced Button Block ein und benenne diesen mit „Bei Amazon kaufen“

Wenn du alle Schritte durchgeführt haben solltest, sollte deine Affiliate-Produktbox wie die folgende aussehen:

Fazit – Eigene Affiliate Produktbox mit Kadence Blocks erstellen

Mit dem Kadence-Plugin lassen sich schnell und einfach unterschiedlichste Elemente erstellen. Eine Affiliate-Produktbox kann in weniger als 30 Minuten erstellt werden, vorausgesetzt du hast etwas Übung.

Fertige Elemente lassen sich als „Reusable Block“ oder in der Kadence Cloud speichern.

Das Kadence-Plugin kannst du mit jedem WordPress-Theme verwenden und es ist in der Standardversion völlig kostenlos.

Für tiefergehende Designs mit Elementen wie Image Overlay, Modals & Video Popups, Post Carousel, Portfolio Carousel, Advanced Slider, Pro Addons für Galerie, Premium Kadence Blocks Templates, etc. musst du in die kostenpflichtige Kadence Blocks Pro Version investieren.

Affiliate Produktboxen mit einer kostenfreien Standardbibliothek erstellen

Der Standard-Gutenberg-Editor kann mit Plugins schnell und problemlos um nützlich Design-Elemente erweitert werden. Das jeweilige WordPress-Plugin fügt benutzerdefinierte Blöcke und Optionen hinzu, um die Bearbeitungsfunktionen des Block-Editors zu optimieren.

Affiliates, die eine professionelle Darstellung ihrer beworbenen Produkte benötigen, können dabei auf eine Reihe kostenfreier Lösungen zurückgreifen.

Eine nahezu perfekte Lösung ist die Kombination des Kadence Blocks Plugin und der Erweiterung Start Blogging Blocks. Damit lassen sich im Handumdrehen ansprechende Affiliate Produktboxen kreieren.

Affiliate Produktbox mit Start Blogging Blocks

Kostenpflichtige Lösungen zum Erstellen von Affiliate Produktboxen

Es gibt eine Reihe kostenpflichtiger Plugins, die dich beim Erstellen deiner Affiliate-Produktboxen unterstützen.

Meine erste Wahl ist das Tool Start Blogging Blocks. Es basiert auf dem Kadence Blocks Plugin und lässt keine Wünsche offen.

Affiliate Produktbox mit Start Blogging Blocks (PRO)

Affiliate Produktboxen – Fazit

Aus meiner Sicht lässt sich die professionelle Darstellung deiner Affiliateprodukte am leichtesten mit einer WordPress Gutenberg Erweiterung umsetzen.

Mein Favorit ist die Kombination aus Kadence Plugin und Start Blogging Blocks. Bereits in der kostenfreien Version kannst Du so schnell und mühelos ansprechende Designs erstellen.

Allen, die mehr wollen, rate ich zu den Pro-Versionen. Sie sind den Preis allemal wert.