Letzte Änderung: 28. August 2025
Im Folgenden erfahren Sie mehr über die Standardmodule, die HubSpot für das Erstellen von Website Seiten-, Blogbeitrags- und Blog-Listing-Vorlagen bereitstellt. Sie finden auch Standardmodule, die zur Erstellung von Angebotsvorlagen verwendet werden können. Bei der lokalen Entwicklung können Sie ein bestimmtes Standardmodul mithilfe des Modulpfads abrufen (z. B. hs fetch @hubspot/linked_image.module). Um den Code eines Standardmoduls anzuzeigen, können Sie das Modul im @hubspot-Ordner des Design-Managers anzeigen und kopieren. Im Code verwenden einige Standardmodule die Standard-Account-ID 7052064 und nicht diejenige, die zum aktuellen Account gehört.
design-manager-default-modules

Hinweis:

Standard-Webmodule sind getrennt von Standard-E-Mail-Modulen, die für E-Mail-Vorlagen vorgesehen sind. Wenn Ihre E-Mail-Vorlagen eines der folgenden Standard-Webmodule enthalten, sollten Sie es durch das entsprechende E-Mail-spezifische Modul ersetzen:
  • cta
  • header
  • linked_image
  • logo
  • post_filter
  • post_listing
  • section_header
  • social_sharing
  • text

Blogkommentare

Wird in Blogbeiträgen und Blog-Listings unterstützt.
{% module "blog_comments" path="@hubspot/blog_comments" %}

Blog-E-Mail-Abonnement

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
ParameterTypBeschreibungStandard
select_blogBlogDer Blog, der für das Modul verwendet werden soll.
titleStringTitel für das Modul (umhüllt von einem h3-Tag)"Subscribe Here!"
response_messageRich-TextDie Nachricht, die beim Einsenden des Formulars angezeigt wird.Thanks for subscribing!

Blogbeiträge

Fügen Sie diese Modul zu Blog Listing-Seiten hinzu, um Blogbeitragsvorschauen mit dem Titel, Feature-Bild, Autor, Veröffentlichungsdatum und mehr von jedem Beitrag anzuzeigen, und zwar mit einer klickbaren Schaltfläche, die zum Beitrag navigiert. Dieses Standardmodul wurde mit React erstellt und Sie können seinen Quellcode bei GitHub anzeigen.

Hinweis:

  • Auf dieses Modul kann nicht über den Design-Manager zugegriffen werden. Die Modul kann mit HubL in Code-Vorlagen referenziert und im Editor für Blog Listing-Seiten hinzugefügt werden.
  • Dieses Modul ersetzt das vorherige blog_listing-Modul, das veraltet war.
{% module "blog_posts"
  path="@hubspot/blog_posts"
  layout="grid",
  columns=4,
  displayForEachListItem=[
   "image",
   "title",
   "authorName",
   "tags",
   "publishDate",
   "description",
   "button"
  ]
%}
ParameterTypBeschreibungStandard
layoutAuswahlDer Inhalt Layout für jede Blogbeitragsvorschau.
  • grid (Standard): richtet Beiträge in einem einfachen Raster aus.
  • singleColumn: richtet Beiträge in einer einzigen Spalte mit Feature-Bildern in einer eigenen Zeile über dem Rest des Beitrag-Contents aus.
  • sideBySide: richtet Beiträge in einer Spalte mit Feature-Bildern aus, die horizontal am Beitragsinhalt ausgerichtet sind.
grid
columnsZahlBei Verwendung des grid-Layouts wird die Anzahl der Beiträge pro Zeile angegeben. Kann 2, 3 oder 4 sein.3
alternateImageBooleschWenn Sie das sideBySide-Layout verwenden, legen Sie dies auf true fest, um das Feature-Bild abwechselnd auf der rechten und linken Seite der Beitragsvorschau auszurichten.false
fullImageBooleschWenn Sie das grid- oder das singleColumn-Layout verwenden, legen Sie dieses Feld auf true fest, um das Feature-Bild zum Hintergrund der Beitragsvorschau zu machen.false
displayForEachListItemArrayDer Inhalt, der in jeder Blogbeitragsvorschau enthalten sein soll. Die Auswahlmöglichkeiten umfassen:
  • image: das Feature-Bild des Beitrags.
  • title: der Titel des Beitrags.
  • authorImage: das Bild des Autors des Beitrags.
  • authorName: der Name des Autors des Beitrags.
  • tags: die Blog-Tags des Beitrags.
  • publishDate: das Veröffentlichungsdatum des Beitrags.
  • description: die Metabeschreibung des Beitrags.
  • button: die Schaltfläche „Mehr lesen“, die zum Blogbeitrag verlinkt.
[ 'image', 'title', 'authorImage', 'authorName', 'tags', 'publishDate', 'description', 'button' ]
buttonTextZeichenfolgeDer Text, der auf der Schaltfläche „Mehr lesen“ angezeigt wird, falls enthalten.Read more

Blogbeitragsfilter

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "post_filter" path="@hubspot/post_filter" %}
ParameterTypBeschreibungStandard
select_blogBlogWählen Sie einen anzuzeigenden Blog aus. Standardmäßig wird bei Nutzung in einer Blogvorlage der aktuelle Blog und bei anderweitiger Nutzung der Hauptblog verwendet.
filter_typeAuswahlTyp der Filterung der anzuzeigenden Links. Die Auswahlmöglichkeiten umfassen:
  • tag
  • month
  • author
tag
order_byAuswahlSortierung für die Werte von Filter-Links. Die Auswahlmöglichkeiten umfassen:
  • post_count
  • name
post_count
list_titleTextEine H3-Überschrift."Posts by Tag"
max_linksZahlAnzahl der anzuzeigenden Filterlinks. Lassen Sie diese Angabe leer, um alle anzuzeigen.5
expand_link_textTextText, der angezeigt werden soll, wenn mehr als der anzuzeigende max_links-Wert verfügbar ist."See all"

Listing des Blogbeitrags

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.

Hinweis:

Eine neue Version dieses Moduls wurde Ende März 2024 veröffentlicht. Erfahren Sie mehr über das neue Standard-Beitrags-Listing-Modul.
{% module "post_listing" path="@hubspot/post_listing" %}
ParameterTypBeschreibungStandard
select_blogBlogWählen Sie einen anzuzeigenden Blog aus. Standardmäßig wird bei Nutzung in einer Blogvorlage der aktuelle Blog und bei anderweitiger Nutzung der Hauptblog verwendet.
listing_typeAuswahlDer Typ des Listings für Ihre Beiträge. Die Auswahlmöglichkeiten umfassen:
  • recent: das letzte.
  • popular_all_time: am beliebtesten insgesamt.
  • popular_past_year: am beliebtesten im vergangenen Jahr.
  • popular_past_six_months: am beliebtesten in den letzten sechs Monaten.
  • popular_past_month: am beliebtesten im letzten Monat.
