Design Manager

Modules aanmaken en bewerken

Laatst bijgewerkt: oktober 29, 2020

Geldt voor:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

In de design manager tool kunt u aangepaste gecodeerde modules maken om aangepaste of geavanceerde functies toe te voegen aan uw blog, pagina's of e-mails.. De module editor heeft drie editor panels voor het schrijven van HTML en HubL, CSS en JavaScript. Aangepaste modules bieden een breed scala aan functionaliteiten, zodat de inhoud kan worden volledig aangepast binnen de pagina, e-mail of blog editor. U kunt aangepaste modules vanaf nul bouwen of vooraf gebouwde modules toevoegen aan uw account vanaf de HubSpot Marketplace.

Let op: het maken van modules vereist kennis van HTML, CSS, HubL en de HubSpot design manager. Het is aan te raden om met een ontwerper te werken om gecodeerde modules te maken.


Maak een nieuwe module aan

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik bovenin de finder op het vervolgkeuzemenu Bestand en selecteer Nieuw bestand.

new-file

  • In het dialoogvenster dat verschijnt, selecteert u Module.

create-new-file-module

  • Kies of u deze module wilt gebruiken in paginasjablonen, blogsjablonen en/of e-mailsjablonen.

Let op: er zijn technische verschillen tussen deze moduletypes die ze incompatibel maken. Zo worden CSS en JavaScript bijvoorbeeld uitgeschakeld als u E-mailtemplates voor e-mailcompatibiliteit selecteert.

  • Selecteer of u wilt dat de inhoud van de module een lokale module of een globale module is. Als u een globale module aanmaakt, zal het bewerken van de inhoud van deze module elke locatie waar de module wordt gebruikt, updaten. Leer hoe u kunt werken met slimme content in een globale module.
  • Geef de module een bestandsnaam en klik vervolgens op Create.

set-up-your-new-module

Label uw module

Het label van de module is wat er in de designmanager en de content-editor wordt weergegeven wanneer u de module aan uw pagina of e-mail toevoegt. U kunt een module in de designmanager en content editor zoeken aan de hand van de naam van de module of het label. Als u dit niet doet, zal de module de naam van de module weergeven.

design-manager-label-module

Velden toevoegen aan uw module

  • Klik in de module-inspecteur aan de rechterkant op het vervolgkeuzemenu Add field in de sectie Fields en selecteer vervolgens een veld om toe te voegen aan uw module.

module-add-field

  • Bewerk de naam van uw veld door te klikken op het potloodicoon. bewerking naast de veldnaam. Om de HubL variabele naam te bewerken, voert u uw wijzigingen uit in het tekstveld HubL variabele naam .

Veld standaard inhoud toevoegen

In de sectie Contentopties kunt u standaard content toevoegen die verschijnt bij gebruik van de module in sjablonen en contentredacteuren. De opties voor standaard inhoud zullen verschillen afhankelijk van het veldtype.

In het onderstaande voorbeeld is het veldtype een afbeeldingsveld, dus de standaard inhoudsopties zijn het selecteren van een standaardafbeelding en het verbergen van grootte-besturingselementen.

field-content-options

Veldeditor opties instellen

In de sectie Redactionele opties kunt u de volgende opties inschakelen:

  • Maak dit veld verplicht: de gebruiker kan dit veld niet leeg laten.
  • Voorkom bewerking in content editors: de inhoud van het veld kan niet worden bewerkt door eindgebruikers wanneer de module wordt geselecteerd in de content editor. De veldinhoud is nog steeds bewerkbaar op sjabloonniveau. Deze optie is niet beschikbaar voor globale modules, die niet op paginaniveau kunnen worden bewerkt.
  • Tooltip helptekst: voeg hulptekst toe aan het veld om gebruikers context of instructie te geven. Deze helptekst verschijnt in een tooltip wanneer een gebruiker met de muis over het veld beweegt tijdens het bewerken.

    custom-module-help-text
  • Inline-helptekst: helptekst toevoegen aan het veld om gebruikers context of instructie te geven. Deze helptekst verschijnt onder het veld wanneer een gebruiker de module aan het bewerken is.

design-manager-module-field-options

Stel de condities van de veldweergave in

U kunt een moduleveld alleen aanpassen om te verschijnen als een ander veld voldoet aan bepaalde criteria met veldweergavevoorwaarden.

  • In de Weergavevoorwaarden sectie, klik op de HubL variabele dropdown menu om een module veld te selecteren, klik dan op de is niet leeg dropdown om de conditie voor dat veld te kiezen.
  • Als u de conditie gelijk is aan, voer dan een waarde in of regex.

In het onderstaande voorbeeld worden de weergavevoorwaarden voor een beeldveld ingesteld. De voorwaarde is dat de waarde in image_title (een tekstveld) gelijk moet zijn aan Headshot om het beeldveld in de module te laten verschijnen.

field-display-conditions

De weergavecondities worden automatisch ingeschakeld zodra u een voorwaarde hebt ingesteld. Om de weergavecondities uit te schakelen, klikt u op de tuimelschakelaar aan de rechterkant van de weergavecondities.

Veldrepeateropties instellen

Tot slot kunt u de herhalingsopties voor uw veld instellen. Repeaters zijn velden en groepen die meerdere objecten kunnen aanmaken en weergeven met behulp van een for-lus.

  • In de Repeater-opties sectie, selecteer een minimum en/of maximaal aantal vereiste gevallen van dit veld.
  • U kunt er ook voor kiezen om een standaard objecttelling in te stellen, dat is het aantal instanties van het veld dat standaard in de module zal verschijnen.

