Ultimo aggiornamento: settembre 13, 2022
Nello strumento di gestione del design, è possibile creare moduli personalizzati per aggiungere funzionalità avanzate al blog, alle pagine o alle e-mail.. I moduli personalizzati offrono un'ampia gamma di funzionalità in modo che i contenuti possano essere completamente personalizzati all'interno dell'editor di pagine, e-mail o blog.. È possibile creare moduli personalizzati da zero o aggiungere moduli precostituiti dal Marketplace di HubSpot.
Attenzione: la creazione di moduli richiede la conoscenza di HTML, CSS, HubL e del design manager di HubSpot. HubSpot consiglia di lavorare con un designer per creare moduli codificati.
Creare un nuovo modulo
- Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
- 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.
Attenzione:per i moduli personalizzati da utilizzare nelle e-mail possono essere creati solo negli account con un abbonamento Marketing HubabbonamentoProfessional o Enterprise.
- Selezionare se questo modulo sarà un modulo locale o globale. Se si crea un modulo 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 usando 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 sulla 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 matitaPer modificare ilnome della variabile HubL, apportare le modifiche nel campo di testo Nome variabile HubL .
Aggiungere il contenuto predefinito del campo
Nella sezione Opzioni di 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 i moduli globali, che non possono essere modificati a livello di pagina.
- Testo di aiuto: 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.
- NelleCondizioni di visualizzazionefare clic sul menu
a discesa variabile HubL per selezionare un campo del modulo, quindi fare clic sul menu a discesa non vuoto per scegliere 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.
- Nelleopzioni del ripetitore selezionare un numero minimo e/o
massimo numero 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. L'utente vedrà apparire nel modulo 4 campi immagine per impostazione predefinita 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 su Copia 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 ulteriore sintassi 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: .
- 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 tasto 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.
Aggiungere o acquistare un modulo dal Marketplace
Oltre a creare i propri moduli, è possibile aggiungere o acquistare moduli personalizzati creati da altri utenti o fornitori nel Marketplace di HubSpot.
- Nel tuo account HubSpot, clicca sull'icona Marketplace nella barra di navigazione principale.
- Nella sezione Filtra prodotti a sinistra, fare clic sul menu a tendina Tutti i prodotti sotto Categoria e selezionare Moduli. È possibile filtrare i moduli disponibili in base a:
- Prezzo: se il modulo è gratuito o a pagamento
- Funzione: il tipo di funzioni che il modulo include (ad esempio, calcolatrice, galleria, mappa).
- Funziona con: i tipi di template in cui il modulo può essere utilizzato
- Provider: il/i provider da cui è offerto il modulo
- Passare il mouse sul modulo scelto e fare clic su Visualizza dettagli.
- Fare clic su Ottieni modulo gratis o Acquista modulo a $ in alto a destra.
- Se il modulo è gratuito, verrà aggiunto automaticamente al vostro design manager.
- Se il modulo è a pagamento, procedere all'inserimento dei dati di pagamento. Una volta elaborato il pagamento, il modulo verrà aggiunto al vostro design manager.
