Afhankelijk van de user interface van uw website is het mogelijk om de lay-out tot op zekere hoogte vorm te geven door middel van ontwerpinstellingen. Uiteraard blijft Interaction Design een specialistisch vak, maar met deze instellingen ben je niet voor iedere kleine wijziging afhankelijk van een designer en kun je een aantal zaken gewoon zelf regelen.
Uitleg van de ontwerpinstellingen
Om de ontwerpinstellingen van de site aan te passen selecteer je in de categorieboom (linkerzijde van het scherm) de hoogste categorie (1). Hoewel de wortels van een boom meestal onderaan zitten, noemen we dit de 'root'.
Vervolgens klik je in het hoofdscherm op de knop 'Ontwerp' (2). Dan kom je op een pagina met elementen uit de layout die je kunt wijzigen. Laat je een veld leeg dan zal een vooraf gedefinieerde standaardwaarde worden gebruikt.
De vergelijking met een boom met wortels is niet voor niets. Vanuit de wortel (de root) komen vertakkingen*, dat zijn Categorieën met soms weer eigen vertakkingen. Ten slotte komt daar het blad, dat is de pagina met content.
*) uiteraard gaat ook deze vergelijking een beetje mank. 😉 Het gaat er om dat het beeld duidelijk wordt.
Alle pagina's die aan die root hangen zullen de ontwerpinstellingen hiervan overnemen. Tenzij je op een lager liggende categorie of pagina andere ontwerpinstellingen invoert. Dan zullen de instellingen van deze laatste leidend zijn.
Doe je dit op een categorie dan zullen de categorieën en pagina's daarbinnen ook weer deze instellingen overnemen. Een pagina (het blad) kun je wel afzonderlijk instellen, maar heeft geen vertakkingen
De mogelijkheden van instellingen
Hieronder volgt een opsomming van de diverse mogelijkheden. De mogelijkheden kunnen afwijken van die van uw website, het principe en de werking ervan zijn hetzelfde.
Kleuren
Kleurinstellingen die aangepast kunnen worden naar de huisstijl. De titel geeft aan waar de kleur voor bedoeld is.
Afbeeldingen
| Titel | Toelichting |
|---|---|
| Favicon |
Het icoontje in de tab van de browser. Dit is meestal het (of een deel van) logo. |
| Footer logo's | Optie om maximaal drie logo’s in de footer te plaatsen. Bijvoorbeeld het anbi-logo. |
| Logo image | Het logo in de header. |
| Site Background | In plaats van een kleur als achtergrond, kan je een afbeelding als achtergrond toevoegen. |
Afmetingen en waardes
| Titel | Toelichting |
|---|---|
| Canvas width | De breedte van de pagina. |
| Footer logo height | De hoogte van de logo’s die je in de footer hebt geplaatst. Bijvoorbeeld het anbi logo. |
| Footer text size | De tekstgrootte van de tekst in de footer. |
| Header padding | Ruimte onder de header voor de inhoud begint. |
| Header ribbon font size | De grootte van de tekst in de bovenste balk boven de header. |
| Heading 1 t/m font size + line height | De grootte van de kopjes en de bijbehorende regelafstand. |
| Logo width | De breedte van het logo in de header. |
| Navigation font size | De grootte van de menu items. |
| Navigation height | Regelafstand van de menu items. |
| Navigation item space | Hoe ver de menu items van elkaar vandaan staan. |
| Page content width | De breedte van de inhoud op de pagina. |
| Size text font site |
De grootte van de algemene tekst (broodtekst) van de inhoud |
| Size text line height |
De grootte van de algemene tekst (broodtekst) van de inhoud |
Opties
| Titel | Toelichting |
|---|---|
| Canvas boxed |
Canvas wordt volle breedte |
| Category navigation | Aan de linkerkant van de pagina komt het menu te staan. Dit werkt alleen als het gekoppeld is aan een specifiek menu. |
| Footer contact | contactgegevens zijn zichtbaar in de footer. De gegevens kan je invullen onder het kopje ‘teksten’. |
| Footer sticky | footer staat altijd onderaan de content (belangrijk bij pagina’s met weinig inhoud). |
| Header boxed | Header valt binnen canvas width. |
| Header top ribbon |
Wel tonen of niet tonen |
| Login | Login optie wel of niet tonen |
| Navigation highlight | Menu wordt tegen ribbon aan geplakt (bij geen ribbon helemaal tegen bovenkant van het scherm). Het menu item waar je je in bevind krijgt een balkje (highlight) erboven. |
| Page title | Wel of niet zichtbaar make van de pagina titel. |
| Powered by Procurios | Wel of niet tonen van de zin ‘Powered by Procurios’ onderin de footer. |
| Search | Zoeken wel of niet tonen |
| Site background tiles | Als er een achtergrond afbeelding is kan deze wel of niet herhaald worden. |
Teksten
Hier kunnen voor veel HTML-elementen expliciet gewenste CSS-styles worden ingesteld. Kennis van CSS is vereist.
Links
Hier kunnen diverse hyperlinks in de website-lay-out worden ingesteld, zoals voor de social-media-pagina's van de organisatie.