Design Manager

Sjabloonlay-outs structureren en aanpassen

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

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

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

Het structureren van uw sjabloon

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

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

Modules toevoegen en slepen

Om een module aan een lay-out toe te voegen, klikt u op + Toevoegen bovenaan de lay-out inspecteur. Zoek of selecteer een module en sleep deze vervolgens naar de locatie waar u de module in de lay-out wilt weergeven. Door modules boven op andere modules te slepen maakt u kolommen of groepeert u de modules.

Kolombreedtes wijzigen

Om de breedte van een kolom te veranderen, beweeg je tussen de modules en klik en sleep je 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 de toets Control/Command ingedrukt en selecteert u de tweede module. Herhaal deze stap als u meer dan twee modules groepeert. Klik vervolgens in de module-inspecteur op het groepspictogram groupModule .

Let op: modulegroepen kunnen niet door een sectiescheidingsteken heen 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. Om een module te splitsen, klikt u op de module en vervolgens op het splitmodule-icoon splitModule in de module-inspecteur. U kunt ook met de rechtermuisknop op de module klikken in de lay-out en Splitmodule selecteren.

Voeg een flexibele kolom toe

Flexibele kolommen zijn ontworpen om contentmanagement op paginaniveau makkelijker te maken voor contentmakers. Wanneer een flexibele kolom wordt toegevoegd aan een HubSpot paginasjabloon, krijgen gebruikers de mogelijkheid om modules toe te voegen, te verwijderen en opnieuw te bestellen binnen 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 + Toevoegen bovenaan de lay-out inspecteur. Zoek Flexibele kolom en sleep deze vervolgens naar de sjabloon.

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


Het aanpassen van uw sjabloon

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

Module-opties bewerken

U kunt de opties van een module bewerken door te klikken op de module 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 bewerkingsopties, en kunnen verschillen afhankelijk van het specifieke type module. Meer informatie over het bewerken van module CSS en standaard inhoud en instellingen.

Edit options

Ruilmodule

Nadat u een module aan uw sjabloon hebt toegevoegd, kunt u ervoor kiezen deze te ruilen voor een andere module. Klik met de rechtermuisknop op de module in de lay-out-editor en klik vervolgens op Swap-module. In het dropdown menu dat verschijnt, selecteert u de module waarmee u de originele module wilt vervangen.

Omzetten naar globale module

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

  • Klik op de module in de lay-out editor.
  • Klik in de module-inspecteur op het vervolgkeuzemenu Meer en selecteer Omzetten naar globale module.
  • Voer in het dialoogvenster de naam van de globale module in en klik vervolgens op Aanmaken.

Module verwijderen

Om een module te verwijderen, klikt u in de lay-out editor op de module en vervolgens op het prullenbakicoon verwijder in de module inspecteur. U kunt ook met de rechtermuisknop op de module klikken en de module verwijderen selecteren.

Beheer uw sjabloon in de finder

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

  • Klik in de rechterbovenhoek van het sjabloon op de map .
  • Klik met de rechtermuisknop op denaam van het sjabloon. In het dropdown menu kunt u de volgende opties aanpassen:
    • Kopieer naar portalen: kopieer het sjabloon naar een ander portaal waar u ook een gebruiker bent. Sjablonen die op de Marktplaats zijn gekocht, kunnen niet naar andere portalen worden gekopieerd.
    • Kloonsjabloon: dit creëert een exacte duplicaat van uw sjabloon, en is handig wanneer u een variatie van een bestaande sjabloon wilt maken.
    • Kloon naar HTML: dit creëert een aparte HTML-versie van uw template. Dit is handig als u meer controle wilt over uw opmaak, of als u meer wilt weten over hoe sjablonen worden gecodeerd.
    • Sjabloonbron weergeven: bekijk de broncode van de sjabloon in HTML. In tegenstelling tot de optie Kloon naar HTML maakt geenaparte HTML-versie van uw sjabloon.
    • Sjabloon hernoemen: bewerk de interne naam van uw sjabloon.
    • Afhankelijkheden weergeven: bekijk alle pagina's, e-mails of blogs die op dit moment gebruik maken van het sjabloon.
    • Toon revisiegeschiedenis: bekijk de revisiegeschiedenis van uw template en kies ervoor om uw template terug te zetten naar een eerder gepubliceerde versie.
    • Maak e-mail/pagina aan: Maak een e-mail of een landingspagina/pagina direct vanuit het sjabloon aan.
    • Sjabloon verwijderen: hiermee wordt het sjabloon verwijderd. Eenmaal verwijderd blijft een sjabloon30 dagen beschikbaar voor , waarna het definitief wordt verwijderd. Om het sjabloon te herstellen, dient u contact op te nemen met de klantenservice.
  • Deze opties zijn ook toegankelijk via hetmenu Bestand en het dropdown menuActies hierboven.