recent
list_titleTextEine H3-Überschrift."Recent Posts"
max_linksZahlMaximale Anzahl an anzuzeigenden Beiträgen.5

Schaltfläche

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "button" path="@hubspot/button" %}
ParameterTypBeschreibungStandard
linkLinkDie URL, zu der die Schaltfläche weiterleitet.{ "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false }
button_textTextText, der auf der Schaltfläche angezeigt wird."Add a button link here"
styleObjekt
  • override_default_style (Boolesch)
  • button_font (Schriftart)
  • button_color (Farbe)
  • text_hover_color (Farbe)
  • button_hover_color (Farbe)
{ "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } }

Call-to-Action

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "cta" path="@hubspot/cta" %}
ParameterTypBeschreibung
guidZeichenfolgeGUID des CTA.

Daten löschen

Zum 26. Mai 2025 wurde dieses Modul zugunsten der Datenschutz-Anfrageseiten-Funktion eingestellt. Die Referenzinformationen für dieses Modul wurden in die Dokumentation zu veralteten Modulen verschoben.

Abgrenzung

Auf Seiten unterstützt. Es gibt eine neue Version dieses Moduls für Accounts, die nach dem 25. August 2022 erstellt wurden. Erfahren Sie mehr über diese Änderung.
{% module "divider" path="@hubspot/divider" %}
ParameterTypBeschreibungStandard
heightZahlPixel-(px)-Höhe der Trennlinie.1
widthZahlBreite der Trennlinie als Prozentsatz (%).50
colorFarbeFarbe (Hex-Wert) und Deckkraft (Zahl) der Trennlinie.{ "color": "#000000", "opacity": 100 }
line_typeAuswahlTyp der Linie. Die Auswahlmöglichkeiten umfassen:
  • solid
  • dotted
  • dashed
solid
alignmentAuswahlHorizontale Ausrichtung der Trennlinie. Die Auswahlmöglichkeiten umfassen:
  • left
  • center
  • right
center
show_paddingBooleschBlendet die obere und untere Umrandung der Trennlinie ein/aus.false
paddingZahlPixel-Wert (px) für die obere und untere Umrandung der Trennlinie. Option verfügbar, wenn show_padding gleich true.5

Daten herunterladen

Zum 26. Mai 2025 wurde dieses Modul zugunsten der Datenschutz-Anfrageseiten-Funktion eingestellt. Die Referenzinformationen für dieses Modul wurden in die Dokumentation zu veralteten Modulen verschoben.

Formular

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "form"
 path="@hubspot/form"
 form={
  "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
  "response_type": "redirect",
  "message": "Thanks for submitting the form.",
  "redirect_id": null,
  "redirect_url": "http://www.google.com"
 }
%}
ParameterTypBeschreibungStandard
titleTextH3-Überschrift
formObjektFormularobjekt, einschließlich:
  • form_id: ID für das zu verwendende Formular
  • response_type: was der Besucher nach dem Einsenden des Formulars sieht:
    • inline
    • redirect
  • message: Inline-Nachricht, wenn response_type auf inline
  • redirect_id festgelegt ist: ID der Seite, zu der weitergeleitet werden soll, wenn response_type auf redirect festgelegt ist.
  • redirect_url: URL, zu der weitergeleitet werden soll, wenn response_type auf redirect
festgelegt ist
{ "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" }
notifications_are_overriddenBooleschE-Mail, an die anstelle der Standard-E-Mail eine Formularbenachrichtigung gesendet wird.false
notifications_override_email_addressesE-MailKommagetrennte Liste von E-Mails, an die gesendet werden soll, wenn notifications_are_overridden gleich true.
follow_up_type_simpleBooleschDas Senden einer Follow-up-E-Mail ist aktiviert.false
simple_email_for_live_idFollow-up-E-MailID der Follow-up-E-Mail. Verfügbar, wenn follow_up_type_simple gleich true.
sfdc_campaignSalesforce-KampagneWenn die Salesforce-Integration aktiv ist, die Kampagnen-ID.
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "header" path="@hubspot/header" %}
ParameterTypBeschreibungStandard
valueTextText für die Überschrift."A clear and bold header"
header_tagAuswahlWählen Sie eine Überschriftenebene aus. Auswahlmöglichkeiten umfassen h1 bis h6.h1

Horizontaler Abstandhalter

Wird in Seiten, Blog-Listings, Blogbeiträgen und E-Mails unterstützt.
{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}

Symbol

Wird in Seiten, Blog-Listings und Blog-Beiträgen unterstützt. Symbole können aus den Symbolsätzen von Font Awesome 5.0.10 und 5.14.0 übernommen werden.
{% module "icon" path="@hubspot/icon" %}
ParameterTypBeschreibungStandard
nameZeichenfolgeDer Name des Symbols."hubspot"
purposeAuswahlEine Barrierefreiheitsoption, die den Zweck des Symbols für Bildschirmleseprogramme kategorisiert. Verfügbare Werte sind:
  • decorative: wird vom Bildschirmleseprogramm ignoriert.
  • semantic: wird vom Bildschirmleseprogramm gelesen.
"decorative"
titleZeichenfolgeEine Barrierefreiheitsoption, die dem Symbol einen Titel zuweist.
styleZeichenfolgeDer Typ des Symbols. Kann einer der folgenden Werte sein: solid, regular, light, thin oder duotone."solid"
unicodeZeichenfolgeDer Unicode-Wert des Symbols.f3b2

