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.
Utilizzando l'editor di layout nel design manager, è possibile costruire rapidamente il layout dei contenuti senza dover scrivere alcun HTML.
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.
Per modificare la larghezza di una colonna, passare il mouse tra i moduli e fare clic e trascinare orizzontalmente.
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 gruppo nell'ispettore moduli.
Nota bene: i gruppi di moduli non possono attraversare un separatore di sezione o contenere un gruppo di moduli parzialmente selezionato.
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 modulo nell'ispettore moduli. In alternativa, è possibile fare clic con il pulsante destro del mouse sul modulo nel layout e selezionare Dividi modulo.
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.
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.
Una volta strutturato il layout generale del modello, è possibile scambiare i moduli e apportare altre personalizzazioni al modello.
È 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.
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.
È 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.
Per eliminare un modulo, fare clic sul modulo nell'editor di layout, quindi fare clic sull'icona del cestino per nell'ispettore moduli. In alternativa, è possibile fare clic con il pulsante destro del mouse sul modulo e selezionare Elimina modulo.
Oltre alle opzioni del modulo, sono disponibili diverse azioni specifiche per il modello.