Maak een op maat gemaakte, geprogrammeerde sjabloon

Ontwikkelaars kunnen met HTML en HubL vanaf nul sjablonen voor blogs, webpagina’s, landingspagina’s en e-mails bouwen. Je kunt ook de lay-out van een ‘drag-and-drop’-sjabloon naar HTML kopiëren en deze vervolgens aanpassen als een geprogrammeerd sjabloon.

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

Maak een nieuw HTML + HubL-bestand aan

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Klik bovenaan de Finder 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 in het veld 'Wat bouw je? ' een optie:
   • Sjabloon: bepaalt de lay-out en de structuur van de inhoud die wordt weergegeven op de webpagina's, landingspagina's, blogberichten of in e-mails.
   • Sjabloondeel: is herbruikbare code of een stukje code dat in meerdere andere sjablonen kan worden opgenomen.
5. Klik op het vervolgkeuzemenu ‘Sjabloontype’ en selecteer een type voor de op maat gemaakte sjabloon (pagina, blogbericht/vermelding, e-mail of systeempagina). Meer informatie over sjabloontypen.
6. Voer een bestandsnaam in het veld 'Bestandsnaam' in.
7. Om de locatie van het bestand bij te werken, klikt u op Wijzigen in het gedeelte Bestandslocatie en selecteert u een map.
8. Klik op 'Aanmaken' als je klaar bent.

Voeg HTML + HubL toe aan je sjabloon

Nadat 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 op een live pagina zal verschijnen.

HTML + HubL toevoegen

1. Voer de HTML voor de sjabloon in. Lees meer over het toevoegen van CSS- en JavaScript-bestanden aan zelfgecodeerde sjablonen.
2. Om te zien hoe de HTML + HubL wordt weergegeven, zet je de schakelaar ‘Weergave tonen’ linksboven aan. Rechts wordt een paneel geopend met het weergegeven voorbeeld.

Voeg de vereiste HTML + HubL toe

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 de sjabloon probeert te publiceren.

• Pagina- en blogsjablonen vereisen de volgende variabelen:

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

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

• E-mailsjablonen vereisen de volgende variabelen om te voldoen aan de CAN-SPAM-wetgeving:

<!-- 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 hebben de volgende code nodig 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>

Kopieer een sjabloon naar HTML

Naast het helemaal zelf maken van sjablonen, kunt u ook sjablonen voor blogs, webpagina's en landingspagina's via slepen en neerzetten naar HTML klonen.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Klik in de finder op de naam van het sjabloon dat u wilt klonen.
3. Klik op het vervolgkeuzemenu ‘Acties ’ en selecteer ‘Kloon naar HTML’. Het HTML-bestand wordt aangemaakt in dezelfde map als het oorspronkelijke bestand.

Bekijk een voorbeeld van je sjabloon en publiceer het

Zodra je je sjabloon hebt aangemaakt, kun je een voorbeeld bekijken van hoe deze er op een livepagina uit zal zien, en het vervolgens publiceren.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Content > Ontwerpmanager. Als Meer niet in je account verschijnt, navigeer dan direct naar Content > Ontwerpmanager.
2. Klik in de finder op de naam van de sjabloon waarvan u een voorbeeld wilt bekijken of die u wilt 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'-voorinstelling te selecteren.
   • Als u 'Voorbeeld zonder weergaveopties' selecteert, kunt u alleen een voorbeeld bekijken van hoe uw sjabloon in browsers wordt weergegeven.
4. Klik op 'Wijzigingen publiceren' wanneer u klaar bent.
5. Als er codefouten zijn, verschijnt er een foutmelding. Bekijk meer informatie over deze fouten in de foutconsole onder de code-editor:

• • Klik in het foutbericht bovenaan de pagina op 'foutconsole' om de console onder de code-editor te openen.
  • U kunt ook naar de linkeronderhoek van de code-editor gaan en op 'Details weergeven' klikken.