Bilder in ansprechende Landingpages mit null Aufwand verwandeln

Früher bedeutete die Erstellung einer optisch ansprechenden Landingpage, Entwickler einzustellen oder selbst programmieren zu lernen. Doch jetzt, mit der Integration von ChatGPT und Gemini in den Selldone Page Builder, ist das nicht mehr nötig.
Diese neue, KI-gestützte Arbeitsweise ermöglicht es jedem - unabhängig von der technischen Erfahrung -, ein einfaches Bild, eine Skizze oder sogar eine grobe Idee in einen wunderschönen, voll responsiven Abschnitt für den Online-Shop oder die Landingpage umzuwandeln. Alles funktioniert direkt im Selldone-Ökosystem, ohne manuelles Programmieren.Ob Sie eine persönliche Marke aufbauen oder ein Online-Geschäft verwalten, diese Methode macht es einfach, in wenigen Minuten moderne, professionell gestaltete Seiten zu starten.

Von der Idee zur Komponente in Minuten

Angenommen, Sie stoßen auf ein Design, das Ihnen gefällt. Vielleicht ist es eine Produktpräsentation auf einer anderen Website, ein Marketing-Banner, das Sie in Canva erstellt haben, oder einfach nur ein gespeicherter Screenshot. Sie müssen nicht herausfinden, wie man es kodiert oder wo man anfängt.
Laden Sie einfach das Bild hoch oder beschreiben Sie das Layout und bitten Sie ChatGPT (mit dem Selldone-Plugin) oder Gemini, es in einen Landingpage-Abschnitt umzuwandeln. Die KI versteht sowohl das technische Format von Selldone als auch die Struktur der dynamischen Vue-Komponenten, die auf der Plattform verwendet werden. Sie erhalten einen Block aus fertig kopier- und einfügbarer Code, der direkt in den Selldone Page Builder passt.
Dieser Abschnitt umfasst:

• Alle Texte und Überschriften
  
• Bilder und Links
  
• Buttons, Schriftarten und Farben
  
• Dynamische Funktionen wie Produktkarten oder Kundenbewertungen
  

Das Beste daran: Es wird automatisch auf Desktop, Tablet und Mobilgeräten responsiv sein.

Einfacher Prozess für kraftvolle Ergebnisse

So fügen Sie diesen Abschnitt Ihrer Selldone-Seite hinzu:

1. Ihre Designidee in ChatGPT oder Gemini hochladen oder beschreiben.
   
2. Fragen Sie nach einer Vue-Komponente, die mit dem Selldone Page Builder kompatibel ist.
   
3. Kopieren Sie den generierten Code.
   
4. Ziehen Sie im Selldone Page Builder das Code-Element auf die Landingpage
   
5. Fügen Sie den Code im Vue-Tab ein und speichern Sie.

1. Ihre Designidee in ChatGPT oder Gemini hochladen oder beschreiben.

Wichtiger Hinweis: Verwenden Sie bitte diesen Link für direkten Zugriff auf das ChatGPT Selldone Plugin.

Tipp: Laden Sie das bevorzugte Designbild von Ihrem Desktop in ChatGPT hoch. Geben Sie zusammen mit dem Bild eine detaillierte Erklärung an, um eine genauere Komponente zu erstellen und zukünftige Überarbeitungen zu minimieren.

Beispiel-Prompt:

Ihr neuer Abschnitt ist live, vollständig gestylt und mobilfähig.
Jetzt können Sie ihn über das Eigenschafts-Panel anpassen oder die AI erneut anfordern, Änderungen vorzunehmen - sei es, das Layout anzupassen, Farben zu ändern, Funktionen hinzuzufügen oder Text zu ersetzen.

Empfohlener Prompt für die besten Ergebnisse

Um der KI genau zu verdeutlichen, was Sie brauchen, empfehlen wir diesen Prompt zu verwenden:

Bitte generieren Sie eine responsive Vue-Komponente für den Selldone Page Builder basierend auf diesem Bild oder dieser Beschreibung. Alle Texte, Buttons, Bilder, Farben und Schriftarten sollten innerhalb des Eigenschaften-Objekts definiert sein. Die Komponente muss den Vuetify-3-Standards entsprechen, auf allen Geräten ansprechend sein und Selldones Regeln befolgen, einschließlich keiner selbstschließenden Tags. Falls zutreffend, fügen Sie Produktkarten, Bewertungssterne und Aktionsbuttons hinzu. Für alle Texte, Karten und Buttons fügen Sie bitte visuelle Farbwähler, Schriftgröße, Schriftgewicht und Radius hinzu.

Diesen Prompt können Sie jederzeit verwenden, um einen Abschnitt zu erstellen oder anzupassen. Er stellt sicher, dass der Code sauber erzeugt wird und den Anforderungen von Selldone entspricht.

Vollständig anpassbar, komplett skalierbar

Sobald Ihr Abschnitt eingerichtet ist, sind Sie nicht auf das beschränkt, womit Sie angefangen haben. Sie können ChatGPT oder Gemini bitten, alles zu ändern:

• Bilder ersetzen oder verschieben
  
• Titel und Untertitel aktualisieren
  
