HubSpot Knowledge Base

Modificare le impostazioni del tema

Scritto da HubSpot Support | Jan 27, 2021 6:10:13 PM

Un tema è un insieme di stili e modelli che si possono applicare alle pagine del sito web e ai blog in HubSpot. Per garantire un aspetto coerente del sito, le impostazioni di stile per tutte le pagine che utilizzano lo stesso tema sono gestite nelle impostazioni del tema.

Prima di iniziare

Le impostazioni del tema controllano i colori principali, i caratteri e gli stili dei pulsanti delle pagine che utilizzano i modelli del tema.

Attenzione: le opzioni di stile disponibili nelle impostazioni del tema dipendono dalle opzioni del campo del tema incluse dallo sviluppatore web che ha creato il tema.

Alcuni contenuti del vostro sito web sono gestiti in altre parti delle impostazioni del vostro account, tra cui:

Modifica delle impostazioni del tema

È possibile modificare le impostazioni di un tema dall'editor di contenuti per qualsiasi pagina o post che utilizza quel tema:

  • Navigare nel contenuto:

    • Pagine del sito web:
    • Pagine di destinazione:
    • Blog:
  • Fare clic sul nome del contenuto.
  • Nell'editor dei contenuti, fare clic sul menu Modifica e selezionare Tema.

I colori

Le impostazioni dei colori del tema applicano un colore primario, secondario e di sfondo a tutti gli elementi inclusi nei modelli del tema. Questi stili saranno applicati a tutti gli elementi del sito web. Per personalizzare impostazioni più specifiche per intestazioni, caratteri e collegamenti, fare clic su Modifica accanto a Altre impostazioni.

Caratteri

Scegliete un font primario e uno secondario da applicare alle intestazioni, ai moduli, ai pulsanti e al testo del corpo del vostro sito web. Sono supportati tutti i font di Google. Fare clic sulla bolla del colore per personalizzare i colori dei caratteri primari o secondari. È possibile scegliere un semplice valore di colore o fare clic sulla scheda Avanzate e scegliere un valore esadecimale specifico con un selezionatore di colori.

Spaziatura

Le impostazioni del tema per la spaziatura controllano la larghezza massima del contenuto della pagina e la spaziatura verticale tra i diversi elementi della pagina.

Altre impostazioni

All'interno delle impostazioni del tema, si possono avere ulteriori impostazioni dettagliate per stili più specifici della pagina. Le opzioni di stile del tema si basano sui campi del tema inclusi nel modello codificato del tema. Se non riuscite a trovare l'impostazione che state cercando, contattate il progettista del modello per vedere quali opzioni sono state incluse nel modello.

L'esempio che segue è una guida generale a quali tipi di aggiunte possono essere incluse nel tema. Per un riferimento completo dei campi del tema che possono essere inclusi nei modelli, consultare la documentazione del designer.

Nota bene: ricordate che potete personalizzare i caratteri, i colori e gli stili all'interno di un modulo di testo ricco nella vostra pagina, oppure sovrascrivendo gli stili predefiniti del vostro tema nell'editor di pagina. Modificare questi stili solo se si desidera che vengano applicati a tutte le pagine che utilizzano questo tema.

Tipografia

Nelle impostazioni tipografiche è possibile controllare i caratteri applicati a determinati elementi dei modelli. Sono supportati tutti i font di Google. È inoltre possibile selezionare colori personalizzati per determinate intestazioni, font o collegamenti nel tema.

  • Titoli: è possibile personalizzare esattamente il carattere, il colore, la dimensione e lo stile dei titoli inclusi nel tema.
  • Corpo: è possibile personalizzare il carattere, il colore o la dimensione del testo solo per il corpo della pagina.
  • Link: consente di personalizzare il colore predefinito dei link del sito. È inoltre possibile personalizzare il colore e il comportamento dei link quando un visitatore ci passa sopra o fa clic sul link.

Pulsanti

È possibile impostare colori, caratteri e stili personalizzati per i pulsanti delle pagine e del blog. All'interno dell'editor di pagina per una pagina specifica, è possibile cambiare le dimensioni o i tipi di pulsanti, a seconda di come il tema è stato creato dallo sviluppatore del sito web.

  • Dimensioni: specificare le dimensioni dei pulsanti piccoli, normali e grandi della pagina.
  • Primario: un pulsante primario è destinato all'azione più importante che un visitatore compie sulla vostra pagina. Questo colore deve risaltare e attirare l'attenzione del visitatore.
  • Secondario: un pulsante secondario viene utilizzato per azioni relativamente meno importanti quando nella pagina è già presente un pulsante primario. I pulsanti secondari sono tipicamente applicati alle pagine per azioni di minore priorità.
  • Semplice: sono i font e gli stili predefiniti applicati ai moduli dei pulsanti semplici nella pagina.

