Verkaufs-Landingpages erstellen – Schritt-für-Schritt-Anleitung

Einführung

Haben Sie sich schon einmal gewünscht, wunderschöne, responsive Landing-Page-Abschnitte zu gestalten — ganz ohne eine einzige Zeile Code zu schreiben? Mit dem Selldone Plugin in ChatGPT wird dieser Wunsch Wirklichkeit.

In diesem Leitfaden lernen Sie Schritt für Schritt, wie Sie von einem Inspirationsbild zu einem live geschalteten, vollständig responsiven Bereich im Selldone Page Builder gelangen — alles mit AI-Unterstützung.

Am Ende haben Sie einen professionell gestalteten Abschnitt, bereit zur Veröffentlichung auf Ihrer Selldone-Website.

💡 Hinweis: Selldone’s Page Builder basiert auf Vuetify (Vue 3) — daher ist jeder vom Plugin erzeugte Abschnitt vollständig kompatibel mit Selldone’s modernem, responsive Frontend-Framework.

Schritt 1 – Bereiten Sie Ihre Inspiration vor

Suchen Sie im ersten Schritt ein Abschnittsdesign, das Sie inspiriert. In diesem Tutorial nutzen wir einen Abschnitt von der Otto-Startseite (als Beispiel) — ein klares, modernes Layout, das hervorgehobene Produkte mit starken Bildern und klaren Calls-to-Action präsentiert.

Machen Sie einen Screenshot dieses Otto-Abschnitts; wir verwenden ihn als visuelle Referenz in ChatGPT, wenn wir unser individuelles Design mit dem Selldone Plugin erzeugen.

💡 Tipp: Wählen Sie einen Abschnitt mit einer strukturierten und visuell ausbalancierten Anordnung. Je klarer das Design, desto besser kann ChatGPT es analysieren und nachbilden.

⚠️ Fair-Use-Hinweis: Der hier gezeigte Otto-Screenshot wird ausschließlich zu Bildungs- und Illustrationszwecken als Design-Inspiration verwendet. Alle Marken, Bilder und Layouts gehören OTTO — dieses Tutorial ist nicht mit OTTO verbunden und wird nicht von ihnen unterstützt.

Schritt 2 – Öffnen Sie ChatGPT mit dem Selldone Plugin

Stellen Sie sicher, dass Sie das Selldone Plugin in ChatGPT aktiviert haben:

1. Gehen Sie zu ChatGPT → Settings → Beta Features → Plugins und aktivieren Sie Plugins.
2. Besuchen Sie den Plugin Store und installieren Sie das Selldone Plugin.
3. Starten Sie einen neuen Chat mit aktivem Plugin.

Sie sollten das Selldone-Logo neben Ihrem Chatfeld sehen — das bedeutet, es ist einsatzbereit.

Schritt 3 – Laden Sie Ihr Referenzdesign hoch

Laden Sie Ihren Screenshot hoch und geben Sie eine klare Aufforderung ein, zum Beispiel:

Stellen Sie oben im Menü sicher, dass Sie die neueste Version von ChatGPT verwenden.

“Ich möchte einen Abschnitt wie auf diesem Bild erstellen, mit responsiven Schriftgrößen, anpassbaren Schrift- und Kartenfarben sowie Karten, die entweder rund oder abgerundete Quadrate sein können.”

ChatGPT (mit Selldone) analysiert das Bild und generiert Vuetify (Vue 3)-basierten Code, der vollständig mit Selldone’s Page Builder kompatibel ist.

Erstellen Sie eine neue Landing Page in Selldone

Bevor Sie Ihren benutzerdefinierten Abschnitt hinzufügen, erstellen wir zunächst eine leere Landing Page in Selldone, die wir verwenden können.

1. Aus dem oberen Menü des Stores navigieren Sie zu Pages → Landing → Add New Landing.
   
2. Auf diesem Bildschirm sehen Sie drei vorgefertigte Landing-Page-Templates.
3. Klicken Sie auf eines davon, um es auszuwählen und den Landing Page Designer zu öffnen. Im Designer öffnen Sie das linke Seitenpanel, finden das Element “Code” und ziehen es in den Page Builder-Bereich. Dieses “Code”-Element ist der Ort, an dem Sie den von ChatGPT mit dem Selldone Plugin generierten Abschnitt einfügen oder importieren.
4. Klicken Sie in das Code-Feld, um die Toolbar zu aktivieren — oben erscheint eine Leiste, die wir häufig nutzen werden.

