Vroeger betekende het maken van een visueel aantrekkelijke landingspagina dat je ontwikkelaars moest inhuren of moest leren coderen. Maar nu, met de integratie van ChatGPT en Gemini in Selldone’s Page Builder, is dat niet langer het geval. Deze nieuwe AI-gestuurde workflow stelt iedereen—ongeacht technische ervaring— in staat om een simpele afbeelding, schets of zelfs een ruwe idee om te zetten in een prachtige, volledig responsieve sectie voor hun online winkel of landingspagina. Alles gebeurt op een manier die direct werkt binnen het Selldone ecosysteem, zonder handmatig te hoeven coderen.
Of je nu een persoonlijk merk bouwt of een online bedrijf beheert, deze methode maakt het gemakkelijk om gepolijste, moderne pagina's binnen enkele minuten te lanceren.
Van Concept naar Component in Minuten
Stel dat je een ontwerp tegenkomt dat je leuk vindt. Misschien is het een productpresentatie op een andere website, een marketingbanner die je in Canva hebt gemaakt, of zelfs alleen een screenshot die je hebt opgeslagen. Je hoeft niet uit te zoeken hoe je het moet coderen of waar je moet beginnen. Upload simpelweg de afbeelding of beschrijf de lay-out, en vraag ChatGPT (met de Selldone plugin) of Gemini om het om te zetten in een landingspagina sectie. De AI begrijpt zowel het technische format van Selldone als de structuur van dynamische Vue-componenten die in het platform worden gebruikt. Je ontvangt een blok code dat direct in Selldone’s Page Builder kan worden geplakt. Deze sectie zal bevatten:
Alle teksten en koppen
Afbeeldingen en links
Knoppen, lettertypen en kleuren
Dynamische functies zoals productkaarten of getuigenissen
Het belangrijkste is dat het automatisch responsief is op desktop, tablet en mobiel.
Een Eenvoudig Proces voor Krachtige Resultaten
Om deze sectie aan je Selldone pagina toe te voegen, volg deze stappen:
Upload of beschrijf je ontwerpidee aan ChatGPT of Gemini.
Vraag om een Vue-component die compatibel is met de Selldone Page Builder.
Kopieer de gegenereerde code.
In Selldone’s Page Builder, sleep en plaats het Code-element in de landingspagina
Plak de code in het Vue-tabblad en sla op.
Upload or describe your design idea to ChatGPT or Gemini.
Tip: Upload vanaf je desktop de ontwerpafbeelding die je voorkeur heeft naar ChatGPT. Geef naast de afbeelding een gedetailleerde uitleg om een nauwkeuriger component te genereren en toekomstige revisies te minimaliseren.
Voorbeeld Prompt:
Je nieuwe sectie is live, volledig gestyled en klaar voor mobiel gebruik. Je kunt het nu aanpassen via het eigenschapspaneel of teruggaan naar de AI om wijzigingen aan te vragen—of het nu gaat om het aanpassen van een lay-out, het veranderen van kleuren, het toevoegen van functies of het vervangen van tekst.
Aanbevolen Prompt voor de Beste Resultaten
Om de AI te helpen begrijpen wat je precies nodig hebt, raden we aan deze prompt te gebruiken:
Genereer alstublieft een responsieve Vue-component voor Selldone Page Builder op basis van deze afbeelding of beschrijving. Alle tekst, knoppen, afbeeldingen, kleuren en lettertypen moeten binnen het eigenschappenobject worden gedefinieerd. De component moet voldoen aan Vuetify 3 standaarden, responsief zijn op alle apparaten en voldoen aan de regels van Selldone, inclusief geen zelfsluitende tags. Indien van toepassing, neem productkaarten, beoordelingssterren en actiekoppen op. Voeg voor alle teksten en kaarten en knoppen een visuele kleurkiezer, lettergrootte, lettergewicht en radius toe.
Je kunt deze prompt steeds opnieuw gebruiken wanneer je een sectie wilt maken of aanpassen. Het zorgt ervoor dat de code schoon wordt gegenereerd en voldoet aan de vereisten van Selldone.
Volledig Aanpasbaar, Volledig Schaalbaar
Zodra je sectie is toegevoegd, ben je niet beperkt tot wat je begonnen bent. Je kunt ChatGPT of Gemini vragen om iets te veranderen:
Een afbeelding vervangen of verplaatsen
Titels en ondertitels bijwerken
Nieuwe knoppen, sliders, getuigenissen of banners toevoegen
Tekststijlen en -formaten aanpassen
Afstand en lay-out aanpassen voor een andere uitstraling
Je kunt de pagina blijven uitbreiden met nieuwe secties. Er is geen limiet aan het aantal componenten dat je kunt toevoegen, en elk daarvan zal gebouwd zijn op dezelfde betrouwbare, flexibele structuur. Elk element is bewerkbaar. Kleuren kunnen worden veranderd met behulp van visuele picks, en afbeeldingen kunnen eenvoudig worden vervangen of geüpload. De ervaring is intuïtief ontworpen, zelfs als je nog nooit eerder een page builder hebt gebruikt.
Mogelijke Fouten
Fout #1
Als je fouten tegenkomt na het plakken van de code in de Selldone builder (zoals te zien in de afbeelding hieronder), vraag gewoon aan ChatGPT of Gemini om je te helpen deze op te lossen.
De tools zullen automatisch reageren en beginnen de code voor je te corrigeren.
My Chat with Gemini and its Answer to the Error
Fout #2
Als je de code kopieert en plakt in het HTML-tabblad, wordt de sectie als leeg weergegeven:
Zoals je kunt zien, heb ik per ongeluk de code in het HTML-tabblad ingevoerd, wat ik niet had moeten doen.
Fout #3
Soms, wanneer je om een slider, carrousel of scrollbalk vraagt die aan een sectie moet worden toegevoegd, kun je ongewenste elementen zoals extra stippen, streepjes of pijlknoppen buiten de sectie opmerken. Dit gebeurt meestal omdat ChatGPT MDI (Material Design Icons) gebruikte in plaats van de vereiste Google Font Material Icons. Om dit te verhelpen, zorg ervoor dat je ChatGPT vraagt om alleen Google's officiële Material Icons te gebruiken.
Voordat je begint, lees deze tips:
Soms, nadat de tool heeft geantwoord, moet je mogelijk vragen om de volledige code te schrijven. Als de wijzigingen klein zijn en de originele code lang is, geeft het misschien de voorkeur aan het geven van instructies om specifieke regels te vervangen in plaats van het herschrijven van het hele blok.
Het wordt aanbevolen om voor elke nieuwe sectie een nieuw Selldone ChatGPT-gesprek te starten. Door verder te gaan vanuit een eerdere sessie kan de tool oude instructies toepassen die niet relevant zijn voor je nieuwe component.
Soms, kan ChatGPT je een invoer geven in Selldone component eigenschappen om een afbeeldings-URL in te voeren, maar je afbeelding is lokaal opgeslagen op je computer. Vraag in zulke gevallen aan ChatGPT om het element (bijv. een carrousel of slider) als een object te definiëren, zodat je afbeeldingen direct kunt uploaden in plaats van URL's te gebruiken.
Als een afbeelding veel visuele elementen bevat, kun je deze eenvoudig naar ChatGPT uploaden en om een beschrijving vragen. Kopieer die beschrijving en gebruik deze als prompt om ChatGPT te vragen een component te genereren. Deze aanpak leidt vaak tot betere en nauwkeurigere resultaten.
Waarom Dit Belangrijk Is
Met deze workflow kan iedereen van een visueel concept naar een responsieve, productierijpe landingssectie gaan in minuten. Niet langer wachten op ontwikkelaars of worstelen met lay-out builders. Geen noodzaak om Vue, CSS of responsief ontwerp te leren. Alles wat de AI genereert is al geoptimaliseerd om er goed uit te zien op alle apparaten. Je hoeft je geen zorgen te maken over het breken van de lay-out, het aanpassen van afbeeldingen of het schrijven van stijluitgangsregels. De secties volgen strikte normen op basis van Selldone's ontwerp taal en best practices. Je zult meer tijd besteden aan creëren en minder tijd aan verbeteren.
Probeer Het Zelf Vandaag Nog
Beginnen is simpel. Kies een sectie die je wilt maken—of het nu geïnspireerd is door een andere website, een schets of een productflyer—en beschrijf het aan ChatGPT of Gemini met de aanbevolen prompt. Je ontvangt de code, plakt deze in Selldone, en je landingspagina komt tot leven.
Het is snel. Het is makkelijk. En het is open-ended. Er is geen limiet aan creativiteit, en geen plafond aan hoe ver je kunt gaan. Met AI en Selldone is het bouwen van krachtige, prachtige webpagina's nu net zo eenvoudig als beschrijven wat je wilt.
Add Comment
