Skapa en anpassad kodad mall

Utvecklare kan skapa mallar för bloggar, webbsidor, målsidor och e-post från grunden med HTML + HubL. Du kan också klona en dra-och-släpp-mallayout till HTML och sedan anpassa den som en kodad mall.

Läs mer om hur du utformar anpassade tillgångar i vår utvecklardokumentation.

Innan du kommer igång

Innan du börjar arbeta med den här funktionen bör du se till att du förstår vilka steg som bör tas i förväg, samt funktionens begränsningar och potentiella konsekvenser av att använda den.

Förstå kraven

• Kontrollera att du har behörigheten Designverktyg för att skapa och redigera mallar i designhanteraren.
• Vi rekommenderar att du även har behörigheternaGlobalt innehåll och temainställningar och Webbplatsinställningar om du behöver redigera globala webbtillgångar och blogg-/webbplatsinställningar.

Förstå begränsningar och överväganden

• En Marketing Hub Professional- eller Enterprise-prenumeration krävs för att skapa e-postmallar. Content Hub-konton kan skapa e-postmeddelanden med hjälp av dra-och-släpp-redigeraren.
• Egenkodade mallar kan använda många fördefinierade variabler. Vissa av dessa variabler krävs för att skapa e-postmeddelanden och sidor, medan andra är valfria. Läs mer om hur du lägger till obligatoriska HubL-variabler för e-post, webbplats och målsida.

Skapa en ny HTML + HubL-fil

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på rullgardinsmenyn Fil längst upp i sökaren och välj Ny fil.

3. I dialogrutan klickar du på rullgardinsmenyn Vad vill du bygga idag? och väljer HTML + HubL.

4. I fältet Vad bygger du? väljer du ett alternativ:
   • Mall: definierar layouten och strukturen för det innehåll som ska visas på webbsidor, målsidor, blogginlägg eller e-post.
   • Template Partial: är återanvändbar kod eller en kodsnutt som kan inkluderas i flera andra mallar.
5. Klicka på rullgardinsmenyn Malltyp och välj en typ för den anpassade kodade mallen (sida, blogginlägg/listning, e-post eller systemsida). Läs mer om malltyper.
6. Ange ett filnamn i fältet Filnamn.
7. Om du vill uppdatera filens plats klickar du på Ändra i avsnittet Filens plats och väljer en mapp.
8. När du är klar klickar du på Skapa.

Lägg till HTML + HubL i din mall

När du har konfigurerat din nya fil kommer du att skickas till kodredigeraren för att lägga till din anpassade kod och förhandsgranska hur den kommer att visas på en live-sida.

Lägg till HTML + HubL

1. Ange HTML för mallen. Läs mer om hur du lägger till CSS- och JavaScript-filer i mallar med anpassad kod.
2. För att visa hur HTML + HubL kommer att renderas, slå på knappen Show output uppe till vänster. En panel öppnas till höger med en förhandsgranskning av renderingen.

Lägg till HTML + HubL som krävs

Anpassade kodade mallar kräver specifika HTML- eller HubL-variabler för att fungera. Om någon av dessa obligatoriska variabler saknas kan ett felmeddelande visas när du försöker publicera mallen.

• Sid- och bloggmallar kräver följande variabler:

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

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

• E-postmallar kräver följande variabler för att vara CAN-SPAM-kompatibla:

<!-- 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 }}

• E-postmallar kräver följande kod för att visa förhandsgranskningstext i vissa e-postklienter:

<!-- 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>

Klona en mall till HTML

Förutom att skapa mallar från grunden kan du också klona dra och släpp-mallar för bloggar, webbsidor och landningssidor till HTML.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på namnet på den mall som du vill klona i sökaren.
3. Klicka på rullgardinsmenyn Åtgärder och välj Klona till HTML. HTML-filen kommer att skapas i samma mapp som originalfilen.

Förhandsgranska och publicera din mall

När du har skapat din mall kan du förhandsgranska hur den kommer att se ut på en live-sida och sedan publicera den.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. I sökaren klickar du på namnet på den mall du vill förhandsgranska eller publicera.
3. Längst upp till höger klickar du på rullgardinsmenyn Förhandsgranska och väljer ett alternativ:
   • Om du väljer Liveförhandsgranskning med visningsalternativ kan du förhandsgranska din mall så som den visas på andra enheter genom att välja förinställningen Vyport.
   • Om du väljer Förhandsgranska utan visningsalternativ kan du bara förhandsgranska hur din mall kommer att visas i webbläsare.
4. När du är klar klickar du på Publicera ändringar.
5. Om det finns några kodfel kommer ett felmeddelande att visas. Granska mer information om dessa fel i felkonsolen under kodredigeraren:

• • I felmeddelandet längst upp på sidan klickar du på Felkonsol för att öppna konsolen under kodredigeraren.
  • Alternativt kan du navigera längst ned till vänster i kodredigeraren och klicka på Visa detaljer.