Voluit Suite Geavanceerd: Websites

Kun je een websitepagina kopiëren en plakken?

Ja. Je kunt een pagina die je eerder in een trechter of in een andere website hebt gemaakt, overnemen naar de plek waar je hem nodig hebt.

Hoe kopieer je een pagina uit een trechter naar je website?

Ga eerst naar de website waar je de kopie wilt hebben. Maak daar een nieuwe pagina aan. Je krijgt dan de vraag wat er met die nieuwe pagina moet gebeuren. Kies voor gebruik bestaande. Daarna kies je of je uit een trechter of uit een website wilt kopiëren, en vervolgens welke trechter of website dat is.

Hoe weet je welke trechterstap je moet kiezen?

Na het kiezen van de trechter selecteer je de trechterstap, dus de pagina die je wilt overnemen. Bij elke stap zie je een voorbeeldweergave, zodat je kunt controleren of je de juiste pagina te pakken hebt. Klik daarna op importeren. De kopie staat dan in je website.

Waarom springen mijn kolommen heen en weer?

Bij het openen van de pagina staan de kolommen naast elkaar op gelijke hoogte, maar zodra je op een categorie klikt, zakt één kolom naar beneden. Dat komt door de uitlijning in de kolominstellingen, niet door de inhoud van de kolom zelf.

Hoe zorg je dat een kolom bovenaan blijft staan?

Open de kolomindeling van de kolom die wegzakt. Bij de uitlijning zie je de paarse lijntjes staan. Zet die op links bovenaan. Klik je daarna op een categorie of collectie, dan blijft de kolom op zijn plek staan.

Waarom verandert een aanpassing op één pagina ook mijn andere pagina's?

Dan werk je in een universeel sectiesjabloon. Een universeel sectiesjabloon blijft gelijk over je hele website. Pas je zo'n sectie op één pagina aan, dan verandert hij overal mee. Wil je dat niet, dan moet je eerst uit dat sjabloon stappen. Lastig daarbij is dat je in de bewerker niet meteen ziet in welk soort element je zit.

Hoe zie je in welk element of sjabloon je werkt?

Gebruik de lagenweergave. Die vind je onder het icoon met de drie ruitjes op elkaar. Daar staan alle lagen van je pagina onder elkaar, met hun naam. Zo zie je bijvoorbeeld dat een element de navigatie is, ook als het op de pagina zelf niet duidelijk aan te klikken is. Je kunt op deze manier door alle elementen van je pagina bladeren en per element bepalen wat je ermee doet.

Wat betekenen de kleuren van de elementen?

Paars betekent dat het een universele sectie is: een sjabloon dat over je hele website gelijk blijft. Groen is een gewone rij of sectie, die alleen op deze pagina staat. Een groen element kun je kopiëren zonder dat er elders iets verandert. Oranje wijst op het navigatie-element.

Hoe kopieer je een universele sectie zonder dat de kopie meeverandert?

Kopiëren van een universele sectie werkt lastig. Klonen kan wel, maar de kloon blijft een universeel sjabloon en verandert dus mee. Wil je een losse versie, maak dan een nieuw element aan en bouw dat op vanuit je opgeslagen assets.

Wat is het verschil tussen sjablonen, algemene onderdelen en universele secties?

In de opgeslagen assets staan drie soorten onderdelen. Sjablonen zijn onderdelen die je overal opnieuw kunt gebruiken en die je aanpast zonder gevolgen voor andere pagina's. Algemene onderdelen zijn gelijk binnen één website of één trechter, maar niet over alle trechters in je Voluit Suite-account. Die gebruik je bijvoorbeeld voor een footer of navigatiemenu dat per website of trechter mag verschillen. Universele secties zijn gelijk over je hele Voluit Suite-account. Die kies je als je meerdere trechters, websites of een blog hebt en wilt dat een onderdeel daar overal hetzelfde is.

Op welke plekken kun je pagina's bouwen in Voluit Suite?

Voluit Suite heeft vier plekken waar je pagina's maakt: AI Studio, Websites, Trechters en de blog. Elk onderdeel werkt anders en heeft een eigen URL. In deze video leg ik uit wat elk onderdeel doet, wanneer je welke kiest en hoe je ze aan elkaar knoopt.

