Sjabloonlay-outs structureren en aanpassen
Laatst bijgewerkt: januari 19, 2023
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 eensjabloonom het te bewerken.
Modules toevoegen en verslepen
Om een module aan een lay-out toe te voegen, klikt u op+ Toevoegenboveninde lay-out inspector.Zoekof selecteer eenmodule, 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 deeerste module, houdt u vervolgens deControl/Command-toetsingedrukt en selecteert u detweede module. Herhaal deze stap als u meer dan twee modules wilt groeperen. Klik vervolgens op hetgroepspictogramgroepModulein 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 demodule en vervolgens op hetsplitmodule-symboolsplitModulein de module-inspector. U kunt ook met de rechtermuisknop op de module in de lay-out klikken enSplit 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 + Toevoegenboven aan de lay-out inspector. Zoek dehorizontale afstandhouder en sleep hem 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.
Een flexibele kolom toevoegen
Flexibele kolommen zijn ontworpen om content management op paginaniveau makkelijker te maken voor content creators. Wanneer een flexibele kolom wordt toegevoegd aan een HubSpot paginasjabloon, krijgen gebruikers de optie om modules toe te voegen, te verwijderen en te herschikkenbinnen de individuele pagina-editor. Deze functie stelt ontwerpers in staat om minder templates te 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+ Toevoegenbovenin de lay-out inspector. Zoek deflexibele kolom en sleep deze naar de sjabloon.
- Flexibele kolommen kunnen alleen worden toegevoegd aan paginasjablonen, en kunnen niet worden toegevoegd aan e-mail of blog sjablonen.
- Modules die aan flexibele kolommen worden toegevoegd kunnen geen CSS klassen, inline styling, of de bijbehorende wikkel-HTML hebben. Stylingopties moeten aan de flexibele kolom zelf worden toegevoegd.
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 demodulete 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, standaardinhoud en editoropties, en kunnen verschillen afhankelijk van het specifieke type module. Leer meer overhet bewerken van module CSS en standaard inhoud en instellingen.

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 demodulein de lay-out editor, en klik vervolgens opVerwissel module. In het vervolgkeuzemenu dat verschijnt, selecteert u demodulewaarmee 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 demodulein de lay-out editor.
- Klik in de module-inspector op het vervolgkeuzemenu Meer en selecteerOmzetten in globale module.
- In het dialoogvenster voert u denaam van de globale module in en klikt u vervolgens opMaken.
Module verwijderen
Om een module te verwijderen, klikt u op demodulein de lay-out editor en vervolgens op hetprullenbakpictogramVerwijderenin de module-inspector. Als alternatief kunt u met de rechtermuisknop op demoduleklikken enVerwijderen 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 hetmappictogrammap.
- Klik met de rechtermuisknop op denaamvan 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 deKloon naar HTML-optie,wordthiermee geen aparte HTML-versie van uw sjabloon gemaakt.
- 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 nog30 dagen beschikbaar, daarna wordt het definitief verwijderd. Om de sjabloon te herstellen, dient u contact op te nemen met de klantenservice.
- Deze opties zijn ook toegankelijk via devervolgkeuzemenu'sBestandenActieshierboven.
Gerelateerde documentatie
-
Pagina's maken in meerdere talen
Je kunt de inhoud van een HubSpot-pagina in meerdere talen vertalen. Door een taalswitcher-module toe te...
Kennisbank -
Lettertypes gebruiken in HubSpot
De beschikbare lettertypen voor inhoud in HubSpot zijn afhankelijk van het type inhoud en het type...
Kennisbank -
De Google Tag Manager-code toevoegen aan HubSpot-content
U kunt Google Tag Manager integreren met HubSpot om uw HubSpot-gehoste landingspagina's, websitepagina's,...
Kennisbank