Modules maken en bewerken in de ontwerpmanager

Met de design manager kunt u aangepaste 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 de inhoud volledig kan worden aangepast binnen de pagina-, e-mail- of blogeditor.

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

Maak een nieuwe module

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

3. Klik in het dialoogvenster op het vervolgkeuzemenu Wat wilt u 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 waarvoor uw module zal worden gebruikt (bijv. Blogberichten, E-mails of Landingspagina's).
6. Selecteer in het veld Inhoudsbereik van de module een optie (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 in het pop-upvenster een nieuwe locatie en klik vervolgens op Selecteren.
9. Klik op Maken als u klaar bent.
10. Ga verder met het bewerken van de module.

Let op: modules die worden gebruikt in e-mails kunnen alleen worden gemaakt in accounts met een Marketing Hub Professional of Enterprise abonnement. Ze kunnen geen CSS of JavaScript bevatten.

Een module bewerken

Nadat u een module hebt gemaakt in de design manager, kunt u de functionaliteit en het uiterlijk ervan aanpassen. Label de module voor meer duidelijkheid, voeg velden toe en configureer deze en pas de opties van de veldeditor aan, zoals de standaardinhoud. Stel weergavevoorwaarden en herhalingsopties 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 om gebruikers te helpen deze te herkennen 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 waarvan u 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 deze bewerkbaar te maken in de inhoudseditor. Meer informatie over beschikbare veldtypen.

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 het gedeelte Velden op het vervolgkeuzemenu Veld toevoegen. Selecteer vervolgens een veld om toe te voegen aan de module.

4. Om de naam van het veld te bewerken, klik je op het pictogram edit bewerken en voer je een nieuwe naam in. Om de naam van de HubL variabele te bewerken, voer je een nieuwe naam in het veld HubL variabele naam in.

Standaardinhoud van velden aanpassen

In het gedeelte Inhoudsopties kunt u standaardinhoud toevoegen 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 inspecteur met de muis over een veld in de sectie Velden en klik op Bewerken.
4. In het gedeelte Inhoudsopties voegt u standaard inhoudsopties toe of bewerkt u deze. De beschikbare standaard inhoudsopties zijn afhankelijk van het geselecteerde veldtype.

Als u bijvoorbeeld een veldtype Datum en tijd toevoegt aan een module, kunt u een standaarddatum en -tijd selecteren. Je kunt ook een standaard tijdsinterval invoeren.

Opties voor de veldeditor instellen

In het gedeelte Editoropties kunt u een veld verplicht maken en bewerken in de inhoudseditor voorkomen. U 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 inspecteur in de sectie Velden met de muis over een veld en klik op Bewerken.
4. Schakel de optie Dit veld verplicht maken in om het veld verplicht te maken. Dit voorkomt dat gebruikers het veld leeg laten in de inhoudseditor.
5. Als u wilt voorkomen dat de inhoud van een veld wordt bewerkt, schakelt u de optie 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, kunt u tekst invoeren in het Help-tekstveld Tooltip of in het tekstveld Inline Help .
   • Tooltip helptekst: deze tekst verschijnt in een tooltip wanneer een gebruiker met de muis over het infoCircleIcon info icoon in de content editor gaat.
   • Inline helptekst: deze tekst verschijnt onder het veld wanneer een gebruiker de module bewerkt in de inhoudseditor.

Veldweergavevoorwaarden instellen

In de sectie Weergavevoorwaarden kunt u veldweergavevoorwaarden gebruiken om een moduleveld alleen te laten verschijnen 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 inspecteur in de sectie Velden met de muis over een veld en klik op Bewerken.
4. Klik in de sectie 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. Om de weergavevoorwaarden uit te schakelen, schakel je de schakelaar Weergavevoorwaarden uit.

Veldherhalingsopties instellen

In de sectie Repeater opties kunt u repeater opties configureren voor velden en groepen. Als de repeateropties zijn ingeschakeld, worden er meerdere objecten gemaakt en weergegeven met 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 inspecteur met de muis over een veld in de sectie Velden en klik op Bewerken.
4. Voer in de sectie Repeater-opties een getal in de velden Minimum en Maximum (optioneel) in. Dit stelt het minimumaantal keren in dat het veld in de module wordt weergegeven, 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. Om de repeateropties uit te schakelen, zet je de schakelaar Repeateropties uit.

Bijvoorbeeld, de repeateropties van een afbeeldingsveld worden 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, kun je ze groeperen om ze op relevantie te ordenen. Veldgroepen kunnen worden gebruikt om aangepaste veldlogica op te bouwen. Je kunt maximaal vier velden groeperen. 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 inspecteur in de sectie Velden op het vervolgkeuzemenu Acties en selecteer Groeperen.
4. Selecteer een of meer velden die u wilt groeperen en klik op Groep maken.

Helptekst toevoegen aan je module

In de sectie Editor opties kun je helptekst toevoegen 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 het gedeelte Editor opties , tekst in het veld Inline help tekst in.

Inhoudstypen en beschikbaarheid voor een module beheren

De inhoudstypen waarvoor gebruikers een module kunnen gebruiken, zoals blogberichten of landingspagina's, toevoegen of verwijderen. 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 waarin uw module wel of niet wordt gebruikt (bijvoorbeeld Blogberichten, E-mails of Landingspagina's).
   • Klik op Bijwerken als u klaar bent.

4. Als u de beschikbaarheid van een module in sjablonen of pagina's wilt beheren, schakelt u rechtsboven de schakelaar Beschikbaar maken voor sjablonen en pagina's in. Als je de functionaliteit van de module wilt testen of de beschikbaarheid in sjablonen en pagina's wilt uitschakelen, schakel je 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, kun je het veldfragment kopiëren en plakken in de module.html (HTML + HubL) sectie 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 inspecteur met de muis over een moduleveld en klik op het vervolgkeuzemenu Acties in de sectie Velden. Selecteer vervolgens Knipsel kopiëren.
4. Plak in de module-editor het veldfragment op de gewenste locatie in de module.html (HTML. + HubL) sectie. Je kunt de sneltoets Cmd+V of Ctrl+V gebruiken.

Module syntax schrijven

Terwijl u uw module bewerkt, kunt u modulesyntaxis schrijven in de module.html (HTML + HubL), module.css en module.js module editor secties. Meer informatie over de module editor en het module overzicht.

Een module bekijken en publiceren

Zodra je klaar bent met het bewerken van een module, inclusief het toevoegen van velden en het schrijven van module syntax, kun je de module bekijken en publiceren.

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 als er wijzigingen worden aangebracht.
4. Klik op Wijzigingen publiceren om een module te publiceren.

Een module aan een sjabloon toevoegen

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 pictogram dragHandleIcon voor slepen en neerzetten en verplaats de module in de lay-outeditor.
4. Zo voegt u een module toe 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 het modulefragment in de code-editor van de aangepaste sjabloon.
5. Als u klaar bent, klikt u rechtsboven op Wijzigingen publiceren.

Voorbeeld

Maak een aftelmodule

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

• • Selecteer het veld Datum en tijd. Voer de naam 'Gebeurtenis datum en tijd' in. Hierdoor wordt het veld HubL variabele naam bijgewerkt naar event_date_and_time.

• • Selecteer het veld Kleur. Voer de naam "Timer Font Color" in. Hiermee wordt het HubL variabele naam veld bijgewerkt naar 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 de volgende code in de module editor in de module.html (HTML + HubL) sectie:

<!-- Verborgen span om de streefdatum op te slaan -->
<span id="target-date" style="display: none;"></span>

<!-- Afteltimer weergeven -->
<div style="float: left; width: 100%; color: ;">
<div class="time_container" style="margin-left: 30%;">
<span id="days"></span><br>
Dagen
</div>
<div class="time_container">
<span id="uren"></span><br>
Uren
</div>
<div class="time_container">
<span id="minuten"></span><br>
Minuten
</div>
<div class="time_container">
<span id="seconden"></span><br>
Seconden
</div>
</div>

4. Kopieer en plak de volgende code in de module.css sectie:

.time_container {
float: left;
breedte: 10%;
tekst-uitlijning: centreren;
}
.time_container span {
font-weight: bold;
lettergrootte: 200%;
}

5. Kopieer en plak de volgende code in de module.js sectie:

// Functie om aftellen te berekenen en weer te geven
functie updateCountdown() {
// Haal de doeldatum uit de verborgen span
const targetDate = nieuwe datum(document.getElementById('target-date').textContent);
// Verkrijg de huidige datum
const currentDate = nieuwe Datum();
// Bereken de resterende tijd (in milliseconden)
const timeRemaining = doeldatum - huidige datum;
// Controleer of de streefdatum is verstreken
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown verlopen';
terugkeren;
}
// Bereken de resterende dagen, uren, minuten en seconden
const dagen = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const uren = Math.floor((resterende tijd % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minuten = Math.floor((Resterende tijd % (1000 * 60 * 60)) / (1000 * 60));
const seconden = Math.floor((resterende tijd % (1000 * 60)) / (1000 * 60));
// De countdown weergeven
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Elke seconde countdown bijwerken
setInterval(updateCountdown, 1000);
// Eerste oproep om countdown onmiddellijk te updaten
updateCountdown();

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