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

Sjabloonlay-outs structureren en aanpassen

Laatst bijgewerkt: april 15, 2021

Geldt voor:

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

Leer hoe u uw bestaande sjabloon met slepen en neerzetten kunt instellen en aanpassen, en hoe u kunt werken met modules, groepen en kolommen als de bouwstenen van uw sjabloon.

Structuur van uw sjabloon

Door gebruik te maken van de lay-out editor in de design manager, kunt u snel uw content layout opbouwen zonder HTML te hoeven schrijven.

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik in de zoeker op een sjabloon om het te bewerken.

Modules toevoegen en verslepen

Om een module aan een lay-out toe te voegen, klikt u op + Toevoegen boveninde lay-out inspector.Zoekof selecteer een module, sleep deze dan naar de plaats waar u de module in de lay-out wilt hebben. Door modules boven op andere modules te slepen, worden kolommen gemaakt of worden de modules gegroepeerd.

Kolombreedtes wijzigen

Om de breedte van een kolom te wijzigen, zweeft u tussen de modules en klikt en sleept u horizontaal.

Groepsmodules

Modulegroepen zijn eenheden van modules die verschillende secties van een pagina vormen.

Om twee modules te groeperen, klikt u op de eerste module, houdt u vervolgens de Control/Command-toets ingedrukt en selecteert u de tweede module. Herhaal deze stap als u meer dan twee modules wilt groeperen. Klik vervolgens op hetpictogram group groupModule in de module-inspector.

Opgelet: de groepen modules kunnen geen scheidingsteken van een sectie overschrijden of een gedeeltelijk geselecteerde groep modules bevatten.

Modules horizontaal splitsen

Het splitsen van een module breekt de module in tweeën, waardoor twee modules ontstaan. Om een module te splitsen, klikt u op de module en vervolgens op het pictogram module splitsen splitModule in de module-inspector. U kunt ook met de rechtermuisknop op de module in de lay-out klikken en Split module selecteren.

Middenmodules

Met horizontale afstandhouders kunt u modules en groepen op de pagina centreren, of lege ruimte toevoegen aan weerszijden ervan. Om een horizontale afstandhouder toe te voegen, klikt u op + Toevoegen bovenin de lay-out inspector. Zoek Horizontal Spacer en sleep het naar de sjabloon.

Om de grootte van een horizontale afstandhouder te wijzigen, wijzigt u de breedte van de kolom die de module van andere modules scheidt. Om een module of groep te centreren, voegt u aan elke zijde horizontale afstandhouders toe.

add-horizontal-spacer

Een flexibele kolom toevoegen

Flexibele kolommen zijn ontworpen om het beheer van inhoud op paginaniveau eenvoudiger te maken voor makers van inhoud. Wanneer een flexibele kolom wordt toegevoegd aan een HubSpot-paginasjabloon, krijgen gebruikers de optie om modules toe te voegen, te verwijderen en te herschikken binnen de afzonderlijke pagina-editor. Met deze functie kunnen ontwerpers minder sjablonen maken, terwijl marketeers nog steeds de flexibiliteit hebben om elke pagina aan te passen aan hun behoeften.

Om een flexibele kolom toe te voegen, klikt u op + Toevoegen bovenaan in de lay-out inspector. Zoek Flexibele kolom en sleep deze naar de sjabloon.

Let op: flexibele kolommen kunnen alleen worden toegevoegd aan paginasjablonen, en kunnen niet worden toegevoegd aan e-mail- of blogsjablonen.


Pas uw sjabloon aan

Zodra u de algemene lay-out van uw sjabloon hebt gestructureerd, kunt u modules verwisselen en andere sjabloon-aanpassingen maken.

Module-opties bewerken

U kunt de opties van een module bewerken door op demodule te klikken in de lay-out editor. In de module-inspector aan de rechterkant ziet u de bewerkbare opties van de module. Deze opties omvatten over het algemeen styling, standaard inhoud, en editor opties, en kunnen verschillen afhankelijk van het specifieke type module. Leer meer over het bewerken van module CSS en standaard inhoud en instellingen.

Edit options

Verwissel module

Nadat u een module aan uw sjabloon hebt toegevoegd, kunt u ervoor kiezen deze te verwisselen voor een andere module. Klik met de rechtermuisknop op de module in de lay-out editor, en klik vervolgens op Verwissel module. Selecteer in het vervolgkeuzemenu dat verschijnt de module waarmee u de oorspronkelijke module wilt vervangen.

Omzetten naar globale module

U kunt een module in uw sjabloon omzetten naar een globale module, die in meerdere sjablonen gebruikt kan worden. Dit is handig wanneer U de module op een bepaalde manier gestyled heeft, en/of standaard inhoud in de module heeft die U wilt hergebruiken in andere templates.

  • Klik op de module in de lay-out editor.
  • Klik in de module-inspector op het vervolgkeuzemenu Meer en selecteer Omzetten in globale module.
  • In het dialoogvenster voert u de naam van de globale module in en klikt u vervolgens op Maken.

Module verwijderen

Om een module te verwijderen, klikt u op de module in de lay-out editor en klikt u vervolgens op het prullenbakpictogram verwijderen in de module-inspector. Als alternatief kunt u met de rechtermuisknop op de module klikken en Verwijderen module selecteren.

Beheer uw sjabloon in de zoeker

Naast uw module opties, zijn er verschillende acties die u kunt ondernemen specifiek voor uw sjabloon.

  • Klik in de rechterbovenhoek van het sjabloon op het mapicoon .
  • Klik met de rechtermuisknop op de naam van de sjabloon. In het vervolgkeuzemenu kunt u de volgende opties aanpassen:
    • Kopiëren naar portalen: kopieer het sjabloon naar een ander portaal waar u ook gebruiker bent. Sjablonen die op de Marktplaats zijn gekocht, kunnen niet naar andere portalen worden gekopieerd.
    • Sjabloon klonen: dit maakt een exacte kopie van uw sjabloon, en is handig wanneer u een variatie van een bestaand sjabloon wilt maken.
    • Kloon naar HTML: hiermee maakt u een aparte HTML-versie van uw sjabloon. Dit is handig als u meer controle wilt over uw opmaak, of als u meer wilt weten over hoe sjablonen zijn gecodeerd.
    • Bekijk sjabloon bron: bekijk de HTML broncode van het sjabloon. In tegenstelling tot de Kloon naar HTML optie, creëert deze optie niet een aparte HTML versie van uw sjabloon.
    • Hernoem sjabloon: bewerk de interne naam van uw sjabloon.
    • Toon afhankelijke sjablonen: bekijk alle pagina's, e-mails, of blogs die momenteel gebruik maken van de sjabloon.
    • Toon revisiegeschiedenis: bekijk de revisiegeschiedenis van uw sjabloon en kies ervoor om uw sjabloon terug te zetten naar een eerder gepubliceerde versie.
    • E-mail/pagina maken: maak een e-mail of landingspagina/website pagina direct vanuit de sjabloon.
    • Sjabloon verwijderen: hiermee verwijdert u de sjabloon. Eenmaal verwijderd, blijft een sjabloon beschikbaar voor 30 dagen, daarna wordt het definitief verwijderd. Om de sjabloon te herstellen, dient u contact op te nemen met de klantenondersteuning.
  • Deze opties zijn ook toegankelijk via devervolgkeuzemenu's Bestand en Acties hierboven.