Wat zijn Sites?

Met Sites maak je klantgerichte websites binnen Voluit Suite. Maak een perfecte homepage voor je bedrijf of een landingspagina om leads te verzamelen. De mogelijkheden zijn eindeloos.

Binnen Voluit Suite hebben we twee soorten Site Builders. Hoewel ze vergelijkbaar zijn, hebben ze verschillende functionaliteiten. We bekijken beide types.

Funnels - Funnels hebben een directe opeenvolging van pagina's, daarom bieden we split testing alleen aan voor funnels. Funnels zijn een stapsgewijze reeks webpagina's, meestal gebruikt voor een specifiek doel zoals het verzamelen van leads of het boeken van afspraken.
Websites - Een plek om webpagina's te bouwen voor elk gebruik, zoals een homepage voor je bedrijf. Er is meestal geen vastgesteld pad dat contacten doorlopen, daarom bieden we geen split testing aan voor websites.

Hoewel je Websites voor dezelfde doeleinden kunt gebruiken als funnels, zijn er enkele kleine verschillen.

Welke moet je kiezen? Funnels of websites?

Op een paar punten na zijn Funnels en Websites hetzelfde. Ze bevatten beide een verzameling webpagina's en kunnen voor verschillende doeleinden worden gebruikt. Het belangrijkste verschil is of je Split Testing wilt gebruiken op een webpagina en de weergave van de pagina's.

De belangrijkste verschillen tussen funnels en websites zijn:

Split Testing in Funnels - Je kunt alleen split testen in Funnels. Split Testing is wanneer je een variant van een pagina maakt om te zien welke beter presteert.
Webwinkel - Alleen websites kunnen gebruik maken van de webwinkel-functie.
Paginaweergave - Er zijn verschillende weergave-interfaces afhankelijk van of je in de funnel of website views bent.

Aan de slag met site templates

Bij het maken van een nieuwe site heb je de keuze uit honderden templates. Na het selecteren van een template kun je alle onderdelen aanpassen. We raden je aan om ze allemaal te bekijken!

Na het selecteren wordt de template geladen. Navigeer naar een van de pagina's door op "Bewerken" te klikken om de site builder te openen en een specifieke pagina te bewerken.

Site builder overzicht

Dezelfde functionaliteit en hiërarchie van elementen bestaan in zowel de Funnel als de website builder. We bekijken de website builder en hoe je deze gebruikt om sites te maken.

Website builder Navigatiebalk

De navigatiebalk bevindt zich bovenaan de builder en geeft je toegang tot alle verschillende functies. We bespreken elk van deze tabbladen hieronder.

Een nieuw element toevoegen

Rijen en kolommen zijn de bouwstenen van je site en worden gebruikt om elementen te bevatten. Om een element toe te voegen, zoals een afbeelding, heb je minimaal één sectie, één rij en één kolom nodig. Daarna kun je een element toevoegen. Er zijn veel verschillende elementen, elk met unieke eigenschappen.

Om een element aan je site toe te voegen, klik je rechtsboven in je site-editor op "element toevoegen" om de beschikbare opties te zien. Nadat je het gewenste element hebt gekozen, kun je het naar de gewenste plek slepen.

Elementen nesten

Elk element op een webpagina heeft een sectie nodig. Binnen deze sectie heb je minimaal één rij nodig. Deze rij heeft minimaal één kolom nodig. Na het toevoegen van deze drie (Sectie > Kolom > Rij) kunnen we een element toevoegen via de "+Element toevoegen" balk.

Van groot naar klein hebben we:

Secties (Groen) > Rijen (Blauw) > Kolommen (Roze) > Elementen (Oranje)

Over secties, rijen en kolommen...

Je kunt geen sectie binnen een sectie plaatsen. Ook kun je geen rij binnen een rij of een kolom binnen een kolom plaatsen. Je kunt ook geen element binnen een element plaatsen.
Je kunt meerdere rijen in een sectie plaatsen. Binnen een rij kun je meerdere kolommen toevoegen. Binnen een kolom kun je meerdere elementen toevoegen.
Je hebt minimaal één sectie, één rij en één kolom nodig om een element toe te voegen.

