Creazione e modifica dei moduli nel Design Manager

Create moduli personalizzati nel Design Manager per aggiungere funzioni avanzate al vostro blog, alle pagine o alle e-mail. I moduli personalizzati offrono un'ampia gamma di funzionalità che consentono di personalizzare completamente i contenuti all'interno dell'editor di pagine, e-mail o blog.

Prima di iniziare

Prima di iniziare a creare o modificare i moduli personalizzati nel Design Manager, è necessario recensire i requisiti e le considerazioni. 

Comprendere limiti e considerazioni

• se non si ha familiarità con HTML, HubL e CSS, si consiglia di collaborare con uno sviluppatore per creare moduli nel Design Manager.

Creare un modulo

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nella parte superiore del Finder, fare clic sul menu a discesa File e selezionare Nuovo file.

3. Nella finestra di dialogo, fare clic sul menu a discesa Cosa si desidera costruire oggi? e selezionare Modulo.
4. Fare clic su Avanti.
5. Nel campo Dove si desidera utilizzare questo modulo , selezionare la casella di controllo accanto a ciascun tipo di contenuto in cui verrà utilizzato il modulo (ad esempio, Post blog, Email o Landing page). 
6. Nel campo Ambito del contenuto del modulo , selezionare un' opzione (ad esempio, Modulo locale o Modulo globale). Se si crea un modulo globale, la modifica del contenuto di questo modulo aggiornerà ogni luogo in cui il modulo è utilizzato. 
7. Inserire un nome di file per il modulo.
8. Per modificare la posizione del file del modulo, fare clic su Cambia nella sezione Posizione del file . Nella pop-up, selezionare una nuova posizione e fare clic su Seleziona.
9. Al termine, fare clic su Crea.
10. Continuare a modificare il modulo.

Nota bene: i moduli utilizzati nelle e-mail non includono CSS o JavaScript. 

Modifica di un modulo

Dopo aver creato un modulo nel Design Manager, è possibile personalizzarne la funzionalità e l'aspetto. Etichettare il modulo per renderlo più chiaro, aggiungere e configurare i campi e regolare le opzioni dell'editor di campo, come il contenuto predefinito. Impostare le condizioni di visualizzazione e le opzioni di ripetizione e raggruppare i relativi campi per una migliore organizzazione. È anche possibile copiare e incollare frammenti di campo, scrivere la sintassi personalizzata del modulo, aggiungere un utile testo di istruzioni e modificare i tipi di modello con cui il modulo può essere utilizzato.

Aggiunta di un'etichetta a un modulo

Nel Design Manager, aggiungere o aggiornare un'etichetta per un modulo, per aiutare gli utenti a trovarlo nell' editor dei contenuti. Se l'etichetta è vuota, il nome del modulo verrà visualizzato per impostazione predefinita.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire il modulo di cui si desidera modificare l'etichetta.
3. Nell' ispettore, inserire un' etichetta.

Aggiungere campi a un modulo

Aggiungere campi a un modulo per impostarne il contenuto o lo stile e renderlo modificabile nell'editor dei contenuti. Per saperne di più sui tipi di campo disponibili. 

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' ispettore, nella sezione Campi , fare clic sul menu a discesa Aggiungi campo . Selezionare quindi un campo da aggiungere al modulo.

4. Per modificare il nome del campo, fare clic sull'icona edit e inserire un nuovo nome. Per modificare il nome della variabile HubL, inserire un nuovo nome nel campo Nome variabile HubL . 

Personalizzare il contenuto predefinito dei campi

Nella sezione Opzioni contenuto , aggiungere il contenuto predefinito che appare quando il modulo viene utilizzato nei modelli e negli editor di contenuti. Le opzioni per il contenuto predefinito variano a seconda del tipo di campo.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' ispettore, nella sezione Campi , passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Opzioni di contenuto , aggiungere o modificare le opzioni di contenuto predefinite. Le opzioni di contenuto predefinite disponibili dipendono dal tipo di campo selezionato.

Ad esempio, aggiungendo un tipo di campo Data e ora a un modulo, è possibile selezionare una data e un'ora predefinite. È inoltre possibile inserire un intervallo di tempo predefinito.

Impostare le opzioni dell'editor di campo