• Neue Buttons, Slider, Testimonials oder Banner hinzufügen
  
• Textstile und -größen anpassen
  
• Abstände und Layout für ein anderes Aussehen ändern
  

Sie können die Seite mit neuen Abschnitten weiter ausbauen. Es gibt keine Begrenzung, wie viele Komponenten Sie hinzufügen können, und jede wird auf der gleichen zuverlässigen, flexiblen Struktur aufgebaut.
Jedes Element ist editierbar. Farben können mit visuellen Auswahlmöglichkeiten geändert werden, und Bilder können leicht ersetzt oder hochgeladen werden. Die Erfahrung ist so konzipiert, dass sie intuitiv ist, selbst wenn Sie noch nie einen Page Builder verwendet haben.

Mögliche Fehler

Fehler #1

Wenn Sie nach dem Einfügen des Codes in den Selldone-Builder auf Fehler stoßen (wie im Bild unten gezeigt), bitten Sie einfach ChatGPT oder Gemini, Ihnen bei der Behebung zu helfen.Die Tools werden automatisch reagieren und beginnen, den Code für Sie zu korrigieren.

Fehler #2

Wenn Sie den Code in der HTML-Registerkarte kopieren und einfügen, wird der Abschnitt als leer angezeigt:Wie Sie sehen können, habe ich versehentlich den Code in der HTML-Registerkarte eingegeben, was ich nicht tun sollte.

Fehler #3

Manchmal kann es vorkommen, dass, wenn Sie bitten, einen Slider, ein Karussell oder eine Scrollleiste zu einem Abschnitt hinzuzufügen, unerwünschte Elemente wie zusätzliche Punkte, Striche oder Pfeiltasten außerhalb des Abschnitts erscheinen. Dies geschieht in der Regel, weil ChatGPT MDI (Material Design Icons) anstelle der erforderlichen Google Font Material Icons verwendet hat. Um dies zu beheben, stellen Sie sicher, dass Sie ChatGPT bitten, nur offizielle Google-Material-Icons zu verwenden.

Bevor Sie beginnen, lesen Sie diese Tipps:

• Manchmal, nachdem das Tool geantwortet hat, müssen Sie es vielleicht bitten, den vollständigen Code zu schreiben. Wenn die Änderungen geringfügig und der Originalcode lang sind, bevorzugt dies möglicherweise, Ihnen Anweisungen zu geben, bestimmte Zeilen zu ersetzen, anstatt den gesamten Block neu zu schreiben.
• Es wird empfohlen, für jeden neuen Abschnitt ein neues Selldone ChatGPT-Gespräch zu starten. Wenn Sie eine vorherige Sitzung fortsetzen, kann es sein, dass das Tool alte Anweisungen anwendet, die für Ihre neue Komponente nicht relevant sind.
• Manchmal kann ChatGPT Ihnen eine Eingabe in den Selldone-Komponenteneigenschaften geben, um eine Bild-URL einzugeben, aber Ihr Bild wird lokal auf Ihrem Computer gespeichert. In solchen Fällen bitten Sie ChatGPT, das Element (z. B. ein Karussell oder Slider) als Objekt zu definieren, sodass Sie Bilder direkt hochladen können, anstatt URLs zu verwenden.
• Wenn ein Bild viele visuelle Elemente enthält, können Sie es einfach in ChatGPT hochladen und um eine Beschreibung bitten. Kopieren Sie dann diese Beschreibung und verwenden Sie sie als Prompt, um ChatGPT zu bitten, eine Komponente zu erstellen. Dieser Ansatz führt oft zu besseren und genaueren Ergebnissen.

Warum das wichtig ist

Mit diesem Arbeitsablauf kann jeder von einem visuellen Konzept zu einem responsiven, produktionsreifen Landingpage-Abschnitt in Minuten gelangen. Kein Warten mehr auf Entwickler oder Kämpfen mit Layout-Buildern. Kein Erlernen von Vue, CSS oder responsivem Design nötig.
Alles, was die KI generiert, ist bereits optimiert, um auf allen Geräten gut auszusehen. Sie müssen sich keine Sorgen über das Brechen des Layouts, das Anpassen von Bildgrößen oder das Schreiben von Stilregeln machen. Die Abschnitte folgen strengen Standards basierend auf Selldones Design-Sprache und Best Practices.
Sie werden mehr Zeit mit dem Erstellen und weniger Zeit mit dem Fehlerbeheben verbringen.

Probieren Sie es selbst noch heute aus

Der Einstieg ist einfach. Wählen Sie einen Abschnitt aus, den Sie erstellen möchten - sei es inspiriert von einer anderen Website, einer Skizze oder einem Produktflyer - und beschreiben Sie ihn ChatGPT oder Gemini mithilfe des empfohlenen Prompts. Sie erhalten den Code, fügen ihn in Selldone ein, und Ihre Landingpage wird lebendig.Es ist schnell. Es ist einfach. Und es ist offen.
Es gibt keine Grenze für Kreativität und kein Limit, wie weit Sie gehen können. Mit KI und Selldone wird der Aufbau leistungsstarker, schöner Webseiten jetzt so einfach wie das Beschreiben dessen, was Sie möchten.