Element instellingen

Om een specifieke sectie, rij, kolom of element te bewerken, beweeg je de muis over het element en klik je op het tandwiel-icoon dat verschijnt. Als je op een willekeurig deel van het element klikt, opent automatisch het instellingenmenu aan de rechterkant.

In deze instellingen kun je padding, marge, zichtbaarheid en meer aanpassen. Let ook op de tabbladen "Algemeen" en "Geavanceerd" die meer instellingen bevatten om je site te verbeteren.

Padding en marge

Als je ruimte tussen elementen op je webpagina wilt aanpassen, gebruik je padding of marge. Dit doe je via de objectinstellingen die aan de rechterkant verschijnen als je op het object klikt.

Padding - Dit voegt ruimte toe BINNEN een sectie, rij, kolom of element. Padding voegt ruimte toe vanaf de buitenkant van het object naar binnen.

Marge - Dit voegt afstand toe BUITEN een sectie, rij, kolom of element. Het creëert ruimte tussen verschillende objecten.

Een element verplaatsen

Je kunt een object verplaatsen met de pijltjes omhoog of omlaag die verschijnen als je met de muis over het object beweegt. Dit verplaatst het element omhoog of omlaag op basis van de omliggende elementen. Je kunt een object ook verplaatsen door er met de muis over te bewegen en het verplaatsings-icoon vast te houden. Hiermee kun je het object verplaatsen. Laat de muisknop los om het op de nieuwe plek neer te zetten.

Optie 1: Pijltjes Omhoog/Omlaag - verplaatst het object omhoog of omlaag op basis van de omliggende objecten.
Optie 2: Klikken en Slepen - hiermee kun je het object naar de gewenste plek slepen.

Een element klonen

Als je met de muis over een object beweegt, kun je dat object en alles wat erin zit klonen. Alle instellingen en objecten binnen het gekloonde deel worden gedupliceerd en eronder toegevoegd. Dit is handig wanneer je een bepaalde opmaak of object opnieuw wilt gebruiken op een andere plek op de pagina.

Een element verwijderen

Als je een object wilt verwijderen, beweeg je de muis over het object en klik je op het prullenbak-symbool. Dit verwijdert het object. Je kunt Ongedaan maken/Opnieuw gebruiken om het weer toe te voegen.

Lagen

Met Lagen kun je alle objecten bekijken en zien hoe ze genest zijn binnen de Website Object Hiërarchie. Dit is handig wanneer je een object kwijt bent of als het verborgen is voor zowel mobiele als desktop weergave.

Pagina's

Bekijk en navigeer naar andere webpagina's binnen je Funnel of Website via het tabblad pagina's. Hiermee kun je snel schakelen tussen webpagina's tijdens het bewerken van meerdere pagina's. Je kunt dit tabblad bereiken via zowel de rechter als de middelste navigatiebalk van de site builder.

Tracking code

Als je een tracking code wilt toevoegen aan de header of footer van je webpagina, kun je dit doen via de Tracking Code pagina.

Custom CSS

Je kunt aangepaste CSS toevoegen aan je website via het custom CSS tabblad. Raadpleeg een ontwikkelaar voor het gebruik en maken van code voor jouw specifieke behoeften.

Typografie

Je kunt het standaard lettertype voor je webpagina-koppen en content aanpassen, evenals je tekst- en linkskleuren binnen de typografie-instellingen.

Achtergrond

Om de standaard achtergrondafbeelding of -kleur van je webpagina te wijzigen, selecteer je het tabblad Achtergrond. Dit voegt een achtergrond toe achter je secties. Als je een achtergrondafbeelding of -kleur hebt ingesteld op een sectie, rij, kolom of element, wordt deze daarachter geplaatst.

Wil je een video als achtergrond voor een sectie? Lees hier hoe: Video Achtergrond (link onderaan).

Pop-up instellingen

De meeste bezoekers hebben een hekel aan pop-ups, maar ze zorgen nog steeds voor goede conversies. Als je een pop-up wilt toevoegen, kan dat via het Pop-up menu. Na het selecteren gebruik je het instellingenmenu aan de rechterkant om de eigenschappen aan te passen.

