Sjablonen structureren en aanpassen met de lay-outeditor

Gebruik de lay-out editor in de design manager om sjablonen met slepen en neerzetten te structureren en aan te passen. Door modules, groepen en kolommen te rangschikken, kun je bepalen hoe inhoud op pagina's wordt gestructureerd. Dit geeft contentmakers ook meer controle in de pagina-editor.

Voordat u aan de slag gaat

Bekijk de vereisten en overwegingen voordat u pagina's structureert en aanpast met de lay-out editor in de design manager.

Begrijp beperkingen en overwegingen

• Wijzigingen aan een sjabloon zijn van toepassing op alle inhoud die die sjabloon gebruikt.
• Sommige functies, zoals flexibele kolommen, zijn alleen beschikbaar voor paginasjablonen.

Een sjabloon structureren

Gebruik de opmaak-editor om te structureren hoe inhoud wordt georganiseerd binnen een sjabloon.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker op een sjabloon om het te openen in de lay-out editor.

Modules toevoegen en rangschikken

Modules zijn de bouwstenen van de opmaak van een sjabloon. Door een module naast een andere module te slepen, maakt u kolommen. Door een module bovenop een andere te slepen, groepeert u de modules.

1. Klik in de inspecteur op + Toevoegen.
2. Voer tekst in om een module te zoeken en klik vervolgens op de module.
3. Sleep de module naar de lay-outeditor.

Kolombreedten wijzigen

De breedte van een kolom wijzigen:

1. Ga in de opmaakeditor met de muis tussen twee modules staan.
2. Klik en versleep horizontaal om de kolombreedte aan te passen.

Modules groeperen

Groepeer modules om secties van een sjabloon te ordenen.

Zo groepeert u modules:

1. Selecteer een module in de opmaakeditor.
2. Houd de Control (Windows) of Command (Mac) toets ingedrukt en selecteer nog meer modules.
3. Klik in de inspecteur op het pictogram groupModule Modules groeperen .

Let op: Groepen modules kunnen niet over een sectiescheiding gaan of een gedeeltelijk geselecteerde groep modules bevatten.

Modules horizontaal splitsen

Het splitsen van een module breekt de module in tweeën, waardoor er twee modules ontstaan.

Zo splitst u een module:

1. Klik in de lay-outeditor op een module

2. Klik in de inspecteur op het pictogram splitModule Module splitsen.

Modules centreren

Gebruik horizontale afstandhouders om modules en groepen op de pagina te centreren of om lege ruimte aan weerszijden van de modules toe te voegen.

Zo voegt u een horizontaal afstandsstuk toe:

1. Klik in de inspector op + Toevoegen.

2. Typ horizontaal afstandsstuk in het veld Zoeken. Sleep de module Horizontale afstandhouder vervolgens naar de sjabloon in de lay-outeditor.

3. Als u de grootte van een horizontale afstandhouder wilt wijzigen, wijzigt u de breedte van de kolom die de afstandhouder van andere modules scheidt.

4. Om een module of groep te centreren, voegt u aan elke kant eenhorizontale afstandsmodule toe.

Een flexibele kolom toevoegen

Flexibele kolommen zijn ontworpen om contentbeheer op paginaniveau eenvoudiger te maken voor contentmakers. 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 individuele pagina-editor. Deze functie stelt ontwerpers in staat om minder sjablonen te maken, terwijl marketeers nog steeds de flexibiliteit hebben om elke pagina aan te passen aan hun behoeften.

1. Klik in de Inspector op + Toevoegen.

2. Typ flexibele kolom in het zoekveld. Sleep vervolgens de module Flexibele kolom naar de sjabloon in de lay-outeditor.

Uw sjabloon aanpassen

Nadat u de lay-out van uw sjabloon hebt gestructureerd, kunt u modules uitwisselen en andere sjabloonaanpassingen maken.

Module-opties bewerken

De opties van een module bewerken omvatten styling, standaardinhoud en kunnen verschillen afhankelijk van het specifieke type module. Meer informatie over het bewerken van module CSS en standaardinhoud en -instellingen.

1. Klik in de lay-outeditor op een module.
2. Pas de opties van de module aan in de inspecteur.

Module verwisselen

Nadat u een module aan uw sjabloon hebt toegevoegd, kunt u ervoor kiezen om deze te vervangen door een andere module.

1. Klik in de lay-outeditor met de rechtermuisknop op de module en selecteer vervolgens Module verwisselen.

2. Selecteer in het pop-upvenster de module waarmee u de oorspronkelijke module wilt vervangen.

Omzetten naar globale module

Converteer een module in uw sjabloon naar een globale module, die in meerdere sjablonen kan worden gebruikt. Gebruik dit als u de module op een bepaalde manier hebt vormgegeven of als u standaardinhoud in de module hebt die u wilt hergebruiken in andere sjablonen.

1. Klik in de lay-outeditor op een module.
2. Klik in de inspecteur op het vervolgkeuzemenu Meer en selecteer Converteren naar globale module.
3. Voer in het dialoogvenster de naam van de globale module in en klik op Maken.

Module verwijderen

1. Klik in de lay-outeditor op een module.

2. Klik in de inspecteur op het pictogram delete prullenbak.

Uw sjabloon beheren in de zoeker

Naast de moduleopties zijn er verschillende acties die u specifiek voor uw sjabloon kunt uitvoeren.

1. Klik in de zoeker op de naam van een sjabloon.
2. Klik op het vervolgkeuzemenu Acties en selecteer een optie:
   • Kopiëren naar ander account: kopieer het sjabloon naar een ander account waar u ook gebruiker bent. Sjablonen die via de Marketplace zijn gekocht, kunnen niet naar andere portals worden gekopieerd.
   • Sjabloon klonen: hiermee maak je een exacte kopie van je sjabloon, handig als je een variatie op een bestaande sjabloon wilt maken.
   • Kloon naar HTML: hiermee maak je een aparte HTML-versie van je sjabloon met slepen en neerzetten. Dit is handig als je meer controle nodig hebt over je opmaak, of als je meer wilt leren over hoe sjablonen worden gecodeerd.
   • Sjabloonbron bekijken: bekijk de HTML-broncode van het sjabloon. In tegenstelling tot de optie Clone to HTML maakt dit geen aparte HTML-versie van uw sjabloon.
   • Hernoem sjabloon: bewerk de interne naam van uw sjabloon.
   • Toon afhankelijke pagina's: bekijk alle pagina's, e-mails of blogs die momenteel gebruikmaken 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 pagina direct vanuit de sjabloon.
   • Sjabloon verwijderen: hiermee wordt de sjabloon verwijderd. Nadat de sjabloon is verwijderd, blijft hij nog 30 dagen beschikbaar, daarna wordt hij definitief verwijderd. Om de sjabloon terug te zetten, moet u contact opnemen met de klantenservice.