Doorgaan naar artikel
Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.
Design Manager

Gebruik standaard modules in uw sjabloon

Laatst bijgewerkt: september 8, 2021

Geldt voor:

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

Dit is een overzicht van alle standaardmodules die beschikbaar zijn voor sjablonen met slepen en neerzetten in ontwerptools. Elk type module kan worden aangepast met styling en inhoud opties in de inspector. U kunt ook een standaard module toevoegen aan een HTML sjabloon met zijn HubL snippet.

Voeg een module toe aan uw sjabloon

Om modules aan uw sjablonen met slepen en neerzetten toe te voegen, klikt u op + Toevoegen in de inspector rechtsboven in de editor. Alle standaardmodules en alle opgeslagen aangepaste modules of groepen zullen hier verschijnen. Om een specifieke module te vinden, voert u de naam in de zoekbalk. U kunt ook klikken op het Filter op categorie of tagsdropdown menu klikken en een of meer filters selecteren.

Wanneer de module is geselecteerd in de editor, kunt u de module stijlen, instellingen en inhoud wijzigen in de inspector. Klik in de sectie Wrapping HTML op Uitbreidenom meer aangepaste opmaak toe te voegen in de code-editor.

Onderaan de inspector kunt u de module vergrendelen zodat gebruikers de standaardinhoud niet kunnen wijzigen wanneer ze een blog, e-mail of pagina bewerken. Klik op de schakelaar Voorkom bewerken in inhoudseditors om deze instelling in te schakelen.

Aanpassen van een standaard module

Alle Marketing Hub Professional en Enterprise enCMS Hub Professional en Enterprise accounts hebben standaard een @hubspot map in design tools. Deze map bevat al uw thema's en standaardmodules, inclusief e-mailmodules met slepen en neerzetten. Deze thema's en modules zijn alleen-lezen, maar kunnen worden gekloond als u ze wilt bewerken.

design-manager-hubspot-folder

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • In de Finder, klik op de @hubspot map.
  • Klik met de rechtermuisknop op de standaardmodule die u wilt klonen en selecteer vervolgens Module klonen.

    design-manager-clone-module
  • Bewerk in de gekloonde module de broncode van de module in het centrale bewerkingspaneel.
  • Om uw wijzigingen op te slaan, klikt u rechtsboven op Wijzigingen publiceren. De module zal dan beschikbaar zijn voor gebruik bij het bouwen van sjablonen.

Soorten standaardmodules

Back-up afmelden

De back-up afmeldsjabloon wordt weergegeven aan e-mailontvangers die op een afmeldlink klikken als HubSpot niet in staat is om hun e-mailadres te bepalen. U kunt de helptekst die verschijnt op uw back-up afmeldingspagina aanpassen in deStandaard Inhoudsectie van deze module.

Backup Unsubscribe

Blog opmerkingen

Let op: de blog reactie module is niet beschikbaar voor pagina of e-mail sjablonen.

De moduleblogcommentaren voegt een commentaarsectie toe aan een sjabloon voor een blogbericht. U kunt het blog reactieformulier aanpassenin uw formulierentool. De naam van het formulier wordt gebaseerd op de titel van uw blog.


Default blog comments form

Blog inhoud

Let op: de module bloginhoud is niet beschikbaar voor pagina- of e-mailsjablonen.

De blog inhoud module bevat de HTML/HubL opmaak voor uw blog berichten en blog listing pagina's. U kunt de opmaak van uw berichten bewerken door te klikken opPosttemplate bewerkenen de opmaak van uw listingpagina bewerken door te klikken opListing Template bewerken. Meer informatie over deopmaak van de bloginhoudsmodule.

blog-content-1.png

Blog e-mail inschrijving

Let op: de blog e-mail abonnementsmodule is niet beschikbaar voor e-mail templates.

Deblog e-mailinschrijvingsmodule laat bezoekers zich inschrijven voor uw blog digest e-mails door het invullen van een formulier. Deze module wordt gevuld door uw blog inschrijvingsformulier, dat kan worden aangepast in uw formulieren tool.

Klik op het Select blog to displaydropdown menu en selecteer de blog waar uw bezoekers zich op abonneren. Pas in het tekstvak Title to display above form de tekst aan die in de titel boven het formulier verschijnt. Beweeg de muis over de bestaande inline reactie en klik op hetuitvouwicoon om de tekst aan te passen die verschijnt nadat een bezoeker het formulier heeft verzonden.

Blog email subscription

Oproep tot actie

Een call-to-action (CTA) module plaatst een CTA in een eigen module binnen uw lay-out. U kunt ook een CTA invoegen in een rijke tekstmodule.

