Creare un modello con codice personalizzato

Gli sviluppatori possono creare da zero modelli di blog, pagine web, landing page ed e-mail utilizzando HTML + HubL. È inoltre possibile clonare il layout di un modello tramite drag-and-drop in formato HTML, per poi personalizzarlo come modello codificato.

Scopri di più sulla progettazione di risorse personalizzate nella nostra documentazione per sviluppatori.

Crea un nuovo file HTML + HubL

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente 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, fai clic sul menu a tendina "Cosa vorresti creare oggi?" e seleziona " HTML + HubL".

4. Nel campo " Cosa stai creando? ", seleziona un'opzione:
   • 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.
   • Modello parziale: è un codice riutilizzabile o uno snippet di codice che può essere incluso in diversi altri modelli.
5. Fai clic sul menu a discesa " Tipo di modello " e seleziona un tipo per il modello con codice personalizzato (pagina, post del blog/elenco, e-mail o pagina di sistema). Scopri di più sui tipi di modello.
6. Inserisci un nome file nel campo " Nome file ".
7. Per aggiornare la posizione del file, fai clic su "Modifica " nella sezione " Posizione file " e seleziona una cartella.
8. Al termine, clicca su Crea.

Aggiungi HTML + HubL al tuo modello

Dopo aver configurato il nuovo file, verrai reindirizzato all’editor di codice per aggiungere il tuo codice personalizzato e visualizzare un’anteprima di come apparirà sulla pagina live.

Aggiungi HTML + HubL

1. Inserisci il codice HTML per il modello. Scopri di più su come aggiungere file CSS e JavaScript ai modelli con codice personalizzato.
2. Per visualizzare come verrà visualizzato l'HTML + HubL, attiva l'opzione "Mostra output " in alto a sinistra. Sulla destra si aprirà un pannello con l'anteprima del risultato.

Aggiungi il codice HTML + HubL richiesto

I modelli con codice personalizzato richiedono specifiche variabili HTML o HubL per funzionare. Se una qualsiasi di queste variabili obbligatorie è mancante, potrebbe comparire 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 email richiedono le seguenti variabili per essere conformi alla normativa 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 email richiedono il seguente codice per visualizzare il testo di anteprima in determinati 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>

Clona un modello in HTML

Oltre a creare modelli da zero, è possibile clonare modelli di tipo "trascina e rilascia" per blog, pagine web e landing page in formato HTML.

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente 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.

Visualizza l’anteprima e pubblica il tuo modello

Una volta creato il modello, puoi visualizzarne l’anteprima per vedere come apparirà su una pagina live, quindi pubblicarlo.

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
2. Nel Finder, fai clic sul nome del modello che desideri visualizzare in anteprima o pubblicare.
3. In alto a destra, fai clic sul menu a discesa Anteprima e seleziona un'opzione:
   • Se selezioni " Anteprima dal vivo con opzioni di visualizzazione", puoi visualizzare in anteprima il tuo modello così come apparirà su altri dispositivi selezionando il preset "Viewport".
   • Se selezioni "Anteprima senza opzioni di visualizzazione", potrai visualizzare in anteprima solo come apparirà il tuo modello nei browser.
4. Al termine, fai clic su " Pubblica modifiche".
5. Se sono presenti errori nel codice, verrà visualizzato un messaggio di errore. Per ulteriori informazioni su questi errori, consulta la console degli errori sotto l'editor di codice:

• • Nel messaggio di errore nella parte superiore della pagina, fai clic su " Console degli errori " per aprire la console sotto l’editor di codice.
  • In alternativa, vai in basso a sinistra nell’editor di codice e fai clic su "Mostra dettagli".