Designer

Via het onderdeel designer kan de vormgeving van een website op een grafische manier worden aangepast. De designer is onderdeel van het CMS maar wordt in de site-editor geopend via 'Algemeen > Designer':

Website thema wijzigen

Website thema's.

In het eerste tabblad van de designer kan een ander thema voor de website worden geselecteerd waarmee het ontwerp in één keer wordt gewijzigd. Een klik op een thema leidt naar het detail van het thema:

Website thema wijzigen.

In het detail kan een ander kleurschema voor het thema worden gekozen. De knop 'Kies dit thema' selecteert het thema. Het thema is niet meteen op de live versie van de website te zien. De knop 'Publiceren' zet het thema live.

Thema kleuren aanpassen

Webdesign kleuren aanpassen.

In het tweede tabblad kunnen alle kleuren van het thema worden gewijzigd. Dit kunnen zowel tekst, achtergrond, kader of kleurverloop kleuren zijn. Een klik op een kleur toont de ingebouwde kleurenkiezer waarmee uit meer dan 16 miljoen verschillende kleuren kan worden gekozen:

Thema kleuren kiezen.

Wanneer de optie 'Identieke kleuren automatisch aanpassen' aanstaat worden identieke kleuren van hetzelfde type(bv. tekstkleuren) ook aangepast bij het aanpassen van een kleur. De knop 'Publiceren' zet de kleurwijzigingen live.

Thema lettertypen aanpassen

In het derde tabblad kunnen de lettertypen, groottes en regelafstanden van het thema op een snelle manier worden aangepast.

Lettertypen wijzigen
In de uitklaplijsten worden alle unieke lettertypen van het thema getoond. Wordt bijvoorbeeld in de header, content, zijkolom en footer van de website het lettertype Verdana gebruikt en in het menu het lettertype Arial dan worden hier de lettertypen Verdana en Arial getoond. Door het lettertype Verdana op Arial te zetten en op 'Opslaan' te klikken wordt overal het lettertype Arial gebruikt.

Lettergroottes en regelafstanden wijzigen
Via de plus en min knopjes bij de lettergroottes en regelafstanden kunnen alle lettergroottes en regelafstanden op de website met enkele pixels worden vergroot of verkleind. Wordt bijvoorbeeld in de header een lettergrootte van 15 pixels gebruikt en in het menu een lettergrootte van 12 pixels dan worden deze respectievelijk 17 en 14 pixels groot bij een verhoging met 2 pixels. Hetzelfde principe geldt voor de regelafstanden:

De knop 'Publiceren' zet de tekstwijzigingen live.

Thema afmetingen aanpassen

Webdesign afmetingen wijzigen.

In het vierde tabblad kunnen enkele afmetingen van het thema worden aangepast, bijvoorbeeld de header hoogte of website breedte. De aan te passen afmetingen zijn per thema verschillend. De knop 'Publiceren' zet de aanpassingen aan de afmetingen live.

Geavanceerde opties

Geavanceerde webdesign instellingen.

In het vijfde tabblad kunnen de onderdelen van het thema tot in detail worden aangepast. Via de uitklaplijst linksboven in het tabblad wordt een onderdeel van de weblayout geselecteerd, bv. 'Achtergrond'. Diverse instellingen van de website achtergrond kunnen vervolgens worden aangepast. De knop 'Standaard' zet aanpassingen aan een instelling terug naar de standaard waarde. De knop 'Publiceren' zet de wijzigingen live.

Wijzigingen opslaan als thema

Webdesign wijzigingen opslaan als thema.

Wanneer een kleur, lettertype, afmeting of geavanceerde instelling is gewijzigd verschijnt in het eerste tabblad de knop 'Wijzigingen opslaan als thema'. Met deze knop worden wijzigingen opgeslagen als maatwerk thema. Een klik op de knop toont een popup waar de naam en eventueel een afbeelding voor het maatwerk thema kunnen worden ingesteld:

Naam en afbeelding maatwerk thema.

Het maatwerk thema wordt toegevoegd aan de lijst van thema's:

Maatwerk thema in lijst van thema's.

Vaste stijlen

Vaste stijlen vormgeven.

In het zesde tabblad worden de vaste stijlen beheerd die zijn aangemaakt via de vormgeving van een element. Door in de bovenste uitklaplijst een vaste stijl te selecteren kunnen de instellingen voor deze stijl worden bewerkt. Aanpassingen aan een vaste stijl zijn meteen op de live versie van een website te zien.

Over het onderdeel designer zijn diverse tutorials gemaakt.

Twitter icon YouTube icon Facebook icon LinkedIn icon RSS icon