Canvassen & contactformulieren

Module 4

Module 4: Canvassen & contactformulieren /

Bekijk ook

Canvassen

Wat is een canvas?

Een canvas is een sectie met inhoud op een pagina, m.a.w. de bouwstenen van een pagina. Wanneer je een pagina bewerkt onder het tabblad Page, zal je zien dat deze dus bestaat uit meerdere canvassen:
Het tabblad Page geeft de canvassen van een pagina weer
Naam van de pagina
Wanneer je op een canvas klikt, dan zie je de verschillende elementen die dat canvas bevat: tekst, afbeeldingen, vormen, icoontjes, ...
Geselecteerd canvas
Alle elementen in het canvas
Geselecteerd element (zie blauw kader)
Geselecteerd element 

Page canvas

Site canvas

Dit is een canvas dat uniek is voor de pagina waarop het gebruikt wordt. Je kan dit canvas herkennen aan de egale grijze kleur van het blokje. 

Bijvoorbeeld: het stukje 'Aanbod' op de homepagina.

Dit canvas kan op verschillende pagina's gebruikt worden. Wanneer je een site canvas bewerkt, wordt deze automatisch geupdate op de andere pagina's waar deze op staat. Je kan een site canvas ook herkennen aan de schuine streepjes.

Soorten canvassen

Wanneer je een pagina bewerkt, zal je zien dat er twee soorten canvassen zijn:
Je kan onder het tabblad Site onderaan een overzicht zien van alle site canvassen op je site.

Een canvas bewerken

Bij het selecteren van een canvas zal je aan de rechterkant van je scherm een aantal opties zien. We gaan even dieper in op de twee meest gebruikte opties, nl. 'Canvas' en 'Canvas background'.
Selecteer hier het canvas dat je wilt bewerken
Naam van het canvas (alleen zichtbaar voor jou)
Stapelvolgorde
(vb. het canvas 'transparant menu' met stacking order van 1 zal boven het canvas geplaatst worden met een stacking order van 0) 

Canvas

Onder de optie Canvas kan je algemene instellingen vinden zoals de naam, het type canvas, kan je de hoogte instellen, ... etc. Dit kan je afzonderlijk instellen voor mobile & desktop.
Dit kan je aanvinken als je een canvas initieel onzichtbaar wilt maken (vb. bij een popup)
Canvasgrootte (in pixels)
Canvas met een vaste hoogte (in pixels)
Canvas dat de hoogte overneemt van het browser scherm (en dus het scherm volledig vult)
Specifiek voor blogs: het canvas past zich automatisch aan aan de hoeveelheid content in het canvas (vb. het canvas zal groter worden als je blog titel twee lijnen inneemt en minder ruimte innemen als de blog maar één lijn inneemt)
Het canvas blijft altijd zichtbaar aan de bovenkant van het scherm
Het canvas blijft altijd zichtbaar aan de onderkant van het scherm
Eenmaal je op de positie van het canvas op de pagina komt, blijft het zichtbaar aan de bovenkant van het scherm
Eenmaal je op de positie van het canvas op de pagina komt, blijft het zichtbaar aan de onderkant van het scherm

Canvas background

Geen achtergrondkleur
Kleur als achtergrond
Kleurverloop als achtergrond
Afbeelding als achtergrond
Video als achtergrond
Bij Canvas background kan je, zoals de naam het al zegt, de achtergrond instellen. Dit kan een kleur zijn, een verloop, maar ook een afbeelding of video. Ook dit stel je afzonderlijk in voor mobile & desktop.

Wil je een leuk scroll effect wanneer je een achtergrondafbeelding instelt? Kijk dan zeker eens bij de opties parallax scroll en fixed!
Afbeelding als achtergrond
Kies de positie van de afbeelding
Scroll effecten
Hier kan je een overlay instellen (zet een kleur over je afbeelding, vb. zwart om een donkere laag over je afbeelding te creëeren)

✍🏻 Uitleg bij de video

Een nieuwe canvas toevoegen aan een pagina

