Ultimo aggiornamento: agosto 4, 2021
Nello strumento di gestione del design, è possibile creare moduli personalizzati codificati per aggiungere funzioni avanzate al tuo blog, pagine o e-mail. I moduli personalizzati offrono una vasta gamma di funzionalità in modo che il contenuto possa essere completamente personalizzato all'interno dell'editor di pagine, e-mail o blog.. Puoi costruire moduli personalizzati da zero o aggiungere moduli pre-costruiti da HubSpot Marketplace.
Nota:la creazione di moduli richiede la conoscenza di HTML, CSS, HubL e del design manager di HubSpot. HubSpot raccomanda 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, clicca sul menua discesaFile e selezionaNuovo file.
- Nella finestra di dialogo, clicca sul menu a discesa Cosa vorresti costruire oggi? e seleziona Modulo.
- Fare clic su Avanti.
- Seleziona se questo modulo sarà usato neimodelli di pagina, nei modelli di bloge/o nei modelli di e-mail. I moduli usati nei modelli di e-mail non possono includere CSS o JavaScript.
- Seleziona se questo modulo sarà un modulo locale oglobale.Se crei un moduloglobale, la modifica del contenuto di questo modulo aggiornerà ogni luogo in cui il modulo è usato.
- Inserisci un nome di file per il tuo modulo, poi clicca suCreate.
Etichetta il tuo modulo
Per impostazione predefinita, l'editor di contenuti farà riferimento a un modulo usando il nome che gli è stato dato nel gestore del design. Se vuoi che il tuo modulo usi un nome diverso nell'editor di contenuti, puoi farlo inserendo un'etichetta.
Aggiungi campi al tuo modulo
Aggiungi campi al modulo per impostare il contenuto o lo stile del modulo e rendilo modificabile nell'editor dei contenuti. Scopri di più sui tipi di campi disponibili nella nostra documentazione per gli sviluppatori.
- Nell'ispettore del modulo sulla destra, clicca sul
menu a discesa Aggiungicampo nellasezione Campi,quindi seleziona uncampo da aggiungere al tuo modulo.
- Modifica il nome del tuo campo cliccando sull'iconadella matitaPer modificare ilnome della variabileHubL, fai le tue modifiche nel campo di testo del nomedella variabile HubL.
Aggiungere il contenuto predefinito del campo
Nellasezione Opzioni di contenuto,si può aggiungere il contenuto predefinito che appare quando il modulo è usato nei modelli e negli editor di contenuto. Le opzioni per il contenuto predefinito saranno diverse a seconda del tipo di campo.
Nell'esempio qui sotto, 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 delle dimensioni.
Impostare le opzioni dell'editor di campi
Nellasezione Editor Options,puoi abilitare le seguenti opzioni per come gli utenti possono modificare il modulo nell'editor di contenuti:
- Rendi questo campo obbligatorio: l'utente non potrà lasciare questo campo vuoto nell'editor di contenuti.
- Impedisci la modifica nell'editor dei contenuti: il contenuto del campo non può essere modificato nell'editor dei contenuti; è ancora modificabile a livello di template. Questa opzione non è disponibile per imoduli globali, che non possono essere modificati a livello di pagina.
- Tooltip help text: aggiungi un testo di aiuto al campo per dare agli utenti un contesto o delle istruzioni. Questo testo di aiuto apparirà in un tooltip quando un utente passa sopra il campo mentre lo modifica.
- Testo di aiuto in linea: aggiungi un testo di aiuto al campo per dare agli utenti un contesto o delle istruzioni. Questo testo di aiuto apparirà sotto il campo quando un utente sta modificando il modulo.
Impostare le condizioni di visualizzazione del campo
Si possono usare le condizioni di visualizzazione dei campi per impostare un campo del modulo in modo che appaia solo se un altro campo soddisfa determinati criteri.
- NelleCondizioni di visualizzazioneclicca sul
menu a tendina della variabileHubLper selezionare un campo del modulo, poi clicca sul menu a tendina is not emptyper scegliere lacondizione per quel campo. - Se selezioni la condizione èuguale a, inserisci un valore o unaregex .
Nell'esempio qui sotto, le condizioni di visualizzazione sono impostate per un campo immagine. La condizione è che il valore in un campo di testo chiamato image_title deve essere uguale a Headshot affinché il campo immagine appaia nel modulo.
Le condizioni di visualizzazione saranno automaticamente abilitate una volta che hai impostato una condizione. Per disabilitare le condizioni di visualizzazione, clicca sull'interruttorea destra diCondizioni di visualizzazione.
Impostare le opzioni del ripetitore di campo
Puoi impostare le opzioni di ripetizione per il tuo campo nella sezione Repeater Options . I ripetitori sono campi e gruppi che possono creare più oggetti e visualizzarli usando un ciclo for.
- Nelleopzionidel ripetitoreselezionate unminimo e/oun
massimo numero di istanze richieste di questo campo. - Puoi anche scegliere di impostare unconteggio predefinito degli oggetti, che sarà il numero di istanze del campo che apparirà di default nel modulo.
Nell'esempio qui sotto, il campo immagine è stato impostato come un cursore di immagini. I limiti del numero di oggetti sono impostati in modo cheun minimodi 3 campi immagine appaiano nel modulo, fino a un massimo di 5 campi immagine. Un utente vedrà apparire 4 campiimmaginenel modulo per impostazione predefinita, e potrà scegliere di aggiungere un ulteriore campo immagine o rimuovere un campo immagine esistente.
Le opzioni del ripetitore saranno automaticamente abilitate una volta che hai modificato una delle opzioni. Per disabilitare le opzioni del ripetitore, clicca sull'interruttorea destra di RepeaterOptions.
Campi del modulo di gruppo
Dopo aver creato i campi, puoi raggruppare fino a 4 di essi per mantenere i tuoi campi organizzati per rilevanza. I gruppi di campi possono essere usati per costruire una logica di campo personalizzata. Per saperne di più sui gruppi di campi del modulo.
Per raggruppare i campi del modulo:
- Fai clic su Gruppo nella barra laterale destra dell'editor di moduli.
- Seleziona i campiche vuoi raggruppare.
- Fare clic suCrea gruppo.
Copia e incolla i tuoi frammenti di campo
- Quando sei pronto a incorporare uno dei tuoi campi personalizzati nel tuo modulo, copia e incolla lo snippet del campo nell'editorHTML+ HubLdel modulo.
- Se sei nell'ispettore dei campi, clicca su Copysnippetadestra delnome della variabile HubL del campo.
- Se sei nell'ispettore del modulo, passa il mouse sul campo e clicca sul menu a tendinaActions,
quindi seleziona Copy snippet.
- Clicca nella posizione in cui vuoi aggiungere il campo nell'editor HTML+ HubL, poi incolla lo snippet premendo Ctrl+V oCmd+V.
Scrivi la sintassi del tuo modulo
Mentre modifichi il tuo modulo, puoi scrivere la sintassi aggiuntiva del modulo nei riquadri dell'editor HTML+ HubL, CSS eJS.Scopri di più sull'editor di codice del modulo e sulriferimentoalla sintassidel modulonelladocumentazione del designerdi HubSpot.Aggiungi un testo di aiuto al tuo modulo
Nella sezione Opzioni dell'editor, aggiungi un testo di aiuto per dare agli utenti un contesto quando modificano il 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 apparirà sopra i campi del modulo.
Anteprima del modulo
Puoi vedere in anteprima come il tuo modulo apparirà e funzionerà nell'editor di contenuti cliccando sul pulsante Anteprimain alto a destra dell'editor di moduli. L'anteprima del tuo modulo si aprirà in una nuova scheda. Questa anteprima si sincronizza con l'editor e si aggiorna automaticamente mentre lavori.
Pubblica il tuo modulo
Una volta che hai finito di aggiungere campi e scrivere la sintassi del tuo modulo, puoi procedere a pubblicare il tuo modulo. In alto a destra, clicca su Pubblica modifiche.
Rendere il tuo modulo disponibile per i modelli
- Attiva il toggleMakeavailable for templatesin alto a destra nell'editor per rendere questo modulo disponibile da aggiungere ai tuoi template.
- Disattiva questo interruttore per apportaremodifiche o testare la funzionalità del modulo. Se questo interruttore è disattivato, il tuo team vedrà un avviso che questo modulo non è disponibile per i modelli.
Aggiungi il tuo modulo a un modello
- Nell'editor del layout del template, clicca sullaschedaAdd in cima all'ispettore del layout, poi cerca il tuo modulo. I moduli personalizzati che hai creato possono essere identificati dall'iconadelmodulo personalizzato.
- Trascinate il modulo nel vostro template.
Aggiungere o acquistare un modulo dal Marketplace
Oltre a creare i tuoi moduli, puoi aggiungere o acquistare moduli personalizzati che altri utenti o fornitori hanno creato in HubSpot Marketplace.
- Nel tuo account HubSpot, clicca sull'icona Marketplace nella barra di navigazione principale.
- Nellasezione Filtra prodottia sinistra, clicca sulmenu a tendinaTutti i prodottisottoCategoria e seleziona Moduli.Puoi filtrare i moduli disponibili in base a:
- Prezzo:se il modulo è gratuito o a pagamento
- Funzione: il tipo di funzione(i) che il modulo include (es. calcolatrice, galleria, mappa)
- Works with: i tipi di template in cui il modulo può essere usato
- Provider: il/i provider da cui il modulo è offerto
- Passa con il mouse sul modulo scelto e clicca su Visualizza dettagli.
- Clicca su Getmodule for free o Buymodule for$ in alto a destra.
- Se il modulo è gratuito, sarà automaticamente aggiunto al tuo design manager.
- Se il modulo è a pagamento, procedi a inserire i tuoi dati di pagamento. Una volta che il pagamento è stato elaborato, il modulo verrà aggiunto al tuo design manager.
