Laatst bijgewerkt: februari 26, 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 voeg vooraf gebouwde modules van de HubSpot Marktplaats.
Let op: modules maken vereist kennis van HTML, CSS, HubL, en de HubSpot design manager. HubSpot raadt aan om met een designer 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 Bestand dropdown menu en selecteer Nieuw 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 zal worden gebruikt in pagina sjablonen, blog sjablonen, en/of e-mail sjablonen. Modules die in e-mailsjablonen worden gebruikt, kunnen geen CSS of JavaScript bevatten.
- Selecteer of deze module een lokale module of een globale module zal zijn. Indien u eenglobale module maakt, zal het wijzigen van de inhoud van deze module elke plaats waar de module wordt gebruikt bijwerken.
- Voer een bestandsnaam invoor uw module en klik op Maken.
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 van de module in te stellen en bewerkbaar te maken in de inhoudseditor. Meer informatie over beschikbare veldtypes.
- Klik in de module-inspector rechts op het
vervolgkeuzemenu Voeg veld toe ( ) in de sectie Velden en selecteer vervolgens een veld om aan uw module toe te voegen.
- Wijzig de naam van uw veld door te klikken op het potlood icoonnaast de veldnaam. Om de HubL variabele naam te bewerken, brengt u uw wijzigingen aan in het HubL variabele naam tekstveld.
Voeg veld standaard inhoud toe
In de sectie Inhoudsopties kunt 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 de sectie Editor-opties kunt u de volgende opties inschakelen voor de manier waarop gebruikers de module kunnen bewerken in de inhoudseditor:
- 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 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 de Voorwaarden weergeven klikt u op het
vervolgkeuzemenu HubL variabele om een moduleveld te selecteren en vervolgens op de vervolgkeuzelijst is niet leeg 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 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 de tuimelschakelaar rechts van Displayvoorwaarden.
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 de Herhaler opties sectie, selecteer een minimum en/of
maximum aantal vereiste instanties van dit veld. - U kunt er ook voor kiezen om een standaard 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 ingesteld op
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 tuimelschakelaar rechts van Repeater Options.
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 veldendie u wilt groeperen.
- Klik op Groep maken.
Kopieer en plak uw veld knipsels
- Als u klaar bent om een van uw aangepaste velden in uw module op te nemen, kopieert en plakt u het veldfragment in de HTML + HubL-editor van de module.
- Als uin de veld-inspecteur bent, klikt u op Knipsel kopiëren rechts van de HubL-variabelenaam van het veld.
- Als u in de module-inspector bent, ga dan met de muis over het veld en klik op de Actions
dropdown , selecteer dan Copy snippet.
- 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 je module syntax
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 syntax verwijzing in HubSpot de ontwerper 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
- Zet de knop Beschikbaar maken voor sjablonen op rechtsboven in de editor om deze module beschikbaar te maken om toe te voegen aan uw sjablonen.
- Zet deze toggle uit om wijzigingen aan te brengen of 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 het tabblad Toevoegen bovenaan de lay-out inspector en zoek dan naar uw module. Aangepaste modules die u hebt gemaakt, zijn te herkennen aan hetpictogram aangepaste module .
- Sleep de module naar uw sjabloon.
Een module toevoegen of kopen op de marktplaats
U kunt niet alleen uw eigen modules maken, u kunt ook aangepaste modules toevoegen of kopen die andere gebruikers of aanbieders hebben gemaakt in de HubSpot Marketplace.
- marketplace in de hoofdnavigatiebalk en selecteer vervolgens Asset-marktplaats."}'>Klik in uw HubSpot-account op de marktplaatspictogram in de hoofdnavigatiebalk en selecteer vervolgens Asset-marktplaats.
- In de sectie Filter producten aan de linkerkant, klik op de Alle producten dropdown onder Categorie 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
- Provider: de provider(s) waar de module door wordt aangeboden
- Beweeg de muis over de gekozen module en klik op Details bekijken.
- Klik rechtsboven op Get module for free of Buy module for $ .
- 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.
