Byg en brugerdefineret kodet skabelon

Udviklere kan bygge blog-, webside-, landingsside- og e-mail-skabeloner fra bunden ved hjælp af HTML + HubL. Du kan også klone et træk og slip-skabelonlayout til HTML og derefter tilpasse det som en kodet skabelon.

Få mere at vide om design af brugerdefinerede aktiver i vores udviklerdokumentation.

Før du går i gang

Før du begynder at arbejde med denne funktion, skal du sørge for fuldt ud at forstå, hvilke skridt der skal tages på forhånd, samt funktionens begrænsninger og potentielle konsekvenser af at bruge den.

Forstå kravene

• Kontrollér, at du har tilladelserne Designværktøjer til at oprette og redigere skabeloner i designmanageren.
• Det anbefales, at du også har rettighedssættene Globalt indhold og temaindstillinger og Hjemmesideindstillinger, hvis du skal redigere globale webaktiver og blog-/hjemmesideindstillinger.

Forstå begrænsninger og overvejelser

• Der kræves et Marketing Hub Professional- eller Enterprise-abonnement for at bygge e-mail-skabeloner. Content Hub-konti kan oprette e-mails ved hjælp af træk og slip-e-mail-editoren.
• Kundekodede skabeloner kan bruge mange foruddefinerede variabler. Nogle af disse variabler er nødvendige for at oprette e-mails og sider, mens andre er valgfrie. Få mere at vide om at tilføje påkrævede HubL-variabler for e-mails, hjemmesider og landingssider.

Opret en ny HTML + HubL-fil

• På din HubSpot-konto skal du navigere til Indhold > Design Manager.
• Klik på menuen File øverst i venstre kolonne, og vælg New file.

• I dialogboksen Ny fil skal du klikke på rullemenuen Hvad vil du bygge i dag? og vælge HTML + HubL, og derefter klikke på Næste.

• I dialogboksen Opsæt din nye HTML + HUBL-skabelon skal du angive detaljerne for din nye fil:
  • Vælg en mulighed for Hvad bygger du?
    • Skabelon: definerer layoutet og strukturen for det indhold, der skal vises på websiderne, landingssiderne, blogindlæggene eller e-mailen.
    • Template Partial: er genanvendelig kode eller en kodestykke, der kan indgå i flere andre skabeloner.
  • Klik på rullemenuen Skabelontype, og vælg en type for den brugerdefinerede kodede skabelon (side, blogindlæg/liste, e-mail eller systemside). Få mere at vide om skabelontyper.
  • Indtast et filnavn i feltet Filnavn.
  • Hvis du vil opdatere filens placering, skal du klikke på Skift i afsnittet Filplacering og vælge en mappe.
• Klik på Opret.

Tilføj HTML + HubL til din skabelon

Når du har konfigureret din nye fil, bliver du sendt til kodeeditoren for at tilføje din brugerdefinerede kode og få vist, hvordan den vil se ud på en live-side.

Tilføj HTML + HubL

• Indtast HTML for din skabelon. Læs mere om, hvordan du tilføjer CSS- og JavaScript-filer til din specialkodede skabelon.
• For at vise, hvordan din HubL vil blive gengivet, skal du klikke for at slå Vis output til. Der åbnes et panel til højre med den gengivne forhåndsvisning.

Tilføj den nødvendige HubL

Kundekodede skabeloner kræver specifikke HubL-variabler for at fungere. Hvis nogle af disse nødvendige variabler mangler, vises der en fejlmeddelelse, når du forsøger at udgive skabelonen.

• Side- og blogskabeloner kræver følgende variabler:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• E-mail-skabeloner kræver følgende variabler for at være i overensstemmelse med CAN-SPAM.
  • {{unsubscribe_link}} eller {{unsubscribe_link_all}} (inkluder mindst én)
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • 02141

Klon en skabelon til HTML

Ud over at oprette skabeloner fra bunden kan du også klone træk og slip-skabeloner til blogs, websider og landingssider til HTML.

• For at oprette en kodet version af en eksisterende skabelon:
  • På din HubSpot-konto skal du navigere til Indhold > Design Manager.

• • Åbn den skabelon, du vil klone, i venstre sidepanel.
  • Klik på rullemenuen Handlinger, og vælg Klon til HTML. HTML-filen oprettes i samme mappe som den oprindelige fil.

Se en forhåndsvisning og udgiv din skabelon

Når du har oprettet din skabelon, kan du se en forhåndsvisning af, hvordan den vil se ud på en live-side, og derefter udgive den.

• Klik på Forhåndsvisning øverst til højre.
• Hvis du vælger Live preview with display options, kan du få vist din skabelon, som den ser ud på andre enheder, ved at vælge forudindstillingen Viewport.
• Hvis du vælger Forhåndsvisning uden visningsmuligheder, kan du kun få vist, hvordan din skabelon vil se ud i browsere.
• Når du er færdig med at redigere, skal du klikke på Udgiv ændringer øverst til højre.

• Hvis der er kodefejl, vises der en fejlmeddelelse. Se flere oplysninger om disse fejl i fejlkonsollen under kodeeditoren:
  • I fejlmeddelelsen øverst på siden skal du klikke på fejlkonsollen for at åbne konsollen under kodeeditoren.
  • Alternativt kan du navigere til bunden af kodeeditoren og klikke på Vis detaljer.