Struttura e personalizzazione dei modelli con l'editor di layout

Utilizzate l'editor di layout nel design manager per strutturare e personalizzare i modelli con il drag and drop. Organizzando moduli, gruppi e colonne, è possibile controllare la struttura dei contenuti nelle pagine. Questo permette anche ai creatori di contenuti di avere un maggiore controllo nell'editor di pagine.

Prima di iniziare

Prima di strutturare e personalizzare le pagine utilizzando l'editor di layout nel design manager, è necessario esaminare i requisiti e le considerazioni.

Comprendere le limitazioni e le considerazioni

• Le modifiche apportate a un modello si applicano a tutti i contenuti che lo utilizzano.
• Alcune funzioni, come le colonne flessibili, sono disponibili solo per i modelli di pagina.

Strutturare un modello

Usare l'editor di layout per strutturare l'organizzazione dei contenuti all'interno di un modello.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic su un modello per aprirlo nell'editor di layout.

Aggiungere e organizzare i moduli

I moduli sono gli elementi costitutivi del layout di un modello. Trascinando un modulo accanto a un altro modulo si creano delle colonne. Trascinando un modulo sopra un altro si raggruppano i moduli.

1. Nell'ispettore, fare clic su + Aggiungi.
2. Immettere il testo per cercare un modulo e fare clic sul modulo.
3. Trascinare il modulo nell'editor di layout.

Modificare la larghezza delle colonne

Per modificare la larghezza di una colonna:

1. Nell'editor di layout, passare il mouse tra due moduli.
2. Fare clic e trascinare orizzontalmente per regolare la larghezza della colonna.

Raggruppare i moduli

Raggruppare i moduli per organizzare le sezioni di un modello.

Per raggruppare i moduli:

1. Nell'editor di layout, selezionare un modulo.
2. Tenere premuto il tasto Control (Windows) o Command (Mac) e selezionare altri moduli.
3. Nell'ispettore, fare clic sull'icona groupModule Raggruppa 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

La divisione di un modulo lo divide a metà, creando due moduli.

Per dividere un modulo:

1. Nell'editor di layout, fare clic su un modulo

2. Nell'ispettore, fare clic sull'icona splitModule Dividi modulo.

Centrare i moduli

Utilizzate i distanziatori orizzontali per centrare i moduli e i gruppi sulla pagina o per aggiungere spazio vuoto su entrambi i lati.

Per aggiungere un distanziatore orizzontale:

1. Nell'ispettore, fare clic su + Aggiungi.

2. Digitare distanziatore orizzontale nel campo Cerca. Quindi trascinare il modulo Distanziatore orizzontale in posizione sul modello nell'editor di layout.

3. Per modificare le dimensioni di un distanziatore orizzontale, modificare la larghezza della colonna che lo separa dagli altri moduli.

4. Per centrare un modulo o un gruppo, aggiungere modulidistanziatori 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 si aggiunge una colonna flessibile a un modello di pagina di HubSpot, gli utenti avranno la possibilità di aggiungere, rimuovere e riordinare i moduli all'interno dell'editor della singola pagina. Questa funzione consente ai progettisti di creare un minor numero di modelli, pur lasciando agli addetti al marketing la flessibilità di personalizzare ogni pagina in base alle proprie esigenze.

1. Nell'ispettore, fare clic su + Aggiungi.

2. Digitare colonna flessibile nel campo di ricerca. Quindi trascinare il modulo Colonna flessibile in posizione sul modello nell'editor di layout.

Personalizzare il modello

Dopo aver strutturato il layout del modello, è possibile sostituire i moduli e apportare altre personalizzazioni al modello.

Modifica delle opzioni del modulo

Le opzioni di modifica di un modulo includono lo stile, il contenuto predefinito e possono variare a seconda del tipo specifico di modulo. Per saperne di più sulla modifica dei CSS e dei contenuti e delle impostazioni predefinite dei moduli.

1. Nell'editor di layout, fare clic su un modulo.
2. Nell'ispettore, personalizzare le opzioni del modulo.

Scambiare il modulo

Dopo aver aggiunto un modulo al modello, si può scegliere di sostituirlo con un altro.

1. Nell'editor di layout, fare clic con il pulsante destro del mouse sul modulo e selezionare Scambia modulo.

2. Nel pop-up, selezionare il modulo con cui sostituire il modulo originale.

Convertire in modulo globale

Converte un modulo del modello in un modulo globale, che può essere usato in più modelli. Si può utilizzare quando il modulo è stato personalizzato in un certo modo o quando si dispone di contenuti predefiniti nel modulo che si desidera riutilizzare in altri modelli.

1. Nell'editor di layout, fare clic su un modulo.
2. Nell'ispettore, fare clic sul menu a discesa Altro e selezionare Converti in modulo globale.
3. Nella finestra di dialogo, inserire il nome del modulo globale e fare clic su Crea.

Eliminare un modulo

1. Nell'editor di layout, fare clic su un modulo.

2. Nell'ispettore, fare clic sull'icona del cestino delete.

Gestire il modello nel Finder

Oltre alle opzioni dei moduli, è possibile eseguire diverse azioni specifiche per il modello.

1. Nel Finder, fare clic sul nome di un modello.
2. Fare clic sul menu a discesa Azioni e selezionare un'opzione:
   • Copia in un altro account: copia il modello in un altro account 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 trascinato. È utile se si ha bisogno di un maggiore controllo sul markup o se si desidera approfondire la codifica dei 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 direttamente dal modello.
   • Elimina modello: elimina il modello. Una volta eliminato, il modello resterà disponibile per 30 giorni, dopodiché verrà eliminato definitivamente. Per ripristinare il modello, è necessario contattare l'assistenza clienti.