Bild

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "linked_image" path="@hubspot/linked_image" %}
ParameterTypBeschreibungStandard
imgBildBildobjekt, das Folgendes enthält:
  • src: Bild-URL
  • alt: ALT-Text für Bild
  • loading: Lazy-Loading-Optionen umfassen:
    • disabled
    • lazy
  • width: px-Wert
  • height: px-Wert
{ "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "loading": "disabled", "width": 200, "height": 200 }
linkTextOptionaler Link für das Bild.
targetBooleschÖffnet Link in neuer Registerkarte.false

Bildraster

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
ParameterTypBeschreibungStandard
slidesObjektObjekt, das Informationen für jede Folie enthält. Objekt enthält:
  • img: Bild-URL.
  • link_url: URL, auf die die Folie verweisen soll
  • hover_messages: Text, der das Bild überlagert, wenn Sie den Mauszeiger darüber bewegen.
[ { "show_caption": false, "open_in_new_tab": false } ]
display_modeAuswahlAnzeigemodus der Bildergalerie. Die Auswahlmöglichkeiten umfassen:
  • standard: Standard-Schieberegler.
  • thumbnail: Thumbnail-Navigator.
  • lightbox: Lightbox-Galerie.
standard
lightboxRowsZahlAnzahl der Zeilen in der Lightbox-Galerie, wenn display_mode gleich lightbox.3
loop_slidesBooleschErmöglicht das Durchlaufen der Folien in einer Schleife mit „Weiter“/“Zurück“, wenn display_mode gleich standard oder thumbnail.true
auto_advanceBooleschWechselt automatisch zur nächsten Folie, wenn display_mode gleich standard oder thumbnail.true
num_secondsZahlZeitspanne (Sekunden) zwischen dem Wechsel zur nächsten Folie, wenn display_mode gleich standard oder thumbnail.5
show_paginationBooleschZeigt Navigationsschaltflächen an, wenn display_mode gleich standard oder thumbnail.true
sizingAuswahlLegt die Höhe der Folien fest, wenn display_mode gleich standard oder thumbnail. Die Auswahlmöglichkeiten umfassen:
  • static: feste Höhe.
  • resize: variable Höhe.
static
transitionAuswahlFolienübergangsstile, wenn display_mode gleich standard oder thumbnail. Die Auswahlmöglichkeiten umfassen:
  • slide: Folienübergang.
  • fade: Übergang mit Ausblenden.
slide
caption_positionAuswahlPosition der Folienbeschriftungen, wenn display_mode gleich standard oder thumbnail. Die Auswahlmöglichkeiten umfassen:
  • below: hält Bildunterschriften immer unter dem Bild.
  • superimpose: legt Bildbeschriftungen über die Bilder.
below

Bildergalerie

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "gallery" path="@hubspot/gallery" %}
ParameterTypBeschreibungStandard
slidesObjektObjekt, das Informationen für jede Folie enthält. Objekt enthält:
  • img: Bild-URL.
  • show_caption: boolescher Wert zur Anzeige der Folienbeschriftung.
  • caption: Rich-Text für Beschriftung.
  • link_url: URL, auf die die Folie verlinken soll.
  • open_in_new_tab: boolescher Wert zum Weiterleiten, wenn der Link in einer neuen Registerkarte geöffnet werden soll.
[ { "show_caption": false, "open_in_new_tab": false } ]
display_modeAuswahlAnzeigemodus der Bildergalerie. Die Auswahlmöglichkeiten umfassen:
  • standard: Standard-Schieberegler.
  • thumbnail: Thumbnail-Navigator.
  • lightbox: Lightbox-Galerie.
standard
lightboxRowsZahlAnzahl der Zeilen in der Lightbox-Galerie, wenn display_mode gleich lightbox.3
loop_slidesBooleschErmöglicht das Durchlaufen der Folien in einer Schleife mit „Weiter“/“Zurück“, wenn display_mode gleich standard oder thumbnail.true
auto_advanceBooleschWechselt automatisch zur nächsten Folie, wenn display_mode gleich standard oder thumbnail.true
num_secondsZahlZeitspanne (Sekunden) zwischen dem Wechsel zur nächsten Folie, wenn display_mode gleich standard oder thumbnail.5
show_paginationBooleschZeigt Navigationsschaltflächen an, wenn display_mode gleich standard oder thumbnail.true
sizingAuswahlLegt die Höhe der Folien fest, wenn display_mode gleich standard oder thumbnail. Die Auswahlmöglichkeiten umfassen:
  • static: feste Höhe.
  • resize: variable Höhe.
static
transitionAuswahlFolienübergangsstile, wenn display_mode gleich standard oder thumbnail. Die Auswahlmöglichkeiten umfassen:
  • slide: Folienübergang.
  • fade: Übergang mit Ausblenden.
slide
caption_positionAuswahlPosition der Folienbeschriftungen, wenn display_mode gleich standard oder thumbnail. Die Auswahlmöglichkeiten umfassen:
  • below: hält Bildunterschriften immer unter dem Bild.
  • superimpose: legt Bildbeschriftungen über die Bilder.
below

Galerie mit Bild-Schiebereglern

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "unique_name"
    path="@hubspot/image_slider_gallery",
    slides=[
        {
        "img": {
            "src": "",
            "alt": "Default image alt text"
        },
        "caption": "<strong>1</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
        "link_url": ""
        },
        {
        "img": {
            "src": "",
            "alt": "Default image alt text"
        },
        "caption": "<strong>2</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
        "link_url": ""
        }
    ]
    slideshow_settings={
        "slides": {
        "per_page": 1,
        "sizing": "natural",
        "aspect_ratio": "16/9",
        "show_captions": true,
        "caption_position": "below"
        },
        "movement": {
        "transition": "slide",
        "loop_slides": false,
        "auto_advance": false,
        "auto_advance_speed_seconds": 5
        },
        "navigation": {
        "show_main_arrows": true,
        "show_thumbnails": false,
        "show_dots": false
        }
    }
%}
ParameterTypBeschreibung
slidesFeldgruppeEine Feldgruppe mit den folgenden Feldern:
  • img: Bild-URL.
  • caption: Rich-Text für Bildbeschriftung.
  • link_url: URL, zu der die Folie verlinkt.
slideshow_settingsFeldgruppeDie Feldgruppe für die Einstellungen des Bildschiebereglers. Enthält die folgenden Feldgruppen:
  • slides: Folieneinstellungen, einschließlich:
    • per_page: Anzahl der Folien pro Seite.
    • sizing: Bildgröße
    • aspect_ratio: Seitenverhältnis von Bildern.
    • show_captions: ein boolescher Wert
  • movement: Einstellungen für das Gleitverhalten von Bildern.
  • navigation: Einstellungen für die Bildnavigation.
