Modules maken en bewerken in de ontwerpmanager

Maak aangepaste modules in de ontwerpmanager om geavanceerde functies toe te voegen aan je blog, pagina's of e-mails. Aangepaste modules bieden een breed scala aan functionaliteiten zodat inhoud volledig kan worden aangepast binnen de pagina-, e-mail- of blogeditor.

Voordat je begint

Bekijk de vereisten en overwegingen voordat u begint met het maken of bewerken van aangepaste modules in de ontwerpmanager. 

Beperkingen en overwegingen begrijpen

• als je niet bekend bent met HTML, HubL en CSS, kun je het beste samenwerken met een ontwikkelaar om modules te maken in de design manager.

Een module maken

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik boven in de Finder op het vervolgkeuzemenu Bestand en selecteer Nieuw bestand.

3. Klik in het dialoogvenster op het vervolgkeuzemenu Wat wil je vandaag bouwen en selecteer Module.
4. Klik op Volgende.
5. Schakel in het veld Waar wilt u deze module gebruiken het selectievakje in naast elk type inhoud waar uw module zal worden gebruikt (bijv. Blogberichten, E-mails of Landingspagina's). 
6. Selecteer een optie in het veld Module-inhoudsbereik (bijvoorbeeld Lokale module of Globale module). Als u een globale module maakt, wordt de inhoud van deze module bijgewerkt op elke locatie waar de module wordt gebruikt. 
7. Voer een bestandsnaam in voor de module.
8. Om de bestandslocatie van de module te wijzigen, klikt u op Wijzigen in het gedeelte Bestandslocatie . Selecteer een nieuwe locatie in het pop-upvenster en klik vervolgens op Selecteren.
9. Klik op Maken als je klaar bent.
10. Ga verder met het bewerken van de module.

Let op: modules die in e-mails worden gebruikt, bevatten geen CSS of JavaScript. 

Een module bewerken

Nadat u een module hebt gemaakt in de ontwerpmanager, kunt u de functionaliteit en het uiterlijk ervan aanpassen. Label de module voor meer duidelijkheid, voeg velden toe en configureer ze en pas de opties van de veldeditor aan, zoals de standaardinhoud. Stel weergavevoorwaarden en repeateropties in en groepeer de gerelateerde velden voor een betere organisatie. U kunt ook veldfragmenten kopiëren en plakken, aangepaste module-syntaxis schrijven, nuttige instructietekst toevoegen en bewerken met welke sjabloontypes uw module kan worden gebruikt.

Een label aan een module toevoegen

In de ontwerpmanager kunt u een label voor een module toevoegen of bijwerken, zodat gebruikers deze gemakkelijker kunnen vinden in de inhoudseditor. Als het label leeg is, wordt standaard de naam van de module weergegeven.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker op een module waarvoor je het label wilt bewerken.
3. Voer in de inspecteur een label in.

Velden toevoegen aan een module

Voeg velden toe aan een module om de inhoud of styling van de module in te stellen en bewerkbaar te maken in de inhoudseditor. Meer informatie over beschikbare veldtypes. 

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Klik in de inspecteur in de sectie Velden op het vervolgkeuzemenu Veld toevoegen . Selecteer vervolgens een veld om toe te voegen aan de module.

4. Als u de naam van het veld wilt bewerken, klikt u op het edit bewerken en voer een nieuwe naam in. Als u de naam van de HubL-variabele wilt bewerken, voert u een nieuwe naam in het veld HubL-variabele naam in . 

Standaardinhoud van velden aanpassen

Voeg in het gedeelte Inhoudsopties standaardinhoud toe die wordt weergegeven wanneer de module wordt gebruikt in sjablonen en inhoudseditors. De opties voor standaardinhoud verschillen afhankelijk van het veldtype.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Ga in de Inspector in de sectie Velden met de muis over een veld en klik op Bewerken.
4. In het gedeelte Inhoudsopties kunt u standaard inhoudsopties toevoegen of bewerken. De beschikbare standaardinhoudsopties hangen af van het geselecteerde veldtype.

Door bijvoorbeeld een veldtype Datum en tijd aan een module toe te voegen, kun je een standaarddatum en -tijd selecteren. Je kunt ook een standaard tijdsinterval invoeren.

Veldbewerkingsopties instellen

In het gedeelte Editoropties kun je een veld verplicht maken en bewerken in de inhoudseditor voorkomen. Je kunt ook helptekst aanpassen. 

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Ga in de Inspector in de sectie Velden met de muis over een veld en klik op Bewerken.
4. Om het veld verplicht te maken, schakelt u in het gedeelte Editoropties de optie Dit veld verplicht maken in. Dit voorkomt dat gebruikers het veld leeg laten in de inhoudseditor.
5. Om te voorkomen dat de inhoud van een veld wordt bewerkt, schakelt u Bewerken in inhoudseditors voorkomen in. De inhoud van het veld kan nog steeds worden aangepast in de ontwerpmanager op sjabloonniveau. Deze optie is niet beschikbaar voor globale modules.
6. Om context of instructies over het gebruik van het veld toe te voegen, kun je tekst invoeren in het Help-tekstveld van de tooltip of in het tekstveld Inline Help .
   • Tooltip helptekst: deze tekst verschijnt in een tooltip wanneer een gebruiker met de muisaanwijzer over het infoCircleIcon infopictogram in de inhoudseditor.
   • Inline helptekst: deze tekst verschijnt onder het veld wanneer een gebruiker de module bewerkt in de inhoudseditor.

Veldweergavevoorwaarden instellen

Gebruik in de sectie Weergavevoorwaarden veldweergavevoorwaarden om in te stellen dat een moduleveld alleen wordt weergegeven als een ander veld aan bepaalde criteria voldoet.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Ga in de Inspector in de sectie Velden met de muis over een veld en klik op Bewerken.
4. Klik in het gedeelte Weergavevoorwaarden op het vervolgkeuzemenu HubL-variabele en selecteer een variabele. 
5. Klik op het tweede vervolgkeuzemenu en selecteer een optie (bijvoorbeeld Is gelijk aan of Is niet leeg). Er kunnen meer conditievelden nodig zijn, afhankelijk van de geselecteerde optie. Als je bijvoorbeeld Is gelijk aan selecteert, is een extra waardeveld vereist.
6. Standaard worden weergavevoorwaarden automatisch ingeschakeld zodra een voorwaarde is geconfigureerd. Schakel de schakelaar Display Conditions uit om de weergaveomstandigheden uit te schakelen.

Veldversterkeropties instellen

In de sectie Repeater opties , zie repeater opties voor velden en groepen. Als de repeater-opties zijn ingeschakeld, worden er meerdere objecten gemaakt en weergegeven met behulp van een for lus.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Ga in de Inspector in de sectie Velden met de muis over een veld en klik op Bewerken.
4. Voer in de sectie Repeater-opties een getal in de velden Minimum en Maximum (optioneel) in. Hiermee wordt het minimumaantal keren dat het veld in de module wordt weergegeven ingesteld tot de maximumwaarde. 
5. Om het aantal keren in te stellen dat een veld standaard moet worden weergegeven, voer je een getal in het veld Standaard aantal objecten in .
6. Standaard worden de repeateropties automatisch ingeschakeld zodra ze geconfigureerd zijn. Schakel de schakelaar Repeater-opties uit om de repeateropties uit te schakelen.

De herhalingsopties van een afbeeldingsveld worden bijvoorbeeld gewijzigd om minstens drie en maximaal vijf afbeeldingsvelden weer te geven. Een waarde van vier afbeeldingsvelden is standaard geconfigureerd. In de inhoudseditor ziet een gebruiker standaard vier afbeeldingsvelden en kan hij een extra afbeeldingsveld toevoegen of een bestaand afbeeldingsveld verwijderen.

Modulevelden groeperen

Nadat je velden hebt gemaakt, groepeer je ze om ze te ordenen op relevantie. Veldgroepen kunnen worden gebruikt om aangepaste veldlogica op te bouwen. Groepeer tot vier velden samen. Meer informatie over moduleveldgroepen.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Klik in de Inspector in het gedeelte Velden op het vervolgkeuzemenu Acties en selecteer Groeperen.
4. Selecteer een of meer velden die je wilt groeperen en klik dan op Groep maken.

Helptekst toevoegen aan je module

Voeg in de sectie Editoropties helptekst toe om gebruikers context te geven bij het bewerken van de module. Deze tekst wordt weergegeven boven de velden in je module. 

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Voer in de Inspector, in de sectie Editor-opties , tekst in het veld Inline Help-tekst in .

Inhoudstypes en beschikbaarheid voor een module beheren

De inhoudstypes toevoegen of verwijderen waarvoor gebruikers een module kunnen gebruiken, zoals Blog posts of Landingspagina's. Je kunt ook de beschikbaarheid van een module in sjablonen en pagina's in- of uitschakelen.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Om inhoudstypen voor een module te bewerken, klikt u op Inhoudstypen onder de naam van de module in de inspector rechtsboven.

1. • Schakel in het dialoogvenster het selectievakje in of uit naast elk type inhoud waarvoor je module wel of niet wordt gebruikt (bijv. Blogberichten, E-mails of Landingspagina's). 
   • Klik op Bijwerken wanneer u klaar bent.

4. Als u de beschikbaarheid van een module in sjablonen of pagina's wilt beheren, schakelt u de schakelaar Beschikbaar maken voor sjablonen en pagina's in, rechtsboven op. Om de functionaliteit van de module te testen of de beschikbaarheid in sjablonen en pagina's uit te schakelen, schakelt u de schakelaar Beschikbaar maken voor sjablonen en pagina's uit. 

Let op: als u de optie Beschikbaar maken voor sjablonen of pagina's uitschakelt, wordt de module niet verwijderd uit bestaande sjablonen of pagina's.

Veldfragmenten kopiëren en plakken

Als je een veld in een module opneemt, kopieer en plak je het veldfragment in het gedeelte module.html (HTML + HubL) in de module-editor.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Ga in de Inspector met de muis over een moduleveld en klik op het vervolgkeuzemenu Acties in het gedeelte Velden . Selecteer vervolgens Knipsel kopiëren. 
4. Plak in de module-editor het veldfragment op de gewenste plaats in de module.html (HTML. + HubL) sectie. Je kunt de sneltoets Cmd+V of Ctrl+V gebruiken. 

Schrijf module syntaxis

Schrijf tijdens het bewerken van je module syntaxis in de module-editor voor de secties module.html (HTML + HubL), module.css en module.js . Meer informatie over de module-editor en het moduleoverzicht.

Een module bekijken en publiceren

Als je klaar bent met het bewerken van een module, inclusief het toevoegen van velden en het schrijven van de module syntax, bekijk dan een voorbeeld en publiceer de module. 

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een module te openen.
3. Klik rechtsboven op Voorbeeld om een voorbeeld van een module te bekijken. Je wordt naar een nieuw browsertabblad geleid om de module te bekijken. Dit voorbeeld wordt gesynchroniseerd met de module-editor en wordt automatisch vernieuwd wanneer er wijzigingen plaatsvinden.
4. Klik op Wijzigingen publiceren om een module te publiceren. 

Een module toevoegen aan een sjabloon

Nadat u een module hebt gepubliceerd, kunt u deze gebruiken in sjablonen door deze toe te voegen aan een sjabloon met slepen en neerzetten of een sjabloon met aangepaste codering in de ontwerpmanager. Lees meer over het toevoegen en bewerken van modules in de inhoudseditor.

1. Ga in je HubSpot-account naar Inhoud > Design Manager.
2. Klik in de zoeker om een sjabloon te openen.
3. Als u een module wilt toevoegen aan een sjabloon met slepen en neerzetten in de lay-outeditor, klikt u op de tab + Toevoegen boven aan de inspecteur.
   • Voer in het veld Zoeken de naam van de module in. Om uw zoekopdracht te beperken tot aangepaste modules, klikt u op het vervolgkeuzemenu Filteren op categorie of tags en selecteert u Aangepaste modules.
   • Klik op het dragHandleIcon slepen en neerzetten en verplaats de module naar zijn positie in de lay-outeditor.
4. Een module toevoegen aan een aangepaste sjabloon:
   •  Klik met de rechtermuisknop of Ctrl+klik op de module in de zoeker en selecteer Knipsel kopiëren. U kunt ook klikken om de module te openen en vervolgens in de sectie Sjabloongebruik van de inspecteur klikken op Knipsel kopiëren.
   • Plak in de aangepaste sjabloon het modulefragment in de code-editor.
5. Klik op Wijzigingen publiceren in de rechterbovenhoek wanneer u klaar bent.

Voorbeeld: Een aftelmodule maken

1. Maak een module in de ontwerpmanager en geef deze de naam'Afteltimer'.
2. Klik in de inspecteur in het gedeelte Veld op het vervolgkeuzemenu Veld toevoegen.

• • Selecteer het veld Datum en tijd . Voer de naam 'Gebeurtenisdatum en -tijd' in. Dit zal het HubL variabele naamveld bijwerken tot event_date_and_time.

• • Selecteer het veld Kleur . Voer de naam 'Timer Font Color' in. Dit zal het HubL variabele naamveld bijwerken tot timer_font_color.

Let op: de HubL-variabelenamen moeten overeenkomen met de variabelenamen in de module.html (HTML + HubL) codesectie hieronder.

3. Kopieer en plak in de module-editor de volgende code in de relevantesectie :

4. Als je klaar bent, bekijk je een voorbeeld en publiceer je de module.
5. Ga verder met het toevoegen van de module aan een sjabloon.