Creare un modello codificato personalizzato

Gli sviluppatori possono creare blog, pagine del sito web, landing page e modelli di e-mail da zero utilizzando HTML + HubL. È anche possibile clonare il layout di un modello trascinandolo in HTML, quindi personalizzarlo come modello codificato.

Per saperne di più sulla progettazione di risorse personalizzate, consultate la nostra documentazione per sviluppatori.

Prima di iniziare

Prima di iniziare a lavorare con questa funzione, assicuratevi di aver compreso appieno i passi da compiere in anticipo, nonché i limiti della funzione e le potenziali conseguenze del suo utilizzo.

Comprendere i requisiti

• Verificare di avere i permessi per gli strumenti di progettazione per creare e modificare i modelli nel design manager.
• Si consiglia di avere anche le autorizzazioni Global content and theme settings e Website Settings, se si devono modificare le risorse web globali e le impostazioni di blog/sito web.

Comprendere limiti e considerazioni

• Per creare modelli di e-mail è necessario un abbonamento a Marketing Hub Professional o Enterprise. Gli account di Content Hub possono creare email utilizzando l'editor drag-and-drop.
• I modelli personalizzati possono utilizzare molte variabili predefinite. Alcune di queste variabili sono necessarie per creare email e pagine, mentre altre sono facoltative. Per saperne di più sull'aggiunta di variabili HubL necessarie per e-mail, siti web e landing page.

Creare un nuovo file HTML + HubL

• Nel tuo account HubSpot, passa a Contenuti > Design Manager.
• Nella parte superiore della colonna di sinistra, fare clic sul menu File e selezionare Nuovo file.

• Nella finestra di dialogo Nuovo file, fare clic sul menu a discesa Cosa si desidera creare oggi? e selezionare HTML + HubL, quindi fare clic su Avanti.

• Nella finestra di dialogo Imposta il tuo nuovo modello HTML + HUBL, inserire i dettagli del nuovo file:
  • Selezionare un'opzione per Cosa stai costruendo?
    • Modello: definisce il layout e la struttura dei contenuti che verranno visualizzati nelle pagine del sito web, nelle landing page, nei post del blog o nelle e-mail.
    • Template parziale: è un codice riutilizzabile o un frammento di codice che può essere incluso in più modelli.
  • Fare clic sul menu a discesa Tipo di template e selezionare un tipo di template con codice personalizzato (pagina, post/elenco di blog, e-mail o pagina di sistema). Per saperne di più sui tipi di modello.
  • Nel campo Nome file, inserire il nome del file.
  • Per aggiornare la posizione del file, fare clic su Cambia nella sezione Posizione del file e selezionare una cartella.
• Fare clic su Crea.

Aggiungere HTML + HubL al modello

Una volta configurato il nuovo file, si verrà indirizzati all'editor di codice per aggiungere il codice personalizzato e visualizzare l'anteprima di come apparirà su una pagina live.

Aggiungere HTML + HubL

• Inserire l'HTML del modello. Per saperne di più sull'aggiunta di file CSS e JavaScript al vostro modello personalizzato.
• Per visualizzare il rendering di HubL, fare clic per attivare l'interruttore Mostra output. Sulla destra si aprirà un pannello con l'anteprima del rendering.

Aggiungere l'HubL richiesto

I modelli codificati in modo personalizzato richiedono specifiche variabili di HubL per funzionare. Se una di queste variabili richieste manca, quando si tenta di pubblicare il modello appare un messaggio di errore.

• I modelli di pagina e di blog richiedono le seguenti variabili:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• I modelli di e-mail richiedono le seguenti variabili per essere conformi a CAN-SPAM.
  • {{unsubscribe_link}} o {{unsubscribe_link_all}} (includerne almeno una)
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

Clonare un modello in HTML

Oltre a creare modelli da zero, è possibile clonare modelli drag and drop per blog, pagine del sito web e landing page in HTML.

• Per creare una versione codificata di un modello esistente:
  • Nel tuo account HubSpot, passa a Contenuti > Design Manager.

• • Nella barra laterale sinistra, aprire il modello che si desidera clonare.
  • Fare clic sul menu a discesa Azioni e selezionare Clona in HTML. Il file HTML verrà creato nella stessa cartella del file originale.

Anteprima e pubblicazione del modello

Una volta creato il modello, è possibile visualizzare l'anteprima di come apparirà su una pagina live, quindi pubblicarlo.

• In alto a destra, fare clic su Anteprima.
• Se si seleziona Anteprima dal vivo con opzioni di visualizzazione, è possibile visualizzare l'anteprima del modello come appare su altri dispositivi selezionando il preset Riquadro di visualizzazione.
• Se si seleziona Anteprima senza opzioni di visualizzazione, è possibile visualizzare l'anteprima del modello solo sui browser.
• Al termine delle modifiche, fare clic su Pubblica modifiche in alto a destra.

• Se ci sono errori di codice, viene visualizzato un messaggio di errore. Per ulteriori informazioni su questi errori, consultare la console degli errori sotto l'editor di codice:
  • Nel messaggio di errore nella parte superiore della pagina, fare clic su console errori per aprire la console sotto l'editor di codice.
  • In alternativa, spostarsi in fondo all'editor di codice e fare clic su Mostra dettagli.