Creare e modificare i moduli nel design manager

Con il design manager è 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.

Attenzione: la creazione di moduli richiede la conoscenza di HTML, CSS, HubL e del design manager di HubSpot. HubSpot consiglia di collaborare con uno sviluppatore per creare moduli codificati.

Creare un nuovo modulo

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nella parte superiore del Finder, fare clic sul menu a discesa File e selezionare Nuovo file.

3. Nella finestra di dialogo, fare clic sul menu a discesa Cosa si desidera costruire oggi? e selezionare Modulo.
4. Fare clic su Avanti.
5. Nel campo Dove si desidera utilizzare questo modulo, selezionare la casella di controllo accanto a ciascun tipo di contenuto in cui verrà utilizzato il modulo (ad esempio, post del blog, e-mail o pagine di destinazione).
6. Nel campo Ambito del contenuto del modulo, selezionare un'opzione (ad esempio, Modulo locale o Modulo globale). Se si crea un modulo globale, la modifica del contenuto di questo modulo aggiornerà ogni luogo in cui il modulo viene utilizzato.
7. Inserire un nome di file per il modulo.
8. Per modificare la posizione del file del modulo, fare clic su Cambia nella sezione Posizione del file. Nella finestra a comparsa, selezionare una nuova posizione e fare clic su Seleziona.
9. Al termine, fare clic su Crea.
10. Continuare a modificare il modulo.

Attenzione: i moduli utilizzati nelle e-mail possono essere creati solo negli account con un abbonamento a Marketing Hub Professional o Enterprise. Non possono includere CSS o JavaScript.

Modificare un modulo

Dopo aver creato un modulo nel design manager, è possibile personalizzarne la funzionalità e l'aspetto. Etichettate il modulo per chiarezza, aggiungete e configurate i campi e regolate le opzioni dell'editor dei campi, come il contenuto predefinito. Impostare le condizioni di visualizzazione e le opzioni di ripetizione e raggruppare i campi correlati per una migliore organizzazione. È anche possibile copiare e incollare snippet di campo, scrivere la sintassi personalizzata del modulo, aggiungere testo didattico utile e modificare i tipi di template con cui il modulo può essere utilizzato.

Aggiungere un'etichetta a un modulo

Nel design manager, è possibile aggiungere o aggiornare un'etichetta per un modulo, per aiutare gli utenti a identificarlo nell'editor dei contenuti. Se l'etichetta è vuota, il nome del modulo viene visualizzato per impostazione predefinita.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire il modulo di cui si desidera modificare l'etichetta.
3. Nell'ispettore, inserire un'etichetta.

Aggiungere campi a un modulo

Aggiungere campi a un modulo per impostarne il contenuto o lo stile e renderlo modificabile nell'editor dei contenuti. Per saperne di più sui tipi di campo disponibili.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'ispettore, nella sezione Campi, fare clic sul menu a discesa Aggiungi campo. Selezionare quindi un campo da aggiungere al modulo.

4. Per modificare il nome del campo, fare clic sull' icona di modifica edit e inserire un nuovo nome. Per modificare il nome della variabile HubL, inserire un nuovo nome nel campo Nome variabile HubL.

Personalizzare il contenuto predefinito dei campi

Nella sezione Opzioni contenuto , è possibile aggiungere il contenuto predefinito che appare quando il modulo viene utilizzato nei modelli e negli editor di contenuti. Le opzioni per il contenuto predefinito variano a seconda del tipo di campo.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'ispettore, nella sezione Campi, passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Opzioni di contenuto, aggiungere o modificare le opzioni di contenuto predefinite. Le opzioni di contenuto predefinite disponibili dipendono dal tipo di campo selezionato.

Ad esempio, aggiungendo un tipo di campo Data e ora a un modulo, è possibile selezionare una data e un'ora predefinite. È anche possibile inserire un intervallo di tempo predefinito.

Impostare le opzioni dell'editor di campo

Nella sezione Opzioni dell'editor , è possibile rendere un campo obbligatorio e impedire la modifica nell'editor dei contenuti. Si può anche personalizzare il testo della guida.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'ispettore, nella sezione Campi, passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Opzioni dell'editor, per rendere il campo obbligatorio, attivare l'interruttore Rendi questo campo obbligatorio. Questo impedirà agli utenti di lasciare il campo vuoto nell'editor dei contenuti.
5. Per evitare che il contenuto di un campo venga modificato, attivare l'interruttore Impedisci la modifica nell'editor di contenuti. Il contenuto del campo può comunque essere personalizzato nel design manager a livello di template. Questa opzione non è disponibile per i moduli globali.
6. Per aggiungere un contesto o delle istruzioni sull'uso del campo, inserire del testo nel campo di testo Tooltip help o nel campo di testo Inline help .
   • Testo di aiuto Tooltip: questo testo apparirà in un tooltip quando l'utente passa sopra l'icona infoCircleIcon nell'editor dei contenuti.
   • Testo di aiuto in linea: questo testo apparirà sotto il campo quando l'utente modifica il modulo nell'editor dei contenuti.