-Das erste Icon (<>) öffnet den Code Editor, wo Sie das HTML- und Vue-basierte Abschnittscode, den ChatGPT erzeugt hat, einfügen oder bearbeiten können.-Das zweite Icon öffnet Properties, wo Sie das Layout, den Abstand und visuelle Einstellungen des Abschnitts anpassen können.

Schritt 4 – Kopieren Sie den ersten ChatGPT-Code in den Editor

Eventuell falsche Version

Jetzt müssen Sie die erste Version des Codes kopieren, die ChatGPT für Sie generiert hat.
Wie im Screenshot zu sehen ist, kann das Ergebnis anders aussehen als Ihre Referenz — das bedeutet, ChatGPT hat eine nicht ganz passende Version erzeugt. Das ist völlig normal, also keine Sorge.Um das zu beheben, senden Sie das Referenzbild noch einmal und fragen erneut, zum Beispiel mit:

“Konzentriere dich auf das Bild, das ich oben gesendet habe. Ich sende es noch einmal.”

Nun beginnt ChatGPT von vorn und erzeugt neuen Code. Diese Version ist möglicherweise noch nicht final, da Sie noch weitere Wünsche und Anpassungen hinzufügen möchten.Nun kopieren Sie den Code und fügen ihn in den Code-Editor ein und drücken Apply:

Wichtiger Hinweis: Der Standardmodus des Code-Editors ist HTML. Sie müssen auf die Vue-Option wechseln — sonst erhalten Sie ein leeres Ergebnis.

Jetzt sehen Sie die erste korrekte Version des von ChatGPT erzeugten Abschnitts. Drücken Sie das zweite Element in der Toolbar (wie zuvor erwähnt), um das Properties-Menü für Anpassungen zu öffnen. Wie Sie sehen, gibt es viele Einstellungen, mit denen Sie diesen Abschnitt an Ihr Unternehmen anpassen können.

RESET TO DEFAULT Option:

Manchmal sehen Sie nach dem Einfügen einer aktualisierten Code-Version keine sichtbaren Änderungen. Das kann passieren, wenn die Änderungen grundlegend sind. In solchen Fällen müssen Sie die Option Reset to Default klicken. Bitte beachten Sie, dass dadurch alle Ihre individuellen Einstellungen entfernt werden, einschließlich neuer Texte, Farben, Schriftgrößen und sogar hochgeladener Bilder — es ist praktisch ein Werksreset 🙂.Verwenden Sie diese Option also nur, wenn Ihre Änderungen nicht richtig angewendet werden.

Schritt 5 – Abschnitt anpassen

ChatGPT generiert inzwischen, basierend auf dem, was es von anderen Nutzern gelernt hat, deutlich umfassendere Layouts — Sie müssen also nicht jedes Element einzeln anfragen. Das ist der eigentliche Vorteil des fortlaufenden Gesprächs: je länger und klarer Ihr Dialog, desto besser versteht ChatGPT Ihre Designvorlieben und liefert komplette, präzisere Ergebnisse.Der standardmäßig generierte Code ist bereits ziemlich responsiv, aber Sie können weiterhin Details anpassen wie Schriftgrößen, Schriftstärken, Abschnitts- oder Kartenhöhen, Breiten und weitere visuelle Elemente entsprechend Ihren Vorlieben.
Beispielsweise können Sie Selldone so einstellen, dass auf großen Desktop-Bildschirmen 8 Karten pro Reihe angezeigt werden, auf Tablets 4 Karten und auf Mobilgeräten 2 Karten.
Sehen wir, wie ChatGPT diese Anpassungen interpretiert und umsetzt — möglicherweise müssen wir in den nächsten Schritten noch einige Änderungen oder Nachfragen vornehmen.In diesem Fall sollten Sie die Section Max Width auf 1400px setzen, um ein besseres Layout zu erzielen. Sie können außerdem die Karten pro Reihe auf 8, 4 und 2 für Desktop, Tablet bzw. Mobil einstellen.
Um den Abstand zu verfeinern, versuchen Sie, den Cards Gap (Desktop) auf ca. 12px zu reduzieren. Zusätzlich können Sie die Kartenhöhe von 180px auf 160px verringern oder die Bildgröße so anpassen, dass sie besser in Ihr Design passt.

Wichtig: Sie können das Aussehen leicht anpassen, indem Sie mit diesen Werten experimentieren — spielen Sie mit den Zahlen und finden Sie, was am besten zu Ihrem Stil passt.

