Algemeen thema¶
Odoo biedt verschillende opties om het thema van je website vorm te geven, inclusief de kleuren, lettertypen en lay-out.
Bij het voor de eerste keer instellen van je website word je gevraagd een thema te selecteren. Zweef met je muis over de thema’s om een uitgebreid voorbeeld van elk thema te zien. Klik op een thema om het te selecteren.
Notitie
Als je weggaat zonder een thema te selecteren, wordt je website aangemaakt met het standaardthema.
Je kunt indien nodig later van thema wisselen.
In de websitebuilder biedt het tabblad Thema verschillende opties om het algemene thema van je website te personaliseren. Klik op Bewerken en ga naar het tabblad Thema om er toegang toe te krijgen.
Zodra je de gewenste wijzigingen hebt aangebracht, klik je op Opslaan om ze te bevestigen en toe te passen op je website.
Thema¶
Klik in de sectie Website op Thema wisselen om de themaselectie te openen. Zweef met je muis over de thema’s om een uitgebreid voorbeeld van elk thema te zien. Klik op een thema om het toe te passen op je website.
Kleuren¶
De website-editor van Odoo bevat twee hoofdtypen kleuren: themakleuren en statuskleuren.
Thema kleuren¶
Themakleuren verwijzen naar de set kleuren die op alle pagina’s van je website worden weergegeven. Deze bestaan uit vijf kleuren: drie hoofdkleuren en twee lichte en donkere kleuren.
Ga naar de sectie Kleuren in de website-editor om de kleuren van je website te bewerken:
Klik op de kleurstip die je wilt wijzigen, selecteer vervolgens een Effen kleur of klik op Aangepast om handmatig een specifieke kleurtint te kiezen (of voeg de #HEX- of RGBA-code toe).
Klik op het verfpaleticoon en kies een kleurenpalet. Hierdoor worden alle kleurpersonalisaties gereset; klik op een kleurstip om een specifieke kleur te wijzigen.
Odoo maakt automatisch Kleurvoorinstellingen aan voor je gekozen palet. Dit zijn vooraf gedefinieerde kleurencombinaties die worden toegepast op verschillende elementen van je website om een gestructureerd en visueel aantrekkelijk ontwerp te bieden. Wanneer je een kleurenpalet selecteert, bepalen de voorinstellingen hoe die kleuren worden verdeeld over verschillende elementen van een bouwblok, zoals knoppen, achtergronden en tekst. Als je ze wilt aanpassen, klik je op Kleurvoorinstellingen en klik je op een voorinstelling om deze verder te personaliseren. Elke kleurvoorinstelling bevat kleuren voor de achtergrond, tekst, koppen, links, primaire knoppen en secundaire knoppen van je bouwblok.
Om een kleurvoorinstelling toe te passen op een bouwblok op je site, selecteer je het bouwblok, ga je naar het tabblad Personaliseren, klik je op de kleurstip naast Achtergrond en kies je een Thema.
Notitie
Het wijzigen van een kleurvoorinstelling werkt automatisch de kleuren bij van zowel de standaardvoorinstelling als de bouwblokken waar de voorinstelling wordt gebruikt.
Statuskleuren¶
Statuskleuren worden gebruikt om de status van bepaalde acties aan te geven (bv. Succes, Waarschuwing, enz.). Ze worden gebruikt in pop-upberichten die verschijnen om feedback te geven aan gebruikers en websitebezoekers. Om de Statuskleuren van je website te personaliseren, scroll je naar beneden naar de sectie Geavanceerd en klik je op de stippen om hun kleur te wijzigen.
Example
Pagina-indeling¶
De optie Pagina-indeling in de sectie Website stelt je in staat om de algemene weergave en afstand van bouwblokken en website-elementen op pagina’s te wijzigen. Klik op het vervolgkeuzemenu en selecteer de gewenste lay-out. Onder Pagina-indeling kun je je Achtergrond personaliseren door een Afbeelding te kiezen, een geselecteerde afbeelding in een Patroon te gebruiken of deze leeg te laten.
Lettertypen¶
Odoo stelt je in staat om de lettertypefamilie en -grootte te personaliseren voor specifieke elementen op je website, waaronder alinea’s, koppen, knoppen en invoervelden.
Lettertypefamilie: selecteer in de secties Alinea, Koppen en Knop een lettertype uit het vervolgkeuzemenu.
Lettergrootte: gebruik in de secties Alinea, Koppen, Knop en Invoervelden het veld Lettergrootte om een standaardgrootte in te stellen. Klik op het -icoon om de sectie uit te vouwen en aangepaste groottes te definiëren (bv. op basis van het niveau van de kop, de knopgrootte, enz.).
Daarnaast biedt elke elementspecifieke sectie extra stijlopties, zoals Regelhoogte en Marges, voor verdere personalisatie.
Aangepaste lettertypen¶
Het is mogelijk om lettertypen op je website te gebruiken die niet standaard in Odoo worden aangeboden. Om een aangepast lettertype toe te voegen, klik je op het vervolgkeuzemenu bij het veld Lettertypefamilie en selecteer je onderaan het menu Een aangepast lettertype toevoegen. In het pop-upvenster:
Om een Google-lettertype toe te voegen, klik je op Een Google-lettertype selecteren en klik je op het gewenste lettertype in de lijst. Schakel Lettertype van Google-servers weergeven uit als je website wordt beheerd vanuit een locatie waar regelgeving naleving van wetten vereist zoals, maar niet beperkt tot, de GDPR van de Europese Unie. Dit zorgt ervoor dat het Google-lettertype wordt opgeslagen op de server van je website in plaats van op die van Google.
Als je een aangepast lettertype van je computer wilt uploaden, klik je op Kies bestand.
Klik als je klaar bent op Opslaan en herladen.
Knopstijlen¶
Om de stijl van de primaire en secundaire knoppen van je website te personaliseren, ga je naar de sectie Knop in de website-editor en bewerk je de relevante opties:
Klik op de pijl naast de velden Primaire stijl of Secundaire stijl en selecteer een van de beschikbare stijlen voor elk type knop: Gevuld, Omtrek of Plat. Bij het selecteren van Omtrek verschijnt de optie Randbreedte eronder, waarmee je de breedte van de omtrek van de knop kunt aanpassen.
Pas de Opvulling aan om de grootte van de ruimte (in pixels) rond de knoplabels te wijzigen.
Personaliseer de randradius van de knoppen met de optie Afgeronde hoeken.
Voeg een animatie toe wanneer op een knop wordt geklikt in het vervolgkeuzemenu Klikeffect.
Tip
Je kunt aangepaste Kleine en Grote formaten definiëren voor de Opvulling, Lettergrootte en Afgeronde hoeken van de knoppen: Klik op het -icoon (pijl) en gebruik de gerelateerde velden.
Linkstijl¶
Klik in de sectie Link op Linkstijl om het uiterlijk van links op je website te kiezen. Selecteer Geen onderstreping, Onderstreping bij aanwijzen of Altijd onderstreept in het vervolgkeuzemenu.