Een aangepaste sjabloon maken

Ontwikkelaars kunnen blog-, websitepagina-, landingspagina- en e-mailsjablonen vanaf nul opbouwen met HTML + HubL. Je kunt ook een sjabloonlay-out met slepen en neerzetten klonen naar HTML en deze vervolgens aanpassen als een gecodeerd sjabloon.

Lees meer over het ontwerpen van aangepaste middelen in onze documentatie voor ontwikkelaars.

Voordat je begint

Voordat je met deze functie gaat werken, moet je goed begrijpen welke stappen je van tevoren moet nemen, wat de beperkingen van de functie zijn en wat de mogelijke gevolgen van het gebruik ervan zijn.

Vereisten begrijpen

• Controleer of u de rechten voor Ontwerptools hebt voor het maken en bewerken van sjablonen in de design manager.
• Het is aanbevolen om ook de machtigingen Globale inhoud en thema-instellingen en Website-instellingen te hebben als u globale webassets en blog-/website-instellingen moet bewerken.

Beperkingen en overwegingen begrijpen

• Voor het maken van e-mailsjablonen is een Marketing Hub Professional of Marketing Hub Enterprise abonnement vereist. Content Hub-accounts kunnen e-mails maken met de drag-and-drop-editor.
• Aangepaste sjablonen kunnen veel vooraf gedefinieerde variabelen gebruiken. Sommige van deze variabelen zijn vereist om e-mails en pagina's te maken, terwijl andere optioneel zijn. Meer informatie over het toevoegen van vereiste HubL-variabelen voor e-mails, websites en landingspagina's.

Maak een nieuw HTML + HubL-bestand

• Ga in je HubSpot-account naar Inhoud > Design Manager.
• Klik boven in de linkerkolom op het menu Bestand en selecteer Nieuw bestand.

• Klik in het dialoogvenster Nieuw bestand op het vervolgkeuzemenu Wat wil je vandaag bouwen en selecteer HTML + HubL en klik vervolgens op Volgende.

• In het dialoogvenster Je nieuwe HTML + HUBL sjabloon instellen voer je de details van je nieuwe bestand in:
  • Selecteer een optie voor Wat ben je aan het bouwen?
    • Sjabloon: definieert de lay-out en de structuur van de inhoud die wordt weergegeven op de websitepagina's, landingspagina's, blogberichten of e-mail.
    • Template Partial: is herbruikbare code of een snippet code die in meerdere andere sjablonen kan worden opgenomen.
  • Klik op het keuzemenu Templatetype en selecteer een type voor de aangepaste gecodeerde sjabloon (pagina, blogbericht/lijst, e-mail of systeempagina). Meer informatie over sjabloontypes.
  • Voer in het veld Bestandsnaam een bestandsnaam in .
  • Als u de bestandslocatie wilt bijwerken, klikt u op Wijzigen in de sectie Bestandslocatie en selecteert u een map.
• Klik op Maken.

HTML + HubL toevoegen aan uw sjabloon

Zodra u uw nieuwe bestand hebt geconfigureerd, wordt u doorgestuurd naar de code-editor om uw aangepaste code toe te voegen en een voorbeeld te bekijken van hoe deze zal verschijnen op een live pagina.

HTML + HubL toevoegen

• Voer de HTML voor uw sjabloon in. Meer informatie over het toevoegen van CSS- en JavaScript-bestanden aan je aangepaste gecodeerde sjabloon.
• Om te laten zien hoe je HubL rendert, klik je op om de schakelaar Uitvoer tonen aan te zetten. Aan de rechterkant wordt een paneel geopend met het gerenderde voorbeeld.

Vereiste HubL toevoegen

Aangepaste sjablonen hebben specifieke HubL-variabelen nodig om te functioneren. Als een van deze vereiste variabelen ontbreekt, verschijnt er een foutmelding wanneer u het sjabloon probeert te publiceren.

• Voor pagina- en blogsjablonen zijn de volgende variabelen nodig:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• E-mailtemplates vereisen de volgende variabelen om CAN-SPAM-conform te zijn.
  • {{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}}

Een sjabloon naar HTML klonen

Naast het maken van sjablonen vanaf nul, kun je ook sjablonen voor blogs, websitepagina's en landingspagina's naar HTML klonen met slepen en neerzetten.

• Om een gecodeerde versie van een bestaande sjabloon te maken:
  • Ga in je HubSpot-account naar Inhoud > Design Manager.

• • Open in de linker zijbalk de sjabloon die je wilt klonen.
  • Klik op het vervolgkeuzemenu Acties en selecteer Naar HTML klonen. Het HTML-bestand wordt gemaakt in dezelfde map als het oorspronkelijke bestand.

Uw sjabloon bekijken en publiceren

Zodra u uw sjabloon hebt gemaakt, kunt u een voorbeeld bekijken van hoe deze eruit zal zien op een live pagina en deze vervolgens publiceren.

• Klik rechtsboven op Voorbeeld.
• Als u Live voorbeeld met weergaveopties selecteert, kunt u een voorbeeld van uw sjabloon bekijken zoals deze wordt weergegeven op andere apparaten door de Viewport voorinstelling te selecteren.
• Als u Voorbeeld zonder weergaveopties selecteert, kunt u alleen een voorbeeld bekijken van hoe uw sjabloon eruitziet op browsers.
• Als u klaar bent met bewerken, klikt u rechtsboven op Wijzigingen publiceren.

• Als er fouten in de code zijn, verschijnt er een foutmelding. Bekijk meer informatie over deze fouten in de foutconsole onder de code-editor:
  • Klik in de foutmelding boven aan de pagina op Foutconsole om de console onder de code-editor te openen.
  • U kunt ook naar de onderkant van de code-editor navigeren en op Details weergeven klikken.