Je kunt een pop-up tonen door een knop toe te voegen en de knopactie in te stellen om de pop-up te activeren. Je kunt ook de pop-up instellingen gebruiken om deze te tonen bij het verlaten van de pagina of na een bepaalde tijd - selecteer de pop-up en bekijk de instellingen aan de rechterkant.

SEO meta data

Hier kun je de SEO metadata aanpassen die wordt weergegeven in zoekresultaten. Deze informatie verschijnt ook in de tabbladinstellingen van je browser en wanneer je je sitelink deelt. Het lijkt misschien een klein detail, maar goede SEO-instellingen zijn belangrijk - ze helpen zoekmachines je site te vinden en zorgen voor meer vertrouwen wanneer mensen je link delen.

Aangepaste code bekijken

Als je aangepaste code op je site hebt en deze correct is geïnstalleerd, laadt deze knop de code zodat je deze kunt zien in de builder. Je kunt de pagina ook bekijken via de voorbeeldweergave. Als je aangepaste code niet werkt zoals verwacht, neem dan contact op met een ontwikkelaar.

2-Kolommen modus versus automatische modus

Bij het gebruik van de builder kun je kiezen of het rechtermenu over de webpagina heen komt of dat je de twee-kolommen modus gebruikt. Bij de twee-kolommen modus wordt de webpagina in twee kolommen verdeeld: de eerste kolom is de webpagina, de tweede het instellingenmenu dat aan de rechterkant verschijnt.

Ongedaan maken/opnieuw

Tijdens het bewerken van je site kun je wijzigingen ongedaan maken of opnieuw uitvoeren via de knoppen rechtsboven in de navigatiebalk van de site builder.

👉

Dit werkt alleen binnen je huidige sessie. Als je de pagina herlaadt of verlaat, kun je wijzigingen mogelijk niet meer ongedaan maken omdat er een nieuwe sessie start. De versies, hieronder beschreven, zijn geschikt voor het terughalen van eerdere versies van de site.

Versies, voorbeeld, opslaan en publiceren

Rechtsboven in je website builder vind je de knoppen voor versies, voorbeeld en opslaan. We bespreken ze hieronder.

Versies - hier vind je eerder opgeslagen versies van je site. Dit is handig wanneer je eerdere versies wilt bekijken of terugzetten.
Voorbeeld - hiermee maak je een voorbeeldversie van je site om te zien hoe deze er live uitziet. Perfect om je recente aanpassingen te testen en te zien wat bezoekers zullen zien.
Opslaan - met de opslaan-knop bewaar je een niet-gepubliceerde versie van je site. Deze versie wordt bij elke keer opslaan overschreven. Dit is anders dan de gepubliceerde live versie van je site. Dit betekent dat bezoekers geen wijzigingen zien totdat je deze publiceert.
Publiceren - door te publiceren wordt de huidige opgeslagen versie van je site live gezet op internet. Bezoekers zien nu de meest recent gepubliceerde versie van je site.

Nu we alle onderdelen van de website builder hebben verkend, gaan we leren hoe je de mobiele weergave van je site kunt bewerken.

De mobiele weergave van je site bewerken

Elke site builder heeft zowel een mobiele als desktop weergave. Tenzij je een object bewerkt, zijn de desktop en mobiele weergaven identiek. Bij het bekijken van de mobiele weergave van je site, merk je waarschijnlijk aspecten op die je wilt aanpassen voor mobiele bezoekers. Dit is logisch, omdat mobiele en desktop schermen verschillende formaten hebben. We passen de mobiele weergave aan voor de beste ervaring op mobiele apparaten. Hieronder lees je hoe je de mobiele weergave kunt bewerken.

Mobiele modus

Bovenaan je editor zie je een knop voor Desktop Modus en een voor Mobiele Modus. Door 'Mobiele Modus' te selecteren schakel je naar de mobiele weergave-editor van je site.

Alle website-objecten zijn standaard zichtbaar op zowel mobiel als desktop. Je kunt dit aanpassen, wat in bepaalde situaties erg nuttig is.

