Ultimo aggiornamento: gennaio 19, 2023
Questa è una panoramica di tutti i moduli predefiniti disponibili per i modelli drag and drop negli strumenti di progettazione. Ogni tipo di modulo può essere personalizzato con opzioni di stile e contenuto nell'ispettore. Puoi anche aggiungere un modulo predefinito a un template HTML con il suo snippet HubL.
Aggiungere un modulo al tuo modello
Per aggiungere moduli ai tuoi modelli drag and drop, clicca su + Add nell'ispettore in alto a destra dell'editor. Tutti i moduli predefiniti e qualsiasi modulo o gruppo personalizzato salvato appariranno qui. Per trovare un modulo specifico, inserisci il suo nome nella barra di ricerca. Puoi anche cliccare sul Filtrare per categoria o tage selezionare uno o più filtri.
Quando il modulo è selezionato nell'editor, puoi modificare gli stili, le impostazioni e il contenuto del modulo nell'ispettore. Nella sezione Wrapping HTML , fai clic su Expandper aggiungere altri stili personalizzati nell'editor di codice.
Nella parte inferiore dell'ispettore, puoi bloccare il modulo in modo che gli utenti non possano modificare il contenuto predefinito quando modificano un blog, un'e-mail o una pagina. Clicca per attivare l'interruttore Prevent editing in content editor per abilitare questa impostazione.
Personalizzare un modulo predefinito
Tutti Hub del marketing Professionale ed Enterprise eHub CMS Gli accountProfessional ed Enterprise hanno una cartella @hubspot negli strumenti di progettazione per impostazione predefinita. Questa cartella contiene tutti i tuoi temi e moduli predefiniti, compresi i moduli email drag and drop. Questi temi e moduli sono di sola lettura, ma possono essere clonati se vuoi modificarli.
- Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
- Nel finder, clicca sulla cartella @hubspot.
- Cliccate con il tasto destro del mouse sul modulo predefinito che volete clonare, quindi selezionate Clona modulo.
- Nel modulo clonato, modificate il codice sorgente del modulo nel pannello di editing centrale.
- Per salvare le modifiche, in alto a destra, clicca su Publish changes. Il modulo sarà quindi disponibile per l'uso quando si costruiscono i modelli.
Tipi di moduli predefiniti
Annullamento del backup
Il modello di cancellazione di backup viene visualizzato ai destinatari delle email che cliccano su un link di cancellazione se HubSpot non è in grado di determinare il loro indirizzo email. Puoi personalizzare il testo di aiuto che appare nella pagina di cancellazione di backup nella sezioneContenuto predefinitodi questo modulo.
Commenti sul blog
Nota: il modulo dei commenti del blog non è disponibile per i modelli di pagina o di e-mail.
Il moduloper i commenti sul blog aggiunge una sezione per i commenti a un modello di post del blog. Puoi personalizzare il modulo dei commenti del blognel tuo strumento dei moduli. Il modulo avrà un nome basato sul titolo del tuo blog.
Contenuto del blog
Nota: il modulo di contenuto del blog non è disponibile per i modelli di pagina o di e-mail.
Il modulo dei contenuti del blog contiene il markup HTML/HubL per i tuoi post e le pagine di annuncio del blog. Puoi modificare il markup dei tuoi post cliccando suEdit Post Templatee modificare il markup della tua pagina di annuncio cliccando suEdit Listing Template. Per saperne di più sulmarkup del modulo del contenuto del blog.
Iscrizione al blog
Nota: il modulo di iscrizione al blog non è disponibile per i modelli di e-mail.
Ilmodulodi iscrizione al blogpermette ai visitatori di iscriversi alle e-mail del tuo blog digest compilando un modulo. Questo modulo è popolato dal tuo modulo d'iscrizione al blog, che può essere personalizzato nel tuo strumento dei moduli.
Clicca sul menu a discesa Select blog to displaye seleziona il blog a cui i tuoi visitatori si stanno iscrivendo. Nella casella di testo Titolo da visualizzare sopra il modulo , personalizza il testo che appare nel titolo sopra il modulo. Passa con il mouse sulla risposta in linea esistente e clicca sull'icona diper personalizzare il testo che appare dopo che un visitatore ha inviato il modulo.
Call-to-action
Un modulo call-to-action (CTA) colloca una CTA in un proprio modulo all'interno del tuo layout. Puoi anche inserire una CTA in un modulo di testo ricco.
Nell'ispettore, clicca sul menu
Colonna flessibile
Le colonne flessibili possono essere aggiunte ai modelli di pagina per consentire di aggiungere, rimuovere e riordinare i moduli all'interno dell'editor di contenuti. Questo dà ai creatori di pagine la flessibilità di usare un modello per creare più layout di pagina.
- Le colonne flessibili non sono disponibili su blog, pagine di sistema o modelli di e-mail.
- Una volta che una colonna flessibile è stata personalizzata per una particolare pagina nell'editor di contenuti, le modifiche fatte alla colonna flessibile nel modello non si rifletteranno su quella pagina. Questo assicura che il contenuto personalizzato non venga sovrascritto.
Quando aggiungi un modulo colonna flessibile al tuo modello, puoi trascinare e rilasciare altri moduli per creare un gruppo di colonne flessibili. Si può anche cliccare con il tasto destro del mouse su un gruppo statico esistente e selezionare Rendi colonna flessibile.
Seguitemi
Si prega di notare: il modulo follow me non è disponibile per i modelli di e-mail.
Puoi usare il follow me
Quando aggiungi un modulo follow me, puoi personalizzare l'intestazione del modulo che appare sopra le icone sociali.
Puoi specificare quali social network appaiono in questo modulo nella sezioneFollow Medelle tue impostazioni sociali.
Nota:il modulo Follow Me usa icone predefinite per ogni social network. Se vuoi usarele tueicone sociali personalizzate, puoi creare unaversione personalizzata del modulo.
Seguimi - e-mail
Nota: questo modulo è disponibile solo per le email create nell'editor drag and drop. Puoi trovare il modulo nell'editor sotto il nomeSocial.
Il modulo follow me - email offre ulteriori opzioni di formattazione e impostazioniper i modelli di email drag and drop. È possibile regolare la forma dell'icona sociale, i colori
Per modificare i social network che appaiono in questo modulo, clicca sull'icona+ Addnella sezioneSocial Networkdell'ispettore. Poi passa sopra il nome di un social network e clicca sull'icona
Clicca sull'icona di per selezionare quale social network appare e a quale URL conduce. Se selezioni Icona personalizzata, vedrai ulteriori opzioni per specificare un'immagine personalizzata per questa rete. Clicca suReplaceper scegliere un'immagine dal tuo strumento di file o caricare una nuova immagine dal tuo computer.
Modulo
Nota: il modulo modulonon è disponibile per i modelli di e-mail.
Il modulo modulo permette di aggiungere un modulo alla tua pagina o blog per catturare le informazioni di contatto dai visitatori del tuo sito web.
Per questo modulo, è possibile personalizzare le seguenti impostazioni:
- Titolo del modulo: inserisci il titolo del tuo modulo che verrà visualizzato nella pagina o nel blog.
- Modulo: seleziona un modulo HubSpot esistente da far apparire nella pagina, o aggiungi un nuovo modulo.
- Cosa vedrà un visitatore dopo aver inviato il tuo modulo?: seleziona se reindirizzare una persona che invia il modulo a un'altra pagina o visualizzare un messaggio di ringraziamento in linea sulla stessa pagina.
- Messaggio di ringraziamento: personalizza il tuo messaggio di ringraziamento in linea.
- Invia le notifiche dei moduli a indirizzi email specificati invece di quelli predefiniti del modulo: invia email di notifica dei moduli a indirizzi specifici. Questo sovrascriverà qualsiasi destinatario di notifica impostato nello strumento dei moduli.
- Aggiungi al flusso di lavoro: aggiungi i visitatori che inviano il modulo a un flusso di lavoro(soloMarketing Hub Professional oEnterprise ).
- Invia un'email di follow-up: invia fino a tre email di follow-upai visitatori che inviano il modulo.
Intestazione
Unmodulo diintestazionevisualizza una riga di testo in un tag HTML di intestazione. Inserisci il testo predefinito dell'intestazione nella casellaContenuto dell'intestazione. Fai clic sulmenu a discesa Tipo di intestazione per selezionare il tag di intestazione(H1-H4).
Distanziatore orizzontale
Il moduloHorizontalspacer crea un tag div vuoto che aggiunge spazio tra gli elementi di una pagina.
Immagine
Un modulo immagine aggiunge una singola immagine ad un pezzo di contenuto. Scopri di più sulle opzioni di modifica dei moduli immagine.
Galleria di immagini
Un modulo galleria immagini aggiunge una serie di immagini rotanti a un singolo modulo. Scopri di più sulle impostazioni personalizzabili del modulo galleria di immagini.
Commutatore di lingua
Nota: il modulo di cambio linguanon è disponibile per i modelli di e-mail.
Il modulo di cambio lingua permette ai visitatori di passare tra le versioni tradotte di una pagina o di un blog. Fai clic sul menu a discesa Modalità di visualizzazione per personalizzare il modo in cui appariranno i nomi delle tue lingue tradotte:
Pagelang: il nome di ogni lingua apparirà nella lingua della pagina corrente. Per esempio, se stai visualizzando la versione inglese di una pagina con una traduzione francese, quando clicchi sul selettore di lingua, vedrai l'inglese e il francese come nomi di lingua.- Localizzato: il nome di ogni lingua apparirà in quella lingua.Per esempio, se stai visualizzando la versione inglese di una pagina con una traduzione francese, quando clicchi sul selettore di lingua, vedrai English e Français come nomi delle lingue.
- Ibrido: una combinazione delle due. Per esempio, se stai visualizzando la versione inglese di una pagina con una traduzione francese, quando clicchi sul selettore di lingua, vedrai l'inglese e il francese (Français) come nomi di lingua.
Questo modulo apparirà solo sulle pagine live con più di una traduzione pubblicata. Scopri di più su come lavorare con icontenuti multilinguein HubSpot.
Modulo logo
IlLogoinserisce automaticamente il logo della tua azienda dalle impostazioni deltuo sito web.Per usare un logo diverso, clicca per attivare l'interruttore Sovrascrivi logo predefinito per questa paginaper caricare una nuova immagine solo per questa pagina. Per cambiare il logo predefinito per tutti i contenuti nelle impostazioni del tuo sito web, clicca su Modifica logo predefinito in questo dominio.
Il tuo modulo logo si collegherà automaticamente al tuo dominio aziendale. Per sovrascrivere questa impostazione predefinita e collegarsi a una pagina diversa, inserisci un URL di collegamentounico.
Corpo principale dell'e-mail
Ilmodulo principale del corpo dell'e-mailè un modulo standard di testo ricco che è incluso di default in ogni modello di e-mail. Puoi personalizzare ilcontenuto predefinitoper il corpo dell'email su un modello specifico.
Oltre alle opzioni di stile standard, questo modulo può essere personalizzato con colori, bordi e spaziatura predefiniti. Fai clic sulla bolladei colori e seleziona un colore dal selezionatore di colori o inserisci un valore esadecimale nel campo di testo per impostare i colori predefiniti. Inserisci valori in pixelnei campi di testoBorder width e Inner spacing per impostare la spaziatura predefinita.
Menu
Il modulo menu aggiunge la navigazione ai tuoi contenuti e modelli. I menu sono creati e gestiti direttamente nelle impostazioni del tuo sito web.
All'interno degli strumenti di design, puoi personalizzare le seguenti caratteristiche del tuo modulo di menu:
- Menu: seleziona uno dei menu esistentidalle tue impostazioni.
- Tipo di menu avanzato: seleziona come le voci di menu devono apparire sul tuo sito:
- Statico - Mostra sempre le pagine di primo livello nel
menu: mantieni il tuo menu coerente in tutte le pagine. - Dinamico per sezione- Mostra nel
menu le pagine relative allasezione visualizzata: visualizza le voci di menu relative alla voce di menu di primo livello visualizzata. - Dinamico per pagina: mostra le pagine del
menu che sono relative allapagina visualizzata:mostra le voci di menu relative alla specifica pagina visualizzata. - Menu in stile breadcrumb (utilizza il flusso orizzontale):visualizza le voci di menu orizzontalmente in un percorso relativo attraverso la parte superiore del tuo sito.
- Statico - Mostra sempre le pagine di primo livello nel
- Livelli massimi: seleziona il numero massimo di vocidi menu figlioche possono essere visualizzate.
- Orientamento:seleziona se le voci di menu vengono visualizzate orizzontalmente o verticalmente.
- Abilita i flyout: seleziona questa casella di controlloper mostrare levoci dei menu figli quando passi sopra il genitore. Deseleziona questa casella di controlloper mostrare sempre le voci dei menu figli.
Moduli
Imoduli creati nell'editor di codice ti permettono di usare HTML, CSS, Javascript e HubL per aggiungere funzionalità avanzate ai tuoi template, permettendo comunque ai tuoi utenti di modificare il contenuto del modulo nell'editor di contenuti senza cambiare il codice. Questi componenti saranno etichettati con l' icona del modulo nel finder e nell'inspector. Per saperne di più su come lavorare con i moduli personalizzati codificati nella nostra documentazione per gli sviluppatori.
Informazioni sulla posizione dell'ufficio
Il modulo di localizzazione dell'ufficio include i token richiesti che devono essere inclusi in un modello di email per poter inviare legalmente email di marketing. Mentre puoi modificare lo stile di questo modulo, non sarai in grado di salvare un modello di email senza un modulo di informazioni sulla sede dell'ufficio o itag
Oltre alle opzioni di stile standard, questo modulo può essere personalizzato con colori, bordi e spaziatura predefiniti. Fai clic sulla bolladei colori e seleziona un colore dal selezionatore di colori o inserisci un valore esadecimale nel campo di testo per impostare i colori predefiniti. Inserisci valori in pixelnei campi di testoBorder width e Inner spacing per impostare la spaziatura predefinita.
Una linea di testo
Il modulo di una riga di testo permette agli utenti di modificare una singola riga di testo nell'editor di contenuti.
Piè di pagina
Il modulo del piè di pagina mostra le informazioni sul copyright con l'anno corrente e il nome della tua azienda. Il nome dell'azienda viene estratto automaticamente dalla sezioneFooterdelle tue impostazioni e-mail.
Richiesta di password
Il modulo di richiesta della password è disponibile sui modelli di sistema di richiesta della password. Se una pagina è protetta da password, la pagina di richiesta della password verrà visualizzata prima che un utente possa accedere alla pagina. Puoi personalizzare il testo del pulsante di invio e il testo da visualizzare se viene inserita una password errata.
Filtro postale
Si prega di notare: il modulo di iscrizione al blog non è disponibile per i modelli di e-mail.
Il modulo di filtro dei post visualizza una lista di articoli di blog da un argomento specifico, un mese o un autore.
Puoi personalizzare le seguenti impostazioni per questo modulo nella sezioneContenuto predefinito:
- Seleziona un blog da visualizzare: seleziona i post del blog da utilizzare.
- Elenco di valori per i link filtro: seleziona se il modulo è filtrato per tag, mese o autore.
- Ordinamento dei valori per i link dei filtri: seleziona se i valori saranno organizzati in ordine alfabetico o per numero di post.
- Titolo della lista da visualizzare:inserisci un titoloda far apparire sopra i post.
- Numero massimo di valori del filtro da visualizzare:inserisci ilnumeromassimo di messaggi per un filtro specifico. Lascia questo campo vuoto per mostrare tutti i messaggi.
- Link di testo da visualizzare se sono presenti più valori di post di quelli consentiti per la visualizzazione:inserisci iltestoche apparirà se ci sono più post disponibili in una categoria. Il testo predefinito è Vedi tutti.
Annuncio della posta
Si prega di notare: il modulo di iscrizione al blog non è disponibile per i modelli di e-mail.
Il modulo di elencazione dei post da utilizzare per visualizzare un elenco di post di un blog HubSpot. Puoi impostare il modulo per visualizzare i post più recenti o quelli più popolari nell'ultimo mese, sei mesi, anno o in tutto il tempo.
È possibile personalizzare i seguenti contenuti predefiniti nell'ispettore:
- Seleziona il blog da visualizzare: seleziona il blog per il quale vuoi visualizzare i titoli dei post
- Elenca i post del blog per: seleziona come organizzerai i post
- Titolo della lista da visualizzare: inserisci un titoloda far apparire sopra i post.
- Numero massimo di post del blog da elencare:inserisci unnumeromassimo di post che appariranno in questo modulo.
Testo ricco
Il modulo rich text è il modulo di contenuto più comune utilizzato in tutti gli strumenti di contenuto di HubSpot. Supporta opzioni di modifica per diversi componenti, come testo, immagini e CTA.
Per aggiungere il contenuto predefinito per questo modulo, clicca su Expando clicca sull'anteprima del contenuto per aprire un editor di testo ricco.
Elenco RSS
Si prega di notare: il modulo RSS listing non è disponibile per i modelli di e-mail. Usa invece un'email RSS.
Puoi usare un modulo di elenchi RSS per visualizzare i riassunti dei post di un blog HubSpot o di un feed RSS esterno.
I moduli di elenchi RSS possono visualizzare un blog o un tag specifico. Clicca per attivare l'interruttore corrispondente per indicare se un'immagine in primo piano, il nome dell'autore, il sommario o la data di pubblicazione devono essere mostrati con ogni post.
Dopo aver abilitato queste impostazioni, è possibile personalizzare i seguenti dettagli:
- Mostra il nome dell'autore: inserisci iltesto di attribuzione dell'autore da mostrare sopra ogni nome dell'autore. Per impostazione predefinita, questo modulo includerà by come testo di attribuzione.
- Mostra sommario: inserisci la lunghezza del sommario in caratteri di ogni sommario del blog. Puoi anche personalizzare ilSummary clickthrough text, che è il link che i visitatori del blog cliccano per leggere il tuo post completo. Per impostazione predefinita, questo testo sarà etichettatoRead more.
- Mostra la data di pubblicazione: seleziona ilmodulo Publish date perpersonalizzare il modo in cui la data e l'ora sono formattate per ogni post. Puoi anche personalizzare il testo dell'indicatore della data di pubblicazione. Per impostazione predefinita, questo testo saràpubblicato alle.
Intestazione della sezione
Ilmodulo section headerti permette di spostare un tag di intestazioneh1con un sottotitolo di paragrafo. Questo modulo è ideale per intitolare la sezione principale di una pagina.
Menu semplice
I moduli di menu semplici permettono agli utenti di creare menu specifici per pagina nell'editor di contenuti. Questo modulo ti dà la flessibilità di costruire un menu semplice per un modello specifico. Nell'ispettore, clicca suEdit menuper aggiungere voci di menu, collegamenti e selezionare l'orientamento del menu. Modificando l'impostazione dell'orientamento del menu si aggiunge una classe di hs-menu-flow-horizontal o hs-menu-flow-vertical al contenitore wrapper del menu, che può poi essere usato per lo stile nel tuo CSS. Scopri di più sulle classi aggiunte dalle impostazioni del modulo nella nostra documentazione per gli sviluppatori.
Condivisione sociale
Il modulo di condivisione sociale permette ai visitatori di condividere facilmente i tuoi contenuti attraverso i canali dei social media e le e-mail. Clicca per attivare l'interruttore Enabled? accanto a uno specifico social network per includerlo nella tua pagina o email.
Il link di condivisione si popolerà automaticamente con i tag HubL richiesti per condividere il tuo contenuto. Nelle email, il modulo userà l'URL della versione web di quella email nel link di condivisione.
Si prega di notare:il modulo di condivisione sociale utilizza icone predefinite per ogni rete sociale. Se vuoi usare le tueicone sociali personalizzateè possibile creare una versioneversione personalizzata del modulo.
Preferenze di abbonamento
I moduli di preferenze di abbonamento sono disponibili solo sui modelli di sistema di preferenze di abbonamento.
Questi moduli ti permettono di personalizzare la pagina che un destinatario di e-mail vede quando gestisce le sue preferenze di iscrizione o si cancella dalle comunicazioni via e-mail.
Conferma dell'aggiornamento dell'abbonamento
Il modulo di conferma dell'aggiornamento della sottoscrizione è un modulo di testo ricco che è disponibile sui modelli di sistema di conferma dell'aggiornamento della sottoscrizione. Ti permette di personalizzare ciò che viene visualizzato quando un destinatario di e-mail aggiorna le sue impostazioni di abbonamento.
Visualizza come pagina web
Ilmodulo di visualizzazione come pagina webdà ai destinatari dell'e-mail l'opzione di aprire la versione della pagina web di un'e-mail.