In het onderstaande voorbeeld wordt het beeldveld ingesteld als een schuifregelaar voor afbeeldingen. De grenzen van het aantal objecten zijn ingesteld op , zodat minimaal 3 beeldvelden in de module zullen verschijnen, tot een maximum van 5 beeldvelden. Een gebruiker ziet standaard 4 beeldvelden verschijnen in de module en kan ervoor kiezen om nog een beeldveld toe te voegen of een bestaand beeldveld te verwijderen.

field-repeater-options

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 aan de rechterkant van Repeater Options.

Meer informatie over veldherhaling en lussen in de documentatie van de ontwerper.

Gegroepeerde module velden

Na het aanmaken van velden kunt u deze groeperen om uw velden op basis van relevantie georganiseerd te houden. Veldgroepen kunnen worden gebruikt om aangepaste veldlogica uit te bouwen. Lees meer over module veldgroepen.

Om de modulevelden te groeperen:

  • Klik op Groeperen in de rechter zijbalk van de module-editor.

    design-manager-group-fields
  • Selecteer de veldendie u wilt groeperen.
  • Klik op Groep aanmaken.

Kopieer en plak uw veldfragmenten

  • Wanneer u klaar bent om een van uw aangepaste velden in uw module op te nemen, kopieer en plak het veldfragment in de HTML + HubL editor van de module.
    • Als u in de veldinspecteur bent, klik dan op .Kopieer snippet rechts van de variabele naam van het veld HubL.
    • Als u in de module-inspecteur bent, ga dan met de muis over het veld en klik op de Acties dropdown, selecteer dan Kopieer knipsel.
  • Klik op de locatie waar u het veld in de HTML + HubL editor wilt toevoegen en plak het knipsel door op Ctrl+V of Cmd+V te drukken.

copy-paste-field-snippet

Schrijf uw module-syntaxis

Terwijl u uw module bewerkt, kunt u extra module-syntaxis schrijven in de HTML + HubL, CSS en JS-editor-panelen . Meer informatie over de module code editor en module syntaxis referentie in HubSpot's design documentatie.

Helptekst toevoegen aan uw module

Voeg in de sectie Redactionele opties helptekst toe om gebruikers context te geven bij het bewerken van de module. Help-tekst mag niet langer zijn dan 300 tekens.

design-manager-help-text

Wanneer een gebruiker de module bewerkt in een content editor, zal de helptekst boven de modulevelden verschijnen.

page-editor-module-help-text

Voorbeeld van uw module

U kunt een voorbeeld bekijken hoe uw module zal verschijnen en werken in een content editor door te klikken op de Preview knop rechtsboven in de module editor. De preview van uw module opent in een nieuw tabblad. Deze preview wordt gesynchroniseerd met de editor en wordt automatisch ververst terwijl u werkt.

preview-module

Publiceer uw module

Zodra u klaar bent met het toevoegen van velden, het schrijven van uw module syntaxis, en tevreden bent met hoe de module verschijnt en werkt in de preview, kunt u verder gaan met het publiceren van uw module. Klik rechtsboven op Publiceren van wijzigingen.

publish-module

Maak uw module beschikbaar voor sjablonen

  • Schakel de knop Beschikbaar maken voor sjablonen op bovenaan in de editor om deze module beschikbaar te maken om aan uw sjablonen toe te voegen.

content-toggle

  • Schakel deze schakelaar uit op om wijzigingen aan te brengen of de functionaliteit van de module te testen. Als deze functie is uitgeschakeld, ziet uw team een waarschuwing dat deze module niet beschikbaar is voor sjablonen.

make-module-available

Voeg uw module toe aan een sjabloon

  • Klik in de template layout editor op het tabblad Toevoegen bovenin de layout inspector en zoek vervolgens naar uw module. Aangepaste modules die u hebt gemaakt, kunt u herkennen aan hetpictogram van deaangepaste module op . CustomModules.
  • Sleep de module naar uw sjabloon.

add-custom-module

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.

  • marketplace in de hoofdnavigatiebalk en selecteer vervolgens Asset-marktplaats."}'>Klik in uw HubSpot-account op de marktplaatspictogram marketplace in de hoofdnavigatiebalk en selecteer vervolgens Asset-marktplaats.
  • Klik in de sectie Filterproducten aan de linkerkant op de dropdown Alle producten onder Categorie en selecteer Modules.U kunt de beschikbare modules filteren op basis van:
    • Prijs: selecteer of de module gratis of betaald is
    • Functie: selecteer het type functie(s) dat de module bevat (bijv. rekenmachine, galerij, kaart)
    • Werkt met: selecteer het (de) sjabloontype(n) dat (die) de module kan (kunnen) worden gebruikt in
    • Aanbieder: selecteer de aanbieder(s) die de module wordt aangeboden door
  • Als je eenmaal hebt besloten tot een module, ga er dan met de muis overheen en klik op Bekijk details.
  • Klik op Get module for free of Buy module for $x rechtsboven. Als de module gratis is, wordt deze automatisch toegevoegd aan uw designmanager. Als de module betaald is, ga dan verder met het invoeren van uw betalingsgegevens.
  • Zodra de betaling is verwerkt, wordt de module toegevoegd aan uw designmanager.