Impostare le condizioni di visualizzazione dei campi

Nella sezione Condizioni di visualizzazione, è possibile utilizzare le condizioni di visualizzazione dei campi per impostare un campo del modulo in modo che appaia solo se un altro campo soddisfa determinati criteri.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'ispettore, nella sezione Campi, passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Condizioni di visualizzazione, fare clic sul menu a discesa Variabile HubL e selezionare una variabile.
5. Fare clic sul secondo menu a discesa e selezionare un' opzione (ad esempio, È uguale a o Non è vuoto). A seconda dell'opzione selezionata, possono essere richiesti altri campi di condizione. Ad esempio, se si seleziona È uguale a, è necessario un campo valore aggiuntivo.
6. Per impostazione predefinita, le condizioni di visualizzazione vengono attivate automaticamente una volta configurata una condizione. Per disattivare le condizioni di visualizzazione, disattivare l'interruttore Condizioni di visualizzazione .

Impostare le opzioni di ripetizione dei campi

Nella sezione Opzioni di ripetizione, è possibile configurare le opzioni di ripetizione per i campi e i gruppi. Quando le opzioni di ripetizione sono attivate, verranno creati e visualizzati più oggetti utilizzando un ciclo for.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'ispettore, nella sezione Campi, passare il mouse su un campo e fare clic su Modifica.
4. Nella sezione Opzioni ripetitore , inserire un numero nei campi Minimo e Massimo (opzionale). In questo modo si imposterà il numero minimo di volte che il campo apparirà nel modulo fino al valore massimo.
5. Per impostare il numero di volte che un campo deve essere visualizzato per impostazione predefinita, inserire un numero nel campo Conteggio oggetti predefinito.
6. Per impostazione predefinita, le opzioni di ripetizione vengono attivate automaticamente una volta configurate. Per disattivare le opzioni di ripetizione, disattivare l'interruttore Opzioni di ripetizione .

Ad esempio, le opzioni di ripetizione di un campo immagine vengono modificate per mostrare almeno tre e fino a cinque campi immagine. Il valore di quattro campi immagine è configurato come predefinito. Nell'editor dei contenuti, l'utente vedrà quattro campi immagine per impostazione predefinita e potrà aggiungere un altro campo immagine o rimuovere un campo immagine esistente.

Raggruppare i campi del modulo

Dopo aver creato i campi, è possibile raggrupparli per organizzare i campi in base alla loro rilevanza. I gruppi di campi possono essere utilizzati per creare una logica di campo personalizzata. È possibile raggruppare fino a quattro campi. Per saperne di più sui gruppi di campi del modulo.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'ispettore, nella sezione Campi, fare clic sul menu a discesa Azioni e selezionare Raggruppa.
4. Selezionare uno o più campi da raggruppare e fare clic su Crea gruppo.

Aggiungere testo di aiuto al modulo

Nella sezione Opzioni dell'editor, è possibile aggiungere un testo di aiuto per fornire agli utenti un contesto durante la modifica del modulo. Il testo viene visualizzato sopra i campi del modulo.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'inspector, nella sezione Opzioni dell'editor , inserire un testo nel campo Testo della guida in linea.

Gestire i tipi di contenuto e la disponibilità di un modulo

Aggiungete o rimuovete i tipi di contenuto per i quali gli utenti possono utilizzare un modulo, come i post del blog o le pagine di destinazione. È inoltre possibile attivare o disattivare la disponibilità di un modulo nei modelli e nelle pagine.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Per modificare i tipi di contenuto di un modulo, fare clic su Tipi di contenuto sotto il nome del modulo nell'ispettore in alto a destra.

1. • Nella finestra di dialogo, selezionare o deselezionare la casella di controllo accanto a ciascun tipo di contenuto in cui il modulo verrà utilizzato o meno (ad esempio, post del blog, e-mail o pagine di destinazione).
   • Al termine, fare clic su Aggiorna.

4. Per gestire la disponibilità di un modulo nei modelli o nelle pagine, attivare l'interruttore Rendi disponibile per i modelli e le pagine in alto a destra. Per testare la funzionalità del modulo o disattivarne la disponibilità nei modelli e nelle pagine, disattivare l'interruttore Rendi disponibile per i modelli e le pagine.

Nota bene: la disattivazione dell'interruttore Rendi disponibile per i modelli o le pagine non rimuoverà il modulo dai modelli o dalle pagine esistenti.

Copiare e incollare gli snippet di campo

Quando si incorpora un campo in un modulo, è possibile copiare e incollare lo snippet di campo nella sezione module.html (HTML + HubL) dell'editor del modulo.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Nell'ispettore, passare il mouse su un campo del modulo e fare clic sul menu a discesa Azioni nella sezione Campi. Selezionare quindi Copia snippet.
4. Nell'editor del modulo, incollare il frammento di campo nella posizione desiderata all'interno della sezione module.html (HTML. + HubL). È possibile utilizzare la scorciatoia da tastiera Cmd+V o Ctrl+V.

