Admin helpdesk

Typografie

Pagina’s kunnen aantrekkelijker gemaakt worden met typografie en stijlelementen.

Buttons

De volgende classes zijn beschikbaar voor styling en worden geplaatst op de a tag.
De button class wordt als volgt toegepast:

a class="button"

Buttons in een andere huisstijl kleur weergeven:

a class="button blue-bg" ...
a class="button blue-bg" ...
a class="button green-bg" ...
a class="button mint-bg" ...
a class="button light-blue-bg" ...
a class="button yellow-bg" ...

Voorbeelden van buttons

Button
Button
Button
Button
Button
Button

Blockquotes

Blockquotes worden standaard weergegeven met ‘Obeya’ quotes. Tip: maak gebruik van h2, h3, h4 en bold om de teksten visueel aantrekkelijk te maken. Korte teksten groot, lange teksten klein.

Maak onderscheid tussen een quote en een ‘mededeling’ of ‘tip’. Om blockquotes als een ‘mededeling’ of ‘tip’ weer te geven voeg de volgende css toe:

blockquote class="notice" ...

Voorbeelden van quotes

Een standaard blockquote

Een notice blockquote

Layouts

Pagina’s worden opgemaakt met ‘layouts’. Elke gewenste layout kan gebruikt worden in elke volgorde. De volgende layouts zijn beschikbaar:

Hero

Voeg voor elke pagina een ‘hero’ toe. Gebruik deze alleen al eerste element. Beschikbare mogelijkheden:

  • Volledig: toont titel, intro en een afbeelding aan de rechterzijde
  • Klein: toont alleen titel en intro
  • Pagina titel: toont de standaard opgegeven titel van de pagina
  • Custom titel: toont een aangepaste titel

Beschikbare instellingen:

  • Breadcrumbs: toont breadcrumbs boven de titel. Alleen beschikbaar bij Kleine hero

Accordion

Tekst en beeld

‘Tekst en beeld’ voegt een sectie toe met een tekstblok en een afbeelding naast elkaar.

Beschikbare instellingen:

  • Slanted: een schuine lijn aan de boven, onder of boven en onderzijde
  • Achtergrondkleur: Kies uit de huisstijl kleuren
  • Padding: standaard wordt er padding toegevoegd. Verwijder padding als je secties met elkaar wilt ‘verbinden’
  • Border: een lichtgrijze lijn, boven en/of onder
  • Kolommen omdraaien: wisselt tekst en beeld
  • Section ID: dit is de link naar naar de sectie, bijvoorbeeld: trainingen. Link naar deze sectie door een link toe te voegen, bijvoorbeeld: #trainingen

Kolommen

Kolommen zijn zeer divers in gebruik voor allerlei doeleinden. Zo zijn het aantal kolommen aan te passen in breedte waardoor er een maximaal aantal kolommen naast elkaar kunnen staan.

Beschikbare instellingen:

  • Slanted: een schuine lijn aan de boven, onder of boven en onderzijde
  • Achtergrondkleur: Kies uit de huisstijl kleuren
  • Padding: standaard wordt er padding toegevoegd. Verwijder padding als je secties met elkaar wilt ‘verbinden’
  • Border: een lichtgrijze lijn, boven en/of onder
  • Kolom breedte: Elke pagina bestaat uit 12 ‘columns’. Deze optie bepaalt over hoeveel ‘columns’ de kolom getoond wordt.
    Optie 12 toont de kolom over 12 ‘columns’;
    Optie 10 toont de kolommen over 10 ‘columns’ etc
  • Kolommen centreren: Standaard worden kolommen links uitgelijnd. Toon je twee kolommen die naast elkaar passen, bijv. met optie 5, dan kun je er voor kiezen om de te centreren op de pagina.
  • Section ID: dit is de link naar naar de sectie, bijvoorbeeld: trainingen. Link naar deze sectie door een link toe te voegen, bijvoorbeeld: #trainingen

Logo gallery

Logo Gallery toont een overzicht met alle opgegeven klanten. Je kunt deze toevoegen in Theme Settings > Call to Action

Shortcode

Gebruik de shortcode om code toe te voegen, bijvoorbeeld een product shortcode of code van SurveySparrow. Het blok accepteert html en javascript.

Beschikbare instellingen:

Call to action

Call to action toont een overzicht met alle opgegeven klanten. Je kunt deze toevoegen in Theme Settings > Call to Action