Ultimo aggiornamento: gennaio 19, 2023
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 grupponell'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 divisonell'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.
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.
- 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.
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 cestinopernell'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 dellacartella.
- 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.