Klik in de inspector op het CTAdropdown menu enselecteer een standaard CTA voor deze module in uw template. Of klik op+ Nieuwe CTA maken in hetzelfde menu om een nieuwe CTA te maken als uw standaard CTA.

HubSpot Help article screenshot


Flexibele kolom

Flexibele kolommen kunnen worden toegevoegd aan paginasjablonen, zodat u modules kunt toevoegen, verwijderen en opnieuw kunt rangschikken binnen de inhoudseditor. Dit geeft makers van pagina's de flexibiliteit om één sjabloon te gebruiken om meerdere pagina-indelingen te maken.

Let op:
  • Flexibele kolommen zijn niet beschikbaar op blog-, systeempagina-, of e-mailsjablonen.
  • Als een flexibele kolom eenmaal is aangepast voor een bepaalde pagina in de inhoudseditor, zullen wijzigingen die in de sjabloon aan de flexibele kolom zijn aangebracht niet op die pagina worden weerspiegeld. Dit zorgt ervoor dat aangepaste inhoud niet wordt overschreven.

Wanneer u een module met flexibele kolommen aan uw sjabloon toevoegt, kunt u er andere modules naartoe slepen om een groep met flexibele kolommen te maken. U kunt ook met de rechtermuisknop op een bestaande statische groep klikken en Flexibele kolom maken.


Volg mij.

Let op: de volg mij module is niet beschikbaar voor email sjablonen.

U kunt de volg mijmodulegebruiken om uw bezoekers te helpen in contact te komen met uw bedrijf op sociale media. In tegenstelling tot een module voor het delen van sociale informatie, leiden follow me-modules gebruikers weg van uw site naar uw respectieve sociale-mediapagina's.

Wanneer u een volg mij module toevoegt, kunt u de koptekst van de module aanpassen die boven de sociale pictogrammen verschijnt.

U kunt aangeven welke sociale media netwerken in deze module verschijnen in hetVolg mijgedeelte van uw sociale instellingen.

Let op:de Follow Me module gebruikt standaard iconen voor elk sociaal netwerk. Als u uw eigenaangepaste sociale pictogrammenwilt gebruiken, kunt u eenaangepaste versie van de module maken.

Volg mij - e-mail

Let op: deze module is alleen beschikbaar voor e-mails die zijn gemaakt in de sleep-en neerzet editor. U kunt de module vinden in de editor onder de naamSocial.

De follow me - e-mail module biedt extra opmaak- en instellingsmogelijkhedenvoor drag and drop e-mail templates. U kunt de vorm van het sociale pictogram aanpassen, kleurenenuitlijning in uw module. U kunt ook een aangepaste sociale account toevoegen enuw eigen pictogram uploaden in de editor.

Om de sociale netwerken die in deze module verschijnen te bewerken, klikt u op het pictogram+ Toevoegenin het gedeelteSociale netwerkenvan de inspecteur. Beweeg vervolgens met de muis over de naam van een sociaal netwerk en klik op het pictogrambewerken bewerken pictogram orverwijderen pictogram verwijderentom wijzigingen aan te brengen.

follow-me-email-options

Klik op het pictogramBewerken om te selecteren welk sociaal netwerk verschijnt en naar welke URL het leidt. Als u Aangepast pictogram selecteert, ziet u extra opties om een aangepaste afbeelding voor dit netwerk op te geven. Klik opVervangenom een afbeelding te kiezen uit uw bestandstool of upload een nieuwe afbeelding vanaf uw computer.

custom-icon

Formulier

Let op: de formuliermoduleis niet beschikbaar voor e-mailtemplates.

Met de formuliermodule kunt u een formulier aan uw pagina of blog toevoegen om contactinformatie van uw websitebezoekers vast te leggen.

Voor deze module kunt u de volgende instellingen aanpassen:

  1. Titel formulier: voer de titel in van het formulier dat op de pagina of blog wordt weergegeven.
  2. Formulier: selecteer een bestaand HubSpot formulier om op de pagina te verschijnen, of voeg een nieuw formulier toe.
  3. Wat krijgt een bezoeker te zien na het verzenden van uw formulier: selecteer of een bezoeker die het formulier verzendt naar een andere pagina moet worden doorgestuurd of dat op dezelfde pagina een inline bedankbericht moet worden weergegeven.
  4. Dankbetuiging: pas uw inline dankbetuiging aan.
  5. Stuur formulier meldingen naar specifieke e-mailadressen in plaats van de standaard formulier meldingen: stuur formulier meldingen naar specifieke adressen. Dit overschrijft alle ontvangers die zijn ingesteld in de formuliertool.
  6. Toevoegen aan workflow: voeg bezoekers die het formulier verzenden toe aan een workflow(alleenMarketing Hub Professional ofEnterprise ).
  7. Stuur een follow-up e-mail: stuur tot drie follow-up e-mails naar bezoekers die het formulier indienen.