default_textFeldgruppeDie Standardtextelemente des Moduls, einschließlich:
  • default_caption: Bildbeschriftung.
  • default_image_alt_text: Bildtext.
  • slider_aria_label: Standard-Aria-Label des Moduls.
  • arial_label_thumbnails: Standard-Aria-Thumbnail des Moduls.
  • slider_nav_aria_label: Standard-Aria-Label der Modulnavigation.
  • prev: vorheriger Folientext.
  • next: Weiter mit Folientext.
  • first: „Zu ersten Folie“-Text.
  • slideX: „Zu X Folie“-Text.
  • pageX: „Zu X Seite“-Text.
  • play: „Automatische Wiedergabe starten“-Text.
  • pause: „Automatische Wiedergabe anhalten“-Text.
  • carousel: Karusselltext.
  • select: Text zum Auswählen einer anzuzeigenden Folie.
  • slide: Folientext.
  • slidelabel: Folienlabel.

Sprachumschaltung

Auf Seiten unterstützt.
{% module "language_switcher" path="@hubspot/language_switcher" %}
ParameterTypBeschreibungStandard
display_modeAuswahlDie Sprache des Textes in der Sprachumschaltung. Die Optionen umfassen:
  • pagelang: die Namen der Sprachen in der Sprache der Seite angezeigt werden, auf der sich die Sprachauswahl befindet.
  • localized: die Namen jeder Sprache in ihrer eigenen Sprache angezeigt werden.
  • hybrid: eine Kombination aus beidem.
localized
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "logo" path="@hubspot/logo" %}
ParameterTypBeschreibungStandard
imgBildBildobjekt, das Folgendes enthält:
  • override_inherited_src: überschreibt das Standardlogo aus den Einstellungen
  • src: Bild-URL
  • alt: ALT-Text für Logo
{ "override_inherited_src": false, "src": null, "alt": null }
linkTextOptionaler Link für das Logo. Wenn keine URL angegeben wird, verlinkt Ihr Logo zu der Logo-URL, die in Ihren Markeneinstellungen festgelegt ist.
open_in_new_tabBooleschÖffnet Link in neuer Registerkarte.false
suppress_company_nameBooleschBlendet den Unternehmensnamen aus, wenn ein Bild nicht ausgewählt ist.true
heading_levelAuswahlWählt eine Überschriftenebene aus, wenn kein Bild ausgewählt ist und suppress_company_name gleich false ist. Die Auswahlmöglichkeiten umfassen h1 bis h6.h1

Logo-Raster

Ein anpassbares Raster aus Containern zur einheitlichen Anzeige von Logos. Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "logo grid"
  path="@hubspot/logo_grid"
  group_logos=[
    {
      "logo": {
        "loading": "lazy",
        "alt": "company_logo",
        "src": "https://www.example.com/Logos/color/logo.png"
      }
    },
    {
      "logo": {
        "loading": "lazy",
        "alt": "company2_logo",
        "src": "https://www.example.com/Logos/color/logo2.png"
      }
    },
    {
      "logo": {
        "alt": "lorem-logo",
        "height": 40,
        "loading": "lazy",
        "max_height": 40,
        "max_width": 175,
        "src": "https://www.example.com/Logos/color/logo3.png",
        "width": 175
      }
    }
  ],
  styles={
    "group_logo": {
      "group_background": {
        "aspect_ratio": "1/1",
        "background_color": {
          "color": "#8E7CC3",
          "opacity": 100
        }
      },
      "group_spacing": {
        "padding": {
          "padding": {
            "bottom": {
              "units": "px",
              "value": 75
            },
            "left": {
              "units": "px",
              "value": 75
            },
            "right": {
              "units": "px",
              "value": 75
            },
            "top": {
              "units": "px",
              "value": 75
            }
          }
        }
      },
      "max_logo_height": 85
    },
    "group_logo_grid": {
      "column_count": 3,
      "grid_gap": 54
    }
  }
%}
ParameterTypBeschreibung
group_logosArrayEin Array, das ein Objekt für jedes Logo im Raster enthält.
logoObjektIn group_logos, ein Objekt für jedes Logo im Raster. Jedes Logo kann die folgenden Parameter enthalten:
  • src: der Dateipfad des Logos.
  • loading: das Lazy Loading-Verhalten des Logos.
  • alt: der ALT-Text
  • height: die Höhe des Logos.
  • width: die Breite des Logos.
  • max_height: die maximale Höhe des Logos.
  • max_width: die maximale Breite des Logos.
stylesArrayEin Array, das die Stilfelder enthält, die sich auf das Rasterlayout, die Logocontainer und die Logo-Bilder auswirken. Dieses Array enthält die folgenden Stilgruppen:
  • group_logo: Stile, die sich auf die Logocontainer und Logo-Bilder auswirken. Enthält Folgendes:
    • group_background: Stile, die das Seitenverhältnis und die Hintergrundfarbe der Rastercontainer festlegen. Die Seitenverhältnisse umfassen: 1/1, 4/3, 16/9.
    • group_spacing: Stile, die die innere Auffüllung des Logocontainers festlegen. Bei breiteren Logos kann ein höherer Auffüllungswert die Logobreite verringern.
    • max_logo_height: die maximale Höhe jedes Logos.
  • group_logo_grid: Stile, die das Rasterlayout festlegen, einschließlich:
    • column_count: die Anzahl der Spalten im Raster.
    • grid_gap: der Abstand zwischen den Rasterelementen.

Meetings

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "meetings" path="@hubspot/meetings" %}
ParameterTypBeschreibung
meetingMeetingWählen Sie einen Meetinglink aus.

Mitgliedschaftsanmeldungen über Social Media

Bietet Google- und Facebook-Anmeldeoptionen für Seiten, die Zugriffsberechtigungen erfordern. Der Benutzer muss sich mit einem Konto anmelden, das mit der für seinen Kontaktdatensatz im CRM hinterlegten E-Mail-Adresse verknüpft ist. Sie können auswählen, welche Social-Media-Anmeldungen aktiviert werden sollen. Wird auf Anmeldeseiten für die Mitgliedschaft unterstützt.
{% module "social" path="@hubspot/membership_social_logins",
        clientid=""
        appid=""
        facebook_enabled=true
        google_enabled=true
        %}
Facebook setzt voraus, dass Sie ein Facebook-Entwicklerkonto haben und eine Facebook-App mit grundlegenden Einstellungen erstellt haben. Sobald Sie dies getan haben, übergeben Sie Ihre App-ID an das Modul.Google erfordert ein Google-Konto und die Erstellung von Autorisierungsanmeldeinformationen. Sobald dies erfolgt ist, übergeben Sie die Client-ID Ihrer App an das Modul.
ParameterTypBeschreibungStandard
facebook_appidZeichenfolgeIhre Facebook-App-ID.
facebook_enabledBooleschAktiviert die Schaltfläche für die Facebook-Anmeldung. facebook_appid ist erforderlich.False
google_clientidZeichenfolgeIhre Google-Client-ID.
google_enabledBooleschAktiviert die Schaltfläche für die Google-Anmeldung. google_clientid ist erforderlich.False