Moduli

Personalizzate i colori, i caratteri e gli stili di testo predefiniti e gli stili dei pulsanti per i vostri moduli.

  • Titolo: sono gli stili applicati al campo di testo che appare sopra l'intero modulo. In genere include un saluto e le istruzioni per la compilazione del modulo. Questi stili del modulo possono essere gestiti solo qui, nelle impostazioni del tema.
  • Etichette: stili applicati alle etichette che appaiono sopra un campo del modulo.
  • Campi: stili applicati ai nomi dei campi del modulo stesso.
  • Testo di aiuto: è il contenuto di esempio che appare all'interno di ogni campo del modulo, indicando il tipo di informazioni che il visitatore deve inviare.
  • Invia: consente di scegliere lo stile e le dimensioni del pulsante da applicare ai moduli.
  • Colore di sfondo: il colore di sfondo applicato al modulo.
  • Bordo: il colore del bordo attorno ai campi del modulo.
  • Padding : la quantità di spaziatura intorno al modulo nella pagina.

Tabelle

Imposta i colori, i caratteri, la spaziatura e i bordi predefiniti per le tabelle aggiunte alla pagina.

  • Intestazione tabella: i colori applicati ai caratteri nell'intestazione della tabella e il colore di sfondo predefinito per l'intera larghezza della prima riga della tabella. È inoltre possibile impostare un bordo inferiore per un colore d'accento lungo il bordo inferiore dell'intestazione della tabella.
  • Colore carattere: colore predefinito per i caratteri della tabella.
  • Colore di sfondo: colore predefinito per lo sfondo delle celle della tabella.
  • Bordo: colore, larghezza e stile del bordo predefinito della tabella.
  • Imbottitura: la quantità di spazio sopra e sotto la tabella nella pagina.

Per saperne di più su come inserire una tabella in un modulo di testo ricco nella pagina.

Intestazione del sito web

Queste impostazioni controllano i colori e i caratteri che appaiono nell'intestazione della pagina, compreso il menu di navigazione. Per impostare il logo della vostra azienda sui modelli del tema, aggiungete l'immagine del vostro logo alle impostazioni predefinite del vostro account nella sezioneBranding.

  • Menu: selezionare il colore e lo stile del carattere per il menu di navigazione quando i visitatori visualizzano, passano il mouse o fanno clic su una voce del menu. Questi stili possono essere gestiti solo qui, nelle impostazioni del tema.
  • Colore di sfondo: selezionare il colore dello sfondo dell'intestazione del sito.
  • Bordo inferiore: se si desidera, è possibile aggiungere una linea orizzontale come bordo sotto l'intestazione del sito web. Selezionare uno stile per attivare il bordo inferiore, quindi selezionare un colore e una larghezza per il bordo.

Piè di pagina

Queste impostazioni controllano i colori e i caratteri che appaiono nel piè di pagina, compresi i menu di navigazione. Per sapere come impostare il menu di navigazione, consultare le impostazioni dell'account.

  • Menu: selezionare il colore e lo stile del carattere per il menu di navigazione nel piè di pagina del tema. È possibile personalizzare i colori per quando i visitatori visualizzano, passano sopra o fanno clic su una voce del menu. Questi stili possono essere gestiti solo qui, nelle impostazioni del tema.
  • Colore di sfondo: selezionare il colore dello sfondo del piè di pagina del sito web.
  • Bordo inferiore: se lo si desidera, è possibile aggiungere una linea orizzontale come bordo sotto il piè di pagina del sito web. Selezionare uno stile per attivare il bordo inferiore, quindi selezionare un colore e una larghezza per il bordo.

Blog

Queste impostazioni controllano lo stile del modello della pagina di inserzione e del modello del post del blog.

Immagini banner: caricare le immagini da utilizzare come sfondo dell'intestazione del modello di blog. È possibile scegliere un'immagine per la homepage del blog e un'immagine da applicare a tutti i post del blog.

Tag: impostare il colore, i caratteri e gli stili predefiniti per i tag del blog, che appaiono in cima ai post.