Zichtbaarheid van objecten aanpassen naar alleen mobiel/desktop

Je merkt waarschijnlijk dat je een unieke sectie, rij, kolom of element nodig hebt voor alleen mobiele weergave. Je kunt de zichtbaarheid van je elementen aanpassen via de zichtbaarheidsinstelling. Selecteer een object, ga naar instellingen en vervolgens geavanceerde instellingen. Dit helpt bij het optimaliseren van de look en feel van je desktop of mobiele weergaven.

Na het aanpassen zie je de elementen alleen op basis van je instellingen. Als je Desktop uitschakelt, zie je het element alleen in de mobiele editor en in de live mobiele weergave van de website.

Mobiele responsiviteit instellingen

In je objectinstellingen vind je mobiele responsiviteit schakelaars waarmee je de instellingen van een object apart kunt bewerken voor mobiel of desktop. De afbeelding hieronder toont bijvoorbeeld de uitlijningsinstellingen van een afbeeldingselement. Je kunt aanpassen hoe dit element eruitziet in de desktop weergave, en vervolgens naar de mobiele weergave gaan om daar unieke mobiele instellingen te maken.

Je vindt deze mobiele responsiviteit instellingen bij verschillende objectinstellingen. We werken continu aan het toevoegen van meer opties.

Pro tips voor mobiele modus bewerking

Er zijn verschillende tips en trucs voor het bewerken van je mobiele site:

Maak eerst de Desktop Modus af
1. Het is meestal makkelijker om je mobiele weergave te bewerken nadat je desktop versie compleet is. Zorg dat je desktop weergave er perfect uitziet VOORDAT je aan de mobiele weergave begint.
Mobiele Navigatiemenu's
1. Als je een site navigatiemenu hebt, maak dan een Globale Sectie met alleen-mobiel zichtbaarheid. Dit kun je toevoegen aan de mobiele versie van al je pagina's voor een consistente look. Hetzelfde geldt voor het Desktop Navigatiemenu.
Dupliceer een Object en Pas Zichtbaarheid Aan
1. Als je een sectie of object niet goed kunt laten werken op mobiel zonder de desktop weergave aan te passen, maak dan een mobiel-specifieke sectie. Dit kan eenvoudig met de "dupliceer" functie, die een kopie van het object maakt. Verander dan de zichtbaarheid van één versie naar alleen-desktop en de nieuwe naar alleen-mobiel. Nu kun je de mobiele versie aanpassen zonder de desktop te beïnvloeden. Dit werkt vooral goed voor afbeeldingen.

Nu we een werkende desktop en mobiele weergave van onze site hebben, is het tijd om de backend instellingen af te ronden voordat we live gaan!

Site instellingen & publiceren

Nu je site is gebouwd, bekijken we de backend instellingen. We nemen alle backend site instellingen door.

Site pagina's/stappen

Hier vind je alle pagina's of stappen van je site. Je kunt een pagina bewerken of bekijken. Je komt hier terecht voordat je de folder waar je website/funnel in staat opent. Na het verlaten van de site builder kom je ook hier terecht.

Een product aan je site pagina koppelen (bestelformulieren)

Om bestelformulieren op je site te gebruiken, moet je een product dat je in Voluit Suite hebt gemaakt aan je specifieke pagina koppelen. Producten moeten worden toegevoegd aan de pagina waar een bezoeker afrekent en je product koopt.

Bij Websites klik je op de drie puntjes rechtsboven op de pagina en selecteer je producten. Bij funnels selecteer je de stap en vervolgens producten in het tabblad rechtsboven.

Na het openen van het tabblad Producten voor een pagina, voeg je het Product toe. Als er nog geen product in je account is aangemaakt, moet je er eerst een maken. Je kunt meer lezen over onze betalingsfuncties in de documenten onder Betalingswijzen.

Site statistieken

Statistieken geven je inzicht in het aantal paginaweergaven en aanmeldingen op je site. Daarnaast zie je het aantal verkopen en zelfs inkomsten.

Site verkopen