Wat doet AI Studio?

AI Studio bouwt op basis van een prompt een complete applicatie of website. Het blijft dus niet beperkt tot websites, je kunt er hele applicaties in bouwen. Vergelijkbare tools buiten Voluit Suite zijn bijvoorbeeld Lovable. Met een goede prompt en je merkrichtlijnen komt er meteen een afgewerkt ontwerp uit, bijvoorbeeld een aanmeldpagina voor een webinar. Formulieren zien er direct verzorgd uit en je kunt animaties toevoegen.

Wat kun je op dit moment koppelen in AI Studio?

Op dit moment kun je alleen je agenda's en je formulieren uit Voluit Suite koppelen. Andere koppelingen volgen nog. AI Studio is een nieuwe tool en staat nog in beta, dus je kunt hem gebruiken terwijl hij verder uitgebreid wordt.

Hoe pas je een pagina uit AI Studio achteraf aan?

Kleine aanpassingen doe je via de knop visuele bewerkingen. Er opent dan een scherm waarin je de teksten zelf aanpast. Je klikt op een element en aan de linkerkant staat wat je van dat element kunt wijzigen. De tekst pas je op dezelfde plek aan.

Hoe publiceer je een pagina uit AI Studio?

Publiceren gaat via een eigen URL die je aan je domein koppelt.

Wat kun je met het onderdeel Websites?

In Websites bouw je klassieke pagina's, vergelijkbaar met een bouwer als Elementor. Er zijn veel sjablonen om vanaf te starten en je sleept blokken in de pagina. Aanpassen doe je door op een element te klikken en het te bewerken. Linksboven zit een AI-assistent, herkenbaar aan de sterretjes.

Kun je een pagina in HTML laten bouwen en die in Websites gebruiken?

Ja. Je laat een pagina in HTML bouwen door een AI, bijvoorbeeld Claude, en plaatst die in een HTML-blok. Dat blok vind je onder elementen toevoegen, als custom code-blok. Je opent het blok en plakt de volledige HTML erin, daarna werkt de pagina. Het nadeel is dat achteraf bewerken lastiger wordt dan bij een pagina die je met blokken hebt opgebouwd.

Hoe krijg je formulieren en agendaboekingen in een HTML-blok?

Formulieren en kalenderboekingen krijg je in de HTML via de iframe embed-optie. Bij een formulier kies je delen via iframe. Die iframe-code geef je aan de AI met de opdracht om hem in de HTML te zetten. De gegenereerde HTML plaats je vervolgens in het HTML-blok, waarna de pagina inclusief formulier werkt.

Hoe zorg je dat je header en footer op elke pagina hetzelfde zijn?

Je maakt je header en footer als universele elementen. Onder elementen toevoegen vind je opgeslagen assets en universele secties. Universele secties zijn hetzelfde op alle websites binnen je Voluit Suite-account, dus een wijziging werkt overal door.

Hoe hangt de blog samen met je website?

De blog gebruikt een eigen layout en staat op een eigen URL. Je integreert hem in je website door dezelfde universele header- en footer-secties in de bloglayout te plaatsen. Voor de bezoeker lijkt de blog daardoor onderdeel van je website, terwijl hij technisch op een ander adres staat.

Wanneer kies je Websites, Trechters of de blog in plaats van AI Studio?

In Websites, Trechters en de blog kun je met Vraag AI content laten genereren en direct publiceren. Je geeft bijvoorbeeld de opdracht om een blog over een onderwerp te schrijven en die meteen op de blogsite te zetten. Dat werkt op dit moment nog niet in AI Studio, daar kun je een AI niet vragen om iets in AI Studio te bouwen. AI is een jong onderdeel, dus de keuze hangt nu af van hoe je het wilt gebruiken en wat voor jou werkt. Op termijn worden de onderdelen verder geïntegreerd.

Hoe breng je AI Studio, de website en de blog samen tot één geheel?

