Tema generale¶
Odoo fornisce una gamma di opzioni di personalizzazione del tema per definire i colori e i caratteri del sito web, nonché l’aspetto di paragrafi e titoli, pulsanti, link e campi di input. Sono inoltre disponibili impostazioni avanzate aggiuntive.
Quando si configura un sito web per la prima volta, viene richiesto di selezionare un tema. Passare il mouse sui temi per visualizzare un’anteprima estesa di ciascuno. Fare clic su un tema per selezionarlo oppure fare clic sul pulsante Visualizza altri temi per visualizzare l’elenco completo dei temi disponibili.
Nota
Se si esce senza selezionare un tema, il sito web viene creato con il tema predefinito.
Per personalizzare il tema, aprire l’editor del sito web, accedere alla scheda Tema e andare alla sezione Sito web. È possibile:
Fare clic su Cambia tema per aprire il selettore di temi. Passare il mouse sui temi per visualizzare un’anteprima estesa di ciascuno. Fare clic su Usa questo tema per applicarlo al sito web.
Aggiungere una lingua per il sito web.
Selezionare il Layout di pagina per modificare la visualizzazione complessiva e la spaziatura dei blocchi di costruzione e degli elementi del sito web nelle pagine.
Personalizzare lo Sfondo del layout:
Fare clic su Salva per applicare le modifiche al sito web.
Colori¶
L’editor del sito web di Odoo presenta due tipi principali di colori: colori del tema e colori di stato.
Colori del tema¶
I colori del tema si riferiscono all’insieme di colori visualizzati su tutte le pagine del sito web. Sono costituiti da cinque colori: tre colori Principali, utilizzati principalmente per pulsanti e link, e due colori Chiaro e scuro, utilizzati principalmente per testo e titoli.
Per modificare i colori del sito web, accedere alla sezione Colori della scheda Tema. Quindi:
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.
Fare clic sull’icona della tavolozza dei colori e scegliere una tavolozza di colori. Di conseguenza, tutte le personalizzazioni dei colori vengono reimpostate.
Odoo crea automaticamente Impostazioni predefinite di colore per i colori o la tavolozza scelti. Queste combinazioni di colori predefinite vengono applicate a vari elementi del sito web per creare un design strutturato e visivamente accattivante. Quando si seleziona una tavolozza di colori, le sue impostazioni predefinite definiscono il modo in cui tali colori vengono distribuiti tra i diversi elementi. Per modificarle, fare clic su Impostazioni predefinite di colore, quindi selezionare un’impostazione predefinita per aprire il menu a discesa di personalizzazione. Ogni impostazione predefinita di colore contiene colori per Sfondo, Testo, Titoli, Link, Pulsanti primari e Pulsanti secondari del blocco di costruzione.
Suggerimento
Per applicare un’impostazione predefinita di colore a un blocco di costruzione, selezionare il blocco, accedere alla scheda Stile, fare clic sul punto di colore situato accanto a Sfondo e scegliere un Tema.
Nota
La modifica di un preset di colore aggiorna automaticamente i colori sia del preset predefinito che dei blocchi di costruzione che lo utilizzano.
Colori di stato¶
I colori di stato indicano lo stato di determinate azioni (ad es., Successo, Avviso, ecc.). Vengono utilizzati nei messaggi pop-up che appaiono per fornire un feedback agli utenti e ai visitatori del sito web. Per personalizzare i Colori di stato del sito web, scorrere verso il basso fino alla sezione Avanzate e fare clic sui puntini per cambiarne il colore.
Example
Le informazioni relative a un’azione riuscita sul sito web vengono visualizzate in verde.
Caratteri¶
Odoo consente di personalizzare la famiglia di caratteri e la dimensione del carattere degli elementi del sito web, inclusi paragrafi e intestazioni, pulsanti e campi di input.
Dimensione carattere: nelle sezioni Paragrafo, Intestazioni, Pulsante e Campi di input, utilizzare il campo Dimensione carattere per impostare una dimensione predefinita. Fare clic sull’icona (Attiva/disattiva più opzioni) per espandere la sezione e definire dimensioni personalizzate (ad es., in base al livello di intestazione, alla dimensione del pulsante, ecc.).
Famiglia di caratteri: nelle sezioni Paragrafo, Intestazioni e Pulsante, seleziona un carattere dal menu a discesa.
Nota
Quando è selezionato Caratteri di sistema, Odoo utilizza i caratteri nativi già installati sul sistema operativo del visitatore. Ad esempio, Android utilizza Roboto come carattere di sistema predefinito.
Caratteri personalizzati¶
Per aggiungere un carattere personalizzato non disponibile per impostazione predefinita in Odoo, fare clic sul menu a discesa Famiglia di caratteri e selezionare Aggiungi un carattere personalizzato in fondo. Nel pop-up Aggiungi un carattere Google o carica un carattere personalizzato:
Per aggiungere un carattere Google, aprire il menu a discesa Seleziona un carattere Google e selezionare il carattere desiderato. Disattivare Servi il carattere dai server Google se il sito web è gestito da una località in cui le normative richiedono la conformità a leggi quali, ma non solo, il GDPR dell’Unione Europea. Ciò garantirà che il carattere Google sia archiviato sul server del sito web anziché sui server di Google.
Per caricare un Carattere personalizzato dal computer, fare clic su Scegli file.
Al termine, fare clic su Salva e ricarica.
Suggerimento
Un”Anteprima del carattere selezionato viene visualizzata sul lato destro della finestra.
Stili¶
L’aspetto degli elementi del sito web può essere ulteriormente personalizzato. Ad esempio, è possibile personalizzare paragrafi e intestazioni, pulsanti, link e campi di input.
Paragrafi e intestazioni¶
Le sezioni Paragrafo e Intestazioni offrono opzioni di stile aggiuntive per questi elementi di testo. È possibile:
Modificare le impostazioni dei caratteri.
Regolare l”Altezza della riga per definire la spaziatura tra le righe di testo.
Regolare i Margini per definire la spaziatura intorno a paragrafi e intestazioni.
Pulsanti¶
Per personalizzare lo stile dei pulsanti primari e secondari del sito web, accedere alla sezione Pulsante e modificare le opzioni pertinenti:
Aprire il menu a discesa accanto ai campi Stile primario o Stile secondario per modificare lo stile per ciascun tipo di pulsante, come Riempimento, Contorno o Piatto. Quando si seleziona Contorno, l’opzione Larghezza bordo appare di seguito, consentendo di regolare la larghezza del contorno del pulsante.
Modificare le impostazioni dei caratteri.
Regola il Padding per modificare la spaziatura intorno alle etichette dei pulsanti.
Utilizza l’opzione Round Corners per regolare il raggio del bordo dei pulsanti.
Aggiungi un’animazione quando si fa clic su un pulsante nel menu a discesa Effetto al clic.
Suggerimento
Per definire dimensioni personalizzate Small e Large per Padding, Font Size e Round Corners dei pulsanti, fai clic sull’icona (Toggle more options), quindi utilizza i campi correlati.
Collegamenti¶
Nella sezione Link, apri il menu a discesa accanto a Link Style per scegliere l’aspetto dei collegamenti sul sito web. Puoi scegliere tra:
No Underline;
Underline On Hover; oppure
Always Underline.
Campi di input¶
Per personalizzare lo stile dei campi di input del sito web, vai alla sezione Input Fields e modifica le opzioni pertinenti:
Regola il Padding per modificare la spaziatura intorno ai campi.
Modificare le impostazioni dei caratteri.
Personalizza la Border Width intorno ai campi.
Definisci un Border Radius per arrotondare gli angoli dei campi.
Scegli un Background color per riempire i campi.
Impostazioni avanzate¶
Impostazioni aggiuntive possono essere configurate nella sezione Advanced, come mostrare o nascondere l’intestazione, utilizzare l”Code Injection per la verifica del sito web tramite un tag HTML e configurare i colori di stato e i Grays.
Puoi anche configurare Google Maps per visualizzare le mappe e abilitare le funzionalità di geolocalizzazione sul sito web, ad esempio, nella pagina Contact Us e in snippet specifici. Per configurare questa opzione:
Vai al tuo account Google.
Abilita le Maps Static API, Maps JavaScript API e Places API.
Importante
Non abilitare Places API (New), in quanto non è ancora supportata da Odoo.
L’utilizzo delle API di Google potrebbe richiedere un pagamento a Google.
Crea una chiave API e copiala.
Nell’editor del sito web di Odoo, vai alla scheda Tema, e, nella sezione Avanzate, clicca Chiave personalizzata accanto a Google Map.
Incolla la chiave API generata nel campo Chiave API.
fai clic su Salva.