Toont elke transactie die op je sites heeft plaatsgevonden. Voor Versie 2 sites hebben we dit verplaatst naar het tabblad Betalingen > selecteer vervolgens de tabbladen Bestellingen en Transacties.

Site instellingen

In de site-instellingen kun je je domein koppelen, het standaardpad bijwerken, een favicon toevoegen en meer. We bespreken elk onderdeel.

Naam - is de naam die je aan je site geeft. Dit is alleen voor intern gebruik en is niet zichtbaar voor je klanten.
Domein - is het domein dat je aan je website koppelt. Bijvoorbeeld: voluitsuite.nl is het domein dat we aan onze site koppelen. Zonder domein kunnen mensen je site niet bezoeken, tenzij je een voorbeeldlink gebruikt. Deze zijn niet aanpasbaar en worden niet aanbevolen.
Pad - is het standaardpad of de extensie voor je site. Het ziet er zo uit: voluitsuite.nl/over → het "/over" is het pad. Elke pagina op een funnel of website heeft zijn eigen pad, en geen twee pagina's kunnen naar hetzelfde pad verwijzen.
Favicon - is het kleine pictogram dat bovenaan je browsertabbladen verschijnt wanneer iemand je site opent en bekijkt. Je moet hier een deelbare afbeeldings-URL toevoegen. Na toevoeging wordt de favicon geladen voor alle pagina's van je site.
Head tracking code - installeert een site-brede tracking code in de header.
Body tracking code - installeert een site-brede tracking code in de body.
Betalingsmodus - als je producten aan je site hebt gekoppeld, kun je je betalingsmodus automatisch schakelen tussen test of live. Met de testmodus kun je Stripe testkaarten gebruiken om het formulier in te vullen en een test uit te voeren. Dit is geschikt voor het testen van je funnel. Bij de lancering wordt een live aankoop aanbevolen als test - je kunt jezelf altijd terugbetalen.
Afbeeldingsoptimalisatie - past je afbeeldingen automatisch aan om sneller te laden. Dit staat standaard aan en het wordt afgeraden om dit uit te schakelen, omdat snellere laadtijden zorgen voor een betere pagina-ervaring voor bezoekers.
Javascript optimalisatie - Javascript is aangepaste code die je kunt installeren om speciale functies op je sites uit te voeren. Javascript kan de laadsnelheid beïnvloeden. Door dit in te schakelen wordt het laden van pagina's verbeterd. De externe Javascript wordt lazy geladen voor betere paginaprestaties.
AVG-conforme Lettertypen - afhankelijk van je wettelijke vereisten kunnen AVG-conforme lettertypen worden ingeschakeld. Dit verwijdert alle lettertypen, zodat je site kan voldoen aan wet- en regelgeving. Raadpleeg altijd een jurist om te zorgen dat je volledig voldoet aan de regels.
Chat Widget - Je chat widget kan worden aangepast en ingesteld onder Sites > Chat Widget. Door dit in te schakelen wordt deze chat widget op al je websites geplaatst. Om deze op specifieke webpagina's te plaatsen, houd je dit uitgeschakeld en kopieer je de code naar de specifieke pagina's waar je de widget wilt hebben. Meer informatie over je chat widget vind je hier: Chat Widget (zie link onderaan).

Publicatie-instellingen

Om de naam van een stap of site en het pad aan te passen, klik je in de site builder op de drie puntjes en selecteer je instellingen. Bij funnels selecteer je de funnel-stap en vervolgens het tabblad "Publiceren".

Hier kun je de stap/site-naam en het pad bewerken. Het pad voor je pagina/site komt aan het einde van een URL. Bijvoorbeeld: voluitsuite.nl/over → het "/over" is het pad. Je kunt deze zelf instellen, anders maken wij er een willekeurige aan. Als het pad al bestaat of in gebruik is op je domein, worden er automatisch nummers toegevoegd omdat je geen dubbele paden kunt hebben.

We kunnen nu onze site publiceren en gebruiken!

Nu we onze sites hebben gebouwd en alle instellingen hebben bijgewerkt, kunnen we ermee aan de slag.

Veelgestelde vragen