Nella sezione Opzioni dell'editor , è possibile rendere un campo obbligatorio e impedirne la modifica nell'editor dei contenuti. È inoltre possibile personalizzare il testo della guida. 

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' ispettore, nella sezione Campi , passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Opzioni dell' editor , per rendere il campo obbligatorio, attivare l'interruttore Rendi questo campo obbligatorio . Questo impedirà agli utenti di lasciare il campo vuoto nell'editor di contenuti.
5. Per impedire la modifica del contenuto di un campo, attivare l'interruttore Impedisci la modifica negli editor di contenuto . Il contenuto del campo può ancora essere personalizzato nel Design Manager a livello di modello. Questa opzione non è disponibile per i moduli globali.
6. Per aggiungere un contesto o istruzioni sull'uso del campo, inserire il testo nel campo di testo della Guida agli strumenti o nel campo di testo della Guida in linea .
   • Testo di aiuto: questo testo apparirà in un tooltip quando l'utente passa il mouse sull'icona infoCircleIcon nell'editor dei contenuti.
   • Testo di aiuto in linea: questo testo apparirà sotto il campo quando un utente modifica il modulo nell'editor di contenuti.

Impostare le condizioni di visualizzazione del campo

Nella sezione Condizioni di visualizzazione , utilizzare le condizioni di visualizzazione dei campi per impostare un campo del modulo in modo che appaia solo se un altro campo soddisfa determinati criteri.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' ispettore, nella sezione Campi , passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Condizioni di visualizzazione , fare clic sul menu a discesa Variabile HubL e selezionare una variabile. 
5. Fare clic sul secondo menu a discesa e selezionare un' opzione (ad esempio, È uguale a o Non è vuoto). A seconda dell'opzione selezionata, possono essere richiesti altri campi per le condizioni. Ad esempio, se si seleziona È uguale a, è necessario un campo valore aggiuntivo.
6. Per impostazione predefinita, le condizioni di visualizzazione vengono attivate automaticamente una volta configurata una condizione. Per disattivare le condizioni di visualizzazione, spegnere l'interruttore Condizioni di visualizzazione .

Impostare le opzioni del ripetitore di campo

Nella sezione Opzioni di ripetizione , selezionare le opzioni di ripetizione per i campi e i gruppi. Quando le opzioni di ripetizione sono attivate, vengono creati e visualizzati più oggetti utilizzando un ciclo for loop.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' ispettore, nella sezione Campi , passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Opzioni ripetitore , inserire un numero nei campi Minimo e Massimo (opzionale) . Questo imposta il numero minimo di volte che il campo apparirà nel modulo fino al valore massimo. 
5. Per impostare il numero di volte che un campo deve essere visualizzato per impostazione predefinita, inserire un numero nel campo Conteggio oggetti predefinito .
6. Per impostazione predefinita, le opzioni del ripetitore vengono attivate automaticamente una volta configurate. Per disattivare le opzioni del ripetitore, spegnere l'interruttore Opzioni ripetitore .

Ad esempio, le opzioni di ripetizione di un campo immagine vengono modificate per mostrare almeno tre e fino a cinque campi immagine. Il valore di quattro campi immagine è configurato come predefinito. Nell'editor di contenuti, l'utente vedrà quattro campi immagine per impostazione predefinita e potrà aggiungere un altro campo immagine o rimuovere un campo immagine esistente.

Campi del modulo di gruppo

Dopo aver creato i campi, raggrupparli per tenerli organici in base alla rilevanza. I gruppi di campi possono essere utilizzati per creare una logica di campo personalizzata. Raggruppa fino a quattro campi. Per saperne di più sui gruppi di campo dei moduli.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' Inspector, nella sezione Campi , fare clic sul menu a discesa Azioni e selezionare Raggruppa.
4. Selezionare uno o più campi da raggruppare e fare clic su Crea gruppo.

Aggiungere un testo di aiuto al modulo

Nella sezione Opzioni dell'editor , aggiungere un testo di aiuto per fornire agli utenti un contesto durante la modifica del modulo. Questo testo verrà visualizzato sopra i campi del modulo. 

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' ispettore, nella sezione Opzioni dell'editor , inserire un testo nel campo Testo della guida in linea .

Gestire i tipi di contenuto e la disponibilità di un modulo

Aggiungete o rimuovete i tipi di contenuti per i quali gli utenti possono utilizzare un modulo, come Post blog o Landing page. È anche possibile attivare o disattivare la disponibilità di un modulo nei modelli e nelle pagine.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Per modificare i tipi di contenuto di un modulo, fare clic su Tipi di contenuto sotto il nome del modulo nell' ispettore in alto a destra.

