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 sätter igång

Innan du börjar arbeta med den här funktionen bör du se till att du är helt införstådd med vilka åtgärder som bör vidtas i förväg, samt funktionens begränsningar och eventuella 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örigheterna Global content and theme settings och Website Settings 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

• I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
• Klicka på menyn File högst upp i vänstra kolumnen och välj New file.

• I dialogrutan Ny fil klickar du på rullgardinsmenyn Vad vill du bygga idag? och väljer HTML + HubL och klickar sedan på Nästa.

• I dialogrutan Set up your new HTML + HUBL template anger du detaljerna för den nya filen:
  • Välj ett alternativ för What are you building?
    • Mall: definierar layouten och strukturen för det innehåll som ska visas på webbsidor, målsidor, blogginlägg eller e-postmeddelanden.
    • Del av mall: är återanvändbar kod eller en kodsnutt som kan inkluderas i flera andra mallar.
  • Klicka på rullgardinsmenyn Malltyp och välj en typ för den anpassade kodade mallen (sida, blogginlägg/listningssida, e-post eller systemsida). Läs mer om malltyper.
  • I fältet Filnamn anger du ett filnamn.
  • Om du vill uppdatera filens plats klickar du på Ändra i avsnittet Filens plats och väljer en mapp.
• Klicka 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

• Ange HTML-koden för din mall. Läs mer om hur du lägger till CSS- och JavaScript-filer i din egenkodade mall.
• För att visa hur din HubL kommer att renderas, klicka för att slå på knappen Show output. En panel öppnas till höger med en förhandsgranskning av renderingen.

Lägg till önskad HubL

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

• Sid- och bloggmallar kräver följande variabler:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• E-postmallar kräver följande variabler för att vara CAN-SPAM-kompatibla.
  • eller {{unsubscribe_link_all}} (inkludera minst en)
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • 02141

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.

• För att skapa en kodad version av en befintlig mall:
  • I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.

• • Öppna den mall som du vill klona i den vänstra sidofältet.
  • 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.

• Klicka på Förhandsgranska längst upp till höger.
• Om du väljer Live preview with display options kan du förhandsgranska din mall som den visas på andra enheter genom att välja förinställningen Viewport.
• Om du väljer Förhandsgranska utan visningsalternativ kan du bara förhandsgranska hur din mall kommer att visas i webbläsare.
• När du är klar med redigeringen klickar du på Publicera ändringar uppe till höger.

• Om det finns några fel i koden visas ett felmeddelande. Mer information om dessa fel finns 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 till botten av kodredigeraren och klicka på Visa detaljer.