Nello strumento Design Manager è possibile creare moduli personalizzati per aggiungere funzionalità avanzate al blog, alle pagine o alle e-mail. Imoduli personalizzati offrono un'ampia gamma di funzionalità che consentono di personalizzarecompletamente icontenuti all'interno dell'editor di pagine, e-mail o blog.
Attenzione: la creazione di moduli richiede la conoscenza di HTML, CSS, HubL e del design manager di HubSpot. HubSpot consiglia di collaborare con uno sviluppatore per creare moduli codificati.
Creare un nuovo modulo
- Nella parte superiore del Finder, fare clic sul menu a discesa File e selezionare Nuovo file.
- Nella finestra di dialogo, fare clic sul menu a discesa Cosa si desidera costruire oggi? e selezionare Modulo.
- Fare clic su Avanti.
- Selezionare la casella di controllo accanto a ciascun tipo di contenuto in cui verrà utilizzato il modulo: pagine,post del blog, annunci del blog, e-mail o citazioni. I moduli utilizzati nei modelli di e-mail non possono includere CSS o JavaScript.
Nota bene: imoduli personalizzati da utilizzare nelle e-mail possono essere creati solo negli account con unabbonamento a Marketing Hub Professional o Enterprise.
- Selezionare se questo modulo sarà un modulo locale o globale. Se si crea unmodulo globale, la modifica del contenuto di questo modulo aggiornerà ogni luogo in cui il modulo è utilizzato.
- Immettere il nome del file per il modulo, quindi fare clic su Crea.
Etichetta del modulo
Per impostazione predefinita, l'editor dei contenuti fa riferimento a un modulo utilizzando il nome che gli è stato assegnato nel design manager. Se si desidera che il modulo utilizzi un nome diverso nell'editor dei contenuti, è possibile farlo inserendo un'etichetta.
Aggiungere campi al modulo
Aggiungere campi al modulo per impostarne il contenuto o lo stile e renderlo modificabile nell'editor dei contenuti. Per saperne di più sui tipi di campo disponibili , consultare la nostra documentazione per sviluppatori.
- Nell'ispettore del modulo a destra, fare clic sul menu
a discesa
Aggiungi campo nella sezione Campi , quindi selezionare un campo da aggiungere al modulo.
- Modificare il nome del campo facendo clic sull'icona della matita accanto al nome del campo. Per modificare ilnome dellavariabile HubL, apportare le modifiche nel campo di testo del nome della variabile HubL .
Aggiungere il contenuto predefinito del campo
Nella sezione Opzioni contenuto , è possibile aggiungere il contenuto predefinito che appare quando il modulo viene utilizzato nei modelli e negli editor di contenuto. Le opzioni per il contenuto predefinito variano a seconda del tipo di campo.
Nell'esempio seguente, il tipo di campo è un campo immagine, quindi le opzioni per il contenuto predefinito sono la selezione di un'immagine predefinita e l'occultamento dei controlli di dimensione.
Impostare le opzioni dell'editor di campo
Nella sezione Opzioni dell'editor , è possibile attivare le seguenti opzioni per la modifica del modulo da parte degli utenti nell'editor dei contenuti:
- Rendete questo campo obbligatorio:l'utente non potrà lasciare questo campo vuoto nell'editor di contenuti.
- Impedisci la modifica nell'editor di contenuti: il contenuto del campo non può essere modificato nell'editor di contenuti; è comunque modificabile a livello di modello. Questa opzione non è disponibile per imoduli globali, che non possono essere modificati a livello di pagina.
- Testo di aiuto Tooltip: aggiungere un testo di aiuto al campo per fornire agli utenti un contesto o delle istruzioni. Il testo di aiuto apparirà in un tooltip quando l'utente passerà sopra il campo durante la modifica.
- Testo di aiuto in linea: aggiungere un testo di aiuto al campo per fornire agli utenti un contesto o delle istruzioni. Il testo di aiuto apparirà sotto il campo quando l'utente modifica il modulo.
Impostare le condizioni di visualizzazione del campo
È possibile utilizzare le condizioni di visualizzazione dei campi per impostare un campo del modulo in modo che venga visualizzato solo se un altro campo soddisfa determinati criteri.
- Nella sezioneCondizioni di visualizzazione , fare clic sul menu
a tendina
variabile HubL per selezionare un campo del modulo, quindi fare clic sul menu a tendina non vuoto perscegliere la condizione per quel campo.
- Se si seleziona la condizione è uguale a, inserire un valore o una regex.
Nell'esempio seguente, si stanno impostando le condizioni di visualizzazione per un campo immagine. La condizione è che il valore di un campo di testo chiamato image_title deve essere uguale a Headshot, affinché il campo immagine appaia nel modulo.
Le condizioni di visualizzazione vengono attivate automaticamente una volta impostata una condizione. Per disattivare le condizioni di visualizzazione, fare clic sull'interruttore a levetta a destra di Condizioni di visualizzazione.
Impostare le opzioni del ripetitore di campo
È possibile impostare le opzioni di ripetizione per il campo nella sezione Opzioni di ripetizione . I ripetitori sono campi e gruppi che possono creare più oggetti e visualizzarli utilizzando un ciclo for.
- NellasezioneOpzioni ripetitore , selezionare un numero minimo e/o
massimo
di istanze richieste per questo campo.
- Si può anche scegliere di impostare un numero di oggetti predefinito, che sarà il numero di istanze del campo che appariranno di default nel modulo.
Nell'esempio seguente, il campo immagine è stato impostato come cursore di immagini. I limiti del numero di oggetti sono impostati
in modo da far
apparire nel modulo un minimo di 3 campi immagine, fino a un massimo di 5 campi immagine. Per impostazione predefinita, l'utente vedrà apparire nel modulo 4 campi immagine e potrà scegliere di aggiungere un altro campo immagine o di rimuovere un campo immagine esistente.
Le opzioni di ripetizione vengono attivate automaticamente dopo aver modificato una delle opzioni. Per disattivare le opzioni di ripetizione, fare clic sull'interruttore a levetta a destra di Opzioni di ripetizione.
Campi del modulo di gruppo
Dopo aver creato i campi, è possibile raggrupparne fino a 4 per mantenere i campi organizzati per rilevanza. I gruppi di campi possono essere utilizzati per costruire una logica di campo personalizzata. Per saperne di più sui gruppi di campi del modulo.
Per raggruppare i campi del modulo:
- Fare clic su Gruppo nella barra laterale destra dell'editor del modulo.
- Selezionare i campi che si desidera raggruppare.
- Fare clic su Crea gruppo.
Copiare e incollare gli snippet di campo
- Quando si è pronti a incorporare un campo nel modulo, copiare e incollare lo snippet del campo nell'editor HTML + HubL del modulo.
- Se siete nell'ispettore del campo, fate clic suCopia snippet a destra del nome della variabile HubL del campo.
- Se si è nell'ispettore del modulo, passare il mouse sul campo e fare clic sul
menu a tendina
Azioni, quindi selezionare Copia snippet.
- Fare clic nella posizione in cui si desidera aggiungere il campo nell'editor HTML + HubL, quindi incollare lo snippet premendo Ctrl+V o Cmd+V.
Scrivere la sintassi del modulo
Durante la modifica del modulo, è possibile scrivere la sintassi aggiuntiva del modulo nei riquadri dell'editor
HTML + HubL,
CSS e
JS . Per saperne di più sull'
editor di codice del modulo e sulla
sintassi del modulo, consultate la documentazione del designer di HubSpot.
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. Il testo di aiuto non può essere più lungo di 300 caratteri.
Quando un utente modifica il modulo in un editor di contenuti, il testo di aiuto appare sopra i campi del modulo.
Anteprima del modulo
È possibile visualizzare in anteprima l'aspetto e il funzionamento del modulo nell'editor di contenuti facendo clic sul pulsante Anteprima in alto a destra dell'editor di moduli. L'anteprima del modulo si aprirà in una nuova scheda. L'anteprima si sincronizza con l'editor e si aggiorna automaticamente durante il lavoro.
Pubblicare il modulo
Dopo aver aggiunto i campi e scritto la sintassi del modulo, si può procedere alla pubblicazione del modulo. In alto a destra, fare clic su Pubblica modifiche.
Rendete il vostro modulo disponibile per i modelli
- Attivare la levetta Rendi disponibile per i modelli in alto a destra dell'editor per rendere questo modulo disponibile per l'aggiunta ai modelli.
- Disattivare questa levetta per apportare modifiche o testare la funzionalità del modulo. Se questa levetta è disattivata, il vostro team vedrà un avviso che segnala che questo modulo non è disponibile per i modelli.
Aggiungere il modulo a un modello
Dopo aver pubblicato un modulo, è possibile utilizzarlo in tutte le pagine aggiungendolo a un modello.
Per aggiungere un modulo a un modello drag and drop:
- Nell'editor di layout del modello, fare clic sulla scheda Aggiungi nella parte superiore dell'ispettore di layout, quindi cercare il modulo. I moduli personalizzati creati possono essere identificati dall'icona del modulo personalizzato: customModules.
- Trascinare e rilasciare il modulo nel modello.
Per aggiungere un modulo a un modello codificato, è possibile copiare e incollare lo snippet del modulo nel modello:
- Per copiare lo snippet del modulo dall'editor del modulo, in fondo alla barra laterale destra, fare clic su Copia snippet.
- Per copiare lo snippet del modulo dalla barra laterale sinistra del design manager:
- Nella barra laterale sinistra, individuare il modulo personalizzato.
- Fare clic con il pulsante destro del mouse sul modulo e selezionare Copia snippet. In alternativa, è possibile selezionare il modulo, quindi fare clic su Azioni in alto a sinistra e selezionare Copia snippet.
- Nel modello codificato, incollare lo snippet dove necessario.