Wil je iets extra toevoegen aan een pagina, vb. een sectie met een review? Dan kan je een nieuw canvas toevoegen.

Dit doe je door een pagina te selecteren, vervolgens naar het tabblad Page te gaan en op de drie bolletjes te klikken naast de naam van de pagina. Je zal twee opties zien: 
  • Add New Canvas: voeg een bestaand canvas toe (uit andere pagina's op je website of uit andere designs)
  • Add Blank Canvas: voeg een blanco canvas toe 
Een bestaand canvas toevoegen
Een blanco canvas toevoegen
Ga naar het tabblad 'Page'

Add New Canvas

Wanneer je kiest voor Add New Canvas, zal er een popup verschijnen met vier tabbladen. Zo kan je een canvas toevoegen uit een andere pagina op je eigen site, maar kan je er ook voor kiezen om een canvas toe te voegen uit een ander design in je mediabibliotheek of uit één van de gratis designs van Showit.

Wanneer je er voor kiest om een canvas uit een ander design toe te voegen, kan je bovendien ook aanduiden of je de originele design instellingen wilt behouden of jouw eigen design instellingen wilt toepassen (m.a.w. het kleurenpalet en de lettertypes die jij zelf hebt ingesteld).
Voeg een canvas toe uit andere sites in je Showit account (waarschijnlijk zal hier enkel je huidige site staan)
Voeg een canvas toe uit designs die je hebt geïmporteerd in je Showit account (als je andere templates hebt gekocht)
Kies een canvas uit één van de pagina's op je huidige site
Voeg een canvas toe uit één van de gratis designs van Showit zelf

Add Blank Canvas

Wil je een blanco canvas toevoegen, kies dan voor Add Blank Canvas. Je zal zien dat het blanco canvas onderaan de pagina wordt toegevoegd. Je kan deze uiteraard gewoon naar boven slepen en zo naar de juiste positie te brengen.

Voor eigen referentie kan je het canvas ook een andere naam geven door op de drie bolletjes te klikken bij het canvas en vervolgens Rename te kiezen.
Het canvas komt onderaan de pagina te staan (sleep naar boven indien nodig)
Klik hier om het canvas een andere naam te geven

Extra opties: dupliceren, verwijderen, ...

Wanneer je op de drie bolletjes klikt van een canvas, zal je nog meer opties zien verschijnen:
Geef het canvas een andere naam (kan alleen jij zien)
Canvas view toevoegen
Canvas dupliceren
Canvas kopiëren
Canvas knippen
Canvas wel/niet zichtbaar maken op desktop
Canvas wel/niet zichtbaar maken op mobile
Maak een automatisch design op van dit canvas op mobile
Converteer page canvas naar site canvas
Canvas verwijderen van pagina
Canvas views

✍🏻 Uitleg bij de video

Wat is een canvas view?

Een canvas view laat je toe om verschillende inhoud weer te geven op één canvas (sectie van je pagina). Je kan het vergelijken met een slideshow waarbij elke slide (canvas view) unieke inhoud weergeeft in hetzelfde canvas. 

Canvas views kan je gebruiken voor:
  • Een sectie met reviews waarbij je kan doorklikken naar de volgende review 
  • Een slideshow van achtergrondafbeeldingen 
  • Contactformulieren
  • ...

Laten we eens kijken naar het voorbeeld van de reviews. We willen dan dat mensen op de pijltjes kunnen klikken en telkens een nieuwe review te zien krijgen. Dat wilt zeggen dat we per review een eigen canvas view nodig hebben. Dat ziet er zo uit in Showit en kan je herkennen aan de mapjes in een canvas: 

Een canvas view toevoegen

Laten we eens kijken naar het voorbeeld van de reviews. Als we zoiets willen creëren, moeten we dus voor elke recensie een canvas view aanmaken. Wanneer je je eerste recensie hebt aangemaakt, kan je deze in een canvas view plaatsen door het canvas te selecteren en op de drie bolletjes te klikken. Vervolgens klik je op Add Canvas View.
Elke review wordt in een eigen canvas view (mapje) geplaatst
Klik hier om een canvas view toe te voegen
Je zal zien dat er een mapje verschijnt in het canvas. Dit is een canvas view. Sleep de tekst van de recensie in de canvas view (in dit geval de tekst van de review + naam van de klant).

Let er zeker op dat alle andere content die continu zichtbaar moet blijven, niet in een canvas view wordt geplaatst.

Vervolgens kan je de canvas view een andere naam geven, mocht je dat handig vinden. Dit doe je door op de drie bolletjes te klikken en dan op Rename.
Geef een andere naam aan de canvas view
Plaats de review in de canvas view
Nu je de recensie in een canvas view geplaatst hebt, kan je eenvoudig meerdere reviews toevoegen door de canvas view te dupliceren. Klik hiervoor op de drie bolletjes en dan op Duplicate. Vervolgens kan je in elke canvas view een recensie schrijven.
Klik hier om het canvas view te dupliceren
Nu willen we uiteraard ook nog dat mensen kunnen doorklikken naar de vorige/volgende review. Hiervoor moeten we een click action zetten achter de pijlen.

Selecteer de pijl en ga vervolgens aan de rechterkant van je scherm naar Click Actions. Stel vervolgens in dat de pijl moet linken naar de vorige / volgende canvas view. 

✍🏻 Uitleg bij de video

Al mijn Showit templates bevatten een contactpagina met een contactformulier dat je kan aanpassen. Het formulier in de template bevat standaard velden zoals naam, e-mailadres, onderwerp, ... en uiteraard het berichtenveld.

Goed om te weten: alle formulier inzendingen worden automatisch verstuurd naar het e-mailadres waarmee je inlogt in Showit.

In het Showit dashboard zal het contactformulier er ongeveer zo uit zien:

Contactformulieren

Aan de linkerkant zie je dat een contactformulier uit twee canvas views bestaat:
  • Canvas view 1: Contactformulier, bevat de velden van het formulier + verzendknop
  • Canvas view 2: Bedankt, bevat een berichtje om te melden dat het contactformulier verzonden is. 

Het is dus de bedoeling dat mensen de velden kunnen invullen en wanneer zij op de verzend knop klikken, doorgestuurd worden naar de tweede canvas view met de bevestiging. Die ziet er ongeveer zo uit:

Velden van het contactformulier

❗️In de Showit template staat alles juist ingesteld, dus pas niet te veel aan om te vermijden dat het contactformulier niet meer werkt. Deze uitleg kan je gebruiken om je contactformulier uit te breiden.

Hoe zorg je er nu voor dat mensen het contactformulier kunnen invullen? Dat doe je door een tekstregel toe te voegen en vervolgens aan de rechterkant bij Text properties een aantal instellingen aan te duiden:
Dit zorgt ervoor dat mensen het veld kunnen invullen
Veld verplicht maken
Dit veld wordt weergegeven in het onderwerp van de notificatiemail naar jou bij een nieuwe inzending (kan enkel jij zien)
Dit dient enkel voor het veld e-mailadres zodat Showit weet dat er geantwoord moet worden op het e-mailadres dat de bezoeker heeft ingegeven
Label van het veld dat in de notificatiemail van Showit naar jou toe komt te staan (kan enkel jij zien)
Label van het veld

Verzenden van het contactformulier

Wanneer mensen alle velden hebben ingevuld, zullen ze natuurlijk het formulier moeten kunnen verzenden. Daarom moet er achter de knop 'verzenden' een actie worden ingesteld dat ervoor zorgt dat het formulier naar jou wordt verzonden. 

Je zal zien dat achter de knop + de tekst 'verzenden' een Click action is ingesteld waarbij:
  • Mensen doorklikken naar de tweede canvas view (waar het bedankt berichtje staat)
  • Het vinkje Submit contact form staat aangeduid (zorgt ervoor dat het formulier wordt verzonden)
De knop + tekst linkt naar de volgende (tweede) canvas view 
Dit zorgt ervoor dat het formulier wordt verzonden wanneer mensen op verzenden klikken

✍🏻 Uitleg bij de video

volgende Modules in de Showit cursus