Laatst bijgewerkt: augustus 4, 2021
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 kan worden volledig aangepast kan worden binnen de pagina-, e-mail-, of blog-editor. U kunt aangepaste modules bouwen vanuit het niets of vooraf gebouwde modules toevoegen uit de HubSpot Marketplace.
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.
Maak een nieuwe module
- Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
- Bovenaan in de Finder, klik op het Bestanddropdown menu en selecteerNieuw bestand.
- Klik in het dialoogvenster op het keuzemenu What would you like to build today? en selecteer Module.
- Klik op Volgende.
- Selecteer of deze module gebruikt zal worden in paginasjablonen, blog sjablonen, en/of email sjablonen. Modules die worden gebruikt in e-mail sjablonen kunnen geen CSS of JavaScript bevatten.
- Selecteer of deze module een lokale module ofeen globalemodule zal zijn.Indien u eenglobale module maakt, zal het wijzigen van de inhoud van deze module elke locatie waar de module gebruikt wordt updaten.
- Voer een bestandsnaam invoor uw module en klik opMaken.
Label uw module
Standaard zal de inhoudseditor naar een module verwijzen met de naam die deze heeft gekregen in de design manager. Als u wilt dat uw module een andere naam gebruikt in de inhoudseditor, 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 de beschikbare veldtypes vindt u in onze documentatie voor ontwikkelaars.
- Klik in de module-inspector rechts op het
vervolgkeuzemenu Veld toevoegenin desectie Velden enselecteer vervolgens eenveld om aan uw module toe te voegen.
- Bewerk de naam van uw veld door te klikken op hetpotloodjenaast de veldnaam. Om de HubL variabelenaam te bewerken, maak uw wijzigingen in het HubL variabele naam tekstveld.
Voeg veld standaard inhoud toe
In desectie Inhoudsoptieskunt u standaardinhoud toevoegen die verschijnt wanneer de module wordt gebruikt in sjablonen en inhoudseditors. De opties voor standaard inhoud zullen verschillen afhankelijk van het veldtype.
In het voorbeeld hieronder is het veldtype een afbeeldingsveld, dus de opties voor standaard inhoud zijn het selecteren van een standaard afbeelding en het verbergen van de afmetingen.
Veld editor opties instellen
In desectie Editor-optieskunt u de volgende opties inschakelen voor de manier waarop gebruikers de module kunnen bewerken in de inhoudseditor:
- Maak dit veld verplicht: degebruiker zal dit veld niet leeg kunnen laten in de inhoudseditor.
- Voorkom bewerken in de inhoudseditor: 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 kunnen worden bewerkt op paginaniveau.
- Tooltip helptekst: voeg helptekst toe aan het veld om gebruikers context of instructies te geven. Deze helptekst zal verschijnen in een tooltip wanneer een gebruiker met de muis over het veld gaat tijdens het bewerken.
- Inline helptekst: voeg helptekst toe aan het veld om gebruikers context of instructies te geven. Deze helptekst zal onder het veld verschijnen wanneer een gebruiker de module bewerkt.
Instellen van voorwaarden voor veldweergave
U kunt veldweergavevoorwaarden gebruiken om een moduleveld zo in te stellen dat het alleen verschijnt als een ander veld aan bepaalde criteria voldoet.
- In deVoorwaarden weergevenklikt u op het
vervolgkeuzemenu HubL-variabeleom een moduleveld te selecteren en vervolgens op de vervolgkeuzelijst is niet leegom devoorwaarde voor dat veld tekiezen. - Als u de voorwaarde isgelijk aan selecteert, voert u een waarde ofregex in.
In het onderstaande voorbeeld worden weergavevoorwaarden ingesteld voor een beeldveld. De voorwaarde is dat de waarde in een tekstveld met de naam 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 detuimelschakelaarrechts vanDisplayvoorwaarden.
Instellen veldversterker opties
U kunt repeater-opties instellen voor uw veld in de sectie Repeater-opties . Repeaters zijn velden en groepen die meerdere objecten kunnen maken en weergeven met behulp van een for-lus.
- In deoptiesvan de repeatersectie, selecteer eenminimum en/of
maximum aantal vereiste instanties van dit veld. - U kunt er ook voor kiezen om eenstandaard objectaantal in te stellen, wat het aantal instanties van het veld zal zijn dat standaard in de module zal verschijnen.
In het voorbeeld hieronder wordt het afbeeldingsveld ingesteld als een afbeeldingsschuifregelaar. De limieten voor het aantal objecten zijn zoingesteld dat er minimaal3 afbeeldingsvelden in de moduleverschijnen, tot een maximum van 5 afbeeldingsvelden. Een gebruiker zal standaard 4afbeeldingsveldenin de module zien 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 detuimelschakelaarrechts van RepeaterOptions.
Groep module velden
Nadat u velden hebt aangemaakt, kunt u er tot 4 groeperen om uw velden op relevantie te ordenen. Veldgroepen kunnen worden gebruikt om aangepaste veldlogica op te bouwen. Meer informatie over module veldgroepen.
Om modulevelden te groeperen:
- Klik op Groep in de rechter zijbalk van de module editor.
- Selecteer de velden die u wilt groeperen.
- Klik op Groepmaken.
Kopieer en plak uw veld knipsels
- Wanneer je klaar bent om een van je aangepaste velden in je module op te nemen, kopieer en plak je het veldfragment in de HTML+ HubL editorvan de module.
- Als je in de veld inspector bent, klik je op Copysnippetrechts van de HubL variabelenaam van het veld.
- Als je in de module-inspector bent, ga dan met de muis over het veld en klik op deActies dropdown,selecteer
dan Knipsel kopiëren.
- Klik op de plaats waar u het veld wilt toevoegen in de HTML+ HubL editor, plak dan het knipsel door op Ctrl+V ofCmd+V te drukken.
Schrijf uw module syntax
Terwijl u uw module bewerkt, kunt u extra module syntax schrijven in de HTML+ HubL, CSS, enJS editor vensters.Leer meer over demodule code editor enmodule syntaxreferentie in HubSpot'sdesigner documentatie.Help-tekst toevoegen aan uw module
Voeg in de sectie Opties van de editor 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 inhoudseditor, verschijnt de helptekst boven de modulevelden.
Bekijk een voorbeeld van uw module
U kunt een voorbeeld zien van hoe uw module eruit zal zien en zal functioneren in de inhoudseditor door te klikken op de knop Voorbeeld, rechtsboven in de module-editor. De voorbeeldweergave van uw module wordt geopend in een nieuw tabblad. Dit voorbeeld wordt gesynchroniseerd met de editor en wordt automatisch vernieuwd terwijl u werkt.
Publiceer uw module
Zodra u klaar bent met het toevoegen van velden en het schrijven van de syntax van uw module, kunt u overgaan tot het publiceren van uw module. Klik in de rechterbovenhoek op Wijzigingen publiceren.
Maak uw module beschikbaar voor sjablonen
- Schakel de optieBeschikbaarmakenvoor sjablonenin, rechtsboven inde editor, om deze module beschikbaar te maken om toe te voegen aan uw sjablonen.
- Schakel deze toggle uit om wijzigingen aan te brengenof de functionaliteit van de module te testen. Als deze toggle is uitgeschakeld, zal uw team een waarschuwing zien dat deze module niet beschikbaar is voor sjablonen.
Voeg uw module toe aan een sjabloon
- Klik in de sjabloon lay-out editor op hettabbladToevoegen bovenaan de lay-out inspector en zoek dan naar uw module. Aangepaste modules die u hebt gemaakt, zijn te herkennen aan hetpictogramAangepaste module.
- Sleep de module naar uw sjabloon.
Een module toevoegen of kopen op de marktplaats
Naast het maken van uw eigen modules, kunt u aangepaste modules toevoegen of kopen die andere gebruikers of aanbieders hebben gemaakt in de HubSpot Marketplace.
- Klik in uw HubSpot-account op de marktplaatspictogram in de hoofdnavigatiebalk en selecteer vervolgens Asset-marktplaats.
- In desectie Filter productenaan de linkerkant, klik op de Alle productendropdown onderCategorie en selecteer Modules.U kunt de beschikbare modules filteren op:
- Prijs:of de module gratis of betaald is
- Functie: het type functie(s) dat de module bevat (bv. rekenmachine, galerij, kaart)
- Werkt met: de sjabloontype(n) waarin de module gebruikt kan worden
- Aanbieder: de aanbieder(s) waar de module door wordt aangeboden
- Beweeg de muis over de gekozen module en klik op Details bekijken.
- Klik op GratismoduleophalenofGratis modulekopenvoor$ rechtsboven.
- Indien de module gratis is, zal deze automatisch toegevoegd worden aan uw design manager.
- Als de module betaald is, voer dan uw betalingsgegevens in. Zodra de betaling is verwerkt, zal de module worden toegevoegd aan uw design manager.
