Doorgaan naar artikel
Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.
Design Manager

Bouw een aangepaste gecodeerde sjabloon

Laatst bijgewerkt: september 13, 2022

Geldt voor:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Legacy Marketing Hub Basic

Ontwikkelaars kunnen blog-, website-, landingspagina- en e-mailsjablonen vanaf nul bouwen met HTML. U kunt ook een sjabloonlay-out met slepen en neerzettenklonen naar HTML, en het vervolgens aanpassen als een gecodeerde sjabloon.

Let op: eenMarketing Hub Professional of Enterprise account is vereist om aangepaste gecodeerde e-mailsjablonen te maken.

Maak een nieuw HTML & HubL bestand

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Maak in de linker zijbalk een nieuw bestand aan door te klikken op Bestand >Nieuw bestand.Mogelijk moet u op de map klikken map-icoon om de zoeker uit te vouwen.
  • Klik in het dialoogvenster op het vervolgkeuzemenuWat wilt u vandaag bouwen en selecteerHTML & HUBL.
design-manager-html-hubl
  • Klik Volgende
  • Voer de gegevens van uw nieuw bestand in:
    • Selecteer Sjabloon of Sjabloon partieel. Een sjabloonpartieel is een sjabloon dat binnen andere sjablonen kan worden gebruikt.
    • In het dropdown menu, selecteer het type sjabloon dat je codeert (pagina, blog, of email).
    • Geef uw bestand een naam.
    • Om de locatie van het bestand bij te werken, klikt u in het gedeelte Bestandslocatie op Wijzigen en selecteert u de map waaraan u het bestand wilt toevoegen.
  • Klik op Maken.
  • Schrijf de HTML voor uw pagina of e-mail sjabloon.
  • Om een voorbeeld te zien van hoe uw HubL zal renderen, klik om de Toon uitvoer schakelaar aan te zetten. Rechts opent zich een paneel met het gerenderde voorbeeld.


    design-manager-show-output
  • Klik rechtsboven op Voorbeeld om te zien hoe uw sjabloon eruit zal zien en zal functioneren in de inhoudseditor. Dit voorbeeld wordt gesynchroniseerd met de editor en wordt automatisch vernieuwd terwijl u werkt.
  • Klik in de rechterbovenhoek op Wijzigingen publiceren
Eventuele fouten in uw code zullen worden gemarkeerd in een foutmelding wanneer u wijzigingen probeert te publiceren. De foutenconsole onderaan de code-editor zal de details van de fout of waarschuwing weergeven, evenals suggesties over hoe u deze fouten en waarschuwingen kunt oplossen.

error-console

Voor aanvullende bronnen over aangepast ontwerp, kunt u de HubSpot designer documentatie raadplegen. Er is aanvullende documentatie over gecodeerde moduleopties zoals filtertags en pictogrammen.

Voeg de vereiste HubL tags toe

Je krijgt een foutmelding te zien als je code vereiste HubL-tags mist als je het bestand zou proberen te publiceren.

Website, landingspagina en blog sjablonen vereisen de volgende tags:

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
Email sjablonen vereisen de volgende tags om CAN-SPAM compliant te zijn. Ze kunnen op twee manieren worden toegevoegd:
  • Neem deze token op die de unsubscribe CAN-SPAM sectie binnenhaalt: {{unsubscribe_section}}. Voeg vervolgens deze tokens individueel toe:
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Met deze methode heb je niet de mogelijkheid om de taal en stijl van de tekst en links op te maken.

  • Gebruik deze tokens afzonderlijk:
    • {{site_settings.company_name}}
    • {{unsubscribe_link}} of {{unsubscribe_link_all}} (neem er minstens één op)
    • {{unsubscribe_anchor}}
    • {{site_settings.company_name}}
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Door de tokens individueel te gebruiken, heeft u de flexibiliteit om tekst rond de tokens en links toe te voegen en ze in de gewenste stijl en taal op te maken.

Klonen naar HTML

Naast het maken van een template vanaf nul, kunt u ook een van HubSpot's templates klonen naar HTML. Het klonen van een sjabloon naar HTML geeft u toegang tot de HTML-inhoud van een sjabloon.

Om een gecodeerde versie van een bestaand sjabloon te maken:

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik op Acties > Klonen naar HTML in de zoeker. Het HTML-bestand wordt gemaakt in dezelfde map als het originele bestand. De bestandsnaam zal overeenkomen met de naam van het originele sjabloon met kopie er aan toegevoegd.
design-manager-clone-to-html

New call-to-action

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.