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 de inhoud volledig kan worden aangepast binnen de pagina, e-mail of blog editor.
Let op: het maken van modules vereist kennis van HTML, CSS, HubL en de HubSpot design manager. HubSpot raadt aan om met een ontwikkelaar te werken om gecodeerde modules te maken.
Een nieuwe module maken
- 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 eenglobale 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 veldtypes 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 hetpotloodpictogram bewerken naast de veldnaam te klikken. Om deHubL 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 voorglobale 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 desectieRepeater-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
- Als je klaar bent om een veld in de module op te nemen, kopieer en plak je het veldfragment inde HTML + HubL editor van de module.
- Als u in de veldinspecteur bent, klikt u opSnippet kopiëren rechts van de HubL-variabelenaam van het veld.
- Als u in de module-inspecteur bent, ga dan met de muis over het veld en klik op de
vervolgkeuzelijst
Acties, selecteer dan Snippet kopiëren.
- Klik op de plaats waar u het veld wilt toevoegen in de HTML + HubL editor en plak het knipsel met Ctrl+V of Cmd+V.
Schrijf de syntax van je module
Terwijl u uw module bewerkt, kunt u aanvullende module-syntaxis schrijven in de
HTML + HubL-,
CSS- en
JS-editorvensters . Lees meer over de
module code editor en
de 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.
- De module snippet kopiëren vanuit de linker zijbalk van de design manager:
- Zoek in de linker zijbalk de aangepaste module.
- 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.