AI Studio, de website en de blog staan technisch los van elkaar en hebben elk een eigen URL. Je brengt ze samen door de navigatie naar elkaar te laten verwijzen. Je hebt bijvoorbeeld je website onder Websites en een calculator in AI Studio. In je universele menu zet je een link naar de URL van die calculator. Voor de bezoeker is het één website, aan de achterkant staan de onderdelen op verschillende plekken in Voluit Suite.

Waar stel je je vraag als je twijfelt over je eigen situatie?

Kom naar de Live Support Uren, dan kijken we met je mee.

Hoe pas je de URL van een trechterpagina aan?

Ga eerst naar de trechter waarvan je de URL wilt veranderen, bijvoorbeeld een check-outpagina. Open in de trechter het kopje Publiceren. Daar pas je het stukje aan dat achter je domeinnaam komt, dus het deel na mijndomein.nl/. Dat is het pad van de pagina.

Waarom staan er twee paden bij een trechterpagina?

Bij trechters kun je A/B-testen. Daarom geef je naast het hoofdpad ook een pad op voor elke variatie. Ik geef de eerste variatie meestal v01 mee. Zou ik een tweede variatie gaan testen, dan noem ik die v02. Het hoofdpad is de URL die je communiceert met je klanten.

Hoe verander je het domein van je trechter?

Het domein pas je aan via de instellingen van de trechter. Ga daar naar Domein. Je kunt een domein selecteren uit de domeinen die je hebt gekoppeld. Staat het juiste domein er niet tussen, klik dan op Domein verbinden om een nieuw domein te koppelen.

Hoe pas je de URL van je website aan?

Bij een website werkt het bijna hetzelfde als bij een trechter. Ga naar de website waarvan je de URL wilt veranderen en open de instellingen. Daar verander je het domein en het pad. Dat pad is het landingspad voor je hele website. Daarnaast heeft elke pagina nog een eigen paginapad. Zo bewerk je alle URL's van je website.

Kan ik een website van Claude AI hosten in Voluit Suite?

Ja. Je host de website die Claude AI voor je heeft gemaakt rechtstreeks in Voluit Suite. Je hebt geen aparte hosting nodig en je kunt je Voluit Suite formulieren en kalenders in de pagina gebruiken.

Hoe verzamel ik de links van mijn afbeeldingen?

Verzamel je materiaal voordat je de prompt schrijft. Ga naar de Mediabibliotheek in Voluit Suite en upload de afbeeldingen die je in je pagina wil zetten (tenzij je ze door Claude laat genereren). Klik bij een afbeelding op de drie puntjes en kies "link ophalen". De link staat nu op je klembord. Maak een aparte notitie en zet daar per afbeelding een korte omschrijving met de bijbehorende link. Dat lijstje geef je straks mee in de prompt aan Claude.

Hoe krijg ik de insluitcode van mijn formulier?

Wil je een formulier in je website zetten, maak dat formulier dan eerst in Voluit Suite. Ga daarna in het formulier naar integreren en kies voor de insluitcode. Dat is de iframe-code. Klik op "insluitcode kopiëren" en zet de code in dezelfde notitie, zodat je alles bij elkaar hebt voor de prompt.

Hoe krijg ik de insluitcode van mijn kalender?

Ga naar je kalenders en klik op de kalender die je in de pagina wil zetten. Ook daar vind je de insluitcode. Kopieer die code en zet hem in dezelfde notitie.

Wat zet ik in de prompt aan Claude?

De prompt bestaat uit vier delen. Eén: wat de pagina moet doen, je doel en je doelgroep. Twee: welke secties je op de pagina wil laten zien. Drie: de afbeeldingslinks en de iframe-codes van je formulier en kalender (optioneel). Vier: een technische instructie. Die technische instructie is belangrijk: vraag om een standalone HTML-pagina met alle CSS en JavaScript in één bestand, vermeld dat de code in een code-element in de websitebuilder wordt geplakt, dat de tags <!DOCTYPE html>, <html>, <head> en <body> niet in de code mogen omdat de builder die zelf al toevoegt, en dat de pagina op mobiel goed moet werken. Zonder die laatste instructie krijg je soms code die niet goed rendert op mobiele schermen. De volledige instructie staat als kopieerbaar blok in dit artikel.