form-module-2

Eenkopregelmodule geeft een regel tekst weer in een HTML-tag met een kop. Voer standaard koptekst in het vakKoptekstinhoud in. Klik ophet vervolgkeuzemenu Type kop om de kop-tag(H1-H4) te selecteren.

Horizontale afstandhouder

De moduleHorizontale afstandhouder maakt een lege div-tag die ruimte toevoegt tussen elementen op een pagina.

HubSpot Help article screenshot

Afbeelding

Een afbeeldingsmodule voegt een enkele afbeelding toe aan een stuk inhoud. Meer informatie over bewerkingsopties voor afbeeldingsmodules.

Afbeeldingen galerij

Een afbeeldingsgalerijmodule voegt een reeks roterende afbeeldingen toe aan een enkele module. Meer informatie over de aanpasbare instellingen van de afbeeldingsgalerijmodule.

Taal omschakelaar

Let op: de taal switcher moduleis niet beschikbaar voor e-mail templates.

Met de taalswitcher module kunnen bezoekers schakelen tussen vertaalde versies van een pagina of blog. Klik op het vervolgkeuzemenu Weergavemodus om aan te passen hoe de namen van uw vertaalde talen zullen verschijnen:

  • Pagelang: zal de naam van elke taal verschijnen in de taal van de huidige pagina. Als u bijvoorbeeld de Engelse versie bekijkt van een pagina met een Franse vertaling, ziet u bij het aanklikken van de taalschakelaar Engels en Frans als de taalnamen.
  • Gelokaliseerd: de naam van elke taal verschijnt in die taal.Als u bijvoorbeeld de Engelse versie bekijkt van een pagina met een Franse vertaling, ziet u Engels en Français als de taalnamen wanneer u op de taalkiezer klikt.
  • Hybride: een combinatie van de twee. Als u bijvoorbeeld de Engelse versie bekijkt van een pagina met een Franse vertaling, ziet u, wanneer u op de taalschakelaar klikt, Engels en Frans (Français) als taalnamen.

Deze module zal alleen verschijnen op live pagina's met meer dan één gepubliceerde vertaling. Meer informatie over het werken metmeertalige contentin HubSpot.


Logo module

DeLogomodule haalt automatisch uw bedrijfslogo op uit uw website instellingenOm een ander logo te gebruiken, klik om de Overschrijf standaard logo voor deze paginaschakelaar aan te zetten om een nieuwe afbeelding te uploaden voor alleen deze pagina. Om het standaardlogo voor alle inhoud in uw website-instellingen te wijzigen, klikt u op Standaardlogo in dit domein bewerken.

Uw logomodule zal automatisch linken naar uw bedrijfsdomein. Om deze standaard link op te heffen en naar een andere pagina te linken, voert u een unieke Link URL in.

edit-logo-module


Hoofdgedeelte van de e-mail

Dehoofd e-mail body moduleis een standaard rijke tekst module die standaard wordt opgenomen in elke e-mail template. U kunt destandaard inhoudvoor de e-mail body aanpassen in een specifieke template.

Naast de standaard styling opties, kan deze module worden aangepast met standaard kleuren, randen, en spatiëring. Klik op de kleurenballon en selecteer een kleur uit de kleurenkiezer, of voer een hexadecimale waarde in het tekstveld in om standaardkleuren in te stellen. Voer pixelwaardenin de tekstveldenGrensbreedte en Binnenruimte in om de standaard spatiëring in te stellen.

Email Body

Menu

De menumodule voegt navigatie toe aan uw inhoud en sjablonen. Menu's worden rechtstreeks in uw website-instellingen gemaakt en beheerd.