Wat zijn globale secties?

Globale secties zijn opgeslagen secties die je op meerdere pagina's kunt gebruiken. Ze zijn uniek omdat je dezelfde sectie op verschillende pagina's kunt toepassen. Als je wijzigingen aanbrengt in een globale sectie, worden deze na het opslaan automatisch bijgewerkt op alle pagina's waar de globale sectie wordt gebruikt. Een goed voorbeeld hiervan is de header/footer van je website. Door een globale sectie als footer of header te gebruiken, heb je dezelfde header op al je pagina's.

Het enige wat we hoeven te doen is een sectie maken die we willen gebruiken, zoals een header voor onze pagina. Ga met je muis over het object, klik op het Opslaan-icoon, geef het een naam, selecteer "Globale Sectie" en klik op Opslaan. Nu kunnen we deze globale sectie aan al onze pagina's toevoegen.

Let op: alle wijzigingen in deze Globale sectie worden na het opslaan bijgewerkt op alle pagina's waar deze wordt gebruikt. Globale secties worden niet automatisch geplaatst, je moet ze zelf toevoegen.

Om een Globale sectie toe te voegen, klik je op het "+Element toevoegen" icoon rechtsboven in je builder. Selecteer vervolgens > Globale Sectie > Kies je globale sectie.

Wat zijn sjabloonsecties?

Vergelijkbaar met een Globale Sectie (zie hierboven) kan een Sjabloonsectie worden opgeslagen en later worden toegevoegd binnen dezelfde webpagina of een andere webpagina. Wijzigingen in deze secties worden niet bijgewerkt in de sjablonen of andere plaatsen waar het sjabloon is toegevoegd.

Wat zijn Funnels?

Een funnel is in marketing een reeks websites die worden gebruikt om leads te verzamelen. Funnels hebben "stappen" waarmee je een reeks websites kunt visualiseren die een potentiële klant zal bezoeken. Bij een boekingsfunnel heb je bijvoorbeeld 3 Funnel-stappen.

Stap 1: Landingspagina - waar je iets kunt aanbieden dat contacten kunnen downloaden in ruil voor hun contactgegevens.
Stap 2: Boekingspagina - Nadat een contact een formulier heeft ingevuld, wil je ze bedanken en een gesprek inplannen. Daarom staat je boekingskalender op deze stap.
Stap 3: Bedankt voor je boeking-pagina - Na het boeken van het gesprek komen klanten op deze pagina terecht, waar ze de volgende stappen zien en worden bedankt voor hun boeking.

Funnels hebben meestal een specifiek doel, zoals het aanbieden van een lead magnet (freebie/weggever) of het boeken van een afspraak. Er zijn veel gebruiksmogelijkheden voor het maken van funnels. Funnels zijn een handige manier om een reeks websites te maken waar contacten doorheen navigeren.

Hoe bekijk je de mobiele weergave van een website op je desktop?

Bij het bewerken van je site wil je misschien de mobiele weergave van je website zien. Je kunt de mobiele weergave van elke website op je desktop bekijken. Klik met de rechtermuisknop op de geladen webpagina, klik op inspecteren en schakel dan de weergave van desktop naar mobiel. Bekijk de gele pijl en de afbeeldingen hieronder.

Hoe upload ik een afbeelding en krijg ik een deelbare link in Voluit Suite?

Om een afbeelding te laden moet je je afbeelding uploaden naar Voluit Suite of een andere deelbare link opgeven. Dit kan in Google en andere plekken, maar we bekijken hier hoe je dit in Voluit Suite doet.

Ga naar Media Storage/ Mediabibliotheek. Selecteer vervolgens "Upload bestand" in de rechterbovenhoek van de mediabibliotheek.

Na het uploaden van de afbeelding kun je met de rechtermuisknop op de afbeelding klikken om de link te kopiëren. Gebruik deze link wanneer een deelbare media-URL vereist is. Bijvoorbeeld binnen Site-instellingen vereist de Favicon een deelbare media-URL. Je plakt deze nieuw geüploade afbeeldings-URL daar zodat je favicon wordt geladen.