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 aan de slag gaat

Voordat je met deze functie aan de slag gaat, 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 je de rechten voor Ontwerptools hebt voor het maken en bewerken van sjablonen in de Ontwerpmanager.
• Het is aan te raden om ook de machtigingenGlobale inhoud en thema-instellingen en Website-instellingen te hebben als u globale webelementen en blog-/website-instellingen moet bewerken.

Begrijp beperkingen en overwegingen

• Een Marketing Hub Professional of Enterprise-abonnement is vereist om e-mailsjablonen te maken. Content Hub-accounts kunnen e-mails maken met behulp van de sleep-en neerzet-e-maileditor.
• 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

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik boven in de zoeker op het vervolgkeuzemenu Bestand en selecteer Nieuw bestand.

3. Klik in het dialoogvenster op het vervolgkeuzemenu Wat wilt u vandaag bouwen en selecteer HTML + HubL.

4. Selecteer een optie in het veld Wat ga je bouwen:
   • Sjabloon: definieert de lay-out en de structuur van de inhoud die wordt weergegeven op de websitepagina's, landingspagina's, blogberichten of e-mails.
   • Sjabloon Gedeeltelijk: is herbruikbare code of een stukje code dat in meerdere andere sjablonen kan worden opgenomen.
5. Klik op het vervolgkeuzemenu Templatetype en selecteer een type voor de aangepaste gecodeerde sjabloon (pagina, blogbericht/lijst, e-mail of systeempagina). Meer informatie over sjabloontypes.
6. Voer een bestandsnaam in het veld Bestandsnaam in.
7. Als u de bestandslocatie wilt bijwerken, klikt u op Wijzigen in de sectie Bestandslocatie en selecteert u een map.
8. Klik op Maken als u klaar bent.

HTML + HubL toevoegen aan uw sjabloon

Nadat je je nieuwe bestand hebt geconfigureerd, ga je naar de code-editor om je aangepaste code toe te voegen en een voorbeeld te bekijken van hoe deze eruit zal zien op een live pagina.

HTML + HubL toevoegen

1. Voer de HTML voor de sjabloon in. Meer informatie over het toevoegen van CSS- en JavaScript-bestanden aan aangepaste sjablonen met code.
2. Om te laten zien hoe de HTML + HubL wordt gerenderd, schakel je de schakelaar Uitvoer tonen linksboven in. Aan de rechterkant wordt een paneel geopend met het gerenderde voorbeeld.

Benodigde HTML + HubL toevoegen

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

• Sjablonen voor pagina's en blogs vereisen de volgende variabelen:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Voor e-mailsjablonen zijn de volgende variabelen vereist om CAN-SPAM compliant te zijn:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• E-mailsjablonen vereisen de volgende code om voorbeeldtekst weer te geven in bepaalde e-mailclients:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

Een sjabloon klonen naar HTML

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

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker op de naam van het sjabloon dat u wilt klonen.
3. 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

Nadat je je sjabloon hebt gemaakt, kun je een voorbeeld bekijken van hoe deze eruit zal zien op een live pagina en deze vervolgens publiceren.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker op de naam van het sjabloon dat u wilt bekijken of publiceren.
3. Klik rechtsboven op het vervolgkeuzemenu Voorbeeld en selecteer een optie:
   • Als u Live voorbeeld met weergaveopties selecteert, kunt u een voorbeeld van uw sjabloon bekijken zoals deze op andere apparaten wordt weergegeven door de Viewport preset te selecteren.
   • Als u Voorbeeld zonder weergaveopties selecteert, kunt u alleen een voorbeeld bekijken van hoe uw sjabloon eruitziet op browsers.
4. Klik op Wijzigingen publiceren als u klaar bent.
5. Als er codefouten zijn, verschijnt er een foutbericht. 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 linksonder in de code-editor navigeren en op Details weergeven klikken.