Temă generală¶
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.
Notă
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.
Culori¶
Editorul de site Odoo include două tipuri principale de culori: culori de temă și culori de stare.
Culorile temei¶
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.
Sfat
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.
Notă
Changing a color preset automatically updates the colors of both the default preset and the building blocks that use it.
Culori de stare¶
Culorile de stare indică starea anumitor acțiuni (de ex., Succes, Avertisment etc.). Acestea sunt utilizate în mesajele pop-up care apar pentru a oferi feedback utilizatorilor și vizitatorilor site-ului. Pentru a personaliza Culorile de stare ale site-ului, derulați în jos până la secțiunea Avansat și faceți clic pe puncte pentru a le schimba culoarea.
Example
Informațiile legate de o acțiune reușită pe site apar în verde.
Fonturi¶
Odoo vă permite să personalizați familia de fonturi și dimensiunea fontului elementelor site-ului, inclusiv paragrafele și titlurile, butoanele și câmpurile de introducere.
Dimensiunea fontului: În secțiunile Paragraf, Titluri, Buton și Câmpuri de introducere, utilizați câmpul Dimensiunea fontului pentru a seta o dimensiune implicită. Faceți clic pe pictograma (Comutare mai multe opțiuni) pentru a extinde secțiunea și a defini dimensiuni personalizate (de ex., pe baza nivelului titlului, dimensiunii butonului etc.).
Familie font: În secțiunile Paragraf, Titluri și Buton, selectează un font din meniul derulant.
Notă
Când este selectat Fonturi de sistem, Odoo utilizează fonturile native deja instalate pe sistemul de operare al vizitatorului. De exemplu, Android folosește Roboto ca font de sistem implicit.
Fonturi personalizate¶
Pentru a adăuga un font personalizat care nu este disponibil implicit în Odoo, faceți clic pe meniul derulant Familie de fonturi și selectați Adăugare font personalizat în partea de jos. În fereastra pop-up Adăugați un font Google sau încărcați un font personalizat:
Pentru a adăuga un font Google, deschideți meniul derulant Selectați un font Google și selectați fontul dorit. Dezactivați Servire font de pe serverele Google dacă site-ul dvs. este operat dintr-o locație în care reglementările impun conformitatea cu legi precum, dar fără a se limita la, GDPR al Uniunii Europene. Acest lucru va asigura că fontul Google este stocat pe serverul site-ului, nu pe serverele Google.
Pentru a încărca un Font personalizat de pe computerul dvs., faceți clic pe Alegere fișier.
Odată terminat, faceți clic pe Salvare și reîncărcare.
Sfat
O Previzualizare a fontului selectat este afișată în partea dreaptă a ferestrei.
Stiluri¶
Aspectul elementelor site-ului poate fi personalizat în continuare. De exemplu, puteți personaliza paragrafele și titlurile, butoanele, link-urile și câmpurile de introducere.
Paragrafe și titluri¶
Secțiunile Paragraf și Titluri oferă opțiuni suplimentare de stilizare pentru aceste elemente de text. Puteți:
Modifica setările fontului.
Ajusta Înălțimea liniei pentru a defini spațierea dintre liniile de text.
Ajusta Marginile pentru a defini spațierea din jurul paragrafelor și titlurilor.
Butoane¶
Pentru a personaliza stilul butoanelor principale și secundare ale site-ului, navigați la secțiunea Buton și editați opțiunile relevante:
Deschideți meniul derulant de lângă câmpurile Stil principal sau Stil secundar pentru a schimba stilul pentru fiecare tip de buton, cum ar fi Umplere, Contur sau Plat. Când selectați Contur, opțiunea Lățimea conturului apare mai jos, permițându-vă să ajustați lățimea conturului butonului.
Modifica setările fontului.
Ajustați Spațierea pentru a schimba spațiul din jurul etichetelor butoanelor.
Utilizați opțiunea Round Corners pentru a ajusta raza de rotunjire a marginilor butoanelor.
Adaugă o animație la apăsarea butonului din meniul derulant Efect la click.
Sfat
Pentru a defini dimensiuni personalizate Small și Large pentru Padding, Font Size și Round Corners ale butoanelor, faceți clic pe pictograma (Toggle more options), apoi utilizați câmpurile aferente.
Link-uri¶
În secțiunea Link, deschideți meniul derulant de lângă Link Style pentru a alege aspectul link-urilor pe site. Puteți alege între:
No Underline;
Underline On Hover; sau
Always Underline.
Câmpuri de intrare¶
Pentru a personaliza stilul câmpurilor de intrare ale site-ului, navigați la secțiunea Input Fields și editați opțiunile relevante:
Ajustați Padding pentru a modifica spațierea din jurul câmpurilor.
Modifica setările fontului.
Personalizați Border Width din jurul câmpurilor.
Definiți o Border Radius pentru a rotunji colțurile câmpurilor.
Alegeți o Background color pentru a umple câmpurile.
Setări avansate¶
Setări suplimentare pot fi configurate în secțiunea Advanced, cum ar fi afișarea sau ascunderea antetului, utilizarea Code Injection pentru verificarea site-ului prin intermediul unei etichete HTML și configurarea culorilor de stare și Grays.
De asemenea, puteți configura Google Maps pentru a afișa hărți și a activa funcții de geolocalizare pe site, de exemplu, pe pagina Contact Us și în anumite fragmente. Pentru a configura această opțiune:
Accesați contul dvs. Google.
Activați Maps Static API, Maps JavaScript API și Places API.
Important
Nu activați Places API (New), deoarece nu este încă suportat de Odoo.
Utilizarea API-urilor Google ar putea necesita plata către Google.
Creați o cheie API și copiați-o.
În editorul de site web Odoo, accesați fila Temă, iar în secțiunea Avansat, faceți clic pe Cheie personalizată lângă Google Map.
Lipiți cheia API generată în câmpul Cheie API.
Faceți clic pe Salvați.