Documentation Klikplaat web-app

Introductie

Klikplaat.nl is een web-app waarmee je gemakkelijk een afbeelding kunt omtoveren tot interactieve website. Met het CMS kun je de afbeelding verrijken en verdiepen door het toevoegen van teksten, afbeeldingen, video’s of links naar andere pagina’s. Hier vind je een korte uitleg van het aanmaken en instellen van een klikplaat.

Login

Met je inloggegevens kun je inloggen in je persoonlijke portaal op dashboard.klikplaat.nl . Hier vind je alle klikplaten die onder jouw account vallen. Klik op de betreffende klikplaat waar je mee aan de slag wilt.

Homescreen:

Algemeen

Hier kun je de naam en url van je klikplaat aanpassen. Zodra je de afbeeldingsbestanden hebt geupload is dit ook de plek waar je de achtergrond plaat instelt. 

Thema
Kies hier de kleuren voor de navigatie buttons(primair) en de links(secundair). 

Ook kun je hier de lettertypes instellen. Onder het kopje padding kun je de padding instellen van de content in de pop-ups.

Bestanden:

Hier kun je in bulk alle afbeeldingen uploaden. Door vooraf de afbeeldingen te nummeren in relatie met de dot zijn de afbeeldingen later makkelijker te linken. We onderscheiden twee type afbeeldingen: achtergrond en overlay. Zodra een dot wordt aangeklikt zal de achtergrond vervagen en de overlay in volle opacity getoond worden.

Zodra je de bestanden hebt geupload kun je in het homescreen de achtergrond selecteren bij het vakje achtergrond.

Intro:

Er is de optie om een intro-scherm te tonen. Dit is een popup gecentreerd in het midden over de plaat die via het CMS gevuld kan worden met een introductie tekst en eventuele afbeeldingen en video’s. Als het invoerveld van het kopje intro leeg wordt gelaten zal er geen intro getoond worden.

Aanwijspunten:

 * Met de laatste update is het ook mogelijk om direct in de editor aanwijspunten aan te maken. Kijk bij het kopje editor hoe je dit doet. Je kunt deze stap dan overslaan.

Onder het kopje aanwijspunten kun je nieuwe aanwijspunten aanmaken. In het invoerveld “label” kies je het getal dat in de dot wordt weergegeven. Ook kun je hier de kleur van de dot en de tekst instellen. Om het aanwijspunt nog beter te herkennen kun je optioneel een titel invoeren. Het grote invoerveld is de plek om alle content van  de betreffende dot in te voegen.

Onderaan vind je de opties om de plaatsing (links, rechts, boven of beneden) en de grootte van de popup in te stellen.

Maak hier voor alle dots die je in de plaat wil hebben een aanwijspunt aan voordat je naar de volgende stap gaat.

Editor:

In de editor kun je de aanwijspunten over de afbeelding plaatsen. Dit doe je door in het menu onderaan op het plusje te klikken. Vervolgens kun je op een locatie in de afbeelding klikken om daar het aanwijspunt te plaatsen.

Er verschijnt een popup met twee opties:

Maak nieuw aanwijspunt

Selecteer deze optie om een nieuw aanwijspunt aan te maken tijdens het plaatsen. Je kunt daarna verder gedaan bij het instellen van de animatie.

Verbind aanwijspunt

Een aanwijspunt heeft een zowel een locatie waarop deze over de afbeelding is geplaatst, als een “container” waarin straks de inhoud (teksten, afbeeldingen, video’s) geplaatst kunnen worden. Indien de aanwijspunten eerder zijn aangemaakt moeten met elkaar verbonden worden.

Zodra dit is gedaan verschijnt het aanwijspunt in het venster aan de linkerkant. 

Animatie instellen.

Door op een dot the klikken in het overzicht van de aanwijspunten in het linker venster, of door het penseel icoon te selecteren en op een dot te klikken in de preview, kom je bij de instellingen van de animatie terecht. Dit is de “animatie” die wordt getoond zodra er op een dot wordt geklikt. 

Allereerst kun je bij het veld “zichtbare overlay” het overlay afbeeldingsbestand koppelen met het aanwijspunt. Dit zorgt ervoor dat wanneer de achtergrond vervaagt bij het klikken op de dot, de relevante afbeelding op de voorgrond wordt getoond. 

Bij zoom en verplaatsing x-as, y-as kun je inzoomen en centreren zodat het overlay bestand mooi in beeld komt t.o.v. de getoonde pop-up. In de preview kun je zien hoe dit eruit komt te zien. 

Desktop – mobile.

Indien de klikplaat ook op mobiel goed getoond moet worden kun je de toggle button desktop-mobile aanklikken om ook de zoom- en verplaatsings instellingen op mobiel in te stellen.

Vergeet niet de instellingen op te slaan voordat je terug gaat naar het overzicht.

Open klikplaat:

Via de button “open klikplaat” kun je snel naar de url van je klikplaat navigeren. Deze opent in een nieuw venster. Zo kun je snel zien hoe de gekozen instellingen effect hebben op de uiteindelijke klikplaat.

Verander eigenaar:

Hier kun je een account aanmaken voor je klant. Je klant heeft dan toegang tot het CMS van de klikplaat, met beperkte functionaliteit om de inhoud van de pop ups in te kunnen vullen en aan te passen.