Salta al contenuto
Nota bene: la traduzione in olandese di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.
Design Manager

Usa l'ispettore per dare stile al tuo modello

Ultimo aggiornamento: aprile 2, 2021

Si applica a:

Marketing Hub Professional, Enterprisee
CMS Hub Professional, Enterprisee
Legacy Marketing Hub Basic

Una volta che hai strutturato il tuo modello e aggiunto alcuni contenuti predefiniti, è il momento di pensare alla presentazione estetica del tuo sito.

L'ispettore si trova sul lato destro del gestore del design. È qui che puoi modificare le proprietà di un layout, di un modulo o di un gruppo, così come aggiungere moduli a un layout drag and drop. Quando si tratta di stilizzare il tuo modello, puoi usare l'ispettore per:

  • Allegare fogli di stile o file JavaScript al tuo template
  • Aggiungere markup HTML Head o Footer al tuo template
  • Aggiungere classi CSS personalizzate e stile in linea a un modulo o gruppo specifico

Personalizzare le opzioni head e body del template

Quando accedi al tuo template nel design manager, vedrai l'ispettore del layout sul lato destro se non hai nessun modulo selezionato. Le modifiche fatte nell'ispettore del layout influenzeranno l'intero modello. Qui, puoi personalizzare le opzioni della testa e del corpo del tuo modello.

Collegare i fogli di stile e i file JavaScript

NelleopzioniFogli di stile collegati eFile JavaScriptcollegati, clicca su Aggiungiper selezionare un foglio di stileoun file JavaScript da allegare al modello. Puoi anche scegliere di includere, escludere o usare i fogli di stile predefiniti del dominio nel menu a tendinaFogli di stile del dominio.

Si può imparare dipiù su comecreare e modificare i file CSS per dare stile al tuo sito qui.

Aggiungere il markup HTML Head o Footer

NeicampiAdditional <head> markup e Additionalmarkupbefore </body>, puoi aggiungereil markup HTMLHead oFooter che verrà applicato al template.

Aggiungere una classe o uno stile in linea al corpo del template

Nel campo Bodyclasses,puoi aggiungere un attributo di classe del corpo al template. Si può anche aggiungere uno stile in linea al corpo HTML del template nel campoInlinebody styling.

Personalizzare le opzioni di stile del modulo o del gruppo

Quando si seleziona un modulo specifico nel template, appare l'ispettore dei moduli. Quando si seleziona un gruppo di moduli nel template, appare l'ispettore gruppo. L'ispettore permette di personalizzare le opzioni di stile del modulo o del gruppo.

A seconda che tu stia personalizzando un modulo di modello di email, un modulo di pagina o un gruppo di moduli, le opzioni di stile presentate varieranno. L'esempio seguente mostra le opzioni di stile che sono disponibili per un modulo rich text in un modello di pagina.

Aggiungere una classe CSS

L'attributo HTMLclass ti permette di assegnare classi ai moduli nei tuoi template in modo che possano essere stilizzati usando i CSS. Mentre il tuo template avrà già molte classi predefinite, le classi personalizzate danno ai designer più controllo sull'aspetto di un template, pur mantenendo la flessibilità dell'editor di layout drag-and-drop.

Nell'esempio qui sopra, "bio" viene aggiunto alcampo ClasseCSSnelmodulo rich text. Questo aggiungerà l'attributo HTML class="bio" al tag div contenitore del modulo (un tag HTML che specifica un'area o una divisione di una pagina). La classebio, o glielementi all'interno di questa classe, possono ora essere mirati nel tuo foglio di stile del template.

Nota: questaopzione non èraccomandata per l'uso neitemplate di posta elettronica perché i tag di stile non sono supportati daalcuni client di posta elettronica.

Nel foglio di stile del templateè possibile indirizzare il div contenitore allo stile selezionando la classe personalizzata e applicando varie proprietà CSS. Per esempio, per aggiungere un colore di sfondo al modulo con la classebio,potresti scrivere il CSS come l'esempio qui sotto:

.bio {
background: #CCCCCC;
}

Potresti anche voler indirizzare elementiall'interno del tuomodulo, non solo il div contenitore. Per farlo, puoi usare selettori annidati o discendenti diretti. Per esempio, per indirizzare tutto il testo del paragrafo all'interno del modulo con la classe bio,potresti scrivere un selettore CSS annidato come l'esempio qui sotto:


.bio p {
color: #000000;
}

Aggiungere lo stile in linea

Lo stile in linea è il CSS scritto all'interno dei tuoi tag HTML. Aggiungendo proprietà e valori CSS al campoStilein linea perun modulo o un gruppo applicherai il tuo codice al div contenitore del modulo o del gruppo.

Nell'esempio sopra, margin e color sono usati per regolare la spaziatura e il colore del modulo. Questo aggiungerà l'attributo HTML style="margin-top:30px; color: #00349e;" altag div contenitore del modulo.

Mentre questa opzione può essere utile per correzioni rapide per un particolare modello di pagina, è meno flessibile dell'uso del campoclasse CSSperché devi fare cambiamenti di codice all'interno dei singoli moduli, piuttosto che in un foglio di stile globale del modello.

I client di posta elettronica sono più limitati nelle lorocapacità di rendering HTML e CSSrispetto ai moderni browser web. Come tale, lo stile in linea è il modo migliore per dare stile alle tue email in modo che siano supportate da tutti i client di posta elettronica. I moduli dei template di posta elettronica hanno delle opzioni aggiuntive facili da usare per l'aggiunta di stili in linea, mostrate qui sotto.

Aggiungere l'HTML avvolgente

Anche se l'editor di layout drag-and-drop non fornisce un accesso completo al markup HTML di un template, è possibile aggiungere ulteriore HTML intorno a certi moduli. Questa opzione è per i progettisti che hanno bisogno di un controllo aggiuntivo sull'HTML di un template, ma vogliono comunque mantenere la flessibilità di usare l'editor di layout drag-and-drop su un template HTML grezzo.

Per implementare questa caratteristica, aggiungi il tuo markup HTML e iltokenHTMLHubL (doveil codice del modulo verrà reso) alcampoWrappingHTML.L'esempio precedente mostra un tagHTML5<aside> che avvolgeil modulo.

Aggiungere un ID CSS (solo gruppi di moduli)

L'attributo ID HTMLè disponibile come opzione su qualsiasi gruppo di moduli. Gli ID sono simili alle classi nel senso che ti permettono di assegnare aree del tuo template da indirizzare nel tuo foglio di stile. Tuttavia, a differenza delle classi, gli ID devono essereunici (appaiono solo una volta per modello) e hanno più peso delle classi in termini di specificità CSS.

Nell'esempio qui sotto, ad un gruppo di moduli su una pagina viene dato un ID di "sidebar" nelcampo ID CSS. Questo aggiungerà l'attributo HTML id="sidebar" altag div contenitore delgruppo di moduli. L'IDdella sidebar, o glielementi all'interno di questo ID, possono ora essere mirati nel tuo foglio di stile del template.

Per esempio, per aggiungere un bordo rosso al gruppo con l'IDsidebar, potrestiscrivere il CSS come l'esempio seguente:

#sidebar {
border: 1px solid red;
}