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.
- Klik in het dialoogvenster op het keuzemenu Wat wilt u vandaag bouwen? en selecteer 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.
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 .
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.
- 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.
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.
- 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.
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 het
keuzemenu 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.
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.
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.
- 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 de
vervolgkeuzelijst 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.
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.
Wanneer een gebruiker de module bewerkt in een inhoudsbewerker, verschijnt de helptekst boven de modulevelden.
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.
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.
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.
- 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.
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.
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.
- 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.
- Plak het knipsel in de gecodeerde sjabloon waar nodig.
Thank you for your feedback, it means a lot to us.
Gerelateerde documentatie
-
Voeg de Google Tag Manager-code toe aan HubSpot-inhoud
U kunt Google Tag Manager integreren met HubSpot om uw door HubSpot gehoste landingspagina's,...
Kennisbank -
Maak pagina's in meerdere talen
U kunt inhoud op een HubSpot pagina vertalen in meerdere talen. Door een taalswitcher module toe te voegen...
Kennisbank -
De navigatiemenu's van uw site instellen
Bij het bouwen van uw website zult u tijd besteden aan het organiseren van de informatie-architectuur van uw...
Kennisbank