Scrivere la sintassi del modulo

Durante la modifica del modulo, è possibile scrivere la sintassi del modulo nelle sezioni module.html (HTML + HubL), module.css e module.js dell'editor di moduli . Per saperne di più sull'editor di moduli e sulla panoramica dei moduli.

Anteprima e pubblicazione di un modulo

Una volta terminata la modifica di un modulo, compresa l'aggiunta di campi e la scrittura della sintassi del modulo, è possibile visualizzare l'anteprima e pubblicare il modulo.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modulo.
3. Per visualizzare l'anteprima di un modulo, fare clic su Anteprima in alto a destra. Si accederà a una nuova scheda del browser per visualizzare l'anteprima del modulo. L'anteprima si sincronizza con l'editor del modulo e si aggiorna automaticamente quando vengono apportate modifiche.
4. Per pubblicare un modulo, fare clic su Pubblica modifiche.

Aggiungere un modulo a un modello

Dopo aver pubblicato un modulo, è possibile utilizzarlo in tutti i template aggiungendolo a un template drag and drop o a un template personalizzato nel design manager. Per aggiungere i moduli nell'editor dei contenuti, si veda l'articolo sull'aggiunta e la modifica dei moduli nell'editor dei contenuti.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic per aprire un modello.
3. Per aggiungere un modulo a un modello trascinato nell'editor di layout, fare clic sulla scheda + Aggiungi nella parte superiore dell'ispettore.
   • Nel campo Cerca, inserire il nome del modulo. Per restringere la ricerca ai moduli personalizzati, fare clic sul menu a discesa Filtra per categoria o tag e selezionare Moduli personalizzati.
   • Fare clic sull'icona di trascinamento dragHandleIcon e spostare il modulo in posizione nell'editor di layout.
4. Per aggiungere un modulo a un modello codificato in modo personalizzato:
   • Fare clic con il pulsante destro del mouse o con Ctrl+clic sul modulo nel Finder e selezionare Copia snippet. In alternativa, fare clic per aprire il modulo e poi, nella sezione Uso del modello dell'ispettore, fare clic su Copia snippet.
   • Nel modello personalizzato, incollare lo snippet del modulo nell'editor di codice.
5. Al termine, fare clic su Pubblica modifiche in alto a destra.

Esempio

Creare un modulo per il conto alla rovescia

1. Creare un modulo nel design manager e chiamarlo'Timer conto alla rovescia'.
2. Nell'ispettore, nella sezione Campo, fare clic sul menu a discesa Aggiungi campo.

• • Selezionare il campo Data e ora. Immettere il nome "Data e ora dell'evento". Questo aggiornerà il campo Nome variabile di HubL a event_date_and_time.

• • Selezionare il campo Colore. Inserire il nome "Timer Font Color". Questo aggiornerà il campo del nome della variabile HubL a timer_font_color.

Nota bene: i nomi delle variabili HubL devono corrispondere ai nomi delle variabili inclusi nella sezione di codice module.html (HTML + HubL) qui sotto.

3. Nell'editor del modulo, copiare e incollare il seguente codice nella sezione module.html (HTML + HubL):

<!-- Span nascosto per memorizzare la data di destinazione -->
<span id="target-date" style="display: none;"></span>

<!-- Visualizzare il timer del conto alla rovescia -->
<div style="float: left; width: 100%; color: ;">.
<div class="time_container" style="margin-left: 30%;">
<span id="giorni"></span><br>
Giorni
</div>
<div class="time_container">
<span id="ore"></span><br>
Ore
</div>
<div class="time_container">
<span id="minuti"></span><br>
Minuti
</div>
<div class="time_container">
<span id="secondi"></span><br>
Secondi
</div>
</div>

4. Copiare e incollare il seguente codice nella sezione module.css:

.time_container {
float: sinistra;
larghezza: 10%;
text-align: center;
}
.time_container span {
peso del carattere: grassetto;
font-size: 200%;
}

5. Copiare e incollare il seguente codice nella sezione module.js:

// Funzione per calcolare e visualizzare il conto alla rovescia
function updateCountdown() {
// Ottenere la data di destinazione dallo span nascosto
const targetDate = new Date(document.getElementById('target-date').textContent);
// Ottenere la data corrente
const currentDate = new Date();
// Calcolare il tempo rimanente (in millisecondi)
const timeRemaining = targetDate - currentDate;
// Verifica se la data di destinazione è passata
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// Calcolo dei giorni, ore, minuti e secondi rimanenti
const giorni = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const ore = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minuti = Math.floor((tempoRimanente % (1000 * 60 * 60)) / (1000 * 60));
const secondi = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Visualizzare il conto alla rovescia
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Aggiorna il conto alla rovescia ogni secondo
setInterval(updateCountdown, 1000);
// Chiamata iniziale per aggiornare immediatamente il conto alla rovescia
updateCountdown();

6. Al termine, visualizzare l'anteprima e pubblicare il modulo.
7. Continuare ad aggiungere il modulo a un modello.