Algemeen thema¶
Odoo provides a range of theme customization options to define the website’s colors and fonts, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
When setting up a website for the first time, you are prompted to select a theme. Hover the mouse over the themes to see an extended preview of each one. Click a theme to select it, or click the View more themes button to display the full list of available themes.
Notitie
If you leave without selecting a theme, the website is created with the default theme.
To customize the theme, open the website editor, navigate to the Theme tab, and go to the Website section. You can:
Click Switch Theme to open the theme selector. Hover the mouse over the themes to see an extended preview of each one. Click Use this theme to apply it to the website.
Add a language for the website.
Select the Page Layout to change the overall display and spacing of building blocks and website elements on pages.
Customize the layout’s Background by:
Click Save to apply the changes to the website.
Kleuren¶
De website-editor van Odoo bevat twee hoofdtypen kleuren: themakleuren en statuskleuren.
Thema kleuren¶
Theme colors refer to the set of colors displayed across all pages of the website. They consist of five colors: three Main colors, used mainly for buttons and links, and two Light & Dark colors, used mainly for text and headings.
To edit the website’s colors, navigate to the Colors section of the Theme tab. Then:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Click the paint palette icon and choose a color palette. As a result, all color customizations are reset.
Odoo automatically creates Color Presets for the chosen colors or palette. These predefined color combinations are applied to various elements of the website to create a structured and visually appealing design. When selecting a color palette, its presets define how those colors are distributed across different elements. To modify them, click Color Presets, then select a preset to open the customization dropdown. Each color preset contains colors for the building block’s Background, Text, Headings, Links, Primary Buttons, and Secondary Buttons.
Tip
To apply a color preset to a building block, select the building block, go to the Style tab, click the color dot located next to Background, and choose a Theme.
Notitie
Het wijzigen van een kleurvoorinstelling werkt automatisch de kleuren bij van zowel de standaardvoorinstelling als de bouwblokken die deze gebruiken.
Statuskleuren¶
Statuskleuren geven de status van bepaalde acties aan (bv. Succes, Waarschuwing, enz.). Ze worden gebruikt in pop-upberichten die verschijnen om feedback te geven aan gebruikers en websitebezoekers. Om de Statuskleuren van de website te personaliseren, scroll naar beneden naar de sectie Geavanceerd en klik op de stippen om hun kleur te wijzigen.
Example
Informatie met betrekking tot een succesvolle actie op de website verschijnt in groen.
Lettertypen¶
Met Odoo kun je de lettertypefamilie en lettergrootte van website-elementen personaliseren, waaronder alinea’s en koppen, knoppen, en invoervelden.
Lettergrootte: Gebruik in de secties Alinea, Koppen, Knop, en Invoervelden het veld Lettergrootte om een standaardgrootte in te stellen. Klik op het (Meer opties in-/uitschakelen) icoon om de sectie uit te vouwen en aangepaste groottes te definiëren (bv. gebaseerd op het niveau van de kop, knopgrootte, enz.).
Lettertypefamilie: selecteer in de secties Alinea, Koppen en Knop een lettertype uit het vervolgkeuzemenu.
Notitie
Wanneer Systeemlettertypen is geselecteerd, gebruikt Odoo de standaardlettertypen die al op het besturingssysteem van de bezoeker zijn geïnstalleerd. Android gebruikt bijvoorbeeld Roboto als standaard systeemlettertype.
Aangepaste lettertypen¶
Om een aangepast lettertype toe te voegen dat niet standaard beschikbaar is in Odoo, klik je op het vervolgkeuzemenu Lettertypefamilie en selecteer je onderaan Een aangepast lettertype toevoegen. In de pop-up Een Google-lettertype toevoegen of een aangepast lettertype uploaden:
Om een Google-lettertype toe te voegen, open je het vervolgkeuzemenu Selecteer een Google-lettertype en selecteer je het gewenste lettertype. Schakel Lettertype vanaf Google-servers weergeven uit als je website wordt geëxploiteerd vanuit een locatie waar regelgeving naleving vereist van wetten zoals, maar niet beperkt tot, de AVG van de Europese Unie. Dit zorgt ervoor dat het Google-lettertype wordt opgeslagen op de server van de website in plaats van op de servers van Google.
Om een Aangepast lettertype vanaf je computer te uploaden, klik je op Bestand kiezen.
Klik als je klaar bent op Opslaan en opnieuw laden.
Tip
Een Voorbeeld van het geselecteerde lettertype wordt aan de rechterkant van het venster weergegeven.
Stijlen¶
Het uiterlijk van website-elementen kan verder worden gepersonaliseerd. Je kunt bijvoorbeeld alinea’s en koppen, knoppen, links, en invoervelden personaliseren.
Alinea’s en koppen¶
De secties Alinea en Koppen bieden aanvullende stijlopties voor deze tekstelementen. Je kunt:
De lettertype-instellingen wijzigen.
De Regelhoogte aanpassen om de afstand tussen tekstregels te definiëren.
Marges aanpassen om de afstand rond alinea’s en koppen te definiëren.
Knoppen¶
Om de stijl van de primaire en secundaire knoppen van de website te personaliseren, navigeer je naar de sectie Knop en bewerk je de relevante opties:
Open het vervolgkeuzemenu naast de velden Primaire stijl of Secundaire stijl om de stijl voor elk knoptype te wijzigen, zoals Vulling, Omtrek, of Plat. Wanneer je Omtrek selecteert, verschijnt de optie Randbreedte eronder, waarmee je de breedte van de omtrek van de knop kunt aanpassen.
De lettertype-instellingen wijzigen.
Pas de Padding aan om de afstand rond de labels van de knoppen te wijzigen.
Gebruik de optie Round Corners om de randradius van de knoppen aan te passen.
Voeg een animatie toe wanneer op een knop wordt geklikt in het vervolgkeuzemenu Klikeffect.
Tip
Om aangepaste Small- en Large-maten voor de Padding, Font Size en Round Corners van de knoppen te definiëren, klik op het -icoon (Toggle more options) en gebruik de gerelateerde velden.
Links¶
Open in de sectie Link het -vervolgkeuzemenu naast Link Style om het uiterlijk van links op de website te kiezen. Je kunt kiezen uit:
No Underline;
Underline On Hover; of
Always Underline.
Invoervelden¶
Navigeer naar de sectie Input Fields en bewerk de relevante opties om de stijl van de invoervelden van de website aan te passen:
Pas de Padding aan om de afstand rond de velden te wijzigen.
De lettertype-instellingen wijzigen.
Personaliseer de Border Width rond velden.
Definieer een Border Radius om de hoeken van de velden af te ronden.
Kies een Background kleur om de velden te vullen.
Geavanceerde instellingen¶
Aanvullende instellingen kunnen worden geconfigureerd in de sectie Advanced, zoals de header tonen of verbergen, Code Injection gebruiken voor websiteverificatie via een HTML-tag, en het configureren van statuskleuren en Grays.
Je kunt ook Google Maps configureren om kaarten weer te geven en geolocatiefuncties op de website in te schakelen, bv. op de pagina Contact Us en in specifieke fragmenten. Om deze optie te configureren:
Ga naar je Google-rekening.
Schakel de Maps Static API, Maps JavaScript API en Places API in.
Belangrijk
Schakel Places API (New) niet in, omdat dit nog niet wordt ondersteund door Odoo.
Het gebruik van de Google API’s kan betaling aan Google vereisen.
Maak een API-sleutel en kopieer deze.
Ga in de website-editor van Odoo naar het tabblad Thema en klik in de sectie Geavanceerd op Aangepaste sleutel naast Google Map.
Plak de gegenereerde API-sleutel in het veld API-sleutel.
Klik op Opslaan.