Un tema è un insieme di stili e modelli che si possono applicare alle pagine e ai post del blog in HubSpot. Per garantire un aspetto coerente dei contenuti web, le impostazioni di stile per tutte le pagine e i post che utilizzano lo stesso tema sono gestite nelle impostazioni del tema.
Prima di iniziare
Prima di iniziare a lavorare con questa funzione, assicuratevi di comprendere appieno i passi da compiere in anticipo, nonché le limitazioni della funzione e le potenziali conseguenze del suo utilizzo.
Comprendere le limitazioni e le considerazioni
- Le opzioni di stile disponibili nelle impostazioni del tema dipendono dalle opzioni di campo del tema incluse dallo sviluppatore web che ha creato il tema.
- Le basi di conoscenza utilizzano una versione modificata dei temi. Per saperne di più sulla modifica delle impostazioni del tema della knowledge base.
- Alcuni elementi dei contenuti web sono gestiti in altre parti delle impostazioni dell'account, tra cui:
Modifica delle impostazioni del tema
È possibile modificare le impostazioni di un tema dall'editor completo del tema per qualsiasi pagina o post che lo utilizza. È inoltre possibile modificare le impostazioni del tema per i siti web e le pagine di destinazione nell'editor dei contenuti, se un superamministratore ha optato per l'editor universale dei temi (BETA).
-
Navigare nel contenuto:
- Pagine del sito web:
- Pagine di destinazione:
- Blog:
- Fare clic sul nome del contenuto.
- Per utilizzare l'editor completo del tema per le pagine e i post:
- Nell'editor dei contenuti, fare clic sul menu Modifica e selezionare Tema nella barra degli strumenti dell'editor. Ad esempio, se si utilizza il tema Elevate, fare clic sul menu Modifica e selezionare Tema: Elevate.
-
- Nell'editor del tema, fare clic per espandere le sezioni pertinenti (ad esempio, Colori o Pulsanti) per modificare le impostazioni del tema.
- Al termine, fare clic su Pubblica tema. Si tornerà all'editor dei contenuti.
- Per utilizzare l'editor di temi universale (BETA) per le pagine:
- Nell'editor di contenuti per le pagine, fare clic sull'icona Stili tema globale nella barra laterale sinistra.
- Nella barra laterale sinistra, fare clic per espandere le sezioni pertinenti (ad esempio, Colori o Pulsanti) per modificare le impostazioni del tema. Le modifiche saranno applicate a tutte le pagine e ai modelli che utilizzano il tema.
Capire gli stili del tema
Nelle impostazioni del tema possono essere presenti opzioni di stile per caratteri, colori, pulsanti e collegamenti. È inoltre possibile disporre di ulteriori impostazioni dettagliate per stili più specifici sulla pagina. Le opzioni di stile del tema si basano sui campi del tema inclusi nel modello codificato del tema. Se non si riesce a individuare l'impostazione desiderata, contattare il progettista del modello per verificare quali opzioni sono incluse nel modello.
Gli esempi che seguono sono una guida generale ai tipi di opzioni di stile che 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: è possibile personalizzare caratteri, colori e stili all'interno di un modulo di testo ricco della pagina o sovrascrivendo gli stili predefiniti del tema nell'editor della pagina. Modificare questi stili solo se si desidera che vengano applicati a tutte le pagine che utilizzano questo 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.
Caratteri
Scegliete un font primario e secondario da applicare alle intestazioni, ai moduli, ai pulsanti e al testo 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 o del post e la spaziatura verticale tra i diversi elementi.
Tipografia
Nelle impostazioni tipografiche è possibile controllare i caratteri applicati a determinati elementi dei modelli. Sono supportati tutti i font di Google. È anche possibile selezionare colori personalizzati per alcune intestazioni, font o link 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à.
- Semplici: sono i font e gli stili predefiniti applicati ai moduli dei pulsanti semplici nella pagina.
Moduli
Personalizzate i colori, i caratteri, gli stili di testo e gli stili dei pulsanti predefiniti 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. Per saperne di più su come inserire una tabella in un modulo di testo ricco nella 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. È anche 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.
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 lo 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.