Hoe bereid ik het code-element voor in de websitebuilder?

Open in je website de pagina waar het blok moet komen. Klik op het plusje en voeg een kolom toe. Selecteer daarna de sectie en zet de optie aan om de volledige breedte in te nemen. Dat is nodig omdat Claude een hele pagina genereert die zelf al ruimte aan de zijkanten regelt. Voeg in de sectie een code-element toe (het element heet Code). Haal daarna alle padding weg: selecteer de sectie, de rij en het element apart en verwijder overal de padding. Doe hetzelfde in de mobiele weergave, want daar staat standaard opnieuw padding. Laat je die staan, dan verschijnen er soms witte randen naast je design. Tip: sla dit lege blok op als rijsjabloon. Dan hoef je de padding bij een volgende pagina niet opnieuw weg te halen.

Hoe plak ik de code en controleer ik het design op mobiel?

Klik op het code-element, ga naar algemeen en open de code editor. Plak daar alle code van Claude in en klik op het opslaan-symbool. Bekijk daarna of het design naar wens is. Wil je zien hoe de pagina op mobiel rendert, klik dan op inspecteren en kies bij dimensions het telefoonmodel waarop je wil testen, bijvoorbeeld een iPhone of Samsung. Ben je niet tevreden over een onderdeel, vraag Claude dan om de code aan te passen en plak de nieuwe versie opnieuw in het code-element.

Hoe zet ik de pagina live?

Ben je tevreden, publiceer dan de pagina. De pagina staat daarna live op je domein. Hoe je een domein koppelt, wordt uitgelegd in een aparte video en in het artikel over domeinen koppelen. Kom je er niet uit, mail dan naar support.

Als jij een menubalk in zowel je website als in jouw blog wil hebben of misschien nog wel andere websites. Eigenlijk in principe als je hem op meerdere plekken in jouw account wil gebruiken en je wil hem op de op maar één plek hoeven te updaten, dan kun je de menubalk opslaan als een universele component. Dan wordt hij overal in je account gelijk gehouden. Hoe doe je dat op het moment dat je hem nog niet hebt opgeslagen? Is hij groen? Dan klik je hier op Save. Je geeft hem een naam en je klikt de universele sectie aan. Waar je voor moet opletten bij de menubalk is als je hem in een blog gebruikt, ik zal zo laten zien waarom dit zo is, maar dan moet je de menu items in plaats van dat je normaal zou je zeggen ga naar stap en dan de specifieke stap in je trechter of ga naar pagina en dan de specifieke pagina in je website, In plaats van dat kies je voor ga naar de website url en vul je de exacte url in. En waarom moet je dat doen? Dat ga ik je laten zien. Dat is namelijk omdat je binnen de blogs hebt je geen toegang tot die pagina's, want dan zit je in de blog. Kijk, hier zit ik in de blogmenu en dit is wel dezelfde universele component. Maar als ik hier op de menu-items klik en dan zou ik bijvoorbeeld stap kiezen. Ik zal deze even kopiëren. Stel dat ik hier kies voor stap en ik wil dan naar die pagina van online cursus en dan kan ik die niet selecteren omdat ik in de blog componenten zit en daar heb ik alleen toegang tot home en post. Dus hier maak je ook gebruik van website URL en dan staat daar de juiste URL en dan moet je dit dus ook veranderen bij de blogpostsectie. Daar heb ik hem al gezet, maar voor als je dat wil doen. Als je hier een oude menubalk hebt staan, dan kun je die eerst kopiëren en dan maak je van een... Stel dat je bijvoorbeeld al een globale sectie had, maar nog geen universele sectie. Een globale sectie wordt binnen je hele website overal gebruikt. Een universele websitesectie wordt dus op meerdere plekken meerdere websites, trechters, blogs gebruikt. Dus dat is het verschil tussen die twee. En stel dat dit al een globale sectie is, maak je daar even een kopie van. En dan kan je hier een universele sectie van maken. En geef je het een goede naam. Alright.