HubSpot Knowledge Base

Struttura e personalizzazione dei layout dei modelli

Scritto da HubSpot Support | Jan 27, 2021 5:46:22 PM

Imparate a configurare e personalizzare il vostro modello drag and drop esistente e a lavorare con moduli, gruppi e colonne come elementi costitutivi del vostro modello.

Struttura del modello

Utilizzando l'editor di layout nel design manager, è possibile costruire rapidamente il layout dei contenuti senza dover scrivere alcun HTML.

  • Nel Finder, fare clic su un modello per modificarlo.

Aggiungere e trascinare moduli

Per aggiungere un modulo a un layout, fare clic su + Aggiungi nella parte superiore dell'ispettore di layout. Cercare o selezionare unmodulo, quindi trascinarlo nella posizione in cui si desidera che il modulo venga visualizzato nel layout. Trascinando i moduli sopra altri moduli si creano colonne o si raggruppano i moduli.

Modificare la larghezza delle colonne

Per modificare la larghezza di una colonna, passare il mouse tra i moduli e fare clic e trascinare orizzontalmente.

Moduli di gruppo

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

Per raggruppare due moduli, fare clic sul primo modulo, quindi tenere premuto il tasto Control/Command e selezionare il secondo modulo. Ripetete questo passaggio se state raggruppando più di due moduli. Quindi, fare clic sull'icona del gruppogruppoModulo nell'ispettore moduli.

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

Dividere i moduli in orizzontale

La divisione di un modulo lo divide a metà, creando due moduli. Per dividere un modulo, fare clic sul modulo, quindi fare clic sull'icona di divisione del modulosplitModule nell'ispettore moduli. In alternativa, è possibile fare clic con il pulsante destro del mouse sul modulo nel layout e selezionare Dividi modulo.

Moduli centrali

Con i distanziatori orizzontali, è possibile centrare i moduli e i gruppi sulla pagina o aggiungere spazio vuoto su entrambi i lati. Per aggiungere un distanziatore orizzontale, fare clic su + Aggiungi nella parte superiore dell'ispettore di layout. Individuare ildistanziatore orizzontale e trascinarlo nel modello.

Per modificare le dimensioni di un distanziatore orizzontale, modificare la larghezza della colonna che lo separa dagli altri moduli. Per centrare un modulo o un gruppo, aggiungere distanziatori orizzontali su ciascun lato.

Aggiungere una colonna flessibile

Le colonne flessibili sono progettate per facilitare la gestione dei contenuti a livello di pagina per i creatori di contenuti. Quando una colonna flessibile viene aggiunta a un modello di pagina di HubSpot, gli utenti avranno la possibilità di aggiungere, rimuovere e riordinare i moduliall'interno dell'editor della singola pagina. Questa funzione consente ai progettisti di creare un minor numero di modelli, pur garantendo agli addetti al marketing la flessibilità di personalizzare ogni pagina in base alle proprie esigenze.

Per aggiungere una colonna flessibile, fare clic su + Aggiungi nella parte superiore dell'ispettore di layout. Individuare lacolonna flessibile e trascinarla 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 e-mail o blog.
  • I moduli aggiunti alle colonne flessibili non possono avere classi CSS, styling in linea o HTML di impacchettamento associati. Le opzioni di stile devono essere aggiunte alla colonna flessibile stessa.


Personalizzare il modello

Una volta strutturato il layout generale del modello, è possibile scambiare i moduli e apportare altre personalizzazioni al modello.

Modifica delle opzioni del modulo

È possibile modificare le opzioni di un modulo facendo clic sulmodulo nell'editor di layout. Nell'ispettore del modulo, a destra, sono visualizzate le opzioni modificabili del modulo, che in genere 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ù sulla modifica dei CSS dei moduli e dei contenuti e delle impostazioni predefinite.

Modulo di scambio

Dopo aver aggiunto un modulo al modello, si può scegliere di sostituirlo con un altro. Fare clic con il pulsante destro del mouse sul modulo nell'editor di layout, quindi fare clic su Scambia modulo. Nel menu a discesa che appare, selezionare il modulo con cui sostituire il modulo originale.

Convertire in modulo globale

È possibile convertire un modulo del template in un modulo globale, che può essere utilizzato in più template. Questo è utile quando il modulo è stato personalizzato in un certo modo e/o il contenuto del modulo è predefinito e si desidera riutilizzarlo in altri modelli.

  • Fare clic sul modulo nell'editor di layout.
  • Nell'ispettore moduli, fare clic sul menu a discesa Altro e selezionare Converti in modulo globale.
  • Nella finestra di dialogo, inserire il nome del modulo globale, quindi fare clic su Crea.

Cancellare il modulo

Per eliminare un modulo, fare clic sul modulo nell'editor di layout, quindi fare clic sull'icona del cestino pereliminare nell'ispettore moduli. In alternativa, è possibile fare clic con il pulsante destro del mouse sul modulo e selezionare Elimina modulo.

Gestite il vostro modello nel Finder

Oltre alle opzioni del modulo, sono disponibili diverse azioni specifiche per il modello.

  • In alto a destra del modello, fare clic sull'icona della cartella cartella.
  • Fare clic con il tasto destro del mouse sulnome del modello. Nel menu a discesa è possibile personalizzare le seguenti opzioni:
    • Copia nei portali: copia il modello in un altro portale di cui si è utenti. I modelli acquistati dal Marketplace non possono essere copiati su altri portali.
    • Clona modello: crea un duplicato esatto del modello, utile quando si vuole creare una variante di un modello esistente.
    • Clona in HTML: crea una versione HTML separata del modello. È utile se si ha bisogno di un maggiore controllo sul markup o se si vuole imparare di più su come sono codificati i template.
    • Visualizza l'origine del modello: visualizza il codice sorgente HTML del modello. A differenza dell'opzione Clona in HTML , questa non crea una versione HTML separata del modello.
    • Rinomina modello: modifica il nome interno del modello.
    • Mostra dipendenti: visualizza tutte le pagine, le e-mail o i blog che attualmente utilizzano il modello.
    • Mostra la cronologia delle revisioni: consente di visualizzare la cronologia delle revisioni del modello e di scegliere di tornare a una versione pubblicata in precedenza.
    • Crea email/pagina: crea un'email o una pagina di destinazione/sito web direttamente dal modello.
    • Elimina modello: elimina il modello. Una volta eliminato, un modello rimarrà disponibile per30 giorni, dopodiché verrà eliminato definitivamente. Per ripristinare il modello, è necessario contattare l'assistenza clienti.
  • Queste opzioni sono accessibili anche daimenu a discesa Filee Azioni .