Menü

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt. Möchten Sie Ihr eigenes benutzerdefiniertes Menü erstellen? Probieren Sie unsere menu()-Funktion aus.
{% module "menu" path="@hubspot/menu" %}
ParameterTypBeschreibungStandard
idMenüID des Menüs.
root_typeAuswahlErweiterter Menütyp. Die Auswahlmöglichkeiten umfassen:
  • site_root: Es werden immer Top-Level-Seiten im Menü angezeigt.
  • top_parent: Es werden Seiten im Menü abhängig vom angezeigten Abschnitt angezeigt.
  • parent: Es werden Seiten im Menü abhängig von der angezeigten Seite angezeigt.
  • breadcrumb: Breadcrumb-Pfadmenü (verwendet horizontalen Flow).
site_root
max_levelsAuswahlGibt die Anzahl der untergeordneten Menüebenen an, auf die erweitert werden kann. Die Auswahlmöglichkeiten umfassen 1 bis 102
flowAuswahlAusrichtung des Menüs. Die Auswahlmöglichkeiten umfassen:
  • horizontal
  • vertical
horizontal
flyoutsBooleschAktiviert die Funktion für untergeordnete Menüelemente.true

Fußzeile

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "page_footer" path="@hubspot/page_footer" %}

Passwortaufforderung

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "password_prompt" path="@hubspot/password_prompt" %}
ParameterTypBeschreibungStandard
submit_button_textTextText, der auf der Einsende-Schaltfläche angezeigt wird."Submit"
password_placeholderTextPlatzhaltertext für das Passwortfeld."Password"
bad_password_messageRich-TextNachricht zum Anzeigen, wenn ein Passwort falsch eingegeben wurde."Sorry, please try again. "

Zahlungen

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "payments" path="@hubspot/payments" %}
ParameterTypBeschreibungStandard
paymentZeichenfolgeUm festzulegen, dass das Modul einen bestimmten Zahlungslink verwendet, geben Sie die ID des Zahlungslinks ein. Sie finden die ID in der URL, während Sie den Zahlungslink bearbeiten.
checkout_locationZeichenfolgeLegt fest, ob das Zahlungsformular in einer neuen Registerkarte oder in einer Überlagerung geöffnet werden soll. Verfügbare Werte sind:
  • new_tab: öffnet das Zahlungsformular in einer neuen Registerkarte.
  • overlay: öffnet das Zahlungsformular in einem gleitenden Overlay.
"new_tab"
button_textZeichenfolgeLegt den Text für die Checkout-Schaltfläche fest."Checkout"
button_targetAuswahlGibt an, ob die Schaltfläche einen Zahlungslink von HubSpot oder einen externen Link verwendet. Die Auswahlmöglichkeiten umfassen:
  • payment_link
  • custom_link
"payment_link"
button_linkLinkWenn button_target auf custom_link festgelegt ist, wird mit dieser Option das Ziel des externen Links festgelegt. Folgende Linktypen werden unterstützt:
  • EXTERNAL
  • CONTENT
EXTERNAL

Produkt

Zeigt ein Produkt aus der Produktbibliothek des Accounts an. Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module
  path="@hubspot/product",
  product={
    "id" : 2124070179
  },
  group_button={
    "button_text" : "Buy",
    "override_product_button" : true,
    "button_override" : {
      "no_follow" : false,
      "open_in_new_tab" : false,
      "sponsored" : false,
      "url" : {
        "href" : "https://www.test.com",
        "type" : "EXTERNAL"
      }
  },
  group_description={
    "description_override" : "Monthly gym membership with access to shared locker facilities.",
    "override_product_description" : true
  },
  group_name={
    "heading_level" : "h3",
    "name_override" : "Gym membership",
    "override_product_name" : true
  },
  group_image={
    "image_override" : {
      "alt" : "360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS",
      "height" : 360,
      "loading" : "lazy",
      "src" : "https://2272014.fs1.hubspotusercontent-na1.net/hubfs/2272014/360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS.jpg",
      "width" : 640
    },
    "override_product_image" : true
  }
%}
ParameterTypBeschreibung
productProduktDas anzuzeigende Produkt, angegeben durch die Produkt-ID.
group_buttonFeldgruppeStandardmäßig enthält das Modul eine Schaltfläche, die den Benutzer zur festgelegten URL des Produkts führt. Um das Ziel der Schaltfläche anzupassen, fügen Sie diese optionale Feldgruppe zusammen mit den folgenden Feldern hinzu:
  • button_text: eine Zeichenfolge, die den Text der Schaltfläche festlegt.
  • override_product_button: Legen Sie dies auf true fest, um die Standardeinstellungen für Schaltflächen-Links zu überschreiben. Fügen Sie dann ein button_override-Objekt hinzu. Erfahren Sie unten mehr über button_override.
button_overrideObjektIn der group_button-Feldgruppe legt dies das URL-Verhalten der Schaltfläche fest, wenn override_product_button auf true festgelegt ist. Enthält die folgenden Felder:
  • no_follow: boolesches Feld für das no_follow-Verhalten des Links.
  • open_link_in_new_tab: boolesches Feld für das Öffnungsverhalten des Links.
  • url: ein Objekt, das das Ziel der Schaltfläche angibt.
Im url-Feld können Sie den Typ des Ziels über das type-Feld festlegen, das die folgenden Inhaltstypen unterstützt:
  • EXTERNAL: eine Standard-URL. Nehmen Sie die URL in ein href-Feld auf.
  • CONTENT: eine HubSpot-Seite. Nehmen Sie die Seiten-ID in ein content_id-Feld auf.
  • PAYMENT: ein Zahlungslink. Nehmen Sie den Zahlungslink in ein href-Feld auf.
  • EMAIL_ADDRESS: eine E-Mail-Adresse. Nehmen e die Adresse in ein href-Feld auf.
group_nameFeldgruppeStandardmäßig zeigt das Modul den Produktnamen oben im Modul als h3 an. Um den Namen anzupassen, fügen Sie diese optionale Feldgruppe zusammen mit den folgenden Feldern hinzu:
  • heading_level: die Größe der Überschrift. Kann Folgendes sein: h1 - h6.
  • override_product_name auf true festlegen, um Text anstelle des Produktnamens anzugeben.
  • name_override: die Zeichenfolge, die oben im Modul angezeigt werden soll.
