Design Manager

Bouw een aangepaste gecodeerde sjabloon

Laatst bijgewerkt: oktober 19, 2020

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 bouwen. Voor Marketing Hub Professionele en bedrijfsrekeningen en CMS Hub Professionele en Enterprise-accounts, dit omvat aangepaste gecodeerde e-mailsjablonen. Het is ook mogelijk om een HubSpot template layout te klonen naar HTML, en aan te passen als een gecodeerd sjabloon.

Dit artikel bevat hoe u aangepaste gecodeerde sjablonen kunt maken en oplossen, en wat HubL vereist is in uw sjablonen. Als u zich niet prettig voelt bij het werken met code, gebruik dan een van de kant-en-klare sjablonen in uw HubSpot account of kijk op de sjabloonmarktplaats naar omkant-en-klare sjablonen aan te schaffen.

Let op: een aangepast gecodeerd sjabloon zal niet standaard op reageren. Werk samen met een professionele ontwerper om er zeker van te zijn dat uw sjabloon voor verschillende schermgroottes geschikt is.

Maak een nieuw HTML & HUBL-bestand aan

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Maak een nieuw bestand aan door te klikken op Bestand > Nieuwbestand. Hetkan zijn dat u op demap moet klikkenom de finder uit te breiden.
  • Klik in het dialoogvenster op HTML & HUBL.
Code editor
  • Voer de gegevens van uw nieuwe bestand in:
    • Selecteer Sjabloon of Sjabloon Gedeeltelijk.
    • Selecteer het type sjabloon dat u codeert (pagina, blog of e-mail).
    • Geef uw bestand een naam.
  • Klik op .
  • Schrijf de HTML voor uw pagina- of e-mailsjabloon.
  • Om een voorbeeld te zien van hoe je HubL zal renderen, klik je op de schakelaar voor het weergeven van de uitvoer. Een paneel zal openen aan de rechterkant met de gerenderde preview.

    design-manager-show-output-toggle
  • Eventuele fouten in uw code zullen worden gemarkeerd in een foutmelding wanneer u probeert de wijzigingen te publiceren. De foutconsole onderaan de code-editor zal de fout- of waarschuwingsdetails weergeven, evenals suggesties over hoe u deze fouten en waarschuwingen kunt verhelpen.

error-console

Voor aanvullende informatie over het ontwerp op maat kunt u kijken op HubSpot designer documentatie. Er is aanvullende documentatie over gecodeerde module-opties zoals filtertags en -pictogrammen.

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

Voeg de vereiste HubL tags toe

Zodra u uw structurele HTML-bestand hebt geschreven, ziet u een foutmelding als uw code de vereiste HubL-tags mist als u probeert uw bestand te publiceren. HubL-tags verbinden uw code met de instellingen en de contenteditor van HubSpot.

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

tokens toevoegen. Deze munten kunnen op twee manieren worden toegevoegd: 1. 1. Neem één token op dat in de uitschrijfsectie CAN-SPAM trekt: . Wanneer dit token wordt gebruikt, heeft u niet de mogelijkheid om de taal en de stijl van de tekst en de links te formatteren. Hier is een voorbeeld van hoe de eruit zou zien:

U dient dan de volgende penningen individueel toe te voegen:

25 1st St.
Cambridge
MA
02141

2. 2. Voeg de vereiste individuele uitschrijvingslink en adresmuntjes toe:
HubSpot
of (inclusief ten minste één)
HubSpot
25 1st St.
Cambridge
MA
02141

Door de munten individueel te gebruiken, heeft u de flexibiliteit om de tekst rond de munten en links toe te voegen en deze in de gewenste stijl en taal te formatteren.

Kloon naar HTML

Een alternatief voor het coderen vanaf nul is het klonen van een van de templates 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 geconstrueerd te reverse-engineeren.

Om een gecodeerde versie van een bestaand sjabloon te maken:

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik op Acties > Kloon naar HTML in de finder . Het HTML-bestand wordt geopend in een nieuw tabblad van uw designmanager. De bestandsnaam zal overeenkomen met de naam van het originele sjabloon met kopie als bijlage.
HubSpot Help article screenshot

New call-to-action