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 at designe 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 rettighederne til designværktøjer til at oprette og redigere skabeloner i designmanageren.
• Det anbefales også at have tilladelserneGlobalt indhold og temaindstillinger og Hjemmesideindstillinger, hvis du har brug for at redigere globale webaktiver og blog-/hjemmesideindstillinger.

Forstå begrænsninger og overvejelser

• Der kræves et Marketing Hub Professional- eller Enterprise-abonnement for at oprette e-mailskabeloner. Content Hub-konti kan oprette e-mails ved hjælp af træk og slip-editoren.
• Brugerdefinerede 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

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på rullemenuen Filer øverst i stifinderen, og vælg Ny fil.

3. I dialogboksen skal du klikke på rullemenuen Hvad vil du bygge i dag? og vælge HTML + HubL.

4. Vælg en mulighed i feltet What are you building?
   • Skabelon: definerer layoutet og strukturen for det indhold, der skal vises på websiderne, landingssiderne, blogindlæggene eller e-mailen.
   • Del af skabelon: er genanvendelig kode eller en kodestump, der kan indgå i flere andre skabeloner.
5. 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.
6. Indtast et filnavn i feltet Filnavn.
7. Hvis du vil opdatere filens placering, skal du klikke på Skift i afsnittet Filplacering og vælge en mappe.
8. Klik på Opret, når du er færdig.

Tilføj HTML + HubL til din skabelon

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

Tilføj HTML + HubL

1. Indtast HTML for skabelonen. Læs mere om at tilføje CSS- og JavaScript-filer til brugerdefinerede skabeloner.
2. For at vise, hvordan HTML + HubL vil blive gengivet, skal du slå Vis output til øverst til venstre. Et panel åbnes til højre med en forhåndsvisning af gengivelsen.

Tilføj den nødvendige HTML + HubL

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

• Side- og blogskabeloner kræver følgende variabler:

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

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

• E-mail-skabeloner kræver følgende variabler for at være i overensstemmelse med CAN-SPAM:

<!-- 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-mail-skabeloner kræver følgende kode for at vise eksempeltekst i visse e-mail-klienter:

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

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.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på navnet på den skabelon, du vil klone, i søgeren.
3. Klik på rullemenuen Handlinger, og vælg Klon til HTML. HTML-filen oprettes i samme mappe som den oprindelige fil.

Forhåndsvis 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.

1. På din HubSpot-konto skal du navigere til Indhold > Design Manager.
2. Klik på navnet på den skabelon, du vil se en forhåndsvisning af eller udgive, i søgeren.
3. Klik på rullemenuen Preview øverst til højre, og vælg en indstilling:
   • 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 Viewport preset.
   • Hvis du vælger Forhåndsvisning uden visningsmuligheder, kan du kun få vist, hvordan din skabelon vil se ud i browsere.
4. Klik på Udgiv ændringer, når du er færdig.
5. 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 nederst til venstre i kodeeditoren og klikke på Vis detaljer.