group_descriptionFeldgruppeStandardmäßig zeigt das Modul die festgelegte Beschreibung des Produkts an. Um die Beschreibung anzupassen, berücksichtigen Sie diese optionale Feldgruppe zusammen mit den folgenden Feldern:
  • override_product_description: auf true festlegen, um die Produktbeschreibung anzupassen.
  • description_override: eine Zeichenfolge, die Ihre neue Beschreibung enthält.
group_imageFeldgruppeStandardmäßig zeigt das Modul das festgelegte Bild des Produkts an. Um dieses Bild anzupassen, fügen Sie diese optionale Feldergruppe mit den folgenden Feldern hinzu:
  • override_product_image: auf true festlegen, um ein neues Bild anzugeben.
  • image_override: ein Objekt, das das neue Bild angibt, einschließlich der folgenden Eigenschaften:
    • alt
    • height
    • loading
    • src
    • width

Angebots-Download

Wird in Angebotsvorlagen unterstützt.
{% module "download" path="@hubspot/quote_download" %}
ParameterTypBeschreibungStandard
button_textZeichenfolgeDer Text, der auf der Download-Schaltfläche angezeigt wird.Download
download_errorZeichenfolgeFehlermeldung, die angezeigt wird, wenn der Download fehlschlägt.There was a problem downloading the quote. Please try again.

Angebotszahlung

Wird in Angebotsvorlagen unterstützt.
{% module "payment" path="@hubspot/quote_payment" %}
ParameterTypBeschreibungStandard
heading_textZeichenfolgeDie Überschrift, die über dem Zahlungsabschnitt einer Angebotsvorlage angezeigt wird.Payment
heading_tagAuswahlDer Typ der Überschrift, die für die Anzeige von heading_text verwendet wird. Die Werte umfassen: h1, h2, h3, h4, h5, h6.h3
checkoutZeichenfolgeDer Text für die Zahlungsschaltfläche.Pay now
needs_signatureZeichenfolgeSchaltflächentext, wenn eine Unterschrift erforderlich ist.Payment can't be made because the quote isn't fully signed.
checkout_errorRich-TextNachricht, die angezeigt wird, wenn während des Checkouts ein Fehler auftritt.There was a problem setting up checkout. Please contact the person who sent you this quote.
payment_status_errorRich-TextNachricht, die angezeigt wird, wenn beim Zahlungsversuch ein Fehler auftritt.There was a problem loading the payment status for this quote. Please try refreshing the page.
paidZeichenfolgeEine Statusanzeige für eine erfolgreiche Zahlung.Paid
payment_processingZeichenfolgeEine Statusanzeige für die Zahlungsabwicklung.Payment processing

Angebotssignatur

Wird in Angebotsvorlagen unterstützt.
{% module "signature" path="@hubspot/quote_signature" %}
Wenn ein Angebot eine elektronische Unterschrift erfordert, sind die folgenden Felder innerhalb eines esignature-Objekts verfügbar:
ParameterTypBeschreibungStandard
pretextRich-TextErläuterungstext für die elektronische Unterschrift.Before you sign this quote, an email must be sent to you to verify your identity. Find your profile below to request a verification email.
verify_buttonZeichenfolgeText, der auf der Verifizerungsschaltfläche angezeigt wird.Verify to sign
failureZeichenfolgeHinweistext, der angezeigt wird, wenn die Unterschriftsinformationen nicht abgerufen werden können.There was a problem retrieving the signature information. Please reload the page.
verification_sentZeichenfolgeEine Statusanzeige, die angezeigt wird, wenn die Verifizierungsanfrage erfolgreich an den Unterzeichner des Angebots gesendet wurde.Verification sent
signedZeichenfolgeText, der angezeigt wird, wenn das Angebot erfolgreich unterzeichnet wurde.Signed
Wenn für ein Angebot eine schriftliche Unterschrift erforderlich ist, sind die folgenden Felder innerhalb eines print_signature-Objekts verfügbar:
ParameterTypBeschreibungStandard
headerRich-TextText, der am Anfang des Unterschriftsabschnitts angezeigt wird.Signature
signatureZeichenfolgeText, der neben dem Unterschriftsfeld angezeigt wird.Signature
dateZeichenfolgeText, der neben dem Datumsfeld angezeigt wird.Date
printed_nameZeichenfolgeText, der neben dem Feld für den gedruckten Namen angezeigt wird.Printed name
countersignatureObjektEin Objekt, das Inhalte für den Abschnitt mit der Gegenzeichnung enthält. Dieses Objekt kann die folgenden Felder enthalten:
  • header: Text, der oben im Abschnitt für die Gegenzeichnung angezeigt wird.
  • countersignature: Text, der neben dem Feld für die Gegenzeichnung angezeigt wird.
  • date: Text, der neben dem Datums-Feld angezeigt wird.
  • printed_name: Text, der neben dem Feld für den gedruckten Namen angezeigt wird.
Signed

Artikel

Wird in Angebotsvorlagen unterstützt. Dieses Modul enthält auch den Standardtext, der in benutzerdefinierten Angeboten verwendet wird.
{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
ParameterTypBeschreibungStandard
titleTextDer Titel der Artikelspalte.Column description
use_additional_product_propertyBooleschZeigt ein Kontrollkästchen an, um Benutzern die Auswahl zusätzlicher Artikelspalten von den Produkteigenschaften zu ermöglichen.False
additional_product_propertiesAuswahlEine Produkteigenschaft. Die Auswahlmöglichkeiten umfassen:
  • price: Preis des Artikels.
  • item_description: Beschreibung des Artikels.
  • quantity: Anzahl der Artikel.
  • amount: Gesamtkosten der Artikel.
  • hs_recurring_billing_start_date: Startdatum der Abrechnung für wiederkehrende Artikel.
  • discount: Der Rabattbetrag gilt für den Artikel.
crm_product_propertyCRM-ObjekteigenschaftWählen Sie eine beliebige Produkteigenschaft aus, die als Spaltenüberschrift für den Artikel angezeigt werden soll.

Rich-Text

Wird in allen Vorlagentypen unterstützt.
{% module "rich_text" path="@hubspot/rich_text" %}
ParameterTypBeschreibungStandard
htmlRich-TextHTML-Block. ## Something Powerful \n ### Tell The Reader More \n The headline and subheader tells us what you're [offering](https://developers.hubspot.de/docs\"#\"), and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for. \n Remember: \n<ul>\n<li>Bullets are great</li>\n<li>For spelling out [benefits](https://developers.hubspot.de/docs\"#\") and</li>\n<li>Turning visitors into leads.</li>\n</ul>

RSS-Listing

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "rss_listing" path="@hubspot/rss_listing" %}
ParameterTypBeschreibungStandard
titleTextEine H3-Überschrift."Test"
rss_feed_typeAuswahlTyp des RSS-Feeds. Die Auswahlmöglichkeiten umfassen:
  • blog – von HubSpot gehosteter Blog.
  • external – ein externer RSS-Feed.
