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 1, 2021

Geldt voor:

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

Designers kunnen website-, landingspagina- en blogtemplates vanaf nul bouwen met HTML. Marketing Hub Professionele en Enterprise-accounts kunnen ook aangepaste gecodeerde e-mailsjablonen maken. Het is ook mogelijk om kloon een HubSpot-sjabloonlay-out naar HTML te vertalen en deze als een gecodeerde sjabloon aan te passen.

Dit artikel bevat informatie over hoe u aangepaste gecodeerde sjablonen kunt maken en problemen kunt oplossen, en ook welke HubL vereist is in uw sjablonen. Als je niet comfortabel bent met het werken met code, gebruik dan een van de kant-en-klare sjablonen in je HubSpot account of kijk op de sjabloon marktplaats naar koop kant-en-klare sjablonen.

Let op: een op maat gemaakte gecodeerde template is standaard niet responsive. 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 in de linker zijbalk een nieuw bestand aan door te klikken opBestand>Nieuw bestand.Mogelijk moet u op demapklikken map-icoon om de zoeker uit te vouwen.
  • Klik in het dialoogvenster op het keuzemenuWhat would you like to build today?en selecteerHTML & HUBL.
design-manager-html-hubl
  • KlikVolgende
  • Voer de gegevens van uw nieuw bestand in:
    • SelecteerSjabloonofSjabloon 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 gedeelteBestandslocatieopWijzigenen selecteert u de map waaraan u het bestand wilt toevoegen.
  • Klik opMaken.
  • 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 opWijzigingen 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 deHubSpot designer documentatie raadplegen. Er is aanvullendedocumentatie over gecodeerde moduleoptieszoals filtertags en pictogrammen.

Voeg de vereiste HubL tags toe

Je krijgt een foutmelding te zien als je code de 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 individueel..:
    • {{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 opActies>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 metkopieer aan toegevoegd.
design-manager-clone-to-html

New call-to-action