Bygg en spesialkodet mal

Utviklere kan bygge blogg-, nettside-, destinasjonsside- og e-postmaler fra bunnen av ved hjelp av HTML + HubL. Du kan også klone en dra-og-slipp-maloppsett til HTML, og deretter tilpasse den som en kodet mal.

Finn ut mer om hvordan du utformer tilpassede ressurser i utviklerdokumentasjonen vår.

Før du kommer i gang

Før du begynner å jobbe med denne funksjonen, må du sette deg godt inn i hva du bør gjøre på forhånd, samt begrensningene ved funksjonen og de potensielle konsekvensene av å bruke den.

Forstå kravene

• Kontroller at du har rettighetene Designverktøy for å opprette og redigere maler i Design Manager.
• Det anbefales at du også har rettigheteneGlobalt innhold og temainnstillinger og Nettstedsinnstillinger hvis du har behov for å redigere globale nettressurser og blogg-/nettstedsinnstillinger.

Forstå begrensninger og hensyn

• Du må ha et Marketing Hub Professional- eller Enterprise-abonnement for å lage e-postmaler. Content Hub-kontoer kan opprette e-poster ved hjelp av dra-og-slipp-redigeringsprogrammet for e-post.
• Egendefinerte maler kan bruke mange forhåndsdefinerte variabler. Noen av disse variablene er påkrevd for å opprette e-poster og sider, mens andre er valgfrie. Finn ut mer om hvordan du legger til nødvendige HubL-variabler for e-post, nettsted og destinasjonssider.

Opprett en ny HTML + HubL-fil

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på rullegardinmenyen Fil øverst i søkeren, og velg Ny fil.

3. I dialogboksen klikker du på rullegardinmenyen Hva vil du bygge i dag? og velger HTML + HubL.

4. Velg et alternativ i feltet Hva skal du bygge?
   • Mal: definerer oppsettet og strukturen til innholdet som skal vises på nettsidene, destinasjonssidene, blogginnleggene eller e-postene.
   • Delvis mal: er gjenbrukbar kode eller en kodestump som kan inkluderes i flere andre maler.
5. Klikk på rullegardinmenyen Maltype, og velg en type for den egendefinerte kodede malen (side, blogginnlegg/liste, e-post eller systemside). Finn ut mer om maltyper.
6. Skriv inn et filnavn i feltet Filnavn.
7. Hvis du vil oppdatere filens plassering, klikker du på Endre i delen Filplassering og velger en mappe.
8. Når du er ferdig, klikker du på Opprett.

Legg til HTML + HubL i malen din

Når du har konfigurert den nye filen, blir du sendt til kodeditoren for å legge til den egendefinerte koden og forhåndsvise hvordan den vil vises på en live-side.

Legg til HTML + HubL

1. Skriv inn HTML-koden for malen. Finn ut mer om hvordan du legger til CSS- og JavaScript-filer i egendefinerte maler.
2. Hvis du vil vise hvordan HTML + HubL vil gjengis, slår du på Vis utdata-bryteren øverst til venstre. Et panel åpnes til høyre med en forhåndsvisning av gjengivelsen.

Legg til nødvendig HTML + HubL

Egendefinerte maler krever spesifikke HTML- eller HubL-variabler for å fungere. Hvis noen av disse nødvendige variablene mangler, kan det vises en feilmelding når du prøver å publisere malen.

• Side- og bloggmaler krever følgende variabler:

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

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

• E-postmaler krever følgende variabler for å være i samsvar 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-postmaler krever følgende kode for å vise forhåndsvisningstekst i visse 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>

Klone en mal til HTML

I tillegg til å opprette maler fra bunnen av, kan du også klone dra-og-slipp-maler for blogger, nettsider og destinasjonssider til HTML.

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på navnet på malen du vil klone, i søkeren.
3. Klikk på rullegardinmenyen Handlinger, og velg Klon til HTML. HTML-filen opprettes i samme mappe som den opprinnelige filen.

Forhåndsvis og publiser malen din

Når du har opprettet malen, kan du forhåndsvise hvordan den vil se ut på en live-side, og deretter publisere den.

1. Gå til Innhold > Design Manager i HubSpot-kontoen din.
2. Klikk på navnet på malen du vil forhåndsvise eller publisere, i søkeren.
3. Klikk på rullegardinmenyen Forhåndsvisning øverst til høyre, og velg et alternativ:
   • Hvis du velger Forhåndsvisning i sanntid med visningsalternativer, kan du forhåndsvise malen slik den vises på andre enheter ved å velge forhåndsinnstillingen Viewport.
   • Hvis du velger Forhåndsvisning uten visningsalternativer, kan du bare forhåndsvise hvordan malen vises i nettlesere.
4. Når du er ferdig, klikker du på Publiser endringer.
5. Hvis det er noen kodefeil, vises det en feilmelding. Du finner mer informasjon om disse feilene i feilkonsollen under kodeditoren:

• • I feilmeldingen øverst på siden klikker du på feilkonsollen for å åpne konsollen under kodeditoren.
  • Alternativt kan du navigere til nederst til venstre i koderedigeringsprogrammet og klikke på Vis detaljer.