Laatst bijgewerkt: maart 10, 2022
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 hetBestand dropdown menu en selecteerNieuw bestand.
- Klik in het dialoogvenster op het keuzemenu What would you like to build today? en selecteer Module.
- Klik opVolgende.
- Selecteer of deze module gebruikt zal worden inpagina sjablonen,blog sjablonen, en/ofemail sjablonen. Modules die worden gebruikt in e-mail sjablonen kunnen geen CSS of JavaScript bevatten.
- Selecteer of deze module een lokale moduleofeen globale module 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 beschikbare veldtypes vindt u in onze documentatie voor ontwikkelaars.
- Klik in de module-inspector rechts op het
vervolgkeuzemenu Veld toevoegen in de sectieVeldenen selecteer vervolgens eenveld om aan uw module toe te voegen.
- Bewerk de naam van uw veld door te klikken op hetpotloodjenaast de veldnaam. Om deHubL variabele naam te bewerken, maak uw wijzigingen in het HubL variabele naamtekstveld.
Voeg veld standaard inhoud toe
In de sectieInhoudsoptieskunt 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 sectieEditor-optieskunt 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 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 vervolgkeuzelijstis niet leegom de voorwaarde voor dat veld te kiezen. - Als u de voorwaardeis gelijk aan selecteert, voert u eenwaarde 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 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 deLijnversterker optiessectie, selecteer eenminimumen/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 zo ingestelddat er minimaal3afbeeldingsvelden in de module verschijnen, tot een maximum van 5afbeeldingsvelden. Een gebruiker zal standaard4afbeeldingsvelden in 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 vanRepeater 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 Groepmaken.
Kopieer en plak uw veld knipsels
- Als je klaar bent om een veld in de module op te nemen, kopieer en plak je het veldfragment in de HTML + HubLeditor van de module.
- Als je in de veld inspector bent, klik je opCopy snippetrechts van deHubL variabele naam van het veld.
- Als je in de module-inspector bent, ga dan met de muis over het veld en klik op de Acties
dropdown , selecteer danKnipsel kopiëren.
- Klik op de plaats waar u het veld wilt toevoegen in deHTML + HubL editor, plak dan het knipsel door opCtrl+V ofCmd+V te drukken.
Schrijf uw module syntax
Terwijl u uw module bewerkt, kunt u extra module syntax schrijven in deHTML + HubL,CSS, enJSeditor vensters. Leer meer over demodule code editor enmodule syntax referentiein HubSpot's designer 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 optieBeschikbaar maken voor sjablonen in, rechtsboven in de editor, om deze module beschikbaar te maken om toe te voegen aan uw sjablonen.
- Schakel deze toggle uitom 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
Nadat u een module hebt gepubliceerd, kunt u deze op al uw pagina's gebruiken door deze aan een sjabloon toe te voegen.
Om een module toe te voegen aan een sjabloon met slepen en neerzetten:
- Klik in de sjabloon lay-out editor op het tabbladToevoegenbovenaan de lay-out inspector en zoek vervolgens naar uw module. Aangepaste modules die u hebt gemaakt, zijn te herkennen aan het pictogram van de aangepaste module: .
- Sleep de module naar het sjabloon.
Om een module toe te voegen aan een gecodeerd sjabloon, kunt U de module snippet kopiëren en plakken in het sjabloon:
- Om het module knipsel te kopiëren vanuit de module editor, klik onderaan in de rechter zijbalk opKnipsel kopiëren.
- Om het module knipsel te kopiëren van de linker zijbalk van de design manager:
- Zoek in de linker zijbalk de aangepaste module.
- Klik met de rechtermuisknop op de module en selecteer Knipsel kopiëren. U kunt ook de module selecteren, dan klikken opActies in de linkerbovenhoek en vervolgensKnipsel kopiëren selecteren.
- Plak het knipsel waar nodig in het gecodeerde 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 de sectieFilter productenaan de linkerkant, klik op deAlle productendropdown onder Categorieen selecteerModules. 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 Gratismodule ophalenofGratis module kopen voor$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.
