Lag en skreddersydd mal

Utviklere kan lage maler for blogger, nettsider, landingssider og e-post helt fra bunnen av ved hjelp av HTML og HubL. Du kan også klone et maloppsett med dra-og-slipp-funksjon til HTML, og deretter tilpasse det som en kodet mal.

Les mer om hvordan du designer egne elementer i vår utviklerdokumentasjon.

Opprett en ny HTML + HubL-fil

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. Øverst i søkefeltet klikker du på rullegardinmenyen «Fil » og velger «Ny fil».

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

4. I feltet «Hva skal du lage? » velger du et alternativ:
   • Mal: definerer oppsettet og strukturen på innholdet som skal vises på nettsidene, landingssidene, blogginnleggene eller i e-posten.
   • Delvis mal: er gjenbrukbar kode eller et kodestykke som kan inkluderes i flere andre maler.
5. Klikk på rullegardinmenyen «Maltype» og velg en type for den tilpassede malen (side, blogginnlegg/liste, e-post eller systemside). Les mer om maltyper.
6. Skriv inn et filnavn i feltet «Filnavn ».
7. For å oppdatere filens plassering, klikk på «Endre» i delen «Filplassering» og velg 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 videre til kodeditoren, hvor du kan legge til din egen kode og forhåndsvise hvordan den vil se ut på en live-side.

Legg til HTML + HubL

1. Skriv inn HTML-koden for malen. Les mer om hvordan du legger til CSS- og JavaScript-filer i maler med tilpasset kode.
2. For å se hvordan HTML + HubL vil vises, slår du på bryteren «Vis utdata» øverst til venstre. Et panel åpnes til høyre med den rendrerte forhåndsvisningen.

Legg til nødvendig HTML + HubL

Spesialtilpassede maler krever bestemte HTML- eller HubL-variabler for å fungere. Hvis noen av disse obligatoriske 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-regelverket:

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

Klon en mal til HTML

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

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. I søkefeltet klikker du på navnet på malen du ønsker å klone.
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. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. I søkefeltet klikker du på navnet på malen du vil forhåndsvise eller publisere.
3. Øverst til høyre klikker du på rullegardinmenyen Forhåndsvisning og velger et alternativ:
   • Hvis du velger «Live forhåndsvisning 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 din vil se ut i nettlesere.
4. Når du er ferdig, klikker du på «Publiser endringer».
5. Hvis det er noen kodefeil, vises en feilmelding. Se mer informasjon om disse feilene i feilkonsollen under kodeditoren:

• • I feilmeldingen øverst på siden klikker du på «feilkonsoll» for å åpne konsollen under kodeditoren.
  • Alternativt kan du gå til nederst til venstre i kodeditoren og klikke på «Vis detaljer».