Opret en skabelon med brugerdefineret kode

Udviklere kan oprette skabeloner til blogs, websider, landingssider og e-mails fra bunden ved hjælp af HTML og HubL. Du kan også kopiere et skabelonlayout med træk-og-slip-funktion til HTML og derefter tilpasse det som en kodet skabelon.

Læs mere om design af brugerdefinerede elementer i vores udviklerdokumentation.

Opret en ny HTML + HubL-fil

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Klik på rullemenuen Filer øverst i søgefeltet, og vælg Ny fil.

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

4. I feltet " Hvad bygger du? " skal du vælge en af følgende muligheder:
   • Skabelon: definerer layoutet og strukturen for det indhold, der skal vises på websidens sider, landingssider, blogindlæg eller i e-mails.
   • Delvis skabelon: er genbrugelig kode eller et kodestykke, der kan indsættes i flere andre skabeloner.
5. Klik på rullemenuen "Skabelontype", og vælg en type til den brugerdefinerede skabelon (side, blogindlæg/liste, e-mail eller systemside). Få mere at vide om skabelontyper.
6. Indtast et filnavn i feltet "Filnavn".
7. For at opdatere filens placering skal du klikke på " Skift " i afsnittet " Filplacering" og vælge en mappe.
8. Når du er færdig, skal du klikke på Opret.

Føj HTML + HubL til din skabelon

Når du har konfigureret din nye fil, bliver du dirigeret til kodeditoren, hvor du kan tilføje din brugerdefinerede kode og få et eksempel på, hvordan den vil se ud på en live-side.

Tilføj HTML + HubL

1. Indtast HTML-koden til skabelonen. Få mere at vide om, hvordan du tilføjer CSS- og JavaScript-filer til brugerdefinerede skabeloner.
2. For at se, hvordan HTML + HubL vises, skal du slå knappen Vis output til i øverste venstre hjørne. Der åbnes et panel til højre med den renderede forhåndsvisning.

Tilføj den nødvendige HTML + HubL

Brugerdefinerede skabeloner kræver specifikke HTML- eller HubL-variabler for at fungere. Hvis nogen af disse påkrævede variabler mangler, kan der vises en fejlmeddelelse, når du forsøger at offentliggøre 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 overholde CAN-SPAM-lovgivningen:

<!-- 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 forhåndsvisningstekst 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 drag-and-drop-skabeloner til blogs, websider og landingssider til HTML.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Klik på navnet på den skabelon, du vil klone, i finder-vinduet.
3. Klik på rullemenuen Handlinger, og vælg Klon til HTML. HTML-filen oprettes i samme mappe som den oprindelige fil.

Se en forhåndsvisning af din skabelon, og offentliggør den

Når du har oprettet din skabelon, kan du få et eksempel på, hvordan den vil se ud på en live-side, og derefter offentliggøre den.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Klik på navnet på den skabelon, du vil få vist eller offentliggøre, i søgefeltet.
3. Klik på rullemenuen "Eksempel " øverst til højre, og vælg en af følgende muligheder:
   • Hvis du vælger "Live-forhåndsvisning med visningsindstillinger", kan du få en forhåndsvisning af din skabelon, som den vil se ud på andre enheder, ved at vælge forudindstillingen "Viewport".
   • Hvis du vælger " Forhåndsvisning uden visningsindstillinger", kan du kun se, hvordan din skabelon vil se ud i browsere.
4. Når du er færdig, skal du klikke på " Udgiv ændringer".
5. Hvis der er kodefejl, vises der en fejlmeddelelse. Se flere oplysninger om disse fejl i fejlkonsollen under kodeditoren:

• • Klik på "Fejlkonsol " i fejlmeddelelsen øverst på siden for at åbne konsollen under kodeditoren.
  • Du kan også gå til nederst til venstre i kodeditoren og klikke på " Vis detaljer".