Doorgaan naar artikel
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

Modules maken en bewerken

Laatst bijgewerkt: januari 19, 2023

Geldt voor:

Alle producten en plannen

In de design manager tool kunt u aangepaste gecodeerde modules maken om geavanceerde functies toe te voegen aan uw 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 blog editor. Je kunt aangepaste modules vanaf nul opbouwen of vooraf gebouwde modules uit de HubSpot Marketplace toevoegen.

Let op: het maken van modules vereist kennis van HTML, CSS, HubL en de HubSpot design manager. HubSpot raadt aan om met een ontwerper te werken om gecodeerde modules te maken.

Een nieuwe module maken

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik boven in de finder op het keuzemenu Bestand en selecteer Nieuw bestand.

new-file

  • Klik in het dialoogvenster op het keuzemenu Wat wilt u vandaag bouwen? en selecteer Module.

build-a-module

  • Klik op Volgende.
  • Schakel het selectievakje in naast elk type inhoud waarin uw module zal worden gebruikt: pagina's, blogberichten, bloglijsten, e-mails of citaten. Modules die worden gebruikt in e-mailsjablonen kunnen geen CSS of JavaScript bevatten.

Let op: aangepaste modules voor gebruik in e-mails kunnen alleen worden gemaakt in accounts met een Marketing Hub Professional of Enterprise abonnement .

  • Selecteer of deze module een lokale of globale module wordt. Als u een globale module maakt, wordt de inhoud van deze module bijgewerkt op elke plaats waar de module wordt gebruikt.
  • Voer een bestandsnaam in voor uw module en klik op Maken.

set-up-your-new-module

Label uw module

Standaard verwijst de inhoudseditor naar een module met de naam die deze in de ontwerpmanager heeft gekregen. Als u wilt dat uw module in de inhoudseditor een andere naam gebruikt, kunt u dat doen door een label in te voeren .

design-manager-label-module

Velden toevoegen aan uw module

Voeg velden toe aan de module om de inhoud of styling van de module in te stellen en bewerkbaar te maken in de inhoudseditor. Meer informatie over beschikbare veldtypen vindt u in onze documentatie voor ontwikkelaars.

  • Klik in de module-inspecteur rechts op het keuzemenu Voeg veld toe in de sectie Velden en selecteer een veld om toe te voegen aan uw module.

module-add-field

  • Bewerk de naam van uw veld door op het potloodpictogram bewerken naast de veldnaam te klikken. Om de HubL variabele naam te bewerken, maakt u uw wijzigingen in het HubL variabele naam tekstveld.

Standaard veldinhoud toevoegen

In de sectie Inhoudsopties kunt u standaardinhoud toevoegen die verschijnt wanneer de module wordt gebruikt in sjablonen en inhoudseditors. De opties voor standaardinhoud verschillen afhankelijk van het veldtype.

In het onderstaande voorbeeld is het veldtype een afbeeldingsveld, dus de opties voor standaardinhoud zijn het selecteren van een standaardafbeelding en het verbergen van de groottecontroles.

field-content-options

Veldbewerkingsopties instellen

In de sectie Editoropties kunt u de volgende opties inschakelen voor de manier waarop gebruikers de module in de inhoudseditor kunnen bewerken:

  • Maak dit veld verplicht: de gebruiker zal dit veld niet leeg kunnen laten in de inhoudseditor.
  • Voorkom bewerken in inhoudseditors: de veldinhoud kan niet worden bewerkt in de inhoudseditor; het is nog steeds bewerkbaar op sjabloonniveau. Deze optie is niet beschikbaar voor globale modules, die niet op paginaniveau kunnen worden bewerkt.
  • Tooltip helptekst: voeg helptekst toe aan het veld om gebruikers context of instructies te geven. Deze helptekst verschijnt in een tooltip wanneer een gebruiker met de muis over het veld beweegt tijdens het bewerken.

    custom-module-help-text
  • Inline helptekst: voeg helptekst toe aan het veld om gebruikers context of instructies te geven. Deze helptekst verschijnt onder het veld wanneer een gebruiker de module bewerkt.

design-manager-module-field-options

Stel de voorwaarden voor veldweergave in

U kunt veldweergavevoorwaarden gebruiken om een moduleveld alleen te laten verschijnen als een ander veld aan bepaalde criteria voldoet.

  • Klikin de sectieWeergavevoorwaarden op hetkeuzemenu HubL variabele om een moduleveld te selecteren en klik vervolgens op de is niet leeg keuzemenu om de voorwaarde voor dat veld te kiezen.
  • Als u de voorwaarde is gelijk aan selecteert, voert u een waarde of regex in.

In het onderstaande voorbeeld worden weergavevoorwaarden ingesteld voor een afbeeldingsveld. De voorwaarde is dat de waarde in een tekstveld genaamd image_title gelijk moet zijn aan Headshot om het afbeeldingsveld in de module te laten verschijnen.

field-display-conditions

De weergavevoorwaarden worden automatisch ingeschakeld zodra u een voorwaarde hebt ingesteld. Om de displayvoorwaarden uit te schakelen, klikt u op de tuimelschakelaar rechts van Displayvoorwaarden.

Veldrepeateropties instellen

