Hoppa till innehåll
Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.
Design Manager

Bygga en anpassad kodad mall

Senast uppdaterad: november 22, 2021

Gäller för:

Marknadsföring Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Tidigare Marketing Hub Basic

Designers kan bygga mallar för webbplatser, landningssidor och bloggar från grunden med hjälp av HTML. Det är också möjligt att klon en HubSpot-malllayout till HTML och anpassa den som en kodad mall.

Observera:
  • CMS Hub Starter-konton kan inte använda anpassade kodade mallar för landningssidor.
  • Marketing Hub Professional- och Enterprise-konton kan skapa anpassade kodade e-postmallar också.

Den här artikeln innehåller information om hur du skapar och felsöker anpassade kodade mallar, samt vilken HubL som krävs i dina mallar. Om du inte är bekväm med att arbeta med kod kan du använda en av de färdiga mallarna i ditt HubSpot-konto eller kolla in den Mallmarknadsplats till köpa färdiga mallar.

Observera: en specialkodad mall är inte responsiv som standard. Samarbeta med en professionell designer för att se till att din mall är responsiv för olika skärmstorlekar.

Skapa en ny HTML & HUBL-fil

  • I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
  • I den vänstra sidofältet skapar du en ny fil genom att klicka påArkiv>Ny fil.Du kan behöva klicka påmappen mappikonen för att expandera sökaren.
  • I dialogrutan klickar du på rullgardinsmenynVad vill du bygga idag?och väljerHTML & HUBL.
design-manager-html-hubl
  • Klicka påNästa
  • Ange uppgifterna för din nya fil:
    • VäljMallellerDelvis mall. En delmall är en mall som kan användas i andra mallar.
    • I rullgardinsmenyn väljer du vilken typ av mall du kodar (sida, blogg eller e-post).
    • Ge filen ett namn.
    • Om du vill uppdatera filens plats klickar du påÄndrai avsnittetFilplaceringoch väljer den mapp som filen ska läggas till i.
  • Klicka påSkapa.
  • Skriv HTML för din sida eller e-postmall.
  • Om du vill förhandsgranska hur din HubL kommer att renderas klickar du på för att aktivera knappen Visa utdata. En panel öppnas till höger med förhandsgranskningen av den renderade bilden.


    design-manager-show-output
  • Klicka på Förhandsgranska uppe till höger för att förhandsgranska hur din mall kommer att visas och fungera i innehållsredigeraren. Den här förhandsgranskningen synkroniseras med redigeraren och uppdateras automatiskt när du arbetar.
  • Klicka påPublicera ändringari övre högra hörnet
Eventuella fel i koden markeras i ett felmeddelande när du försöker publicera ändringar. Felkonsolen längst ner i kodredigeraren visar detaljerna om felet eller varningen samt förslag på hur du kan åtgärda dessa fel och varningar.

error-console

För ytterligare resurser om anpassad design kan du läsaHubSpot designer-dokumentation. Det finns ytterligaredokumentation om kodade modulalternativsom filtertaggar och ikoner.

Lägg till de HubL-taggar som krävs

Du får ett felmeddelande om din kod saknar några nödvändiga HubL-taggar om du skulle försöka publicera filen.

Mallar för webbplatser, landningssidor och bloggar kräver följande taggar:

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
E-postmallar kräver följande taggar för att vara förenliga med CAN-SPAM. De kan läggas till på två sätt:
  • Inkludera denna token som drar in avsnittet för avregistrering av CAN-SPAM: {{unsubscribe_section}}. Lägg sedan till dessa tokens individuellt:
    • {{site_settings.company_street_address_1}}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Med den här metoden har du inte möjlighet att formatera språk och stil för text och länkar.

  • Använd dessa polletter individuellt.:
    • {{site_settings.company_name}}
    • {{unsubscribe_link}} eller {{unsubscribe_link_all}} (inkludera minst en)
    • {{unsubscribe_anchor}}
    • {{site_settings.company_name}}
    • {{site_settings.company_street_address_1}}}
    • {{site_settings.company_city}}{{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Om du använder tokenerna individuellt kan du lägga till ord kring tokenerna och länkarna och formatera dem i önskad stil och på önskat språk.

Klona till HTML

Förutom att skapa en mall från grunden kan du också klona en av HubSpot-mallarna till HTML. Genom att klona en mall till HTML får du tillgång till mallens HTML-innehåll.

Så här skapar du en kodad version av en befintlig mall:

  • I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.}
  • Klicka påÅtgärder>Klona till HTML i sökaren. HTML-filen skapas i samma mapp som den ursprungliga filen. Filnamnet kommer att motsvara namnet på den ursprungliga mallen medkopiasom tillägg.
design-manager-clone-to-html