Ultimo aggiornamento: giugno 15, 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 discesaFile e selezionareNuovo file.
- Nella finestra di dialogo, fare clic sul menu a discesa Cosa si desidera costruire oggi? e selezionare Modulo.
- Fare clic suAvanti.
- Selezionare se questo modulo sarà utilizzato neimodelli di pagina, neimodelli di blog e/o neimodelli di e-mail. I moduli utilizzati nei modelli di e-mail non possono includere CSS o JavaScript.
- Selezionare se questo modulo sarà un modulo localeoglobale. 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 suCrea.
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 sezioneCampi, quindi selezionare uncampo da aggiungere al modulo.
- Modificare il nome del campo facendo clic sull'icona della matitaPer modificare ilnome dellavariabile HubL, apportare le modifiche nel campo di testo Nome variabile HubL.
Aggiungere il contenuto predefinito del campo
Nella sezioneOpzioni 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 sezioneOpzioni 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.
- NelleCondizioni di visualizzazionefare clic sul menu
a discesa variabile HubLper selezionare un campo del modulo, quindi fare clic sul menu a discesanon vuotoper scegliere la condizione per quel campo. - Se si seleziona la condizioneè uguale a, inserire unvalore 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 levettaa destra diCondizioni 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 delripetitoreselezionare un numerominimoe/o
massimo numero di istanze richieste per questo campo. - Si può anche scegliere di impostare unnumero 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 farapparire nel modulo un minimo di3campi immagine, fino a un massimo di 5campi immagine. L'utente vedrà apparire nel modulo4campi 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 levettaa destra diOpzioni 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 campiche si desidera raggruppare.
- Fare clic suCrea 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 + HubLdel modulo.
- Se siete nell'ispettore del campo, fate clic suCopia snippeta destra delnome 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 selezionareCopia snippet.
- Fare clic nella posizione in cui si desidera aggiungere il campo nell'editor HTML + HubL, quindi incollare lo snippet premendoCtrl+V oCmd+V.
Scrivere la sintassi del modulo
Durante la modifica del modulo, è possibile scrivere ulteriore sintassi del modulo nei riquadri dell'editorHTML + HubL,CSS eJS. Per saperne di più sull'editor dicodice del modulo e sullasintassi 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 Anteprimain 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
- Attivarela levettaRendi disponibile per i modelliin alto a destra dell'editor per rendere questo modulo disponibile per l'aggiunta ai modelli.
- Disattivarequesta 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 schedaAggiunginella 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 suCopia 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 suAzioni in alto a sinistra e selezionareCopia 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 sezioneFiltra prodottia sinistra, fare clic sul menu a tendinaTutti i prodottisotto Categoriae selezionareModuli. È 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: il tipo o 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 suOttieni modulo gratisoAcquista 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.