Binnen de ontwerp tools, kunt u de volgende kenmerken van uw menu module aanpassen:

  1. Menu: selecteer een van uw bestaande menu's uit uw instellingen.
  2. Geavanceerd menutype: selecteer hoe menu-items op uw site moeten verschijnen:
    • Statisch - Toon altijd de pagina's op het hoogste niveau in hetmenu: houd uw menu consistent over alle pagina's.
    • Dynamisch per sectie- Toon pagina's inmenu die gerelateerd zijn aan desectie die wordt bekeken: toon menu-items relatief aan het menu-item van het hoogste niveau dat wordt bekeken.
    • Dynamisch per pagina- Toon pagina's in hetmenu die gerelateerd zijn aan depagina die wordt bekeken:menu-items weergeven die gerelateerd zijn aan de specifieke pagina die wordt bekeken.
    • Padmenu in broodkruimelstijl (gebruikt horizontale stroom):geef menu-items horizontaal weer in een relatief pad over de bovenkant van uw site.
  3. Max niveaus: selecteer het maximum aantalkindermenu-itemsdat kan worden weergegeven.
  4. Oriëntatie:selecteer of de menu-items horizontaal of verticaal worden weergegeven.
  5. Flyouts inschakelen: schakel dit selectievakje inom demenu-items vande kinderen te tonenwanneer u met de muis over de ouder gaat. Schakel dit selectievakjeuit om altijd kindermenu-items te tonen.
Advanced Menu Options


Modules

Modules gemaakt in de code editor laten u toe HTML, CSS, Javascript, & HubL te gebruiken om geavanceerde functionaliteit toe te voegen aan uw templates, terwijl uw gebruikers nog steeds de inhoud van de module kunnen bewerken in de inhoud editor zonder de code te wijzigen. Deze componenten zullen worden gelabeld met eencustomModules module icoon in de zoeker en de inspecteur. Leer meer over het werken met aangepaste gecodeerde modules in onze ontwikkelaarsdocumentatie.

Informatie over kantoorlocatie

De kantoorlocatie module bevat vereiste tokens die moeten worden opgenomen in een e-mail template om legaal marketing e-mails te kunnen versturen. Hoewel u de styling van deze module kunt aanpassen, zult u niet in staat zijn om een e-mail template op te slaan zonder een kantoorlocatie informatie module of devereisteHubL tags.

Naast de standaard styling opties, kan deze module worden aangepast met standaard kleuren, randen, en spatiëring. Klik op de kleurenballon en selecteer een kleur uit de kleurenkiezer, of voer een hexadecimale waarde in het tekstveld in om standaardkleuren in te stellen. Voer pixelwaardenin de tekstveldenGrensbreedte en Binnenruimte in om de standaard spatiëring in te stellen.

HubSpot Help article screenshot


Eén regel tekst

De module voor één regel tekst stelt gebruikers in staat één regel tekst in de inhoudseditor te bewerken.

De voettekstmodule van de pagina toont copyrightinformatie met het huidige jaar en uw bedrijfsnaam. De bedrijfsnaam wordt automatisch overgenomen uit devoettekstsectievan uw e-mailinstellingen.

Wachtwoord prompt

De wachtwoord prompt module is beschikbaar op wachtwoord prompt systeem templates. Als een pagina is beveiligd met een wachtwoord, wordt de wachtwoord prompt pagina weergegeven voordat een gebruiker de pagina kan openen. U kunt de tekst van de verzendknop en de tekst die wordt weergegeven als een onjuist wachtwoord wordt ingevoerd, aanpassen.

Postfilter

Let op: de blog e-mail abonnementsmodule is niet beschikbaar voor e-mail sjablonen.

De post filter module toont een lijst van blog artikels van een specifiek onderwerp, maand, of auteur.

U kunt de volgende instellingen voor deze module aanpassen in deStandaard Inhoudsectie:

  • Selecteer een blog om weer te geven: selecteer van welke blog de berichten worden gebruikt.
  • Lijst van waarden voor filter links: selecteer of de module gefilterd wordt op tag, maand, of auteur.
  • Rangschikking van waarden voor filterlinks: selecteer of waarden alfabetisch of volgens aantal berichten worden gerangschikt.
  • Weerte geven lijsttitel:voer een titelin die boven de berichten moet verschijnen.
  • Maximum aantal weer te geven filterwaarden:voer het maximumaantalberichten voor een specifieke filter in. Laat dit veld leeg om alle berichten weer te geven.
  • Tekst link om weer te geven als er meer berichten zijn dan toegestaan:voer detekstin die zal verschijnen als er meer beschikbare berichten zijn in een categorie. De standaard tekst is Zie alles.


Plaatsing op de lijst

Let op: de blog e-mail abonnementsmodule is niet beschikbaar voor e-mail sjablonen.

De post listing module wordt gebruikt om een lijst van blog posts van een HubSpot blog weer te geven. U kunt de module instellen om de meest recente berichten weer te geven of de meest populaire van de afgelopen maand, zes maanden, jaar, of over alle tijden.

