Lag en egendefinert kodet mal

Utviklere kan bygge blogger, nettsider, landingssider 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 utforming av egendefinerte ressurser i utviklerdokumentasjonen. 

Før du kommer i gang

Før du begynner å jobbe med denne funksjonen, må du sørge for å forstå hvilke skritt som bør tas på forhånd, samt funksjonens begrensninger og mulige konsekvenser av å bruke den.

Forstå krav

• Kontroller at du har tillatelsene for utformingsverktøy for oppretting og redigering av maler i utformingsbehandlingen.
• Det anbefales også å ha globale innholds- og temainnstillinger og tillatelser for nettstedsinnstillinger hvis du må redigere globale nettressurser og blogg-/nettstedsinnstillinger.

Forstå begrensninger og hensyn

• Et abonnement på Marketing Hub Professional eller Enterprise kreves for å opprette e-postmaler. Content Hub-kontoer kan opprette e-postmeldinger ved hjelp av dra og slipp-epostredigereren.
• Tilpassede kodede maler kan bruke mange forhåndsdefinerte variabler. Noen av disse variablene kreves for å opprette e-poster og sider, mens andre er valgfrie. Finn ut mer om å legge til obligatoriske HubL-variabler for e-post, nettsted og destinasjonsside. 

Opprett en ny HTML + HubL-fil

• Gå til Innhold > Design Manager i HubSpot-kontoen din.
• Klikk på Fil-menyen øverst i kolonnen til venstre , og velg Ny fil. 

• Klikk på rullegardinmenyen Hva vil du bygge i dag? i dialogboksen Ny fil, velg HTML + HubL, og klikk deretter på Neste. 

• Skriv inn detaljene for den nye filen i dialogboksen Konfigurer den nye HTML + HUBL-malen:
  • Velg et alternativ for Hva bygger du?:
    • Mal: definerer oppsettet og strukturen til innholdet som skal vises på nettstedssidene, destinasjonssidene, blogginnleggene eller e-posten. 
    • Delvis mal: er gjenbrukbar kode eller en kodebit som kan inkluderes i flere andre maler. 
  • Klikk på rullegardinmenyen Maltype, og velg en type for den egendefinerte kodede malen (side, blogginnlegg/oppføring, e-post eller systemside). Lær mer om maltyper.
  • Skriv inn et filnavn i Filnavn-feltet.
  • Hvis du vil oppdatere filens plassering, klikker du på Endre i Filplassering-delen og velger en mappe.
• Klikk på Opprett.

Legg til HTML + HubL i malen din

Når du har konfigurert den nye filen, blir du omdirigert til koderedigeringsprogrammet for å legge til den egendefinerte koden og forhåndsvise hvordan den vises på en direkteside.

Legg til HTML + HubL

• Skriv inn HTML-koden for malen. Finn ut mer om hvordan du legger til CSS- og JavaScript-filer i den egendefinerte kodede malen. 
• Hvis du vil vise hvordan HubL skal gjengis, klikker du på for å slå på bryteren Vis utgang. Et panel åpnes til høyre med den gjengitte forhåndsvisningen.

Legg til påkrevd HubL

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

• Side- og bloggmaler krever følgende variabler:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• E-postmaler krever følgende variabler for å være CAN-SPAM-kompatible. 
  • {{unsubscribe_link}} eller {{unsubscribe_link_all}} (inkluderer minst en)
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

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.

• Slik oppretter du en kodet versjon av en eksisterende mal:
  • Gå til Innhold > Design Manager i HubSpot-kontoen din.

• • Åpne malen du vil klone, i venstre sidepanel.
  • 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 vises på en direkteside, og deretter publisere den.

• Klikk på Forhåndsvisning øverst til høyre.
• Hvis du velger Live preview with display options, 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.
• Når du er ferdig med å redigere, klikker du på Publiser endringer øverst til høyre.

• Hvis det er noen kodefeil, vises en feilmelding. Se mer informasjon om disse feilene i feilkonsollen under kodeeditoren:
  • I feilmeldingen øverst på siden klikker du på feilkonsollen for å åpne konsollen under kodeeditoren. 
  • Du kan også navigere til bunnen av kodeeditoren og klikke på Vis detaljer.