1. Styling

Aan de rechterkant van het scherm bevindt zich een preview van de WebApp, waar je direct kunt zien hoe de aangebrachte wijzigingen eruitzien. 

Het is belangrijk om te weten dat de styling van je WebApp niet automatisch wordt opgeslagen. Dit betekent dat je wijzigingen kunt maken en de resultaten kunt bekijken in de preview, maar om de veranderingen daadwerkelijk toe te passen en op te slaan, moet je op de ‘save’ knop rechts onderaan het scherm klikken. Zodra je de aanpassingen hebt opgeslagen, verschijnt er een bevestigingsbericht dat aangeeft dat de wijzigingen succesvol zijn opgeslagen. 

In de eerste tab 'Main' kan je de volgende functies toevoegen en veranderen:

Logo en favicon

• Logo (zie afbeelding 3)
• Logo formaat
• Favicon: De Favicon is het kleine logo in het tabblad van de webbrowser. Om het te veranderen klikt u hier om naar Favic-o-matic te gaan, Klik op 'Every damn size, sir!' en download uw favicon. Upload vervolgens het .zip-bestand hier (zie afbeelding 4 - favicon in webbrowser)

Vertoning (Appearance)

• Terug knop (deze knop kan je tonen en verbergen)
• Logo plaatsing (header logo placement): Kan je links en in het midden. Je kan het logo alleen links zetten als je de terug knop op verbergen hebt gezet
• Pijl type in knoppen (arrow type): Elke lijst knop heeft een pijl zodat de gast/gebruiker weet waar hij of zij op moet klikken. In ons systeem heb je keuze uit 8 verschillende pijlen (zie afbeelding 5 - verschillende pijlen voor de lijst knop)
• Ronde locks (round locks): Als je sloten in je webapp hebt kun je kiezen voor ronde of vierkante knoppen in de sliders (zie afbeelding 6 - sliders met een ronde schuifknop / vierkante schuifknop)
• Titels in hoofdletters (uppercase titles): Als je deze aanzet hoef je niet handmatig alles in hoofdletters te zetten
• Rand radius (border radius)
• Header verdwijnt door scrollen (scroll my header)

Lettertype (Font)

• Lettertype: Ons platform maakt gebruik van Google Fonts, er is keuze uit 45+ lettertypes. In de dropdown kan je de verschillende lettertype previews bekijken.
• Lettertype grootte (font size)

Ruimte en hoogtes (Spacing)

• Ruimte in de (Web)App (spacing)
• Ruimte om de knop heen (button spacing)
• Ruimte van de kant (side spacing)
• Hoogte van de module (module spacing)

Pagina titel (Page Title)

• Pagina titel vertonen (show page title)
• Pagina titel in het midden van de header (center page title)
• Pagina titel met achtergrond kleur (use background color)
• Pagina titel grootte (size)

In de tweede tab kan je de kleuren van de (Web)App aanpassen.

Kleuren -  Header

• Header kleur (header color)
• Header knop kleur (header button color): Dit zijn de kleuren voor de terug knop en talen
• Header icoon kleur (header icon color): Dit is de kleur van de tekst in de de terugknop en talenknop

Kleuren - Vertoning (Appearance)

• Webapp achtergrondkleur (background color)
• Tekstkleur (Text color)
• Link kleur (Link color)

Kleuren - Module

• Module achtergrondkleur (module color)
• Module Kleur (module color)

Kleuren -  Icoon (Icon)

Op ons platform is er keuze uit meer dan 53.000 verschillende iconen. Voor je iconen in je (Web)App kan je je icoon stijl, vorm, toon en kleur kiezen.

• Icoon stijl (icon style): We hebben keuze uit de volgende icoonstijlen: Licht (light), dun (thin), normaal (regular) en stevig (solid)
• Icoon vorm (icon shape): We hebben keuze uit de volgende icoon vormen: Normaal (regular) en scherp (sharp)
• Icoon toon (icon tone): We hebben keuze uit de volgende icoon tonen: normaal (regular) of duotoon (duotone). Duotoon bestaat uit 2 kleuren.
• Icoonkleur (icon color)

Kleuren - Paginatitel (Page title)

• Achtergrondkleur (page title)
• Tekstkleur (text color)

Kleuren - Native app (alleen voor apps, geen webapps)

• Navigatiebar kleur (navigation bar color)
• Navigatiebar icoon kleur (navigation bar icon color)

Kleuren - Overig (Other)

• Knopkleur (button color)
• Tekst in knop kleur (button text color)
• Invoervelden Kleur (input color)
• Invoervelden tekstkleur (input text color)
• Foto slider knop kleur (photo slider buttons)

Per module kan je de kleur overschrijven door de opties aan te vinken. 

• Kop (heading): In kop (heading) module kan de tekstkleur en de achtergrondkleur van de kop veranderd worden
   
• Tekst (text): In de tekst (text) module kan de tekstkleur en de achtergrondkleur van de tekst veranderd worden
• Knoppen (buttons): In de knoppen module kan de tekstkleur en de achtergrondkleur van de knop veranderd worden
   
• Omgeving (surroundings): In de omgeving (surroundings) module kan de tekstkleur en de achtergrondkleur van de module veranderd worden
   
• Weer (weather): In de weer (weather) module kan de tekstkleur en de achtergrondkleur van de module veranderd worden
   
• Feedback: In de Feedback module kan de tekstkleur en de achtergrondkleur van de Feedback veranderd worden
   
• Sloten (locks): In de sloten (locks) module kan de tekstkleur en de achtergrondkleur van de Sloten veranderd worden
   
• Zoekbalk (search): In de zoekbalk module kan de tekstkleur en de vulkleur van de zoekbalk veranderd worden
   
• Mijn verblijf (my stay): In de ‘mijn verblijf’ module kan de achtergrondkleur van de module veranderd worden

Hier kun je iFrame-scripts plaatsen. Neem gerust contact met ons op als je een script wilt toevoegen aan de (Web)App.