Senast uppdaterad: 31 augusti 2026
Utvecklare kan skapa mallar för bloggar, webbsidor, landningssidor och e-postmeddelanden från grunden med hjälp av HTML och HubL. Du kan också kopiera en mall med dra-och-släpp-layout till HTML och sedan anpassa den som en kodad mall.
Läs mer om hur du utformar anpassade tillgångar i vår utvecklardokumentation.
Behörigheter krävs Behörigheten ”Designverktyg” krävs för att skapa och redigera mallar i designhanteraren.
Behörigheter krävs Behörigheten för globala innehålls- och temainställningar samt webbplatsinställningar krävs för att redigera globala webbplatsresurser och inställningar för bloggar eller webbplatser.
Skapa en ny HTML + HubL-fil
Prenumeration krävs Ett Marketing Hub Professional- eller Enterprise-abonnemang krävs för att skapa anpassade e-postmallar. Konton med Content Hub kan skapa e-postmeddelanden med hjälp av e-postredigeraren med dra-och-släpp-funktion.
- I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
- Klicka på rullgardinsmenyn Arkiv högst upp i sökfältet och välj Ny fil.
- I dialogrutan klickar du på rullgardinsmenyn ”Vad vill du bygga idag? ” och väljer ”HTML + HubL”.
- I fältet ”Vad bygger du? ” väljer du ett alternativ:
- Mall: definierar layouten och strukturen för innehållet som ska visas på webbplatsens sidor, landningssidor, blogginlägg eller i e-post.
- Malldel: är återanvändbar kod eller ett kodavsnitt som kan inkluderas i flera andra mallar.
- Klicka på rullgardinsmenyn för malltyp och välj en typ för den anpassade mallen (sida, blogginlägg/lista, e-post eller systemsida). Läs mer om malltyper.
- Ange ett filnamn i fältet Filnamn.
- Om du vill uppdatera filens plats klickar du på Ändra i avsnittet Filplats och väljer en mapp.
- 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 omdirigeras du till kodredigeraren där du kan lägga till din anpassade kod och förhandsgranska hur den kommer att se ut på en live-sida.
Lägg till HTML + HubL
- Ange HTML-koden för mallen. Läs mer om hur du lägger till CSS- och JavaScript-filer i anpassade mallar.
- För att se hur HTML + HubL kommer att visas, slå på knappen Visa utdata längst upp till vänster. En panel öppnas till höger med den renderade förhandsvisningen.
Lägg till nödvändig HTML + HubL
Anpassade mallar kräver specifika HTML- eller HubL-variabler för att fungera. Om någon av dessa nödvändiga 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 uppfylla CAN-SPAM-kraven:
<!-- 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 förhandsgranskningstexten ska visas 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>
Klonera en mall till HTML
Förutom att skapa mallar från grunden kan du även klona dra-och-släpp-mallar för bloggar, webbsidor och landningssidor till HTML.
- I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
- Klicka på namnet på den mall du vill klona i sökaren.
- Klicka på rullgardinsmenyn Åtgärder och välj Klona till HTML. HTML-filen 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.
- I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
- Klicka på namnet på den mall du vill förhandsgranska eller publicera i sökfältet.
- Klicka på rullgardinsmenyn Förhandsgranska längst upp till höger och välj ett alternativ:
- Om du väljer Liveförhandsgranskning med visningsalternativ kan du förhandsgranska din mall så som den ser ut på andra enheter genom att välja förinställningen Viewport.
- Om du väljer Förhandsgranska utan visningsalternativ kan du endast förhandsgranska hur din mall kommer att se ut i webbläsare.
- När du är klar klickar du på Publicera ändringar.
- Om det finns några kodfel visas ett felmeddelande. Läs mer om dessa fel i felkonsolen under kodredigeraren:
-
- Klicka på "felkonsolen " i felmeddelandet högst upp på sidan för att öppna konsolen nedanför kodredigeraren.
- Alternativt kan du gå till nedre vänstra hörnet av kodredigeraren och klicka på "Visa detaljer".
