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

Strutturare e personalizzare i layout dei template

Ultimo aggiornamento: dicembre 15, 2021

Si applica a:

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

Impara come impostare e personalizzare il tuo modello drag and drop esistente, e lavorare con moduli, gruppi e colonne come elementi costitutivi del tuo modello.

Struttura il tuo modello

Utilizzando l'editor di layout nel design manager, puoi costruire rapidamente il tuo layout di contenuto senza dover scrivere alcun HTML.

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Nel finder, clicca su unmodelloper modificarlo.

Aggiungere e trascinare i moduli

Per aggiungere un modulo a un layout, fai clic su+ Addnella parte superiore dell'ispettore del layout. Cerca o seleziona unmodulo, poi trascinalo nella posizione in cui vuoi che il modulo sia reso nel layout. Trascinando i moduli sopra altri moduli creerai colonne o raggrupperai i moduli.

Cambiare la larghezza delle colonne

Per cambiare la larghezza di una colonna, passate tra i moduli e cliccate e trascinate orizzontalmente.

Moduli di gruppo

I gruppi di moduli sono unità di moduli che compongono diverse sezioni di una pagina.

Per raggruppare due moduli, clicca sulprimo modulo, poi tieni premuto iltasto Control/Commande seleziona ilsecondo modulo. Ripeti questo passo se stai raggruppando più di due moduli. Poi, clicca sull'icona del gruppogroupModulenell'ispettore dei moduli.

Attenzione:i gruppi di moduli non possono attraversare un separatore di sezione o contenere un gruppo di moduli parzialmente selezionato.

Dividere i moduli orizzontalmente

Dividere un modulo rompe il modulo a metà, creando due moduli. Per dividere un modulo, fai clic sulmodulo, quindi fai clic sull'icona del modulo divisosplitModulenell'ispettore dei moduli. In alternativa, puoi fare clic con il tasto destro del mouse sul modulo nel layout e selezionareDividi modulo.

Moduli centrali

Con i distanziatori orizzontali, puoi centrare moduli e gruppi sulla pagina, o aggiungere spazio vuoto su entrambi i lati di essi. Per aggiungere un distanziatore orizzontale, clicca su + Aggiunginella parte superiore dell'ispettore del layout. Individua ildistanziatore orizzontale, quindi trascinalo e rilascialo nel modello.

Per cambiare la dimensione di un distanziatore orizzontale, cambia la larghezza della colonna che lo separa dagli altri moduli. Per centrare un modulo o un gruppo, aggiungi distanziatori orizzontali su ogni lato.

add-horizontal-spacer

Aggiungere una colonna flessibile

Le colonne flessibili sono progettate per rendere la gestione dei contenuti a livello di pagina più facile per i creatori di contenuti. Quando una colonna flessibile viene aggiunta a un modello di pagina HubSpot, gli utenti avranno la possibilità di aggiungere, rimuovere e riordinare i moduliall'interno dell'editor di pagina individuale. Questa caratteristica permette ai designer di creare un minor numero di modelli, pur consentendo ai marketer la flessibilità di personalizzare ogni pagina per soddisfare le loro esigenze.

Per aggiungere una colonna flessibile, fare clic su+ Addnella parte superiore dell'ispettore del layout. Individua lacolonna flessibile, poi trascinala nel modello.

Si prega di notare:
  • Le colonne flessibili possono essere aggiunte solo ai modelli di pagina, e non possono essere aggiunte ai modelli di email o blog.
  • I moduli aggiunti alle colonne flessibili non possono avere classi CSS, stili in linea o HTML di impacchettamento associati a loro. Le opzioni di stile devono essere aggiunte alla colonna flessibile stessa.


Personalizza il tuo modello

Una volta che hai strutturato il layout generale del tuo modello, puoi scambiare i moduli e fare altre personalizzazioni del modello.

Modifica delle opzioni del modulo

Puoi modificare le opzioni di un modulo cliccando sulmodulonell'editor di layout. Nell'ispettore del modulo sulla destra, vedrai le opzioni modificabili del modulo. Queste opzioni generalmente includono lo stile, il contenuto predefinito e le opzioni dell'editor, e possono variare a seconda del tipo specifico di modulo. Per saperne di più sullamodifica del CSS del modulo e del contenuto e delle impostazioni predefinite.

Edit options

Modulo di scambio

Dopo aver aggiunto un modulo al tuo template, puoi scegliere di sostituirlo con un altro modulo. Fai clic con il tasto destro del mouse sulmodulonell'editor di layout, quindi fai clic suSwap module. Nel menu a discesa che appare, seleziona ilmodulocon cui sostituire il modulo originale.

Convertire in modulo globale

Puoi convertire un modulo nel tuo template in un modulo globale, che può essere usato in più template. Questo è utile quando hai stilizzato il modulo in un certo modo, e/o hai contenuti predefiniti nel modulo che vorresti riutilizzare in altri template.

  • Fai clic sulmodulonell'editor di layout.
  • Nell'ispettore dei moduli, cliccate sul menu a discesa More e selezionateConvert to global module.
  • Nella finestra di dialogo, inserite ilnome del modulo globale, poi cliccate suCreate.

Cancellare il modulo

Per eliminare un modulo, fai clic sulmodulonell'editor di layout, quindi fai clic sull'icona del cestinopereliminarenell'ispettore dei moduli. In alternativa, puoi fare clic con il tasto destro del mouse sulmoduloe selezionareElimina modulo.

Gestisci il tuo modello nel finder

Oltre alle opzioni del tuo modulo, ci sono diverse azioni che puoi intraprendere in modo specifico per il tuo modello.

  • In alto a destra del modello, clicca sull'icona dellacartellacartella.
  • Clicca con il tasto destro del mouse sulnomedel modello. Nel menu a discesa, è possibile personalizzare le seguenti opzioni:
    • Copia su portali: copia il modello su un altro portale dove sei anche utente. I modelli acquistati dal Marketplace non potranno essere copiati su altri portali.
    • Clona modello: questo crea un esatto duplicato del tuo modello, ed è utile quando vuoi creare una variazione di un modello esistente.
    • Clone to HTML: questo crea una versione HTML separata del tuo template. Questo è utile se hai bisogno di più controllo sul tuo markup, o se vuoi imparare di più su come i template sono codificati.
    • View template source: visualizza il codice sorgente HTML del template. A differenza dell'opzioneClone to HTML, questononcrea una versione HTML separata del tuo template.
    • Rinomina modello:modifica il nome interno del tuo template.
    • Show dependents: visualizza tutte le pagine, emails, o blogs che stanno usando il template.
    • Show revision history: visualizza la storia di revisione del tuo template e scegli di riportare il tuo template ad una versione precedentemente pubblicata.
    • Crea email/pagina:crea un'email o una landing page/pagina del sito web direttamente dal template.
    • Elimina modello: elimina il modello. Una volta cancellato, un template rimarrà disponibile per30 giorni, dopodiché sarà cancellato definitivamente. Per ripristinare il modello, sarà necessario contattare l'assistenza clienti.
  • Queste opzioni sono accessibili anche daimenu a discesaFileeActionsdicui sopra.