Letzte Änderung: 7. Oktober 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.
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" %}
Parameter | Typ | Beschreibung | Standard |
---|
select_blog | Blog | Der Blog, der für das Modul verwendet werden soll. | |
title | String | Titel für das Modul (umhüllt von einem h3-Tag) | "Subscribe Here!" |
response_message | Rich-Text | Die 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"
]
%}
Parameter | Typ | Beschreibung | Standard |
---|
layout | Auswahl | Der 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 |
columns | Zahl | Bei Verwendung des grid -Layouts wird die Anzahl der Beiträge pro Zeile angegeben. Kann 2 , 3 oder 4 sein. | 3 |
alternateImage | Boolesch | Wenn 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 |
fullImage | Boolesch | Wenn 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 |
displayForEachListItem | Array | Der 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' ] |
buttonText | Zeichenfolge | Der 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
select_blog | Blog | Wä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_type | Auswahl | Typ der Filterung der anzuzeigenden Links. Die Auswahlmöglichkeiten umfassen: | tag |
order_by | Auswahl | Sortierung für die Werte von Filter-Links. Die Auswahlmöglichkeiten umfassen: | post_count |
list_title | Text | Eine H3-Überschrift. | "Posts by Tag" |
max_links | Zahl | Anzahl der anzuzeigenden Filterlinks. Lassen Sie diese Angabe leer, um alle anzuzeigen. | 5 |
expand_link_text | Text | Text, 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.
{% module "post_listing" path="@hubspot/post_listing" %}
Parameter | Typ | Beschreibung | Standard |
---|
select_blog | Blog | Wä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_type | Auswahl | Der 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_title | Text | Eine H3-Überschrift. | "Recent Posts" |
max_links | Zahl | Maximale Anzahl an anzuzeigenden Beiträgen. | 5 |
Schaltfläche
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
{% module "button" path="@hubspot/button" %}
Parameter | Typ | Beschreibung | Standard |
---|
link | Link | Die 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_text | Text | Text, der auf der Schaltfläche angezeigt wird. | "Add a button link here" |
style | Objekt | 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" %}
Parameter | Typ | Beschreibung |
---|
guid | Zeichenfolge | GUID 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
height | Zahl | Pixel-(px)-Höhe der Trennlinie. | 1 |
width | Zahl | Breite der Trennlinie als Prozentsatz (%). | 50 |
color | Farbe | Farbe (Hex-Wert) und Deckkraft (Zahl) der Trennlinie. | { "color": "#000000", "opacity": 100 } |
line_type | Auswahl | Typ der Linie. Die Auswahlmöglichkeiten umfassen: | solid |
alignment | Auswahl | Horizontale Ausrichtung der Trennlinie. Die Auswahlmöglichkeiten umfassen: | center |
show_padding | Boolesch | Blendet die obere und untere Umrandung der Trennlinie ein/aus. | false |
padding | Zahl | Pixel-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.
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"
}
%}
Parameter | Typ | Beschreibung | Standard |
---|
title | Text | H3-Überschrift | |
form | Objekt | Formularobjekt, einschließlich:form_id : ID für das zu verwendende Formularresponse_type : was der Besucher nach dem Einsenden des Formulars sieht: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_overridden | Boolesch | E-Mail, an die anstelle der Standard-E-Mail eine Formularbenachrichtigung gesendet wird. | false |
notifications_override_email_addresses | E-Mail | Kommagetrennte Liste von E-Mails, an die gesendet werden soll, wenn notifications_are_overridden gleich true . | |
follow_up_type_simple | Boolesch | Das Senden einer Follow-up-E-Mail ist aktiviert. | false |
simple_email_for_live_id | Follow-up-E-Mail | ID der Follow-up-E-Mail. Verfügbar, wenn follow_up_type_simple gleich true . | |
sfdc_campaign | Salesforce-Kampagne | Wenn 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
value | Text | Text für die Überschrift. | "A clear and bold header" |
header_tag | Auswahl | Wä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" %}
Parameter | Typ | Beschreibung | Standard |
---|
name | Zeichenfolge | Der Name des Symbols. | "hubspot" |
purpose | Auswahl | Eine 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" |
title | Zeichenfolge | Eine Barrierefreiheitsoption, die dem Symbol einen Titel zuweist. | |
style | Zeichenfolge | Der Typ des Symbols. Kann einer der folgenden Werte sein: solid , regular , light , thin oder duotone . | "solid" |
unicode | ZeichenfolgeDer 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
img | Bild | Bildobjekt, das Folgendes enthält:src : Bild-URLalt : ALT-Text für Bildloading : Lazy-Loading-Optionen umfassen:width : px-Wertheight : 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 } |
link | Text | Optionaler Link für das Bild. | |
target | Boolesch | Ö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" %}
Parameter | Typ | Beschreibung | Standard |
---|
slides | Objekt | Objekt, das Informationen für jede Folie enthält. Objekt enthält:img : Bild-URL.link_url : URL, auf die die Folie verweisen sollhover_messages : Text, der das Bild überlagert, wenn Sie den Mauszeiger darüber bewegen.
| [ { "show_caption": false, "open_in_new_tab": false } ] |
display_mode | Auswahl | Anzeigemodus der Bildergalerie. Die Auswahlmöglichkeiten umfassen:standard : Standard-Schieberegler.thumbnail : Thumbnail-Navigator.lightbox : Lightbox-Galerie.
| standard |
lightboxRows | Zahl | Anzahl der Zeilen in der Lightbox-Galerie, wenn display_mode gleich lightbox . | 3 |
loop_slides | Boolesch | Ermöglicht das Durchlaufen der Folien in einer Schleife mit „Weiter“/“Zurück“, wenn display_mode gleich standard oder thumbnail . | true |
auto_advance | Boolesch | Wechselt automatisch zur nächsten Folie, wenn display_mode gleich standard oder thumbnail . | true |
num_seconds | Zahl | Zeitspanne (Sekunden) zwischen dem Wechsel zur nächsten Folie, wenn display_mode gleich standard oder thumbnail . | 5 |
show_pagination | Boolesch | Zeigt Navigationsschaltflächen an, wenn display_mode gleich standard oder thumbnail . | true |
sizing | Auswahl | Legt 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 |
transition | Auswahl | Folienübergangsstile, wenn display_mode gleich standard oder thumbnail . Die Auswahlmöglichkeiten umfassen:slide : Folienübergang.fade : Übergang mit Ausblenden.
| slide |
caption_position | Auswahl | Position 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
slides | Objekt | Objekt, 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_mode | Auswahl | Anzeigemodus der Bildergalerie. Die Auswahlmöglichkeiten umfassen:standard : Standard-Schieberegler.thumbnail : Thumbnail-Navigator.lightbox : Lightbox-Galerie.
| standard |
lightboxRows | Zahl | Anzahl der Zeilen in der Lightbox-Galerie, wenn display_mode gleich lightbox . | 3 |
loop_slides | Boolesch | Ermöglicht das Durchlaufen der Folien in einer Schleife mit „Weiter“/“Zurück“, wenn display_mode gleich standard oder thumbnail . | true |
auto_advance | Boolesch | Wechselt automatisch zur nächsten Folie, wenn display_mode gleich standard oder thumbnail . | true |
num_seconds | Zahl | Zeitspanne (Sekunden) zwischen dem Wechsel zur nächsten Folie, wenn display_mode gleich standard oder thumbnail . | 5 |
show_pagination | Boolesch | Zeigt Navigationsschaltflächen an, wenn display_mode gleich standard oder thumbnail . | true |
sizing | Auswahl | Legt 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 |
transition | Auswahl | Folienübergangsstile, wenn display_mode gleich standard oder thumbnail . Die Auswahlmöglichkeiten umfassen:slide : Folienübergang.fade : Übergang mit Ausblenden.
| slide |
caption_position | Auswahl | Position 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
}
}
%}
Parameter | Typ | Beschreibung |
---|
slides | Feldgruppe | Eine Feldgruppe mit den folgenden Feldern:img : Bild-URL.caption : Rich-Text für Bildbeschriftung.link_url : URL, zu der die Folie verlinkt.
|
slideshow_settings | Feldgruppe | Die 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ößeaspect_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_text | Feldgruppe | Die 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
display_mode | Auswahl | Die 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 |
Logo
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "logo" path="@hubspot/logo" %}
Parameter | Typ | Beschreibung | Standard |
---|
img | Bild | Bildobjekt, das Folgendes enthält:override_inherited_src : überschreibt das Standardlogo aus den Einstellungensrc : Bild-URLalt : ALT-Text für Logo
| { "override_inherited_src": false, "src": null, "alt": null } |
link | Text | Optionaler 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_tab | Boolesch | Öffnet Link in neuer Registerkarte. | false |
suppress_company_name | Boolesch | Blendet den Unternehmensnamen aus, wenn ein Bild nicht ausgewählt ist. | true |
heading_level | Auswahl | Wä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
}
}
%}
Parameter | Typ | Beschreibung |
---|
group_logos | Array | Ein Array, das ein Objekt für jedes Logo im Raster enthält. |
logo | Objekt | In 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-Textheight : 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.
|
styles | Array | Ein 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" %}
Parameter | Typ | Beschreibung |
---|
meeting | Meeting | Wählen Sie einen Meetinglink aus. |
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
%}
Parameter | Typ | Beschreibung | Standard |
---|
facebook_appid | Zeichenfolge | Ihre Facebook-App-ID. | |
facebook_enabled | Boolesch | Aktiviert die Schaltfläche für die Facebook-Anmeldung. facebook_appid ist erforderlich. | False |
google_clientid | Zeichenfolge | Ihre Google-Client-ID. | |
google_enabled | Boolesch | Aktiviert 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
id | Menü | ID des Menüs. | |
root_type | Auswahl | Erweiterter 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_levels | Auswahl | Gibt die Anzahl der untergeordneten Menüebenen an, auf die erweitert werden kann. Die Auswahlmöglichkeiten umfassen 1 bis 10 | 2 |
flow | Auswahl | Ausrichtung des Menüs. Die Auswahlmöglichkeiten umfassen: | horizontal |
flyouts | Boolesch | Aktiviert 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
submit_button_text | Text | Text, der auf der Einsende-Schaltfläche angezeigt wird. | "Submit" |
password_placeholder | Text | Platzhaltertext für das Passwortfeld. | "Password" |
bad_password_message | Rich-Text | Nachricht 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
payment | Zeichenfolge | Um 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_location | Zeichenfolge | Legt 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_text | Zeichenfolge | Legt den Text für die Checkout-Schaltfläche fest. | "Checkout" |
button_target | Auswahl | Gibt an, ob die Schaltfläche einen Zahlungslink von HubSpot oder einen externen Link verwendet. Die Auswahlmöglichkeiten umfassen: | "payment_link" |
button_link | Link | Wenn button_target auf custom_link festgelegt ist, wird mit dieser Option das Ziel des externen Links festgelegt. Folgende Linktypen werden unterstützt: | 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
}
%}
Parameter | Typ | Beschreibung |
---|
product | Produkt | Das anzuzeigende Produkt, angegeben durch die Produkt-ID. |
group_button | Feldgruppe | Standardmäß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_override | Objekt | In 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_name | Feldgruppe | Standardmäß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_description | Feldgruppe | Standardmäß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_image | Feldgruppe | Standardmäß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:
|
Angebots-Download
Wird in Angebotsvorlagen unterstützt.
{% module "download" path="@hubspot/quote_download" %}
Parameter | Typ | Beschreibung | Standard |
---|
button_text | Zeichenfolge | Der Text, der auf der Download-Schaltfläche angezeigt wird. | Download |
download_error | Zeichenfolge | Fehlermeldung, 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
heading_text | Zeichenfolge | Die Überschrift, die über dem Zahlungsabschnitt einer Angebotsvorlage angezeigt wird. | Payment |
heading_tag | Auswahl | Der Typ der Überschrift, die für die Anzeige von heading_text verwendet wird. Die Werte umfassen: h1 , h2 , h3 , h4 , h5 , h6 . | h3 |
checkout | Zeichenfolge | Der Text für die Zahlungsschaltfläche. | Pay now |
needs_signature | Zeichenfolge | Schaltflächentext, wenn eine Unterschrift erforderlich ist. | Payment can't be made because the quote isn't fully signed. |
checkout_error | Rich-Text | Nachricht, 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_error | Rich-Text | Nachricht, 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. |
paid | Zeichenfolge | Eine Statusanzeige für eine erfolgreiche Zahlung. | Paid |
payment_processing | Zeichenfolge | Eine 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:
Parameter | Typ | Beschreibung | Standard |
---|
pretext | Rich-Text | Erlä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_button | Zeichenfolge | Text, der auf der Verifizerungsschaltfläche angezeigt wird. | Verify to sign |
failure | Zeichenfolge | Hinweistext, der angezeigt wird, wenn die Unterschriftsinformationen nicht abgerufen werden können. | There was a problem retrieving the signature information. Please reload the page. |
verification_sent | Zeichenfolge | Eine Statusanzeige, die angezeigt wird, wenn die Verifizierungsanfrage erfolgreich an den Unterzeichner des Angebots gesendet wurde. | Verification sent |
signed | Zeichenfolge | Text, 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:
Parameter | Typ | Beschreibung | Standard |
---|
header | Rich-Text | Text, der am Anfang des Unterschriftsabschnitts angezeigt wird. | Signature |
signature | Zeichenfolge | Text, der neben dem Unterschriftsfeld angezeigt wird. | Signature |
date | Zeichenfolge | Text, der neben dem Datumsfeld angezeigt wird. | Date |
printed_name | Zeichenfolge | Text, der neben dem Feld für den gedruckten Namen angezeigt wird. | Printed name |
countersignature | Objekt | Ein 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
title | Text | Der Titel der Artikelspalte. | Column description |
use_additional_product_property | Boolesch | Zeigt ein Kontrollkästchen an, um Benutzern die Auswahl zusätzlicher Artikelspalten von den Produkteigenschaften zu ermöglichen. | False |
additional_product_properties | Auswahl | Eine 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_property | CRM-Objekteigenschaft | Wä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" %}
Parameter | Typ | Beschreibung | Standard |
---|
html | Rich-Text | HTML-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> |
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
{% module "rss_listing" path="@hubspot/rss_listing" %}
Parameter | Typ | Beschreibung | Standard |
---|
title | Text | Eine H3-Überschrift. | "Test" |
rss_feed_type | Auswahl | Typ des RSS-Feeds. Die Auswahlmöglichkeiten umfassen:blog – von HubSpot gehosteter Blog.external – ein externer RSS-Feed.
| blog |
rss_url | Text | RSS-URL, die verwendet werden soll, wenn rss_feed_type gleich external . | |
content_group_id | Blog | ID des zu verwendenden Blogs, wenn rss_feed_type gleich blog . | |
topic_id | Tag | (optional) ID des Tags, nach dem gefiltert werden soll, wenn rss_feed_type gleich blog . | |
number_of_items | Zahl | Maximale Anzahl an anzuzeigenden Beiträgen. | 5 |
include_featured_image | Boolesch | Fügt das Feature-Bild ein. | false |
show_author | Boolesch | Zeigt den Namen des Autors an. | true |
attribution_text | Text | Der Text, der einem Beitrag einen Autor zuschreibt. Wird angezeigt, wenn show_author gleich true ist. | "by" |
show_detail | Boolesch | Zeigt den Beitragszusammenfassungstext an. | true |
limit_to_chars | Zahl | Beschränkt die Länge des Zusammenfassungstextes, wenn show_detail gleich true ist. | 200 |
click_through_text | Text | Der Text, der am Ende der Zusammenfassung eines Beitrags für den Clickthrough-Link angezeigt wird, wenn show_detail gleich true ist. | "Read more" |
show_date | Boolesch | Zeigt das Veröffentlichungsdatum an. | true |
publish_date_format | Auswahl | Format 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_text | Text | Der 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"
}
%}
Parameter | Typ | Beschreibung | Standard |
---|
field_label | Text | Text des Labels für die Sucheingabe. | |
placeholder | Text | Platzhaltertext für das Eingabefeld. | "Search" |
include_search_button | Boolesch | Fügt eine Suchen-Schaltfläche ein. | false |
content_types | Objekt | Welche 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 } |
results | Objekt | Ein 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
display_featured_images | Boolesch | Zeigt 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
header | Text | Bereichs-Header-Content. | "A clear and bold header" |
heading_level | Auswahl | Überschriftenebene für den header . Die Auswahlmöglichkeiten umfassen h1 bis h6 . | h1 |
subheader | Text | Text 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
menu_tree | Einfaches Menü | „Einfaches Menü“-Objekt. | [] |
orientation | Auswahl | Ausrichtung des Menüs. Die Auswahlmöglichkeiten umfassen: | horizontal |
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" %}
Parameter | Typ | Beschreibung | Standard |
---|
link | Text | Der Ziel-Link für die im Editor hinzugefügte Social-Media-Seite. | |
open_in_new_window | Boolesch | Bei Festlegung auf false wird der Link in derselben Browser-Registerkarte geöffnet. | true |
is_podcast | Boolesch | Auf true festlegen, um ein Podcast-Symbol anstelle des Standard- oder benutzerdefinierten Symbols anzuzeigen. | false |
customize_alt_text | Boolesch | Standardmäß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-label | Zeichenfolge | Wenn 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_icon | Boolesch | Standardmäß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_icon | Symbol | Wenn 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. | |
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.
Parameter | Typ | Beschreibung | Standard |
---|
link | Text | Dies ist der Ziel-Link, der zum leichteren Teilen in Social-Media-Netzwerken gekürzt wird. | |
facebook | Objekt | Objekt, das Folgendes enthält:enabled : boolescher Wert zum Aktivieren von Social-Media-Elementcustom_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 }}" } |
twitter | Objekt | Objekt, das Folgendes enthält.enabled : boolescher Wert zum Aktivieren eines Social-Media-Elementscustom_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 }}” } |
linkedin | Objekt | Objekt, das Folgendes enthält:enabled : boolescher Wert zum Aktivieren von Social-Media-Elementcustom_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 }}" } |
pinterest | Objekt | Objekt, das Folgendes enthält:enabled : boolescher Wert zum Aktivieren von Social-Media-Elementcustom_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 } } |
email | Objekt | Objekt, das Folgendes enthält:enabled : boolescher Wert zum Aktivieren von Social-Media-Elementcustom_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
%}
Parameter | Typ | Beschreibung | Standard |
---|
tabs | Feldgruppe | Eine 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_height | Boolesch | Standardmäß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" %}
Parameter | Typ | Beschreibung | Standard |
---|
value | Text | Fü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" %}
Parameter | Typ | Beschreibung | Standard |
---|
video_type | Auswahl | Typ des Videos. Zu den Optionen gehören:embed : Einbettungscode aus einer externen Quellen.hubspot_video : von HubSpot gehostetes Video.
| embed |
hubspot_video | Videoplayer | Von HubSpot gehostetes Video. Wird verwendet, wenn video_type gleich hubspot_video . | |
embed_field | Einbettung | Unterstützt Einbettungstypen:oembed html : Einbettungscode für Video.
| |
oembed_thumbnail | Bild | Überschreibt oEmbed-Thumbnail-Bild, wenn video_type gleich embed und embed_field gleich oembed . | |
style_options | Objekt | Objekt, das Folgendes enthält oembed_thumbnail_play_button_color – Farbfeld. | {"oembed_thumbnail_play_button_color":"#ffffff"} |
placeholder_fields | Objekt | Objekt, 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" %}
Parameter | Typ | Beschreibung | Standard |
---|
url | Text | URL für Video. URLs von Vimeo und YouTube werden unterstützt. | "https://www.youtube.com/watch?v=X1Rr5BFO5rg" |
is_full_width | Boolesch | Legt das Video auf volle Breite fest (true ) oder legt Breite und Höhe manuell fest (false ). | true |
max_width | Zahl | Maximale Breite (Pixel) | 800 |
max_height | Zahl | Maximale Höhe (Pixel) | 450 |
WhatsApp-Link
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" %}
Parameter | Typ | Beschreibung | Standard |
---|
whatsapp_number | URL | Wählen Sie aus den mit dem Account verknüpften WhatsApp-Kanälen aus. | |
optin_text | Auswahl | Der Opt-in- und Opt-out-Text. | |
whatsapp_display | Auswahl | Wählen Sie aus, ob die Schaltfläche Text, ein WhatsApp-Symbol oder beides anzeigt. Die Auswahlmöglichkeiten umfassen: | text_and_icon |
icon_position | Auswahl | Die Position des Symbols auf der Schaltfläche. Die Auswahlmöglichkeiten umfassen left und right . | left |
button_text | Zeichenfolge | Der Text der Schaltfläche. | Chat on WhatsApp |
whatsapp_icon_title | Zeichenfolge | Der Symboltext für Bildschirmleseprogramme. | WhatsApp Icon |