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: maart 22, 2021

Geldt voor:

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

In uw design manager-tool kunnen ontwerpers sjablonen met HTML vanaf nul opbouwen. Voor Marketing Hub Professional- en Enterprise-accounts omvat dit aangepaste gecodeerde e-mailsjablonen. Het is ook mogelijk om een sjabloonlay-out van HubSpot te klonen naar HTML, en deze aan te passen als een gecodeerde sjabloon.

In dit artikel wordt uitgelegd hoe u aangepaste gecodeerde sjablonen maakt en problemen oplost, en wat HubL vereist is in uw sjablonen. Als u niet vertrouwd bent met het werken met code, gebruik dan een van de kant-en-klare sjablonen in uw HubSpot-account of kijk op de sjabloonmarktplaats om kant-en-klaresjablonen te kopen.

Let op: een aangepaste gecodeerde template zal niet standaard responsive zijn. Werk samen met een professionele ontwerper om ervoor te zorgen dat uw sjabloon responsive is voor verschillende schermgroottes.

Maak een nieuw HTML & HUBL bestand

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Maak een nieuw bestand door te klikken op Bestand > Nieuwbestand.Mogelijk moet u op hetpictogram van de map klikken om de zoeker uit te vouwen.
  • Klik in het dialoogvenster op HTML & HUBL.
Code editor
  • Voer de gegevens van je nieuwe bestand in:
    • Selecteer Template of Template Partial.
    • Selecteer het type sjabloon dat je codeert (pagina, blog, of e-mail).

Let op: een Marketing Hub Professional of Enterprise

abonnement is vereist om een aangepaste gecodeerde e-mailsjabloon te maken.
    • Geef je bestand een naam.
  • Klik op Maken.
  • Schrijf de HTML voor je pagina of e-mailsjabloon.
  • Om een voorbeeld te zien van hoe je HubL zal renderen, klik je om de Toon uitvoer schakelaar aan te zetten. Aan de rechterkant wordt een paneel geopend met een voorbeeld van de render.

    design-manager-show-output-toggle
  • Eventuele fouten in uw code worden gemarkeerd in een foutbericht wanneer u wijzigingen probeert te publiceren. De foutconsole onderin de code-editor toont de details van de fout of waarschuwing, evenals suggesties over hoe u deze fouten en waarschuwingen kunt oplossen.

error-console

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

Als je klaar bent, klik je op Wijzigingen publiceren om het sjabloon of HTML-bestand te publiceren.

Voeg de vereiste HubL tags toe

Als je eenmaal je structurele HTML hebt geschreven, krijg je een foutmelding als je code de vereiste HubL-tags mist als je zou proberen je het bestand te publiceren. HubL-tags verbinden je code met HubSpot's instellingen en inhoudseditor.

Voor e-mailtemplates moet u de vereiste e-mail- en CAN-SPAM

-tokens toevoegen. Deze tokens kunnen op twee manieren worden toegevoegd: 1. Neem een token op dat het afmelden CAN-SPAM gedeelte binnenhaalt: {{unsubscribe_section}}. Wanneer dit token wordt gebruikt, heb je niet de mogelijkheid om de taal en stijl van de tekst en links op te maken. Hier is een voorbeeld van hoe de {{unsubscribe_section}} eruit zou zien:

U dient dan de volgende tokens individueel toe te voegen:

{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

2. Voeg de vereiste individuele unsubscribe link en adres tokens toe:
{{site_settings.company_name}}
{{unsubscribe_link}} of {{unsubscribe_link_all}} (ten minste één opnemen)
{{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 afzonderlijk te gebruiken, hebt u de flexibiliteit om tekst toe te voegen rond de tokens en links en om ze op te maken in de gewenste stijl en taal.

Klonen naar HTML

Een alternatief voor het coderen vanaf nul is het klonen van een van de sjablonen van HubSpot naar HTML. Het klonen van een sjabloon naar HTML geeft je toegang tot de HTML/HubL van een sjabloon en is een geweldige manier om een HubSpot-sjabloon dat je hebt gemaakt te reverse-engineeren.

Om een gecodeerde versie van een bestaand sjabloon te maken:

  • {{ local.navDesignManager }}
  • Klik op Acties > Kloon naar HTML in de zoeker . Het HTML-bestand wordt geopend in een nieuw tabblad van uw design manager. De bestandsnaam zal overeenkomen met de naam van het originele sjabloon met kopie er aan toegevoegd.
HubSpot Help article screenshot
 
 

New call-to-action