Ultimo aggiornamento: febbraio 18, 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.. È possibile costruire moduli personalizzati da zero o aggiungere moduli pre-costruiti dal Marketplace HubSpot.
Nota: la creazione di moduli richiede la conoscenza di HTML, CSS, HubL, e il 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 menu a discesa File e seleziona Nuovo file.
- Nella finestra di dialogo, clicca sul menu a tendina Cosa vorresti costruire oggi? e seleziona Modulo.
- Fare clic su Avanti.
- Seleziona se questo modulo sarà usato neimodelli di pagina , neimodelli di blog , e/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 o globale. Se crei unmodulo globale , 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 su Create.
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 del modulo e renderlo modificabile nell'editor di contenuti. Scopri di più sui tipi di campi disponibili.
- Nell'ispettore del modulo sulla destra, clicca sul menu
a discesa Add field nella sezione Fields , quindi seleziona un campo da aggiungere al tuo modulo.
- Modifica il nome del tuo campo cliccando l'icona della matita accanto al nome del campo. Per modificare ilnome della variabile HubL, fai le tue modifiche nel campo di testo del nome della variabile HubL .
Aggiungere il contenuto predefinito del campo
Nella sezione 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 selezionare un'immagine predefinita e nascondere i controlli delle dimensioni.
Impostare le opzioni dell'editor di campi
Nella sezione 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.
- Nelle Condizioni di visualizzazione clicca sul menu
a tendina della variabile HubL per selezionare un campo del modulo, poi clicca sul menu a tendina is not empty per scegliere la condizione per quel campo. - Se selezioni la condizione è uguale a, inserisci un valore o una regex.
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 'interruttore a destra di Condizioni 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.
- Nelleopzioni di Repeater selezionate un minimo e/o un
massimo numero di istanze richieste di questo campo. - Puoi anche scegliere di impostare un conteggio 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
Le opzioni del ripetitore saranno automaticamente abilitate una volta che hai modificato una delle opzioni. Per disabilitare le opzioni del ripetitore, clicca sull'interruttore a destra di Repeater Options.
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 su Crea 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'editor HTML + HubL del modulo.
- Se sei nell'ispettore dei campi, clicca Copia snippet a destra del nome della variabile HubL del campo.
- Se sei nell'ispettore dei moduli, passa il mouse sul campo e clicca sul menu a
tendina Actions , poi seleziona Copy snippet.
- Clicca nella posizione in cui vuoi aggiungere il campo nell'editor HTML + HubL, poi incolla lo snippet premendo Ctrl+V o Cmd+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 e JS . Per saperne di più sull'editor di codice del modulo e sulriferimento alla sintassi del modulo nella documentazione del designer di 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 Anteprima in 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 toggle Make available for templates su in alto a destra nell'editor per rendere questo modulo disponibile da aggiungere ai tuoi template.
- Disattiva questo toggle per apportare modifiche 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 modello, clicca sulla scheda Aggiungi in cima all'ispettore del layout, quindi cerca il tuo modulo. I moduli personalizzati che hai creato possono essere identificati dall'icona del modulo personalizzato .
- Trascinate il modulo nel vostro template.
Aggiungere o acquistare un modulo dal Marketplace
Oltre a creare i propri moduli, è possibile aggiungere o acquistare moduli personalizzati che altri utenti o fornitori hanno creato nel Marketplace HubSpot.
- icona Marketplace nella barra di navigazione principale."}'>Nel tuo account HubSpot, clicca sull'icona Marketplace nella barra di navigazione principale.
- Nella sezione Filtra prodotti a sinistra, clicca sul dropdown Tutti i prodotti sotto la categoria 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 Get module for free o Buy module 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 sarà aggiunto al tuo design manager.