Nota bene: la traduzione in olandese di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.
Design Manager

Creare e modificare i moduli

Ultimo aggiornamento: febbraio 26, 2021

Si applica a:

Marketing Hub  Professional, Enterprisee
CMS Hub  Professional, Enterprisee
Legacy Marketing Hub Basic

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 del design manager 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.

new-file

  • Nella finestra di dialogo, clicca sul menu a discesa Cosa vorresti costruire oggi? e seleziona Modulo.

build-a-module

  • 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.

set-up-your-new-module

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.

design-manager-label-module

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.

module-add-field

  • Modifica il nome del tuo campo cliccando sull'icona della matita modifica 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 la selezione di un'immagine predefinita e l'occultamento dei controlli delle dimensioni.

field-content-options

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.

    custom-module-help-text
  • 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.

design-manager-module-field-options

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 menua 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.

field-display-conditions

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 Repeater selezionare 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 così un minimo di 3 campi immagine apparirà nel modulo, fino a un massimo di 5campi immagine . Un utente vedrà apparire 4 campi immagine nel modulo per impostazione predefinita, e potrà scegliere di aggiungere un ulteriore campo immagine o di rimuovere un campo immagine esistente.

field-repeater-options

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.

    design-manager-group-fields
  • 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 Copy 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 atendina 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.

copy-paste-field-snippet

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.

design-manager-help-text

Quando un utente modifica il modulo in un editor di contenuti, il testo di aiuto apparirà sopra i campi del modulo.

page-editor-module-help-text

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.

preview-module

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.

publish-module

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.

content-toggle

  • 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.

make-module-available

Aggiungi il tuo modulo a un modello

  • Nell'editor del layout del template, clicca sulla scheda Add in cima all'ispettore del layout, poi cerca il tuo modulo. I moduli personalizzati che hai creato possono essere identificati dall'icona del modulo personalizzato customModules.
  • Trascinate il modulo nel vostro template.

add-custom-module

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 nel Marketplace di HubSpot.

  • icona Marketplace marketplace nella barra di navigazione principale."}'>Nel tuo account HubSpot, clicca sull'icona Marketplace 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.