Creare un modello codificato personalizzato

Gli sviluppatori possono creare blog, pagine 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

• Verificate di avere le autorizzazioni per gli strumenti di progettazione per creare e modificare i modelli nel design manager.
• Si consiglia di avere anche i permessi per leimpostazioni globali dei contenuti e dei temi e per le impostazioni del sito web, se è necessario modificare le risorse web globali e le impostazioni del blog/sito web.

Comprendere le limitazioni e le considerazioni

• Per creare modelli di e-mail è necessario un abbonamento a Marketing Hub Professional o Enterprise. Gli account di Content Hub possono creare e-mail utilizzando l'editor di e-mail con trascinamento.
• 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

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 vuoi costruire oggi? e selezionare HTML + HubL.

4. Nel campo Cosa stai costruendo?, selezionare un'opzione:
   • Template: definisce il layout e la struttura del contenuto che verrà visualizzato 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.
5. 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.
6. Inserire un nome di file nel campo Nome file.
7. Per aggiornare la posizione del file, fare clic su Cambia nella sezione Posizione del file e selezionare una cartella.
8. Al termine, fare clic su Crea.

Aggiungere HTML + HubL al modello

Dopo aver configurato il nuovo file, verrete indirizzati all'editor di codice per aggiungere il codice personalizzato e visualizzare l'anteprima di come apparirà su una pagina live.

Aggiungere HTML + HubL

1. Inserite l'HTML per il modello. Per saperne di più sull'aggiunta di file CSS e JavaScript ai modelli con codice personalizzato.
2. Per visualizzare il rendering dell'HTML + HubL, attivare l'interruttore Mostra output in alto a sinistra. Sulla destra si aprirà un pannello con l'anteprima del rendering.

Aggiungere l'HTML + HubL richiesto

I modelli personalizzati richiedono specifiche variabili HTML o HubL per funzionare. Se una di queste variabili richieste è mancante, potrebbe apparire un messaggio di errore quando si tenta di pubblicare il modello.

• I modelli di pagina e di blog richiedono le seguenti variabili:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• I modelli di e-mail richiedono le seguenti variabili per essere conformi a CAN-SPAM:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• I modelli di e-mail richiedono il seguente codice per visualizzare il testo di anteprima in alcuni client di posta elettronica:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

Clonare un modello in HTML

Oltre a creare modelli da zero, è possibile clonare in HTML modelli trascinati per blog, pagine web e landing page.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic sul nome del modello che si desidera clonare.
3. 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.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, fare clic sul nome del modello che si desidera visualizzare in anteprima o pubblicare.
3. In alto a destra, fare clic sul menu a discesa Anteprima e selezionare un'opzione:
   • Se si seleziona Anteprima dal vivo con opzioni di visualizzazione, è possibile visualizzare l'anteprima del modello come appare su altri dispositivi selezionando la preimpostazione Viewport.
   • Se si seleziona Anteprima senza opzioni di visualizzazione, è possibile visualizzare l'anteprima del modello solo sui browser.
4. Al termine, fare clic su Pubblica modifiche.
5. 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 basso a sinistra nell'editor di codice e fare clic su Mostra dettagli.