blog
rss_urlTextRSS-URL, die verwendet werden soll, wenn rss_feed_type gleich external.
content_group_idBlogID des zu verwendenden Blogs, wenn rss_feed_type gleich blog.
topic_idTag(optional) ID des Tags, nach dem gefiltert werden soll, wenn rss_feed_type gleich blog.
number_of_itemsZahlMaximale Anzahl an anzuzeigenden Beiträgen.5
include_featured_imageBooleschFügt das Feature-Bild ein.false
show_authorBooleschZeigt den Namen des Autors an.true
attribution_textTextDer Text, der einem Beitrag einen Autor zuschreibt. Wird angezeigt, wenn show_author gleich true ist."by"
show_detailBooleschZeigt den Beitragszusammenfassungstext an.true
limit_to_charsZahlBeschränkt die Länge des Zusammenfassungstextes, wenn show_detail gleich true ist.200
click_through_textTextDer Text, der am Ende der Zusammenfassung eines Beitrags für den Clickthrough-Link angezeigt wird, wenn show_detail gleich true ist."Read more"
show_dateBooleschZeigt das Veröffentlichungsdatum an.true
publish_date_formatAuswahlFormat für das Veröffentlichungsdatum, wenn show_date gleich true ist. Die Auswahlmöglichkeiten umfassen:
  • short (z. B.: 06/11/06 12:00 Uhr)
  • medium (z. B.: 6. Juni 2006 12:00:00 Uhr)
  • long (z. B.: 6. Juni 2017 12:00:00 Uhr EDT)
  • MMMM d, yyyy 'at' h:mm a (z. B.: 6. Juni 2006 um 12:00 Uhr)
  • h:mm a 'on' MMMM d, yyyy (z. B.: 12:00 Uhr am 6. Juni 2006)
short
publish_date_textTextDer Text, der angibt, wann ein Beitrag veröffentlicht wurde, wenn show_date gleich true ist."posted at"

Website-Sucheingabe

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "search_input" path="./local-search_input"
  placeholder="Search"
  include_search_button=true
  results={
   "use_custom_search_results_template": "true",
   "path_id": "77977569400"
  }
%}
ParameterTypBeschreibungStandard
field_labelTextText des Labels für die Sucheingabe.
placeholderTextPlatzhaltertext für das Eingabefeld."Search"
include_search_buttonBooleschFügt eine Suchen-Schaltfläche ein.false
content_typesObjektWelche Inhaltstypen in die Suchergebnisse aufgenommen werden sollen. Objekt enthält die folgenden Schlüssel mit booleschen Werten:
  • website_pages
  • landing_pages
  • blog_posts
  • knowledge_articles
{ "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }
resultsObjektEin Objekt, das Steuerelemente für die Verwendung einer benutzerdefinierten Seite für Suchergebnisse aktiviert. Umfasst die folgenden Eigenschaften:
  • use_custom_search_results_template (boolesch): Bei Festlegung auf true können Benutzer eine benutzerdefinierte Suchergebnisseite auswählen. Der Standardwert ist false.
  • path_id (Zeichenfolge): die ID der Seite, die für Suchergebnisse verwendet wird. Die Seite, auf die verwiesen wird, muss das Suchergebnisse-Modul enthalten.

Suchergebnisse

Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "search_results" path="@hubspot/search_results" %}
ParameterTypBeschreibungStandard
display_featured_imagesBooleschZeigt Feature-Bilder für Artikel an.false

Bereichsüberschrift

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "section_header" path="@hubspot/section_header" %}
ParameterTypBeschreibungStandard
headerTextBereichs-Header-Content."A clear and bold header"
heading_levelAuswahlÜberschriftenebene für den header. Die Auswahlmöglichkeiten umfassen h1 bis h6.h1
subheaderTextText für den Unterüberschriften-Absatz für den Abschnitt."A more subdued subheader"

Einfaches Menü

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "simple_menu" path="@hubspot/simple_menu" %}
ParameterTypBeschreibungStandard
menu_treeEinfaches Menü„Einfaches Menü“-Objekt.[]
orientationAuswahlAusrichtung des Menüs. Die Auswahlmöglichkeiten umfassen:
  • horizontal
  • vertical
horizontal

Folgen in Social Media

Fügen Sie Links zu Ihren Social-Media-Profilen hinzu, indem Sie die Drag-&-Drop-Neuordnung im Content-Editor verwenden. Fügt automatisch Symbole basierend auf der Social-Media-URL ein, Symbole können jedoch überschrieben werden. Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "social_follow" path="@hubspot/social_follow" %}
ParameterTypBeschreibungStandard
linkTextDer Ziel-Link für die im Editor hinzugefügte Social-Media-Seite.
open_in_new_windowBooleschBei Festlegung auf false wird der Link in derselben Browser-Registerkarte geöffnet.true
is_podcastBooleschAuf true festlegen, um ein Podcast-Symbol anstelle des Standard- oder benutzerdefinierten Symbols anzuzeigen.false
customize_alt_textBooleschStandardmäßig wird der ALT-Text automatisch generiert. Wenn dies auf true festgelegt ist, können Sie den standardmäßigen ALT-Text mithilfe des aria_label-Feldes mit einem benutzerdefinierten Wert überschreiben.false
aria-labelZeichenfolgeWenn customize_alt_text gleich true ist, legt dieses Feld das Symbol ALT-Text fest (z. B. Follow us on Facebook). Dieser Text wird von Bildschirmleseprogrammen vorgelesen, um das Symbol für sehbehinderte Benutzer zu beschreiben.False
customize_iconBooleschStandardmäßig werden Symbole automatisch auf der Grundlage der Link-URL ausgefüllt. Wenn dies auf true festgelegt ist, können Sie das custom_icon-Feld verwenden, um eines der anderen bereitgestellten Symbole auszuwählen (Font Awesome 6.4.2).false
custom_iconSymbolWenn customize_icon auf true festgelegt ist und is_podcast ist false, verwenden Sie dieses Feld, um ein benutzerdefiniertes Symbol aus dem angegebenen Satz anzugeben. Die verfügbaren Symbole stammen von Font Awesome 6.4.2.