U kunt repeater-opties voor uw veld instellen in de sectie Repeater-opties . Repeaters zijn velden en groepen die meerdere objecten kunnen aanmaken en weergeven met behulp van een for-lus.

  • Selecteerin de sectieRepeater-opties een minimum- en/of maximumaantal vereiste instanties van dit veld.
  • U kunt er ook voor kiezen om een standaard objecttelling in te stellen, wat het aantal instanties van het veld zal zijn dat standaard in de module zal verschijnen.

In onderstaand voorbeeld wordt het afbeeldingsveld ingesteld als een afbeeldingsschuifbalk. Het aantal objecten is zo ingesteld dat er minimaal 3 en maximaal 5 afbeeldingsvelden in de module verschijnen. Een gebruiker ziet standaard 4 afbeeldingsvelden in de module verschijnen, en kan kiezen om een extra afbeeldingsveld toe te voegen of een bestaand afbeeldingsveld te verwijderen.

field-repeater-options

De repeater-opties worden automatisch ingeschakeld zodra u een van de opties hebt gewijzigd. Om de repeater-opties uit te schakelen, klikt u op de schakelaar rechts van Repeater-opties.

Modulevelden van de groep

Nadat u velden hebt gemaakt, kunt u er maximaal 4 groeperen om uw velden op relevantie te ordenen. Veldgroepen kunnen worden gebruikt om aangepaste veldlogica op te bouwen. Meer informatie over moduleveldgroepen.

Om modulevelden te groeperen:

  • Klik op Groep in de rechter zijbalk van de module-editor.

    design-manager-group-fields
  • Selecteer de velden die u wilt groeperen.
  • Klik op Groep maken.

Kopieer en plak uw veldfragmenten

  • Wanneer u klaar bent om een veld in de module op te nemen, kopieert en plakt u het veldfragment inde HTML + HubL editor van de module.
    • Als je in de veldinspecteur bent, klik dan op Kopieer knipsel rechts van de HubL-variabele naam van het veld.
    • Als u in de module-inspecteur bent, beweeg dan met de muis over het veld en klik op devervolgkeuzelijst Acties , selecteer vervolgens Knipsel kopiëren.
  • Klik op de plaats waar u het veld wilt toevoegen in de HTML + HubL editor en plak het knipsel door op Ctrl+V of Cmd+V te drukken.

copy-paste-field-snippet

Schrijf uw module syntaxis

Terwijl je je module bewerkt, kun je extra module syntax schrijven in de HTML + HubL, CSS en JS editor vensters. Meer informatie over de module code editor en module syntaxis referentie in HubSpot's designer documentatie.

Helptekst toevoegen aan uw module

Voeg in de sectie Editor-opties helptekst toe om gebruikers context te geven bij het bewerken van de module. De helptekst mag niet langer zijn dan 300 tekens.

design-manager-help-text

Wanneer een gebruiker de module bewerkt in een inhoudsbewerker, verschijnt de helptekst boven de modulevelden.

page-editor-module-help-text

Een voorbeeld van uw module

U kunt een voorbeeld bekijken van hoe uw module zal verschijnen en functioneren in de inhoudseditor door te klikken op de knop Voorbeeld rechtsboven in de module-editor. De preview van uw module wordt geopend in een nieuw tabblad. Dit voorbeeld wordt gesynchroniseerd met de editor en wordt automatisch ververst terwijl u werkt.

preview-module

Uw module publiceren

Als u klaar bent met het toevoegen van velden en het schrijven van de syntax van uw module, kunt u doorgaan met het publiceren van uw module. Klik rechtsboven op Wijzigingen publiceren.

publish-module

Maak uw module beschikbaar voor sjablonen

  • Zet de knop Beschikbaar maken voor sjablonen aan rechtsboven in de editor om deze module beschikbaar te maken om toe te voegen aan uw sjablonen.

content-toggle

  • Schakel deze toggle uit om wijzigingen aan te brengen of de functionaliteit van de module te testen. Als deze toggle is uitgeschakeld, ziet uw team een waarschuwing dat deze module niet beschikbaar is voor sjablonen.

make-module-available

Uw module toevoegen aan een sjabloon

Na het publiceren van een module kunt u deze gebruiken op al uw pagina's door deze toe te voegen aan een sjabloon.

Een module toevoegen aan een sleepsjabloon:

  • Klik in de template layout editor op het tabblad Toevoegen bovenaan de layout inspector en zoek vervolgens naar uw module. Aangepaste modules die u hebt gemaakt, kunt u herkennen aan het pictogram voor aangepaste modules: customModules.
  • Sleep de module naar de sjabloon.

add-custom-module

Om een module toe te voegen aan een gecodeerde template, kunt u de module snippet kopiëren en plakken in de template:

  • Om de module-snippet uit de module-editor te kopiëren, klikt u onderaan in de rechter zijbalk op Snippet kopiëren.

    module-editor-copy-snippet0
  • Zo kopieert u het moduleknipsel uit de linkerzijbalk van de ontwerpmanager:
    • Zoek de aangepaste module in de linker zijbalk.
    • Klik met de rechtermuisknop op de module en selecteer vervolgens Knipsel kopiëren. U kunt ook de module selecteren, dan linksboven op Acties klikken en Knipsel kopiëren selecteren.

      custom-module-copy-snippet00
  • Plak het knipsel in de gecodeerde sjabloon waar nodig.

    coded-template-paste-snippet0
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.