1. • Nella finestra di dialogo, selezionare o deselezionare la casella di controllo accanto a ciascun tipo di contenuto in cui il modulo verrà utilizzato o meno (ad esempio, Post blog, Email o Landing page). 
   • Al termine, fare clic su Aggiorna.

4. Per gestire la disponibilità di un modulo nei modelli o nelle pagine, attivare l'interruttore Rendi disponibile per i modelli e le pagine in alto a destra. Per testare la funzionalità del modulo o disattivarne la disponibilità nei modelli e nelle pagine, disattivare l'interruttore Rendi disponibile per modelli e pagine . 

Nota bene: la disattivazione dell'interruttore Rendi disponibile per i modelli o le pagine non rimuove il modulo dai modelli o dalle pagine esistenti.

Copiare e incollare frammenti di campo

Quando si incorpora un campo in un modulo, copiare e incollare il frammento del campo nella sezione module.html (HTML + HubL) dell' editor del modulo.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell' ispettore, passare il mouse su un campo del modulo e fare clic sul menu a discesa Azioni nella sezione Campi . Quindi selezionare Copia frammento. 
4. Nell' editor del modulo, incollare il frammento di campo nella posizione desiderata all'interno della sezione module.html (HTML. + HubL) . È possibile utilizzare la scorciatoia da tastiera Cmd+V o Ctrl+V. 

Sintassi del modulo di scrittura

Durante la modifica del modulo, scrivere la sintassi nell' editor del modulo per le sezioni module.html (HTML + HubL), module.css e module.js . Per saperne di più sull'editor di moduli e sulla panoramica dei moduli.

Anteprima e pubblicazione di un modulo

Una volta terminata la modifica di un modulo, compresa l'aggiunta di campi e la scrittura della sintassi del modulo, è possibile visualizzare l'anteprima e pubblicare il modulo. 

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Per visualizzare l'anteprima di un modulo, fare clic su Anteprima in alto a destra. Verrete indirizzati a una nuova scheda del browser per visualizzare l'anteprima del modulo. Questa anteprima si sincronizza con l' editor del modulo e si aggiorna automaticamente quando vengono apportate modifiche.
4. Per pubblicare un modulo, fare clic su Pubblica modifiche. 

Aggiungere un modulo a un modello

Dopo aver pubblicato un modulo, è possibile utilizzarlo in tutti i modelli aggiungendolo a un modello drag and drop o a un modello personalizzato nel Design Manager. Per aggiungere i moduli nell'editor dei contenuti, si veda l'articolo sull' aggiunta e la modifica dei moduli nell'editor dei contenuti.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic su per aprire un modello.
3. Per aggiungere un modulo a un modello drag-and-drop nell' editor di layout, fare clic sulla scheda + Aggiungi nella parte superiore dell' ispettore.
   • Nel campo Ricerca, inserire il nome del modulo. Per restringere la ricerca ai moduli personalizzati, fare clic sul menu a discesa Filtra per categoria o tag e selezionare Moduli personalizzati.
   • Fare clic sull'icona dragHandleIcon e spostare il modulo in posizione nell' editor di layout.
4. Per aggiungere un modulo a un modello codificato in modo personalizzato:
   •  Fare clic con il pulsante destro del mouse o con Ctrl+clic sul modulo nel Finder e selezionare Copia frammento. In alternativa, fare clic per aprire il modulo e poi, nella sezione Uso del modello dell' ispettore, fare clic su Copia frammento.
   • Nel modello con codice personalizzato, incollare il frammento di codice del modulo nell' editor di codice.
5. Al termine, fare clic su Pubblica modifiche in alto a destra.

Esempio: Creare un modulo di conto alla rovescia

1. Create un modulo nel Design Manager e chiamatelo'Timer conto alla rovescia'.
2. Nell' ispettore, nella sezione Campo , fare clic sul menu a discesa Aggiungi campo.

• • Selezionare il campo Data e ora . Inserite il nome "Data e ora dell'evento". Questo aggiornerà il campo del nome della variabile HubL in event_date_and_time.

• • Selezionare il campo Colore . Immettere il nome 'Timer Font Color'. Questo aggiornerà il campo del nome della variabile HubL in timer_font_color.

Nota bene: i nomi delle variabili HubL devono corrispondere ai nomi delle variabili inclusi nella sezione del codice module.html (HTML + HubL) che segue.

3. Nell' editor del modulo, copiare e incollare il seguente codice nellasezione corrispondentedi :

4. Al termine, visualizzare l'anteprima e pubblicare il modulo.
5. Continuare ad aggiungere il modulo a un modello.