Tema generale

Odoo offre varie opzioni per modellare il tema del tuo sito web, inclusi colori, caratteri e layout.

Quando configuri il tuo sito web per la prima volta, ti viene chiesto di selezionare un tema. Passa il mouse sui temi per vedere un’anteprima estesa di ciascuno. Clicca su un tema per selezionarlo.

Nota

  • Se esci senza selezionare un tema, il tuo sito web viene creato utilizzando quello predefinito.

  • Puoi cambiare tema in seguito se necessario.

Nel costruttore del sito web, la scheda Tema offre varie opzioni per personalizzare il tema generale del tuo sito web. Per accedervi, clicca su Modifica e vai alla scheda Tema.

Una volta apportate le modifiche desiderate, clicca su Salva per confermarle e applicarle al tuo sito web.

Design

Nella sezione Sito web, clicca su Cambia tema per aprire il selettore dei temi. Passa il mouse sui temi per vedere un’anteprima estesa di ciascuno. Clicca su un tema per applicarlo al tuo 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 in tutte le pagine del tuo sito web. Questi sono composti da cinque colori: tre colori principali e due colori chiari e scuri.

Per modificare i colori del tuo sito web, vai alla sezione Colori nell’editor del sito web, quindi:

  • Clicca sul punto colorato che vuoi modificare, quindi seleziona un colore Solido o clicca su Personalizzato per scegliere manualmente una tonalità specifica (o aggiungi il suo codice #HEX o RGBA).

  • Clicca sull’icona della tavolozza e scegli una tavolozza di colori. Di conseguenza, tutte le personalizzazioni dei colori vengono reimpostate; clicca su un punto colorato per modificare un colore specifico.

Odoo crea automaticamente Preset di colore per la tavolozza scelta. Si tratta di combinazioni di colori predefinite applicate a diversi elementi del tuo sito web per fornire un design strutturato e visivamente accattivante. Quando selezioni una tavolozza di colori, i suoi preset definiscono come quei colori vengono distribuiti tra i diversi elementi di un blocco di costruzione, come pulsanti, sfondi e testo. Se vuoi modificarli, clicca su Preset di colore e clicca su un preset per personalizzarlo ulteriormente. Ogni preset di colore contiene colori per lo sfondo del blocco di costruzione, testo, intestazioni, link, pulsanti primari e pulsanti secondari.

Preset di colore

Per applicare un preset di colore a un blocco del tuo sito, seleziona il blocco, vai alla scheda Personalizza, fai clic sul punto colorato situato accanto a Sfondo e scegli un Tema.

Nota

La modifica di un preset di colore aggiorna automaticamente i colori sia del preset predefinito che dei blocchi in cui il preset viene utilizzato.

Colori di stato

I colori di stato vengono utilizzati per indicare lo stato di determinate azioni (ad es. Successo, Avviso, ecc.). Vengono utilizzati nei messaggi pop-up che appaiono per fornire feedback agli utenti e ai visitatori del sito web. Per personalizzare i Colori di stato del tuo sito web, scorri verso il basso fino alla sezione Avanzate e fai clic sui punti per cambiarne il colore.

Example

Selezione del colore di stato Pop-up di successo

Layout di pagina

L’opzione Layout di pagina nella sezione Sito web consente di modificare la visualizzazione complessiva e la spaziatura dei blocchi e degli elementi del sito web sulle pagine. Fai clic sul menu a discesa e seleziona il layout desiderato. Sotto Layout di pagina, personalizza il tuo Sfondo scegliendo un”Immagine, utilizzando un’immagine selezionata in un Motivo, oppure lasciandolo vuoto.

Caratteri

Odoo consente di personalizzare la famiglia e la dimensione del carattere per elementi specifici del tuo sito web, inclusi paragrafi, intestazioni, pulsanti e campi di input.

  • Famiglia di caratteri: nelle sezioni Paragrafo, Intestazioni e Pulsante, seleziona un carattere dal menu a discesa.

  • Dimensione carattere: nelle sezioni Paragrafo, Intestazioni, Pulsante e Campi di input, utilizza il campo Dimensione carattere per impostare una dimensione predefinita. Fai clic sull’icona (freccia) per espandere la sezione e definire dimensioni personalizzate (ad es. in base al livello di intestazione, dimensione del pulsante, ecc.).

Inoltre, ogni sezione specifica dell’elemento offre opzioni di stile aggiuntive, come Altezza riga e Margini, per un’ulteriore personalizzazione.

Caratteri personalizzati

È possibile utilizzare sul tuo sito web caratteri che non sono offerti per impostazione predefinita in Odoo. Per aggiungere un carattere personalizzato, fai clic sul menu a discesa relativo al campo Famiglia di caratteri e seleziona Aggiungi un carattere personalizzato in fondo al menu a discesa. Nella finestra pop-up:

  • Per aggiungere un carattere Google, fai clic su Seleziona un carattere Google e fai clic sul carattere desiderato nell’elenco. Disattiva l’opzione Servi il carattere dai server di Google se il tuo sito web è gestito da una località in cui le normative richiedono la conformità a leggi come, ma non solo, il GDPR dell’Unione Europea. Ciò garantirà che il carattere Google venga archiviato sul server del tuo sito web anziché su quello di Google.

  • Per caricare un carattere personalizzato dal tuo computer, fai clic su Scegli file.

Una volta terminato, fai clic su Salva e ricarica.

Stili dei pulsanti

Per personalizzare lo stile dei pulsanti primari e secondari del tuo sito web, vai alla sezione Pulsante nell’editor del sito web e modifica le opzioni pertinenti:

  • Fai clic sulla freccia accanto ai campi Stile primario o Stile secondario e seleziona uno degli stili disponibili per ciascun tipo di pulsante: Pieno, Contorno o Piatto. Quando selezioni Contorno, l’opzione Larghezza bordo appare sotto, consentendoti di regolare la larghezza del contorno del pulsante.

  • Modifica i caratteri.

  • Regola il Padding per modificare la dimensione della spaziatura (in pixel) intorno alle etichette dei pulsanti.

  • Personalizza il raggio del bordo dei pulsanti usando l’opzione Angoli arrotondati.

  • Aggiungi un’animazione quando si fa clic su un pulsante nel menu a discesa Effetto al clic.

Pulsanti primari e secondari

Suggerimento

Puoi definire dimensioni personalizzate Piccola e Grande per Padding, Dimensione carattere e Angoli arrotondati dei pulsanti: fai clic sull’icona (freccia) e usa i campi correlati.

Impostazioni di padding, dimensione carattere e angoli arrotondati del pulsante