Social-Media-Sharing

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "social_sharing" path="@hubspot/social_sharing" %}
Hinweis: Die Variable social_link_url in der Standardspalte unten hat den gleichen Wert wie der link-Parameter.
ParameterTypBeschreibungStandard
linkTextDies ist der Ziel-Link, der zum leichteren Teilen in Social-Media-Netzwerken gekürzt wird.
facebookObjektObjekt, das Folgendes enthält:
  • enabled: boolescher Wert zum Aktivieren von Social-Media-Element
  • custom_link_format: benutzerdefinierte URL für die Social-Media-Sharer-URL
{ "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" }
twitterObjektObjekt, das Folgendes enthält.
  • enabled: boolescher Wert zum Aktivieren eines Social-Media-Elements
  • custom_link_format: benutzerdefinierte URL für die Social-Media-Sharer-URL
{ “enabled”: false, “custom_link_format”: “https://twitter.com/intent/tweet?original_referer=\{\{ social_link_url }}&url={{ social_link_url }}&source=tweetbutton&text={{ social_page_title|urlencode }}” }
linkedinObjektObjekt, das Folgendes enthält:
  • enabled: boolescher Wert zum Aktivieren von Social-Media-Element
  • custom_link_format: benutzerdefinierte URL für die Social-Media-Sharer-URL
{ "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" }
pinterestObjektObjekt, das Folgendes enthält:
  • enabled: boolescher Wert zum Aktivieren von Social-Media-Element
  • custom_link_format: benutzerdefinierte URL für die Social-Media-Sharer-URL.
  • pinterest_media: Bildobjekt einschließlich:
    • src: Bild-URL.
    • alt: ALT-Text für das Bild.
{ "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url={{ social_link_url }}&media={{ pinterest_media }}", "pinterest_media": { "src": "", "alt": null } }
emailObjektObjekt, das Folgendes enthält:
  • enabled: boolescher Wert zum Aktivieren von Social-Media-Element
  • custom_link_format: benutzerdefinierte URL für die Social-Media-Sharer-URL
{ "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" }

Karte mit Registerkarten

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module
  path="@hubspot/tabbed_card",
  tabs=[
   {
    "content" : "<p>This is the descriptive text contained in tab 1.</p>",
    "tab_label" : "Tab 1 label"
   },
   {
    "content" : "<p>This is the descriptive text contained in tab 2.</p>",
    "tab_label" : "Tab 2 label"
   }
  ],
  fixed_height=false
%}
ParameterTypBeschreibungStandard
tabsFeldgruppeEine Feldgruppe, die das Registerkarten-Label und den Textinhalt jeder Registerkarte enthält. Enthält die folgenden Felder:
  • tab_label: das Label der Registerkarte.
  • content: der Rich-Text-Inhalt der Registerkarte.
"Some additional information in one line"
fixed_heightBooleschStandardmäßig werden die Registerkarten auf eine feste Höhe festgelegt, damit die Containerhöhe beim Wechsel zwischen Registerkarten gleich bleibt. Sie können dies auf false festlegen, wenn die Höhe des Kartencontainers auf Registerkarten auf dem Inhalt der aktiven Registerkarte basieren soll.False

Eine Zeile Text

Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "text" path="@hubspot/text" %}
ParameterTypBeschreibungStandard
valueTextFügen Sie Ihren Text zu diesem Parameter hinzu."Some additional information in one line"
Video## Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "video" path="@hubspot/video" %}
ParameterTypBeschreibungStandard
video_typeAuswahlTyp des Videos. Zu den Optionen gehören:
  • embed: Einbettungscode aus einer externen Quellen.
  • hubspot_video: von HubSpot gehostetes Video.
embed
hubspot_videoVideoplayerVon HubSpot gehostetes Video. Wird verwendet, wenn video_type gleich hubspot_video.
embed_fieldEinbettungUnterstützt Einbettungstypen:
  • oembed
    • video: URL für Video.
  • html: Einbettungscode für Video.
oembed_thumbnailBildÜberschreibt oEmbed-Thumbnail-Bild, wenn video_type gleich embed und embed_field gleich oembed.
style_optionsObjektObjekt, das Folgendes enthält oembed_thumbnail_play_button_color – Farbfeld.{"oembed_thumbnail_play_button_color":"#ffffff"}
placeholder_fieldsObjektObjekt, das Folgendes enthält:
  • placeholder_title: Textfeld.
  • placeholder_description: Textfeld.
{"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."}

Videoeinbettung (Landingpage)

Auf Seiten unterstützt.
{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
ParameterTypBeschreibungStandard
urlTextURL für Video. URLs von Vimeo und YouTube werden unterstützt."https://www.youtube.com/watch?v=X1Rr5BFO5rg"
is_full_widthBooleschLegt das Video auf volle Breite fest (true) oder legt Breite und Höhe manuell fest (false).true
max_widthZahlMaximale Breite (Pixel)800
max_heightZahlMaximale Höhe (Pixel)450
Wird auf Seiten, in Blogbeiträgen und auf Blog-Listing-Seiten unterstützt. Es ist ein verknüpfter WhatsApp-Kanal erforderlich.
{% module "whatsapp_link" path="@hubspot/whatsapp_link", label="whatsapp_link" %}
ParameterTypBeschreibungStandard
whatsapp_numberURLWählen Sie aus den mit dem Account verknüpften WhatsApp-Kanälen aus.
optin_textAuswahlDer Opt-in- und Opt-out-Text.
whatsapp_displayAuswahlWählen Sie aus, ob die Schaltfläche Text, ein WhatsApp-Symbol oder beides anzeigt. Die Auswahlmöglichkeiten umfassen:
  • text_and_icon
  • text
  • icon
text_and_icon
icon_positionAuswahlDie Position des Symbols auf der Schaltfläche. Die Auswahlmöglichkeiten umfassen left und right.left
button_textZeichenfolgeDer Text der Schaltfläche.Chat on WhatsApp
whatsapp_icon_titleZeichenfolgeDer Symboltext für Bildschirmleseprogramme.WhatsApp Icon