Um das Ergebnis besser zu visualisieren, können Sie eigene Bilder hochladen. Wir empfehlen die Verwendung von Bildern mit transparentem Hintergrund, damit die Card Background Color-Option gleichmäßig auf alle Bilder angewendet wird — das sorgt für ein saubereres, professionelleres Erscheinungsbild.Nachdem Sie Ihre Bilder hochgeladen, die Texte bearbeitet und alles finalisiert haben, klicken Sie auf den Speichern-Button — oder drücken Sie Strg + S unter Windows, um sofort zu speichern.
Jetzt ist es Zeit, die Live-Seite zu öffnen und Ihren Abschnitt in Aktion zu sehen.
Um ihn live zu betrachten, können Sie die Live Preview-Option nutzen oder den Button neben dem Namen Ihrer Landing Page klicken — damit öffnet sich die Seite in der Käuferansicht, so wie Ihre Besucher sie sehen. Allerdings empfehle ich nicht, die Live Preview allein für den finalen Test zu verwenden, da sie nicht vollständig widerspiegelt, wie responsiv die Seite auf verschiedenen Geräten ist — das erläutern wir weiter unten.Dies ist das Ergebnis des Codes. Jetzt müssen wir es in verschiedenen Bildschirmgrößen testen, um sicherzustellen, dass alles richtig funktioniert.
Öffnen Sie dazu die Web Developer Tools in Windows-Browsern mit F12.
Dieses Tool erlaubt Ihnen, die Seite in verschiedenen Bildschirmgrößen zu betrachten — ohne sie extra auf Mobilgerät, Tablet oder Laptop testen zu müssen.Wählen Sie nun im oberen Menü Responsive, um eine Vorschau zu sehen, wie Ihr Abschnitt auf unterschiedlichen Bildschirmgrößen aussieht.Wie Sie sehen können, sieht die Mobile-Version sauber und vollständig responsiv aus.In der Tablet-Ansicht — konkret auf dem iPad Pro 11-Zoll — werden unsere Einstellungen (4 Karten pro Reihe auf dem Tablet) nicht angewendet und es werden nur 2 angezeigt. Wir müssen ChatGPT bitten, dieses Problem zu beheben und den Code neu zu generieren.

Schritt 6 – Iterieren und verfeinern

Hören Sie nicht bei der ersten Version auf — hier beginnt die eigentliche Kreativität. Sie können weiter mit ChatGPT chatten, um Details anzupassen, wie zum Beispiel:

• Den Abschnitt auf allen Bildschirmgrößen responsiv machen.
• Hover-Animation hinzufügen.
• Gradient-Buttons verwenden.

Jede Runde aktualisiert Ihren Abschnitt sofort.

💡 Profi-Tipp: Je mehr Sie chatten und beschreiben, was Sie möchten, desto besser versteht ChatGPT Ihren Designstil. Mit der Zeit lernt es Ihre Vorlieben und liefert genauere, qualitativ bessere Ergebnisse.
Erklären Sie hier das Problem klar, damit ChatGPT es besser versteht.
Denken Sie daran, es kann nicht Ihre Gedanken lesen — Sie müssen das Problem detailliert beschreiben, wie in diesem Beispielkommentar:

Ich habe 4 Karten pro Reihe für die Tablet-Größe ausgewählt, aber auf dem iPad Pro 11-Zoll werden nur 2 Karten pro Reihe angezeigt. Bitte behebe das. Für Mobil habe ich 2 Karten pro Reihe eingestellt.

Wenn ChatGPT auf Ihre Anfrage antwortet, liefert es manchmal nur die spezifischen Code-Änderungen, die Sie manuell ersetzen oder hinzufügen müssen, wie in der Abbildung unten.Um es einfacher zu machen, bitten Sie es einfach, “Send the full code.”Oft empfiehlt ChatGPT am Ende seiner Nachricht zusätzliche Einstellungen, die Sie übersehen haben könnten — wie in diesem Fall, wo es vorschlägt, Links zu den Karten hinzuzufügen, was für unseren Abschnitt wichtig ist.Fast fertig! Kopieren Sie den aktualisierten Code, fügen Sie ihn in den Editor ein, speichern Sie die Änderungen und prüfen Sie die Live-Ansicht, um sicherzustellen, dass alles korrekt aussieht.
Wie Sie sehen können, werden nun in der Tablet-Version perfekt 4 Karten pro Reihe angezeigt.

Schritt 7 – Finalisieren Sie den Code und speichern Sie den Abschnitt

Wenn Ihr Design fertig ist, ist es ratsam, ChatGPT eine detaillierte Beschreibung der Struktur und Anforderungen des Abschnitts zu geben. Verwenden Sie folgenden Prompt, um den finalen Code zu erzeugen:

Füge einen konzeptionellen Beschreibungsblock oberhalb des