U kunt de volgende inhoudsstandaards in de inspecteur aanpassen:

  • Selecteer blog om weer te geven: selecteer de blog waarvan u de posttitels wilt weergeven
  • Lijst blog posts by: selecteer hoe je de posts wilt organiseren
  • Weerte geven lijsttitel: voer een titelin die boven de berichten moet verschijnen.
  • Maximum aantal blog posts to list:voer een maximumaantalposts in die in deze module zullen verschijnen.
Post listing


Rijke tekst

De rich text module is de meest gebruikte content module in alle HubSpot content tools. Het ondersteunt bewerkingsopties voor verschillende componenten, zoals tekst, afbeeldingen en CTA's.

Om standaard inhoud voor deze module toe te voegen, klik Uitvouwenof klik op de voorbeeld inhoud om een rijke tekst editor te openen.

HubSpot Help article screenshot


RSS-lijst

Let op: de RSS listing module is niet beschikbaar voor e-mail templates. Gebruik in plaats daarvan een RSS e-mail.

U kunt een RSS listing module gebruiken om samenvattingen van berichten weer te geven voor een HubSpot blog of externe RSS feed.

RSS listing modules kunnen een specifieke blog of tag weergeven. Klik om de corresponderende schakelaar aan te zetten om aan te geven of er een afbeelding, auteursnaam, samenvatting of publicatiedatum moet worden getoond bij elk bericht.

Na het inschakelen van deze instellingen, kunt u de volgende details aanpassen:

  • Toon auteursnaam: voer deauteurstoewijzingstekst in die boven elke auteursnaam moet worden getoond. Standaard zal deze module by opnemen als de attributietekst.
  • Toon samenvatting: voer de lengte van de samenvatting in tekens in voor elke blog samenvatting. U kunt ook dedoorkliktekst voor de samenvatting aanpassen. Dit is de link waarop blogbezoekers klikken om uw volledige bericht te lezen. Standaard zal deze tekst het labelLees meer krijgen.
  • Toon publicatiedatum: selecteer hetPublicatiedatum formaat omaan te passen hoe de datum en tijd worden geformatteerd voor elk bericht. U kunt ook de publicatiedatum indicator tekst aanpassen. Standaard zal deze tekst luiden:posted at.
HubSpot Help article screenshot


Sectiekoptekst

Met demodule koptekst van een sectiekunt u een h1-titel vervangendoor een ondertitel van een alinea. Deze module is ideaal voor de titel van de primaire sectie van een pagina.

Section header


Eenvoudig menu

Eenvoudige menu modules stellen gebruikers in staat om pagina-specifieke menu's te maken in de content editor. Deze module geeft u de flexibiliteit om een eenvoudig menu te bouwen voor een specifiek template. Klik in de inspector opmenu bewerkenom menu-items en links toe te voegen, en selecteer de menu-oriëntatie. Het bewerken van de menu-oriëntatie voegt een klasse toe van hs-menu-flow-horizontal of hs-menu-flow-vertical aan de menu-wrapper container, die vervolgens gebruikt kan worden voor styling in uw CSS. Leer meer over klassen die worden toegevoegd door module-instellingen in onze documentatie voor ontwikkelaars.

Simple menu


Sociaal delen

Met de module voor sociaal delen kunnen bezoekers uw inhoud gemakkelijk delen via sociale-mediakanalen en e-mail. Klik op deIngeschakeld-knop naast een specifiek sociaal netwerk om het op uw pagina of in uw e-mail op te nemen.

De deel-link zal automatisch gevuld worden met de vereiste HubL tags om uw inhoud te delen. In emails zal de module de web versie URL van die email gebruiken in de deel-link.

Let op:de module voor sociaal delen gebruikt standaardpictogrammen voor elk sociaal netwerk. Als u uw eigenaangepaste sociale pictogrammenkunt u een caangepaste versie van de module maken.

Abonnementsvoorkeuren

Abonnementsvoorkeuren modules zijn alleen beschikbaar op abonnementsvoorkeuren systeem sjablonen.

Met deze modules kunt u de pagina aanpassen die een e-mailontvanger te zien krijgt wanneer hij zijn inschrijfvoorkeuren beheert of zich afmeldt voor e-mailcommunicatie.

Subscription preferences


Bevestiging update abonnement

De bevestigingsmodule voor het bijwerken van abonnementen is een rijke tekstmodule die beschikbaar is op systeemsjablonen voor het bijwerken van abonnementen . Hiermee kunt u aanpassen wat er wordt weergegeven wanneer een e-mailontvanger zijn abonnementsinstellingen bijwerkt.

Subscription updates


Bekijken als webpagina

Demodule bekijken als webpaginageeft e-mailontvangers de mogelijkheid om de webpaginaversie van een e-mail te openen.

HubSpot Help article screenshot