HubL-Standard-Tags

Last updated:

Diese Seite ist ein umfassender Referenzleitfaden der Syntax und der verfügbaren Parameter für alle Standard-HubL-Tags, einschließlich der Tags für Systemseiten wie die E-Mail-Abonnement-Seite. Jedes der folgenden Tags enthält ein Beispiel für die grundlegende Syntax sowie ein Beispiel mit Parametern und Code-Ausgabe.

Wenn Sie Drag-&-Drop-Bereiche erstellen, erfahren Sie hier mehr über Drag- & -Drop-Bereich-Tags. Wenn Sie eine ältere Website betreiben, sollten Sie sich auch die Liste der veralteten HubL-Tags ansehen.

Für die meisten Tags auf dieser Seite gibt es Äquivalente in den Standardmodulen. Module können innerhalb von Drag-&-Drop-Bereichen und flexible Spalten verwendet werden, was sie leistungsfähiger und benutzerfreundlicher macht als die Tags, die Sie hier sehen.

Blog-Kommentare

Ein Blog-Kommentare-Tag rendert den Code zum Einbetten von Kommentaren in eine Blog-Vorlage. Dieser JavaScript-Einbettungscode lädt das Kommentarformular und die Kommentare entsprechend Ihrer Konfiguration in Ihren Website-Einstellungen.

Blog Comment Form module: {% blog_comments "blog_comments" overrideable=False, label="Blog Comments" %} Blog Comment Count module: {% blog_comments "blog_comments" %} Blog Comment listing for specific blog: {% blog_comments "default_blog_comments" select_blog="359485112" %}Blog Commment Form Output: <span id="hs_cos_wrapper_blog_comments" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_comments" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_comments"> <div class="section post-footer"> <div id="comments-listing" class="new-comments no-comments"></div> <div id="hs-comment-embed" style="display:none;"></div> <div id="comment-form" class="new-comments"> <form novalidate="" accept-charset="UTF-8" action="https://api.hubapi.com/comments/v3/comment?portalId=311600" enctype="multipart/form-data" id="hsForm_d30edada-82e4-4a69-aaf4-a9d0376f37e6" method="POST" class="hs-form stacked" data-form-id="d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-portal-id="311600" data-reactid=".hbspt-forms-0"> <div data-reactid=".hbspt-forms-0.0:$0"> <div class="hs_email field hs-form-field" data-reactid=".hbspt-forms-0.0:$0.$email"> <label class="" placeholder="Enter your Email" for="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$0.$email.0"> <span data-reactid=".hbspt-forms-0.0:$0.$email.0.0">Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$0.$email.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$0.$email.1"> </legend> <div class="input" data-reactid=".hbspt-forms-0.0:$0.$email.$email"> <input id="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="email" name="email" required="" placeholder="" value="" data-reactid=".hbspt-forms-0.0:$0.$email.$email.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$1"> <div class="hs_website field hs-form-field" data-reactid=".hbspt-forms-0.0:$1.$website"> <label class="" placeholder="Enter your Website" for="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$1.$website.0"> <span data-reactid=".hbspt-forms-0.0:$1.$website.0.0">Website</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$1.$website.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$1.$website.$website"> <input id="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="text" name="website" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$1.$website.$website.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$2"> <div class="hs_comment field hs-form-field" data-reactid=".hbspt-forms-0.0:$2.$comment"> <label class="" placeholder="Enter your Comment" for="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$2.$comment.0"> <span data-reactid=".hbspt-forms-0.0:$2.$comment.0.0">Comment</span> <span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$2.$comment.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$2.$comment.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment"> <textarea id="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" name="comment" required="" placeholder="" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment.0"></textarea> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$3"> <div class="hs_subscribe field hs-form-field" data-reactid=".hbspt-forms-0.0:$3.$subscribe"> <label class="" placeholder="Enter your Subscribe to follow-up comments for this post" for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$3.$subscribe.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.0.0"></span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$3.$subscribe.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe"> <ul class="inputs-list" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0"> <li class="hs-form-booleancheckbox" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0"> <label for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-form-booleancheckbox-display" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0"> <input id="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="checkbox" name="subscribe" value="true" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.1">Subscribe to follow-up comments for this post</span> </label> </li> </ul> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$4"> <div class="hs_lifecyclestage field hs-form-field" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage"> <label class="" placeholder="Enter your Lifecycle Stage" for="lifecyclestage-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0"> <span data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0.0">Lifecycle Stage</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage"> <input name="lifecyclestage" class="hs-input" type="hidden" value="subscriber" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage.0"> </div> </div> </div> <div class="hs_submit" data-reactid=".hbspt-forms-0.2"> <div class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.2.0"></div> <div class="actions" data-reactid=".hbspt-forms-0.2.1"> <input type="submit" value="Submit Comment" class="hs-button primary" data-reactid=".hbspt-forms-0.2.1.0"> </div> </div> <input name="hs_context" type="hidden" value="{&quot;rumScriptExecuteTime&quot;:1396.815,&quot;rumServiceResponseTime&quot;:7737.500000000001,&quot;rumFormRenderTime&quot;:187.17999999999938,&quot;rumTotalRenderTime&quot;:7738.14,&quot;rumTotalRequestTime&quot;:183.2549999999992,&quot;pageUrl&quot;:&quot;http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15?hs_preview=ALicr-ma-4312320350&quot;,&quot;pageTitle&quot;:&quot;HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview&quot;,&quot;source&quot;:&quot;FormsNext-static-1.390&quot;,&quot;isHostedOnHubspot&quot;:true,&quot;timestamp&quot;:1479135449193,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36&quot;,&quot;referrer&quot;:&quot;&quot;,&quot;hutk&quot;:&quot;a525e671c25f6b108d25e08c892e359e&quot;,&quot;originalEmbedContext&quot;:{&quot;portalId&quot;:&quot;311600&quot;,&quot;formId&quot;:&quot;d30edada-82e4-4a69-aaf4-a9d0376f37e6&quot;,&quot;target&quot;:&quot;#comment-form&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;css&quot;:&quot;.your-custom-css {background-color: #fe7722}&quot;,&quot;requiredCss&quot;:&quot;.my-custom-error-msgs {border-radius: 3px;}&quot;,&quot;submitButtonClass&quot;:&quot;hs-button primary&quot;},&quot;recentFieldsCookie&quot;:{},&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;boolCheckBoxFields&quot;:&quot;subscribe&quot;,&quot;dateFields&quot;:&quot;&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;smartFields&quot;:{},&quot;urlParams&quot;:{&quot;hs_preview&quot;:&quot;ALicr-ma-4312320350&quot;},&quot;formValidity&quot;:{},&quot;correlationId&quot;:&quot;55d71532-ab6b-4415-98f5-f3a16d7741c9&quot;,&quot;disableCookieSubmission&quot;:false}" data-reactid=".hbspt-forms-0.3"> <input type="hidden" id="id_portalId" name="portalId" value="311600"><input type="hidden" id="id_contentId" name="contentId" value="4312320350"> <input type="hidden" id="id_collectionId" name="collectionId" value="2224463151"> <input type="hidden" id="id_contentAuthorEmail" name="contentAuthorEmail" value="cstone@hubspot.com"><input type="hidden" id="id_contentAuthorName" name="contentAuthorName" value="Christopher Stone"> <input type="hidden" id="id_comment_verification_text" name="comment_verification_text" value="Your comment has been received."> <input type="hidden" id="id_contentTitle" name="contentTitle" value="HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview"> <input type="hidden" id="id_contentPermalink" name="contentPermalink" value="http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15"> <input type="hidden" id="id_contentCreatedAt" name="contentCreatedAt" value="1479135208000"> <input type="hidden" id="id_formGuid" name="formGuid" value="d30edada-82e4-4a69-aaf4-a9d0376f37e6"> </form> </div> </div> </span> Blog Comment Listing Module Output: (function ($) { var commentsEmbedContext = { portalId: 327485, collectionId: 359485112, contentId: 2684120609, target: '#comments-listing.new-comments', showComments: true, showForm: true, commentVerificationText: "Your comment has been received.", embedScriptEnv: "prod", apiEnv: "prod", contentTitle: "Post title", contentCreatedAt: "1427849160000", contentPermalink: "http:\/\/designers.hubspot.com\/blog\/post-name, contentAuthorEmail: "dhunt@hubspot.com", contentAuthorName: "David Hunt", captchaRequired: true, captchaKey: "6Lc3uMsSAAAAAMjk4NIvPQK9_-ZLk2wBokFCo5Qt", maxThreadDepth: 3, formId: "8d42bb92-241b-4894-b853-1d5f6553daa0" }; function loadComments() { if (window.hubspot && typeof window.hubspot.loadCommentsEmbed === 'function') { hubspot.loadCommentsEmbed(commentsEmbedContext.embedScriptEnv, function () { if (typeof window.hsEmbedComments === 'function') { window.hsEmbedComments(commentsEmbedContext); } }); } else { setTimeout(loadComments, 50); } } loadComments(); })(window.hsjQuery || jQuery);
ParameterTypeDescription Default
limit
Ganzzahl

Legt die maximale Anzahl von Kommentaren fest.

5000
select_blog
"default" oder Blog-ID

Gibt an, welcher Blog mit der Kommentareinbettung verknüpft ist. Dieser Parameter akzeptiert als Argumente entweder "default" oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). Wenn Sie Ihren Standard-Blog verwenden möchten, ist dieser Parameter nicht erforderlich.

default
skip_css
Boolesch

Wenn Sie diese Option auf True festlegen, wird das Laden des CSS für Blog-Kommentare verhindert. 

false
message
Zeichenfolge

Die Nachricht, die angezeigt wird, wenn keine Kommentare vorhanden sind. Standardmäßig ist diese Nachricht leer (es wird kein Text angezeigt).

""

Blog-Inhalt

Während Drag-&-Drop-Layouts ein Blog-Inhaltsmodul enthalten, werden diese Module nicht mit einem einzigen Tag erstellt. Sie verwenden stattdessen bedingte Logik, um zu definieren, wie ein Blog-Beitrag und ein Blog-Listing dargestellt werden sollen. Mehr über die Programmieren von Blog-Vorlagen erfahren Sie hier.

Blog-Beitragsfilter

Erstellt ein verlinktes Listing von Beiträgen nach Thema, Beiträgen nach Monat oder Beiträgen nach Autor.

Bitte beachten: dieses Modul kann nur in Blog-Beitragsvorlagen verwendet werden.

{% post_filter "post_filter" %} {% post_filter "posts_by_topic" select_blog="default", expand_link_text="see all", overrideable=False, list_title="Posts by Topic", max_links=5, filter_type="topic", label="Posts by Topic" %}<span id="hs_cos_wrapper_posts_by_topic" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_filter" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_filter"> <div class="block"> <h3>Posts by Topic</h3> <div class="widget-module"> <ul> <li><a href="http://www.hubspot.com/blog/topic/sales">Sales</a></li> <li><a href="http://www.hubspot.com/blog/topic/marketing">Marketing</a></li> <li><a href="http://www.hubspot.com/blog/topic/service">Service</a> </li> <li> <a href="http://www.hubspot.com/blog/topic/operations">Operations</a> </li> <li> <a href="http://www.hubspot.com/blog/topic/cms">CMS</a> </li> <li> <a href="http://www.hubspot.com/blog/topic/industry">Industry</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
select_blog
"default" oder Blog-ID

Wählt den zu verwendenden HubSpot-Blog aus. Dieser Parameter verwendet entweder eine Blog-ID oder einen "default"-Wert.

"default"
expand_link_text
Zeichenfolge

 Text-Link, der angezeigt werden soll, wenn mehr Beiträge als die max_links-Anzahl vorhanden sind. exclude-Parameter, um den Link wegzulassen.

"see all"
list_title
Zeichenfolge

Angezeigte Listentitel.

""
list_tag
Zeichenfolge

Legt das für die Liste verwendete Tag fest. Der Wert sollte im Allgemeinen "ul" oder "ol" sein.

"ul"
title_tag
Zeichenfolge

Legt das für den Listentitel verwendete Tag fest.

"h3"
max_links
Zahl

Maximale Anzahl an anzuzeigenden Filterwerten. Bei Weglassen des Parameters werden alle angezeigt.

5
filter_type
Aufzählung

Wählt die Art des Filters aus. Mögliche Werte sind "topic", "month" und "author".

"topic"

Listing des Blog-Beitrags

Fügt ein Listing der beliebtesten oder besten Beiträge hinzu.

Bitte beachten Sie: dieses Tag kann nur in Blog-Beitragsvorlagen verwendet werden. Der Inhalt des Tags wird asynchron auf der Client-Seite geladen. Wenn Sie also den Feed nach dem Laden bearbeiten möchten, müssen Sie eine globale JS-Funktion definieren, die diese Bearbeitung übernimmt. Verwenden Sie die hsPostListingComplete(feeds)-Funktion, wobei feeds der jQuery-Selektor für alle Feeds ist, die abgeschlossen wurden. Sie solltn das DOM-Objekt in dieser Funktion direkt bearbeiten.

{% post_listing "post_listing" %} {% post_listing "top_posts" select_blog="default", label="Recent Posts", overrideable=False, list_title="Recent Posts", listing_type="recent", max_links=5 %}<span id="hs_cos_wrapper_module_42751498763_top_posts" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_listing"> <div class="block"> <h3>Recent Posts</h3> <div class="widget-module"> <ul class="hs-hash-1630637453-1678475653429"> <li class="hs-postlisting-item"> <a href="https://blog.hubspot.com/marketing/product-category-marketing">9 Product Category Marketing Examples to Inspire Your Own</a> </li> <li class="hs-postlisting-item"> <a href="https://blog.hubspot.com/marketing/increasing-mobile-conversion-rate">Mobile Conversion Rate: What It Is and How To Increase It</a> </li> <li class="hs-postlisting-item"> <a href="https://blog.hubspot.com/blog/tabid/6307/bid/33401/14-real-life-examples-of-cta-copy-you-should-copy.aspx">14 Real-Life Examples of CTA Copy YOU Should Copy</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
select_blog
"default" oder Blog-ID

 Wählt den HubSpot-Blog aus, der für das Listing verwendet werden soll. Dieser Parameter verwendet entweder eine Blog-ID oder einen "default"-Wert.

"default"
list_title
Zeichenfolge

Angezeigte Listentitel.

""
list_tag
Zeichenfolge

Legt das für die Liste verwendete Tag fest. Der Wert sollte im Allgemeinen "ul" oder "ol" sein.

"ul"
title_tag
Zeichenfolge

Legt das für den Listentitel verwendete Tag fest.

"h3"
listing_type
Zeichenfolge

Listen Sie die Blog-Beiträge nach den neuesten oder beliebtesten in einem bestimmten Zeitraum auf. Mögliche Werte sind „recent“, „popular_all_time“, „popular_past_year“, „popular_past_six_months“ und „popular_past_month“.

"recent"
max_links
Zahl

 Maximale Anzahl an aufzulistenden Blog-Beiträgen.

5
include_featured_image
Boolesch

 Zeigt ein Feature-Bild zusammen mit dem Link zum Beitrag an.

False

Beiträge im Zusammenhang mit dem Blog

Fügt ein Listing von Blog-Beiträgen hinzu, die auf einer Reihe von Parametern basiert, die von Beiträgen verschiedener Blogs geteilt werden. Beiträge werden anhand ihrer Relevanz für die festgelegten Parameter ausgewählt. Ein Beispiel für die Verwendung des optionalen callback-Parameters finden Sie unter Erstellen eins Listingsmit verwandten Blog-Beiträgen mit dem HubL-Tag für verwandte Blog-Beiträge.

Bitte beachten Sie, dass dieses Tag kein editierbares Modul auf Seiten-/Beitragsebene erzeugt, sondern vollständig mit HubL konfiguriert wird.

{% related_blog_posts %} {% related_blog_posts limit=2, blog_ids="1,2", tags="Sales enablement,Marketing", blog_authors="John Smith,Frank Smith", path_prefixes="/business-blog", start_date="2018-04-10", end_date="2018-04-10", blog_post_override="2783035366" %}<span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""><!--related-blog-entries--></span> <div class="hs-related-blog-module feedreader_box"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""></span> <div class="hs-related-blog-item"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""></span> <div class="hs-related-blog-item-text"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""><a class="hs-related-blog-title" href="//www.hubspot.com/business-blog/marketing-is-fun"><span>Marketing is fun</span></a></span> <div class="hs-related-blog-byline">by <span class="hs-related-blog-author">John Smith</span> <span class="hs-related-blog-posted-at">posted on</span> <span class="hs-related-blog-date">June 3, 2018</span> </div> <div class="hs-related-blog-byline"> <p class="hs-related-blog-description">Learn how to make marketing fun!<a href="//www.hubspot.com/business-blog/marketing-is-fun">Read more</a></p> </div> <div class="hs-related-blog-byline"> <span class="hs-related-blog-tags">Tags: Marketing</span> </div> </div> </div> <div class="hs-related-blog-item hs-with-featured-image"> <div class="hs-related-blog-item-text"> <a class="hs-related-blog-title" href="//www.hubspot.com/business-blog/sales-is-fun"><span>Sales is fun</span></a> <div class="hs-related-blog-byline">by <span class="hs-related-blog-author">Frank Smith</span> <span class="hs-related-blog-posted-at">posted on</span> <span class="hs-related-blog-date">June 7, 2018</span> </div> <div class="hs-related-blog-byline"> <p class="hs-related-blog-description">Learn how to make sales fun!<a href="//www.hubspot.com/business-blog/sales-is-fun">Read more</a></p> </div> <div class="hs-related-blog-byline"> <span class="hs-related-blog-tags">Tags: Sales enablement</span> </div> </div> <div class="hs-related-blog-item-image-wrapper"><img alt="" class="hs-related-blog-featured-image" src="//www.hubspot.com/hubfs/business-blog/sales-is-fun.jpg"></div> </div> </div>
ParameterTypeDescription Default
blog_ids
Ganzzahl

Die ID(s) des/der Blogs, von dem/denen Beiträge aufgenommen werden soll(en). Lassen Sie diesen Parameter weg, um den Standard-Blog zu verwenden.

blog_post_ids
Zeichenfolge

Die ID(s) eines oder mehrerer Blog-Beiträge, die bei der Suche nach relevanten Blog-Beiträgen für die Auflistung verwendet werden soll(en) (durch Komma getrennt). Dieser Parameter sollte nur verwendet werden, wenn das Widget auf Seiten angezeigt wird, da es bei Blog-Beiträgen standardmäßig auf den Beitrag angewendet wird, in dem das Widget angezeigt wird.

blog_post_override
Zeichenfolge

Die ID(s) eines oder mehrerer Blog-Beiträge, die trotz aller anderen Parameterwerte und Filter immer in der zurückgegebenen Auflistung erscheinen soll(en) (durch Komma getrennt).

limit
Ganzzahl

 Die maximale Anzahl an aufzulistenden Blog-Beiträgen

3
tags
Zeichenfolge

Das/die Tag(s), das/die verwendet werden soll(en), um festzustellen, ob ein Beitrag relevant ist (durch Komma getrennt). Wenn ein Blog-Beitrag eines dieser Tags oder ein ähnliches Tag enthält, werden die Relevanz des Beitrags erhöht und damit sein Ranking im Listing verbessert.

tag_boost
Zahl

Erhöht die Gewichtung der Tags, die im tags-Parameter angegeben sind, um verwandte Beiträge zu generieren. Berücksichtigen Sie diesen Parameter, um Beiträge zu übernehmen, die in engerem Zusammenhang mit den derzeit angezeigten oder angegebenen Beiträgen stehen. Akzeptiert positive Zahlen.

start_date
Datum und die Uhrzeit

Frühestes Veröffentlichungsdatum.

end_date
Datum und die Uhrzeit

Letztes Veröffentlichungsdatum.

blog_authors
Zeichenfolge

 Der/die Name(n) der Autoren, von denen Beiträge aufgenommen werden sollen (durch Komma getrennt).

path_prefixes
Zeichenfolge

URL-Pfade oder Unterverzeichnisse, aus denen Beiträge aufgenommen werden sollen (durch Komma getrennt). Wenn ein Blog-Beitrag ein ähnliches Präfix in seinem Pfad hat, werden die Relevanz des Beitrags erhöht und damit sein Ranking im Listing verbessert.

callback
Zeichenfolge

Der Name einer JavaScript-Funktion, um zurückgegebene Blog-Beiträge darzustellen. Der Funktion wird ein Array von Blog-Beitragsobjekten übergeben, die formatiert werden sollen. Wenn weder der callback- noch der post_formatter-Parameter angegeben sind, erzeugt das Tag HTML in einem Standardformat.

none
post_formatter
Zeichenfolge

Der Name eines benutzerdefinierten Makros zum Rendern zurückgegebener Blog-Beiträge. Dem Makro werden drei Parameter übergeben, nämlich das zu formatierende Blog-Beitragsobjekt, die Anzahl der Blog-Beiträge in der Iteration und die Gesamtzahl der Blog-Beiträge in den Ergebnissen. Wenn nicht angegeben oder auf „Standard“ gesetzt, wird der integrierte Formatierer verwendet, um jeden Beitrag zu formatieren.

default
allow_any_language
Zeichenfolge

Wenn diese Option auf false festgelegt ist, werden nur Beiträge in der Sprache der Seite angezeigt, auf der das Tag verwendet wird. Wenn der Parameter auf true festgelegt ist, wird die Sprachbeschränkung ignoriert und alle zugehörigen Beiträge werden unabhängig von der Sprache der Seite übernommen.

False

Wir empfehlen dringend die Verwendung des Callback-Parameters anstelle von post_formatter, um die Ladegeschwindigkeit der Seite zu verbessern.

Social-Media-Sharing in Blogs

Bei Social-Media-Sharing in Blogs werden Teilen-Zähler in Ihren Blog-Beiträgen dargestellt (falls in den Inhaltseinstellungen aktiviert).

{% blog_social_sharing "blog_social_sharing" %} {% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}<span id="hs_cos_wrapper_blog_social_sharing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_social_sharing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_social_sharing"> <div class="hs-blog-social-share"> <ul class="hs-blog-social-share-list"> <li class="hs-blog-social-share-item hs-blog-social-share-item-twitter"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-url="http://designers.hubspot.com/blog" data-size="medium" data-text="">Tweet</a> </li> <li class="hs-blog-social-share-item hs-blog-social-share-item-linkedin"> <script type="IN/Share" data-url="http://designers.hubspot.com/blog" data-showzero="true" data-counter="right"></script> </li> <li class="hs-blog-social-share-item hs-blog-social-share-item-facebook"> <div class="fb-like" data-href="http://designers.hubspot.com/blog" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true" data-width="120"></div> </li> <li class="hs-blog-social-share-item hs-blog-social-share-item-google-plus"> <div class="g-plusone" data-size="medium" data-href="http://designers.hubspot.com/blog"></div> </li> </ul> </div> </span>
ParameterTypeDescription Default
select_blog
"default" oder Blog-ID

Gibt an, welcher Blog mit den Teilen-Zählern verknüpft ist. Dieser Parameter akzeptiert als Argumente entweder "default" oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). Wenn Sie Ihren Standard-Blog verwenden möchten, ist dieser Parameter nicht erforderlich.

default
downgrade_shared_url
Boolesch

Verwenden Sie HTTP in der an die sozialen Netzwerke gesendeten URL. Wird verwendet, um Zählungen beizubehalten, wenn Domains auf HTTPS umgestellt werden.

false

Abonnement

Ein Blog-Abonnement-Tag rendert das Blog-Abonnement-Formular für einen bestimmten Blog. Dieses Formular wird automatisch erstellt, wenn ein Blog in den Inhaltseinstellungen erstellt wird, und es gibt immer ein einziges Anmeldeformular pro Blog. Bitte beachten Sie, dass die Felder des Anmeldeformulars auf der Benutzeroberfläche des Formular-Editors konfiguriert werden.

{% blog_subscribe "blog_subscribe" %} {% blog_subscribe "subscribe_designers_blog" select_blog="default", title="Subscribe to the Designers Blog", response_message="Thanks for Subscribing!", label="Blog Email Subscription", overrideable=False %}<span id="hs_cos_wrapper_blog_subscription" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_subscribe"> <h3 id="hs_cos_wrapper_blog_subscription_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Subscribe to Designers Blog</h3> <div id="hs_form_target_blog_subscription"></div> <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> <script> hbspt.forms.create({ portalId: '327485', formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c', formInstanceId: '60', pageId: 2749976739, pageName: 'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies', redirectUrl: 'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription', css: '', target: '#hs_form_target_blog_subscription', formData: { cssClass: 'hs-form stacked' } }); </script> </span>
ParameterTypeDescription Default
select_blog
"default" oder Blog-ID

Wählt aus, welches Blog-Abonnementformular gerendert werden soll. Dieser Parameter akzeptiert als Argumente entweder "default" oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). Wenn Sie Ihren Standard-Blog verwenden möchten, ist dieser Parameter nicht erforderlich.

default
title
Zeichenfolge

Definiert den Text in einem h3-Tag-Titel oberhalb des Anmeldeformulars.

"Subscribe Here!"
no_title
Boolesch

Bei True wird das h3-Tag über dem Titel entfernt.

false
response_message
Zeichenfolge

Definiert die Inline-Dankesnachricht, die dargestellt wird, wenn ein Benutzer ein Formular einsendet. Unterstützt HTML.

"Thanks for Subscribing!"
edit_form_link
Zeichenfolge

Dieser Parameter erzeugt einen Link, über den sich der Benutzer zum entsprechenden Formular-Editor-Bildschirm durchklicken kann. Diese Option wird nur dann auf der Benutzeroberfläche des Editors angezeigt, wenn das Modul den Parameter overrideable=True hat.

Beispiel: Ersetzen Sie HubID und Formular-ID durch die Informationen aus der URL Ihres Standard-Blog-Abonnentenformulars: edit_form_link=" <ul>\n <li><a href="/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> ".

\n bricht den Code in eine neue Zeile um.

Boolesch

Ein boolesches Tag erstellt ein Kontrollkästchen auf der Benutzeroberfläche, das „true“ oder „false“ ausgibt. Zusätzlich zur Ausgabe des Wertes ist dieses Modul nützlich für die Definition einer bedingten Vorlagenlogik, wenn es mit dem Parameter export_to_template_context kombiniert wird. 

{% boolean "boolean" %} {% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}false
ParameterTypeDescription Default
value
Boolesch

Bestimmt, ob das Kontrollkästchen aktiviert oder deaktiviert ist.

False

Auswahl

Ein choice-Tag erstellt ein Dropdown-Feld auf der Benutzeroberfläche des Content-Editors, das den vom Benutzer ausgewählten Wert ausgibt. choice-Tags eignen sich hervorragend, um Ihren BenNutzern eine Reihe von voreingestellten Optionen zu bieten, z. B. den Seitentyp als Header zu drucken.

Zusätzlich zur Ausgabe des Auswahlwerts ist dieses Tag nützlich für die Definition einer bedingten Vorlagenlogik, wenn es mit dem Parameter export_to_template_context kombiniert wird. 

{% choice "choice" %} {% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %}<span id="hs_cos_wrapper_type_of_page" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_choice" style="" data-hs-cos-general-type="widget" data-hs-cos-type="choice"> About </span>
ParameterTypeDescription
value
Boolesch

Der Standardfeldwert für das Dropdown-Feld

choices
Sequenz

Eine durch Komma getrennte Liste von Werten oder eine Liste von Wert-Label-Paaren. Die Syntax für Wert-Label-Paare lautet wie folgt: choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]“. Der Editor zeigt das Label an, während er den Wert auf der Seite ausgibt.

Farbe

Das color-Tag erzeugt eine Farbauswahl auf der Benutzeroberfläche des Seiten-Editors, die einen HEX-Farbwert in einer Vorlage ausgibt. Bitte beachten Sie, dass dieses Modul nur in Vorlagen und nicht in CSS-Dateien verwendet werden kann. Wenn Sie dieses Tag in einem <style> oder Inline-CSS verwenden, sollten Sie den no_wrapper=True-Parameter verwenden, um den <span>-Wrapper zu entfernen.

{% color "color" %} {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}#000000
ParameterTypeDescription
color
Zeichenfolge

Ein Standard-HEX-Farbwert für die Farbauswahl

CTA

Ein Call-to-Action- oder CTA-Tag ermöglicht es Benutzern, eine HubSpot-Call-to-Action-Schaltfläche zu einem vordefinierten Bereich einer Seite hinzuzufügen.

{% cta "cta" %} {% cta "my_cta" label="Select a CTA", guid="ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", image_src="https://no-cache.hubspot.com/cta/default/53/c7335b66-a0d4-4d19-82eb-75e1626d02d0.png" %}<span id="hs_cos_wrapper_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_cta" style="" data-hs-cos-general-type="widget" data-hs-cos-type="cta"> <!--HubSpot Call-to-Action Code --> <span class="hs-cta-wrapper" id="hs-cta-wrapper-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"> <span class="hs-cta-node hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" id="hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" style="visibility: visible;"> <a id="cta_button_158015_19a9097a-8dff-4181-b8f7-955a47f29826" class="cta_button " href="//cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=19a9097a-8dff-4181-b8f7-955a47f29826&placement_guid=ccd39b7c-ae18-4c4e-98ee-547069bfbc5b&portal_id=158015&redirect_url=APefjpFSOqhysLBE-Yye5WFoP82Swxb2PVWpfI3VxlUjuOCHfiVMcxKic3yM28vuwu9UB8_Jyhk6DGRCEN63hKqQOMtMTGmQZ1UNMK3LtNx0sRrAfQQYna2BfZ9RmgQOs8sKO_PcKOP6G26L5wQ5vdcXXOiMCxFPJxzPzUCcl474iiHKbEo5H8LVtZf6e140VOSGJ37NTpxCcPHLDvH9iFaT6mR0BnKzFReaX0FXBj7Lx2rFLVCZcIC0bdaFEGI1uKOJBMNT9RDtEzeJzUHzFYN0b34uv-ZR4w&hsutk=683eeb5b499fdfdf469646f0014603b4&utm_referrer=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables%3Fhs_preview%3D159bC1Cj-2863569740&canon=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables" style="" cta_dest_link="http://www.hubspot.com/free-trial" title="Start a HubSpot trial"> Start a HubSpot trial </a> </span> <script charset="utf-8" src="//js.hscta.net/cta/current.js"></script> <script type="text/javascript"> hbspt.cta.load(158015, 'ccd39b7c-ae18-4c4e-98ee-547069bfbc5b'); </script> </span> <!-- end HubSpot Call-to-Action Code --> </span>
ParameterTypeDescription
embed_code
Zeichenfolge

Der Einbettungscode für den CTA. \n erzeugt Zeilenumbrüche.

full_html
Zeichenfolge

Der Einbettungscode für den CTA (wie embed_code). \n erzeugt Zeilenumbrüche.

image_src
Zeichenfolge

Bildquellen-URL, die das Vorschaubild im Content-Editor definiert.

image_editor
Zeichenfolge

Markup für die Vorschau im Bild-Editor

guid
Zeichenfolge

Die eindeutige ID-Nummer des CTA. Diese ID-Nummer ist in der URL des Bildschirms „Details“ eines bestimmten CTA verfügbar. Mit diesem Parameter wird festgelegt, welcher CTA standardmäßig angezeigt werden soll.

image_html
Zeichenfolge

CTA-Bild-HTML ohne das CTA-Skript.*

image_email
Zeichenfolge

E-Mail-freundliche Version des CTA-Codes.*

*Diese Parameter sind hier zwar der Vollständigkeit halber aufgeführt, aber der von HubSpot generierte Code, mit dem sie ausgefüllt werden, ist sehr spezifisch. Wenn ein Standard-CTA ausgewählt werden muss, sollten Sie nicht versuchen, die CTA-Parameter von Grund auf neu zu entwickeln, sondern den CTA in einem Vorlagenlayout einrichten und dann in eine Datei klonen. Sie können dann das HubL-CTA-Modul des CTA mit allen korrekt festgelegten Parametern für Sie kopieren.

Es gibt auch eine CTA-Funktion, die einen CTA von der ID generiert.

Benutzerdefinierter HTML-Code

Ein benutzerdefiniertes HTML-Modul ermöglicht die Eingabe von unformatiertem HTML in den Content-Editor. Wenn Sie dem Tag umfangreichen Standard-HTML hinzufügen müssen, sollten Sie Block-Syntax verwenden.

{% raw_html "raw_html" %} {% raw_html "my_custom_html_module" label="Enter HTML here" value="<div>My HTML Block</div>" %} Block Syntax Example: {% widget_block raw_html "my_custom_html_module" overrideable=True, label="My custom HTML module" %} {% widget_attribute "value" %} <div>Default HTML block</div> {% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_my_custom_html_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html"> <div>My HTML block</div> </span>
ParameterTypeDescription
value
Zeichenfolge

Legt den Standard-Content-HTML des Moduls fest.

Benutzerdefinierte Module

Mithilfe von benutzerdefinierten Modulen können HubSpot-Designer eine benutzerdefinierte Gruppe von bearbeitbaren Inhaltsobjekten erstellen, die in Vorlagen und Seiten im CMS von HubSpot verwendet werden können, während Marketingexperten den spezifischen Inhalt, der in diesen Modulen angezeigt wird, seitenweise steuern können. Weitere Informationen zu benutzerdefinierten Module und ihre vereinfachten HubL-Syntax finden Sie hier.

Benutzerdefinierte Module müssen im Editor für benutzerdefinierte Module erstellt werden, sie können jedoch in Code-Vorlagen und HubL-Module einbezogen werden. In der rechten Seitenleiste des Editors für benutzerdefinierte Module wird unter „Vorlagenverwendung“ ein „Verwendungs-Snippet“ angezeigt.

Benutzerdefinierte Module benötigen die ID des Moduls als Zeichenfolge sowie einen path-Parameter, um anzugeben, welches Modul geladen werden soll. Das Snippet enthält auch einen label-Parameter. Siehe die nachstehende Syntax:

{% module "module_15677217712485" path="/Custom/Test custom module" %} {% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}<div id="hs_cos_wrapper_module_15677217712485" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">content!</div> <style> @import "//cdn2.hubspotqa.net/qa/hub/126/file-613025667-css/custom_widget_example.css" </style> <div> <img class="persons-photo" src="//cdn2.hubspotqa.net/qa/hub/124/file-1360297556-jpeg/dharmesh.jpeg" alt="dharmesh.jpeg"> <div> <img class="company-logo with-background" src="//cdn2.hubspotqa.net/qa/hub/124/file-221882251-png/HubSpot_Logo_2x.png" width="60px" height="inherit" alt="HubSpot_Logo_2x.png"> </div> </div> <div> <p class="quote"> <span class="quotation-mark"><b>" </b></span>The Content Optimization System matches content with context to create a highly personalized, relevant and meaningful customer experience. <span class="quotation-mark"><b>" </b></span> </p> </div> <div class="name-and-company"> <span><b>Dharmesh Shah,</b></span> <span>HubSpot</span> </div>
ParameterTypeDescription
module_id
Zeichenfolge

Die ID des zu rendernden Moduls.

path
Zeichenfolge

Der Pfad des zu rendernden Moduls. Führender Schrägstrich für einen absoluten Pfad, ansonsten ist der Pfad relativ zur Vorlage. Verweisen Sie auf HubSpot-Standardmodule mit Pfaden, die ihren HubL-Tags entsprechen, wie @hubspot/rich_text, @hubspot/linked_image usw.

Editor-Platzhalter

Beim Erstellen eines Moduls können Sie entweder Standardinhalte zu Ihren Feldern hinzufügen oder ein editor_placeholder-HubL-Tag in die HTML + HubL-Datei einfügen, um Platzhalterinhalte zu rendern. Dieser Tag stellt das Symbol und den Namen des Moduls als leere Platzhalter im Editor dar.

module-placeholder-content0

Dieses Tag kann nützlich sein, wenn das Modul keinen Standard-Content hat oder benötigt, oder um die Modulerstellung zu optimieren.

Um einen Platzhalter zu einem benutzerdefinierten Modul hinzuzufügen, können Sie eine if-Anweisung in die HTML + HubL-Datei einfügen, um den Platzhalter zu rendern, wenn kein Inhalt ausgewählt ist. Beispiel:

{% if module.cta_field.name %} {% cta guid="{{ module.cta_field }}" %} {% elif is_in_editor %} {% editor_placeholder %} {% endif %}

Sie können zwar nicht die Stile des Platzhalters bearbeiten, aber die folgenden Eigenschaften zur meta.json-Datei des Moduls hinzufügen, um den Inhalt anzupassen:

ParameterTypeDescription
show_module_icon
Boolesch

Ob das Symbol des Moduls angezeigt werden soll.

title
Zeichenfolge

Der Titel, der im Platzhalter erscheint.

description
Zeichenfolge

Die Beschreibung, die im Platzhalter erscheint.

Ihre meta.json-Datei könnte zum Beispiel wie folgt aussehen:

// Module meta.json { "global" : false, "host_template_types" : [ "PAGE" ], "module_id" : 62170380654, "is_available_for_new_content" : true, "placeholder": { "show_module_icon": true, "title": "Call to action", "description": "Select a CTA" } }

Flexible Spalte

Flexible Spalten sind vertikale Spalten in einer Vorlage, mit denen Content-Autoren mithilfe des Content-Editors Module in die Seite einfügen und entfernen können. Wenn Sie eine flexible Spalte mit HubL programmieren, können Sie andere HubL-Module so einbinden, dass sie standardmäßig in der flexiblen Spalte erscheinen. Das nachstehende Code-Beispiel zeigt die grundlegende Syntax und ein Beispiel für eine flexible Spalte mit einem Rich-Text- und Formularmodul als Standard-Content.

Bitte beachten Sie, dass flexible Spalten nur zu Seitenvorlagen hinzugefügt werden können, nicht zu Blog- oder E-Mail-Vorlagen. Module können keine flexiblen Spalten enthalten, aber sie können stattdessen wiederholbare Felder und Gruppen enthalten, die eine ähnliche Funktionalität bieten. 

{% widget_container "my_flexible_column" label="My flex column"%} {% module "rich_text" path="@hubspot/rich_text" %} {% module "linked_image" path="@hubspot/linked_image" %} {% end_widget_container %}<span id="hs_cos_wrapper_my_flexible_column" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_rich_text" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_rich_text_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're <a href="#">offering</a>, 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.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul></span></div> <div id="hs_cos_wrapper_linked_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <span id="hs_cos_wrapper_linked_image_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"><img src="https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png" class="hs-image-widget " style="width:200px;border-width:0px;border:0px;" width="200" alt="placeholder_200x200" title="placeholder_200x200"></span> </div></span>

Bitte beachten: Wenn Sie dieses Tag verwenden, muss das label dem name-Wert folgen, damit die flexible Spalte im Content-Editor funktioniert. Die folgende Syntax ist beispielsweise ungültig:

[% widget_container label="My label" "my_flexible_column" %}

Formular

Ermöglicht Benutzern die Auswahl eines HubSpot-Formulars, das sie ihrer Seite hinzufügen können.

{% form "form" %} {% form "my_form" form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial" %} Block Syntax Example: {% widget_block form "my_form" form_follow_ups_follow_up_type="", response_redirect_id=306590405, form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial", notifications_are_overridden=True, sfdc_campaign="", response_message="Thanks for submitting the form.", response_response_type="redirect", response_redirect_url="", overrideable=True, gotowebinar_webinar_key="", response_redirect_name="Homepage (http://www.hubspot.com/)", label="Form", response={message="Thank you for submitting the form.", redirect_url=""} %} {% widget_attribute "notifications_override_email_addresses" is_json=True %}["noreply@hubspot.com"]{% end_widget_attribute %} {% end_widget_block %}<div id="hs_cos_wrapper_my_form" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"> <h3 id="hs_cos_wrapper_module_13885064832664947_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Free Trial</h3> <div id="hs_form_target_module_13885064832664947"> <form accept-charset="UTF-8" enctype="multipart/form-data" id="hsForm_08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" class="hs-form stacked hs-custom-form" action="https://forms.hubspot.com/uploads/form/v2/158015/08bd9f0d-3be9-41c2-93b6-231a3a71b143" method="POST" novalidate="novalidate"> <div class="hs_lastname field hs-form-field"> <label placeholder="Enter your Last Name" for="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Last Name</label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" id="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="lastname" value="" placeholder=""> </div> </div> <div class="hs_firstname field hs-form-field"> <label placeholder="Enter your First Name" for="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">First Name</label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" id="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="firstname" value="" placeholder=""> </div> </div> <div class="hs_email field hs-form-field"> <label placeholder="Enter your Email" for="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Email<span class="hs-form-required"> * </span></label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="email" required="required" id="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="email" value="" placeholder=""> </div> </div> <div class="hs_submit"> <div class="hs-field-desc" style="display: none;"></div> <div class="actions"> <input class="hs-button primary large" type="submit" value="Submit"> </div> </div> </form> </div> <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> <script> hbspt.forms.create({ portalId: '158015', formId: '08bd9f0d-3be9-41c2-93b6-231a3a71b143', formInstanceId: '6756', pageId: 1, redirectUrl: "http:\/\/www.davidjosephhunt.com\/404", deactivateSmartForm: true, css: '', target: '#hs_form_target_module_13885064832664947', contentType: "landing-page", formData: { cssClass: 'hs-form stacked hs-custom-form' } }); </script> </div>
ParameterTypeDescription Default
form_key
Zeichenfolge

Gibt eine eindeutige ID für das Formular auf Seitenebene an.

form_to_use
Zeichenfolge

Gibt an, welches Formular standardmäßig geladen werden soll, basierend auf der Formular-ID. Diese ID ist in der URL des Formular-Editors eines jeden Formulars verfügbar.

title
Zeichenfolge

Füllt ein h3-Header-Tag über dem Formular aus.

no_title
Boolesch

 Bei True wird das h3-Tag über dem Titel entfernt.

False
form_follow_ups_follow_up_type
Aufzählung

Legt Folgeaktionen fest, z. B. das Aufnehmen eines Kontakts in einen Workflow oder das Senden einer einfachen Follow-up-E-Mail. Mögliche Werte sind: no_action, simple, und automation.

simple_email_for_live_id
Zahl

Gibt die ID der einfachen Follow-up-E-Mail für die Live-Seite an.

simple_email_for_buffer_id
Zahl

Gibt die ID der einfachen Follow-up-E-Mail für die automatisch gespeicherte Version einer Seite an.

follow_up_type_simple
Boolesch

Wenn true, wird eine einfache Follow-up-E-Mail aktiviert. Alternative zu form_follow_ups_follow_up_type.

follow_up_type_automation
Boolesch

Wenn true, werden Einsendungen in einen Workflow aufgenommen. Alternative zu form_follow_ups_follow_up_type.

simple_email_campaign_id
Zahl

Gibt die ID der einfachen Follow-up-E-Mail an. Alternative zu simple_email_for_live_id.

form_follow_ups_workflow_id
Zahl

Gibt die ID des Workflows an, in den Einsendungen aufgenommen werden sollen.

response_redirect_url
Zeichenfolge

Bei einer Weiterleitung zu einer externen Seite gibt dieser Parameter die URL an, zu der weitergeleitet werden soll.

response_redirect_id
Zahl

Bei einer Weiterleitung zu einer von HubSpot gehosteten Seite gibt dieser Parameter die Seiten-ID dieser Seite an. Die Seiten-ID ist in der URL des Seiten-Editors der einzelnen Seiten verfügbar.

response_response_type
Aufzählung

Legt fest, ob zu einer anderen Seite weitergeleitet oder eine Inline-Dankesnachricht bei der Einsendung angezeigt werden soll. Der Wert dieses Parameters sollte entweder "redirect" oder "inline" sein.

inline
response_message
Zeichenfolge

Legt eine Inline-Danksagung fest Dieser Parameter unterstützt HTML.

notifications_are_overridden
Boolesch

Bei True sendet das Formular Benachrichtigungen an die angegebenen E-Mail-Adressen, die im notifications_override_email_addresses-Paramater
anstelle der Standardwerte des Formulars ausgewählt sind.

False
notifications_override_guid_buffer
Zeichenfolge

ID der Überschreibungseinstellungen in der automatisch gespeicherten Version der Seite.

notifications_override_guid
Zeichenfolge

ID der Überschreibungseinstellungen in der Live-Version der Seite.

notifications_override_email_addresses
JSON

Block-Syntax unterstützt eine JSON-Liste von E-Mail-Empfängern, die bei der Einsendung des Formulars benachrichtigt werden sollen. Diese E-Mail-Adressen haben Vorrang vor den Einstellungen für E-Mail-Benachrichtigungen, die im Formular festgelegt sind.

gotowebinar_webinar_key
Zeichenfolge

Gibt das GoToWebinar-Webinar an, für das Kontakte, die das Formular einsenden, registriert werden sollen. Nur verfügbar für Portale, die die GoToWebinar-Integration verwenden.

sfdc_campaign
Zeichenfolge

Gibt die Salesforce-Kampagne an, in die Kontakte, die das Formular einsenden, aufgenommen werden sollen. Der Wert dieses Parameters sollte die ID der SFDC-Kampagne sein und ist nur für Portale verfügbar, die mit Salesforce integriert sind.

Fußzeile

Rendert Copyright-Informationen mit dem Jahr und Unternehmensnamenn, das bzw. der in den Inhaltseinstellungen (E-Mail > Informationen in der Fußzeile) angegeben wurden.

{% page_footer "page_footer" %}<span id="hs_cos_wrapper_page_footer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_page_footer" style="" data-hs-cos-general-type="widget" data-hs-cos-type="page_footer"> <footer> <span class="hs-footer-company-copyright">© 2020 HubSpot</span> </footer> </span>

Galerie

Erzeugt ein HubSpot-Galerie-Tag. Dieses Galerie-Tag basiert auf Slick. Sie können zwar ein Galeriemodul mit der HubL-Standardsyntax erstellen, müssen jedoch die Block-Syntax verwenden, wenn Sie Standardfolien mit HubL vordefinieren möchten. Beide Methoden sind unten dargestellt. Galeriebilder werden mithilfe von JavaScript verzögert geladen.

{% gallery "crm_gallery" %} <-- Block syntax --> {% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5 %} {% widget_attribute "slides" is_json=True %} [{ "caption": "CRM Contacts App", "show_caption": true, "link_url": "http://www.hubspot.com/crm", "alt_text": "Screenshot of CRM Contacts", "img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240", "open_in_new_tab": true }, { "caption": "HubSpot CRM Contact Profile", "show_caption": true, "link_url": "http://www.hubspot.com/", "alt_text": "HubSpot CRM Contact Profile", "img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240", "open_in_new_tab": true }] {% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_crm_gallery" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_gallery" style="" data-hs-cos-general-type="widget" data-hs-cos-type="gallery"> <div id="hs_cos_flex_gallery_crm_gallery" class="hs_cos_flex-gallery flex-gallery-main gallery-mode-gallery"> <div class="hs_cos_flex-viewport" style="overflow: hidden; position: relative;"> <ul class="hs_cos_flex-slides hs_cos_flex-slides-main " style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);"> <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a> <div class="caption"> HubSpot CRM Contact Profile </div> </li> <li class="hs_cos_flex-slide-main hs_cos_flex-active-slide" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a> <div class="caption"> CRM Contacts App </div> </li> <li class="hs_cos_flex-slide-main" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a> <div class="caption"> HubSpot CRM Contact Profile </div> </li> <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a> <div class="caption"> CRM Contacts App </div> </li> </ul> </div> <ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging"> <li><a class="hs_cos_flex-active">1</a></li> <li><a class="">2</a></li> </ol> <ul class="hs_cos_flex-direction-nav"> <li><a class="hs_cos_flex-prev" href="#">Previous</a></li> <li><a class="hs_cos_flex-next" href="#">Next</a></li> </ul> </div> <script> window.hsSliderConfig = window.hsSliderConfig || {}; window.hsSliderConfig['crm_gallery'] = { mode: 'gallery', mainConfig: { "animationLoop": true, "direction": "horizontal", "slideshowSpeed": 5000.0, "controlNav": true, "smoothHeight": false, "namespace": "hs_cos_flex-", "slideshow": true, "selector": ".hs_cos_flex-slides > li", "animation": "slide" } }; </script>
ParameterTypeDescription Default
slides
JSON

Eine JSON-Liste mit der Standardbeschriftung, der Link-URL, dem ALT-Text, der Bildquelle und der Angabe, ob das Bild in einer neuen Registerkarte geöffnet werden soll. Siehe Block-Syntax oben.

loop_slides
Boolesch

Wenn True, werden die Folien in einer Schleife durchlaufen.

True
num_seconds
Zahl

Zeit in Sekunden für die Pause zwischen den Folien.

5
show_pagination
Boolesch

Stellt Schaltflächen unter dem Schieberegler bereit, um zwischen den Folien zu navigieren.

True
sizing
Aufzählung

Bestimmt, ob der Schieberegler seine Größe in Abhängigkeit von der Höhe der Folien ändert. Mögliche Werte sind: „static“ oder „resize“.

"static"
auto_advance
Boolesch

Die Folien werden nach der in num_seconds angegebenen Zeit automatisch weitergeschaltet.

False
transition
Aufzählung

Legt die Art des Folienübergangs fest. Mögliche Werte sind: „fade“ oder „slide“.

"slide"
caption_position
Aufzählung

Beeinflusst die Positionierung der Beschriftung auf oder unter der Folie. Mögliche Werte sind „below“ oder „superimpose“.

"below"
display_mode
Aufzählung

Legt fest, wie die Bildergalerie angezeigt werden soll. Mögliche Werte sind: „standard", „lightbox", „thumbnail“.

"standard"
lightboxRows
Zahl

Wenn „display_mode“ auf „lightbox“ festgelegt ist, steuert dieser Parameter die Anzahl der in der Lightbox angezeigten Zeilen.

3

Erzeugt ein Header-Modul, das Text als h1-h6-Tag darstellt.

{% header "header" %} {% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}<span id="hs_cos_wrapper_my_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="header"> <h1>A clear and bold header</h1> </span>
ParameterTypeDescription Default
header_tag
Zeichenfolge

Wählen Sie das zu rendernde Header-Tag aus. Mögliche Werte sind: h1, h2, h3, h4, h5, h6.

h1
value
Zeichenfolge

Rendert Standardtext innerhalb des Überschriftenmoduls.

"A clear bold header"

Symbol

Fügt ein icon-Tag hinzu, mit dem die Benutzer ein Symbol zur Verwendung auswählen können. Unterstützte Symbolsätze sind FontAwesome 5.0.10, 5.14.0 und 6.4.2.

Dieses Tag kann nicht in Modulen verwendet werden, die für E-Mail aktiviert sind.

{% icon name="Accessible Icon" style="REGULAR" unicode="f368" icon_set="fontawesome-5.14.0" purpose="decorative" title="Accessible Icon" %}<span id="hs_cos_wrapper_module_42549274798_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_icon" style="" data-hs-cos-general-type="widget" data-hs-cos-type="icon"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"> <g id="layer1"> <path d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"></path> </g> </svg> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
name
Zeichenfolge

Name des Symbols.

style
Zeichenfolge

Stil des Symbols. Mögliche Werte: REGULAR oder SOLID

REGULAR
unicode
Zeichenfolge

Die Unicode-Zeichendarstellung des Symbols.

icon_set
Zeichenfolge

Der zu verwendende FontAwesome-Symbolsatz. Mögliche Werte sind:

  • fontawesome-5.14.0 
  • fontawesome-5.0.10
  • fontawesome-6.4.2
purpose
Zeichenfolge

Der Zweck des Symbols, das für die Barrierefreiheit verwendet wird. Mögliche Werte sind decorative oder semantic. Wenn es auf decorative festgelegt ist, wird dem Symbol ein zusätzliches aria-hidden="true"-Attribut hinzugefügt.

decorative
title
Zeichenfolge

Das title-Element der svg des Symbols, zusammen mit einem labelledby-Attribut, das auf den Titel verweist.

Bild

Erstellt ein Bild-Tag (img), mit dem Benutzer ein Bild aus dem Content-Editor auswählen können. Wenn Sie möchten, dass das Bild mit einer Ziel-URL verknüpft wird, sollten Sie linked_image unten verwenden.

{% image "image" %} {% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}<span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image"> <img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan"> </span>
ParameterTypeDescription Default
alt
Zeichenfolge

Legt den Standard-ALT-Text für das Bild fest.

src
Zeichenfolge

Füllt das src-Attribut des img-Tags aus.

width
Zahl

Legt das width-Attribut des img-Tags fest.

The width of the image
height
Zahl

Legt eine min-height in einem style-Attribut des img-Tags nur für E-Mail-Vorlagen fest.

The height of the image
hspace
Zahl

Legt das hspace-Attribut des img-Tags fest.

align
Zeichenfolge

Legt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“.

style
Zeichenfolge

Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style="border:1px solid blue; margin:10px"

loading
Zeichenfolge

Steuert das loading-Attribut des img-Elements. Wird für browserbasiertes Lazy Loading verwendet.

Bildquelle

Ein Bild-SRC-Modul erstellt eine Bildauswahl im Content-Editor, aber anstatt ein img-Tag auszugeben, wird die URL des Bildes dargestellt. Dieses Tag wird in der Regel mit dem no_wrapper=True-Parameter verwendet, sodass das Bild src zu Inline-CSS oder anderem Markup hinzugefügt werden kann. Eine Alternative zur Verwendung dieses Tags ist die Verwendung des export_to_template_context-Parameters.

{% image_src "image_src" %} {% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
ParameterTypeDescription Default
src
Zeichenfolge

 Gibt die Standard-URL-Bildquelle an.

Sprachumschaltung

Fügt ein Globus-Symbol mit Links zu den übersetzten Versionen einer bestimmten CMS-Seite hinzu. Erfahren Sie in diesem Artikel mehr über mehrsprachige Inhalte.

{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}<span id="hs_cos_wrapper_module_1487954976079503" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_language_switcher" style="" data-hs-cos-general-type="widget" data-hs-cos-type="language_switcher"> <div class="lang_switcher_class"> <div class="globe_class"> <ul class="lang_list_class"> <li> <a class="lang_switcher_link" href="http://www.hubspot.com">English</a> </li> <li> <a class="lang_switcher_link" href="http://www.hubspot.com/es">Spanish</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
display_mode
Aufzählung

Die Sprache des Textes in der Sprachumschaltung. Die Werte sind:

  • Pagelang bedeutet, dass die Namen der Sprachen in der Sprache der Seite angezeigt werden, auf der sich der Umschalter befindet.
  • Localized bedeutet, dass der Name der jeweiligen Sprache in dieser Sprache angezeigt wird.
  • Hybrid ist eine Kombination der beiden zuvor genannten Optionen.
Localized

Verlinktes Bild

Erstellt ein vom Benutzer auswählbares Bild, das in einen Link eingeschlossen ist. Dieses Modul verfügt über alle Parameter eines Bildmoduls mit zwei zusätzlichen Parametern, die die Ziel-URL des Links angeben und ob der Link in einem neuen Fenster geöffnet wird.

{% linked_image "linked_image" %} {% linked_image "executive_image" label="Executive photo", link="https://twitter.com/bhalligan", \ open_in_new_tab=True, alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}<span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"> <a href="https://twitter.com/bhalligan" target="_blank" id="hs-link-executive_image" style="border-width:0px;border:0px;"> <img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " style="width:300px;border-width:0px;border:0px;" width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan"> </a> </span>
ParameterTypeDescription Default
alt
Zeichenfolge

Legt den Standard-ALT-Text für das Bild fest.

src
Zeichenfolge

Füllt das src-Attribut des img-Tags aus.

width
Zahl

Legt das width-Attribut des img-Tags fest.

The width of the image
height
Zahl

Legt eine min-height in einem style-Attribut des img-Tags nur für E-Mail-Vorlagen fest.

The height of the image
hspace
Zahl

Legt das hspace-Attribut des img-Tags fest.

align
Zeichenfolge

Legt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“.

style
Zeichenfolge

Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style="border:1px solid blue; margin:10px"

open_in_new_tab
Boolesch

Legt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht.

False
link
Zeichenfolge

Legt die Ziel-URL des Links fest, der das img-Tag einschließt.

target
Zeichenfolge

Legt das target-Attribut des Link-Tags fest.

loading
Zeichenfolge

Steuert das loading-Attribut des img-Elements. Wird für browserbasiertes Lazy Loading verwendet.

Ein Logo-Modul stellt das Logo Ihres Unternehmens in den Inhaltseinstellungen dar.

{% logo "logo" %} {% logo "my_logo" width="200" %}<span id="hs_cos_wrapper_my_logo" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo" style="" data-hs-cos-general-type="widget" data-hs-cos-type="logo"> <a href="//www.hubspot.com" id="hs-link-my_logo"> <img src="//cdn2.hubspot.net/hub/53/file-1237149549-png/assets/hubspot.com/V2-Global/hubspot-logo-dark.png?t=1430948896766&amp;width=200" class="hs-image-widget " width="200" alt="HubSpot logo" title="HubSpo logot"> </a> </span>
ParameterTypeDescription Default
suppress_company_name
Boolesch

Blendet Unternehmensnamen aus, wenn kein Bild-Logo festgelegt ist.

False
alt
Zeichenfolge

Legt den Standard-ALT-Text für das Bild fest.

Value in Content Settings
src
Zeichenfolge

Füllt das src-Attribut des img-Tags aus.

Value in Content Settings
width
Zahl

Legt das width-Attribut des img-Tags fest.

The width of the image
height
Zahl

Legt eine min-height in einem style-Attribut des img-Tags nur für E-Mail-Vorlagen fest.

The height of the image
hspace
Zahl

Legt das hspace-Attribut des img-Tags fest.

align
Zeichenfolge

Legt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“.

style
Zeichenfolge

Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style="border:1px solid blue; margin:10px"

open_in_new_tab
Boolesch

Legt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht.

False
link
Zeichenfolge

Legt die Ziel-URL des Links fest, der das img-Tag einschließt.

override_inherited_src
Boolesch

Wenn true, wird src vom Logo-Widget verwendet und nicht src voden Einstellungen oder der Vorlage geerbt.

True
heading_level
Zeichenfolge

Bei Verwendung nicht verknüpfter textbasierter Logos wird das textbasierte Logo in eine der folgenden verfügbaren Optionen als HTML-Tag eingeschlossen: h1, h2, h3, h4

h1
loading
Zeichenfolge

Steuert das loading-Attribut des img-Elements. Wird für browserbasiertes Lazy Loading verwendet.

Menü

Erzeugt ein erweitertes Menü basierend auf einer Menüstruktur unter Inhaltseinstellungen > Erweiterte Menüs.  Unter Menüs und Navigation finden Sie weitere Informationen zur Verwendung von Menüs in Vorlagen und Modulen. Wenn id auf null festgelegt ist, stellt das menu-Tag das Standardmenü für den HubSpot-Account dar.

{% menu "menu" %} {% menu "my_menu" id=456, site_map_name="Default", overrideable=False, root_type="site_root", flyouts="true", max_levels="2", flow="horizontal", label="Advanced Menu" %}<div id="hs_menu_wrapper_my_menu" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Default"> <ul> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.husbpot.com/Software">Software</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/pricing">Pricing</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/resources">Resources</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/contact">Contact</a></li> </ul> </div> </span>
ParameterTypeDescription Default
id
Ganzzahl

ID der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen.

site_map_name
Zeichenfolge

Name der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen.

"default"
root_type
Aufzählung

Gibt den Typ der erweiterten Menüs an. Zu den Optionen gehören: „site_root", „top_parent", „parent", „page_name", „page_id“ und „breadcrumb“. Diese Werte entsprechen „Statisch“, „Dynamisch nach Bereich“, „Dynamisch nach Seite“ und „Breadcrumb“.

"site_root"
flyouts
Zeichenfolge

Bei true wird der Menüstruktur eine Klasse hinzugefügt, die so gestaltet werden kann, dass untergeordnete Menüpunkte angezeigt werden, wenn Sie den Mauszeiger über den übergeordneten Punkt bewegen. Bei false werden untergeordnete Menüpunkte immer angezeigt.

"true"
max_levels
Ganzzahl

Legt fest, wie viele Ebenen von verschachtelten Menüs im Markup dargestellt werden. Dieser Parameter legt die Anzahl der untergeordneten Menüebenen an, auf die erweitert werden kann.

2
flow
Aufzählung

Legt die Ausrichtung der Menüpunkte fest. Dadurch werden der Menüstruktur Klassen hinzugefügt, sodass sie entsprechend formatiert werden können. Mögliche Werte sind „horizontal", „vertical“ oder „vertical_flyouts“. Horizontale Menüs zeigen Elemente nebeneinander und vertikale Menüs zeigen Elemente untereinander an.

"horizontal"
root_key
Zeichenfolge

Wird verwendet, um den Stamm des Menüs zu finden. Wenn „root_type“ auf „page_id“ oder „page_name“ festgelegt ist, sollte dieser Parameter die Seiten-ID bzw. das Label der Seite sein.

"horizontal"

require_css

Ein HubL-Tag, das ein style-Element in die Warteschlange stellt, das im <head> gerendert werden soll.

Dieses Tag ähnelt der require_css-Funktion, mit der Ausnahme, dass Stile mit diesem Tag inline und nicht aus einem Stylesheet eingefügt werden. Dieses Tag wird auch nicht gegen andere Instanzen des CSS auf derselben Seite dedupliziert. Wenn Sie ein Modul erstellen und ein Stylesheet einfügen möchten, dieses Modul jedoch mehrmals auf einer einzelnen Seite verwenden möchten, sollten Sie stattdessen die require_css-Funktion verwenden. 

{{ standard_header_includes }} <!-- more html --> {% require_css %} <style> body { color: red; } </style> {% end_require_css %} {{ standard_footer_includes }}<!-- other standard header html --> <style> body { color: red; } </style> <!-- more html --> <!-- other standard footer html -->

Require_head

Ein HubL-Tag, das alles, was in standard_header_includes (der <head> der Vorlage) platziert ist, in die Warteschlange stellt. Für die meisten JavaScript und CSS siehe require_js und require_css.  Einige Anwendungsfälle für require_head sind die Bereitstellung von Meta-Tags und speziellen Link-Tags (wie prefetch und preconnect) von Modulen.

{% require_head %} <meta name="third-party-app-verification-id" content="123456"> <link rel="prefetch" href="http://example.com/large-script.js"> <!-- these are purely examples, you could add anything that requires being in the head. require_css and require_js should be used instead of this when embedding a style tag or script tag.--> {% end_require_head %}

require_js

Ein HubL-Tag, das ein zu renderndes Skriptelement in die Warteschlange stellt. Um ein Skript von einer anderen Datei in die Warteschlange zu stellen, um es im <head /> über ein <script />-Element darzustellen (im Gegensatz zu inline wie hier gezeigt), verwenden Sie stattdessen die HubL-Funktion require_js(absolute_url).

{{ standard_header_includes }} <!-- more html --> {% require_js position="footer" %} <script> console.log("The CMS is awesome!"); </script> {% end_require_js %} {{ standard_footer_includes }}<!-- other standard header html --> <!-- more html --> <script> console.log("The CMS is awesome!"); </script> <!-- other standard footer html -->
ParameterTypeDescription Default
position
Zeichenfolge

Legt die Position fest, an der das Inline-Skript gerendert werden soll. Zu den Optionen gehören: "head" und "footer".

"footer"

Rich-Text

Erzeugt einen WYSIWYG-Content-Editor.

{% rich_text "rich_text" %} {% rich_text "left_column" label="Enter HTML here" html="<div>My rich text default content</div>" %} Block Syntax Example: {% widget_block rich_text "right_column" overrideable=True, label="Right Column" %} {% widget_attribute "html" %} <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, 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.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul> {% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_right_column" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, 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.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out benefits and</li> <li>Turning visitors into leads.</li> </ul> </span>
ParameterTypeDescription Default
html
Zeichenfolge

Standard-Rich-Text-Inhalt für das Modul.

<h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, 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.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul>

RSS-Listing

Lädt eine Liste von Inhalten aus einem internen oder externen RSS-Feed.

Bitte beachten: dieses Modul wird asynchron auf der Client-Seite geladen. Wenn Sie also den Feed nach dem Laden bearbeiten möchten, müssen Sie eine globale JS-Funktion definieren, die diese Bearbeitung übernimmt. Verwenden Sie die hsRssFeedComplete(feeds)-Funktion, wobei feeds der jQuery-Selektor für alle Feeds ist, die abgeschlossen wurden. Sie können das DOM-Objekt in dieser Funktion direkt bearbeiten.
{% rss_listing "rss_listing" %} {% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}<span id="hs_cos_wrapper_module_70642123068_my_rss_listing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rss_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rss_listing"> <h3></h3> <div class="hs-rss-module feedreader_box hs-hash-758735283"> <div class="hs-rss-item "> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data"> <span>How to Write Cron Jobs in HubSpot to take Time Based Action on CRM Data</span> </a> <div class="hs-rss-byline"> by <span class="hs-rss-author">Jon McLaren</span> <span class="hs-rss-posted-at"> posted at</span> <span class="hs-rss-date">3/8/23 10:42 AM</span> </div> <div class="hs-rss-description"> <p>First things first: Cron jobs are scripts that get executed based on time. Understanding where this shorthand name comes from may help you remember this: <a href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data">Read more</a> </p> </div> </div> </div> <div class="hs-rss-item "> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow"> <span>Using OpenAI Embeddings API to implement Semantic Search into a HubSpot Workflow</span> </a> <div class="hs-rss-byline"> by <span class="hs-rss-author">Roman Kozak</span> <span class="hs-rss-posted-at"> posted at</span> <span class="hs-rss-date">3/7/23 2:09 PM</span> </div> <div class="hs-rss-description"> <p>This article was authored by a member of the HubSpot developer community, Roman Kozak. <a href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow">Read more</a> </p> </div> </div> </div> <div class="hs-rss-item "> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions"> <span>How to Use NPM Packages in Custom Code Workflow Actions</span> </a> <div class="hs-rss-byline"> by <span class="hs-rss-author">Joshua Beatty</span> <span class="hs-rss-posted-at"> posted at</span> <span class="hs-rss-date">2/28/23 10:30 AM</span> </div> <div class="hs-rss-description"> <p>This article was authored by a member of the HubSpot developer community, Joshua Beatty. <a href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions">Read more</a> </p> </div> </div> </div> </div> </span>
ParameterTypeDescription Default
show_title
Boolesch

 Zeigt den Titel des RSS-Feeds oder blendet ihn aus.

True
show_date
Boolesch

Zeigt das Beitragsdatum an.

True
show_author
Boolesch

Zeigt den Namen des Autors an.

True
show_detail
Boolesch

Zeigt eine Beitragszusammenfassung bis zu der durch den Parameter limit_to_chars festgelegten Anzahl von Zeichen an.

True
title
Zeichenfolge

Füllt eine Überschrift über der RSS-Feed-Liste aus.

limit_to_chars
Zahl

Maximale Anzahl von Zeichen, die in der Zusammenfassung angezeigt werden.

200
publish_date_format
Zeichenfolge

Format für das Veröffentlichungsdatum Mögliche Werte sind "short", "medium" und "long". Akzeptiert auch benutzerdefinierte Formate, einschließlich "MMMM d, yyyy 'at' h:mm a".

"short"
attribution_text
Zeichenfolge

Der Text, der einem Autor einen Beitrag zuschreibt.

"by"
click_through_text
Zeichenfolge

Der Text, der am Ende der Zusammenfassung eines Beitrags für den Klick-Link angezeigt wird

"Read more"
publish_date_text
Zeichenfolge

 Der Text, der angibt, wann ein Beitrag veröffentlicht wurde

"posted at"
include_featured_image
Boolesch

Zeigt ein Bild mit einem Link zum Beitrag für von HubSpot generierte RSS-Feeds an.

False
item_title_tag
Zeichenfolge

Gibt das HTML-Tag für jeden Beitragstitel an.

span
is_external
Boolesch

Der RSS-Feed stammt von einem externen Blog.

False
number_of_items
Zahl

Maximale Anzahl an anzuzeigenden Beiträgen.

5
publish_date_language
Zeichenfolge

Gibt die Sprache des Veröffentlichungsdatums an.

en_US
rss_url
Zeichenfolge

 Die URL, unter der sich der RSS-Feed befindet.

content_group_id
Zeichenfolge

ID für Blog, wenn Feed-Quelle interner Blog ist.

select_blog
Zeichenfolge

Kann verwendet werden, um einen internen HubSpot-Blog-Feed auszuwählen.

default
feed_source
Zeichenfolge

Legt die Quelle für einen RSS-Feed fest. Wenn intern, ist das allgemeine Format {rss_url="", is_external=False, content_group_id="2502431580"}. Wenn extern, ist das allgemeine Format {rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}.

tag_id
Zahl

ID für das Tag, wenn die Feed-Quelle ein interner Blog ist.

Bereichsüberschrift

Erzeugt eine HTML-Überschrift und eine <p>-Zwischenüberschrift.

{% section_header "section_header" %} {% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header" %}<span id="hs_cos_wrapper_my_section_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_section_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="section_header"> <div class="page-header section-header"> <h1>A clear and bold header</h1> <p class="secondary-header"><span id="hs_cos_wrapper_subheader" class="section-subheader">A more subdued subheader</span></p> </div> </span>
ParameterTypeDescription Default
header
Zeichenfolge

Text, der im Header angezeigt werden soll.

"A clear and bold header"
subheader
Zeichenfolge

Text, der im Subheader angezeigt werden soll.

"A more subdued subheader"
heading_level
Zeichenfolge

Die semantische HTML-Überschriftenebene. h1 bis h6 werden unterstützt.

"h1"

Einfaches Menü

Mit einfachen Menüs können Sie grundlegende Navigationsmenüs erstellen, die auf Seitenebene geändert werden können. Im Gegensatz zu normalen Menümodulen werden einfache Menüs nicht über den Navigationsbildschirm in den Website-Einstellungen verwaltet, sondern über die Vorlagen- und Seiten-Editoren. Sie können Block-Syntax verwenden, um einer Standard-Menüstruktur einzurichten.

{% simple_menu "simple_menu" %} {% simple_menu "my_simple_menu" orientation="horizontal", label="Simple Menu" %} Block Syntax Example: {% widget_block simple_menu "block_simple_menu" overrideable=True, orientation="horizontal", label="Simple Menu" %} {% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_my_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu"> <ul></ul> </span> <span id="hs_cos_wrapper_block_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu"> <div id="hs_menu_wrapper_module_143093417497114626" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name=""> <ul> <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com" target="_self">Home</a></li> <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children"><a href="//www.hubspot.com/internet-marketing-company" target="_self">About</a> <ul class="hs-menu-children-wrapper"> <li class="hs-menu-item hs-menu-depth-2"><a href="//www.hubspot.com/company/management" target="_self">Our Team</a></li> </ul> </li> <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com/pricing" target="_self">Pricing</a></li> </ul> </div> </span>
ParameterTypeDescription Default
orientation
Aufzählung

Definiert Klassen von Menü-Markup, die es ermöglichen, die Ausrichtung von Menüelementen auf der Seite zu formatieren. Mögliche Werte sind "horizontal" und "vertical".

"horizontal"
menu_tree
JSON

Menüstruktur mit Namen der Seiten-Links und Ziel-URLs.

[]

Social-Media-Sharing

Social-Media-Sharing-Tags generieren Social-Media-Symbole, die zum Teilen einer bestimmten Seite verwendet werden können. Dieses Modul kann mit der Block-Syntax verwendet werden, um die Symbolbilder und mehr anzupassen.

{% social_sharing "social_sharing" %} {% social_sharing "my_social_sharing" use_page_url=True %} Block Syntax Example: {% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True %} {% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %} {% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %} {% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %} {% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %} {% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_social_sharing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing"> <a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dfacebook" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Facebook"> </a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on LinkedIn"> </a> <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Twitter"> </a> <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dpinterest&media=http%3A%2F%2Fcdn1.hubspot.com%2Fhub%2F158015%2F305390_10100548508246879_837195_59275782_6882128_n.jpg" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Pinterest"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail &body=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/email-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Email"> </a> </span>
ParameterTypeDescription Default
use_page_url
Boolesch

Bei true teilt das Modul standardmäßig die URL der Seite.

True
link
Zeichenfolge

Gibt eine andere URL zum Teilen an, wenn use_page_url false ist.

pinterest
JSON

Parameter für das Pinterest-Link-Format und die Quelle des Symbolbildes.

See block syntax example, above
twitter
JSON

Parameter für das Twitter-Link-Format und die Quelle des Symbolbildes.

See block syntax example, above
linked_in
JSON

Parameter für das LinkedIn-Link-Format und die Quelle des Symbolbildes.

See block syntax example, above
facebook
JSON

Parameter für das Facebook-Link-Format und die Quelle des Symbolbildes.

See block syntax example, above
email
JSON

Parameter für das E-Mail-Link-Format und die Quelle des Symbolbildes.

See block syntax example, above

Abstandshalter

Ein spacer-Tag erzeugt ein leeres span-Tag. Dieses Tag kann als Abstandshalter formatiert werden. In Drag-&-Drop-Layouts wird das Abstandshaltermodul in einen Container mit der Klasse „span1-span12“ eingeschlossen, um festzulegen, wie viel Platz das Modul im zwölfspaltigen responsiven Raster einnehmen soll.

{% space "space" %} {% space "spacer" label="Horizontal Spacer" %}<span id="hs_cos_wrapper_module_spacer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_space" style="" data-hs-cos-general-type="widget" data-hs-cos-type="space"></span>

Systemseiten-Tags

Die folgenden Tags können auf Systemseiten verwendet werden, z. B. auf den Seiten zum Zurücksetzen des Passworts oder zum Abonnieren von E-Mails.

E-Mail-Back-up Abo-Kündigung

Das Abo-Kündigungs-Back-up-Tag wird für E-Mail-Empfänger gerendert, falls HubSpot deren E-Mail-Adresse nicht ermitteln kann, wenn dieser Empfänger versucht, ein Abo zu kündigen. Mit diesem Tag wird ein Formular adargestellt, in das der Kontakt seine E-Mail-Adresse eingeben kann, um sich von der E-Mail-Kommunikation abzumelden. Es sollte auf einer Abmelde-Backup-Systemvorlage verwendet werden.

{% email_simple_subscription "email_simple_subscription" %} {% email_simple_subscription "email_simple_subscription" header="Email Unsubscribe", input_help_text="Your email address:", input_placeholder="email@example.com", button_text="Unsubscribe", label="Backup Unsubscribe" %}<span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style="">Email Unsubscribe</span></h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> </div> <form id="email-prefs-form" method="post" name="email-prefs-form" style="position: relative"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <div id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <h3 style="font-weight: normal"><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style="">Your email address:</span></h3> <div style="padding-bottom: 10px"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""><input class="email-edit hs-input" name="email" placeholder="email@example.com" style="padding: 6px; font-size: 15px; width: 507px; margin-left: 0px" type="email" value=""></span> </div><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""><input class="hs-button primary" id="submitbutton" type="submit" value="Unsubscribe"></span> </div><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> </form>
ParameterTypeDescription Default
header
String

Rendert Text in einem h1-Tag über dem Abmeldeformular.

"Email Unsubscribe"
input_help_text
String

Rendert Hilfetext in einem h3-Tag über dem Feld für das E-Mail-Abmeldeformular.

"Your email address:"
input_placeholder
String

Fügt Platzhaltertext im E-Mail-Adressformularfeld hinzu.

"email@example.com"
button_text
String

Ändert den Text der Schaltfläche zum Absenden des Abmeldeformulars.

"Unsubscribe"

E-Mail-Abonnements

Dieses Modul rendert, wenn ein E-Mail-Empfänger seine Abonnementeinstellungen bearbeiten möchte. Es sollte auf einer Abo-Einstellungen-Systemvorlage verwendet werden.

{% email_subscriptions "email_subscriptions" %} {% email_subscriptions "email_subscriptions" resubscribe_button_text="Yes, resubscribe me!", unsubscribe_single_text="Uncheck the types of emails you do not want to receive:", subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n", unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?", button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences", unsubscribe_all_option="Unsubscribe me from all mailing lists.", unsubscribe_all_text="Or check here to never receive any emails:" %}<span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <form id="email-prefs-form" method="post" name="email-prefs-form"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">Communication Preferences</span></h1> <h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">example@email.com</span></h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""><br></span> <p><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</span></p> </div> <div class="email-prefs" id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <p class="header"><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">Uncheck the types of emails you do not want to receive:</span></p><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""><input name="email" type="hidden" value="example@email.com"> <input name="unsub_url" type="hidden" value=""> <input name="unsubed_all" type="hidden" value="false"> <input name="subscription_ids" type="hidden" value=""></span> <div class="item"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <div class="item-inner"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <div class="checkbox-row"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""><span class="fakelabel"><input id="id_0" name="id_0" type="checkbox"> <span>Example Subscription #1</span></span></span> </div> <p>Your email type description</p> </div> </div> <div class="item"> <div class="item-inner"> <div class="checkbox-row"> <span class="fakelabel"><input id="id_0" name="id_0" type="checkbox"> <span>Example Subscription #2</span></span> </div> <p>Your email type description</p> </div> </div> <div class="subscribe-options" style="margin-right: 0"> <p class="header">Or check here to never receive any emails:</p> <p><label for="globalunsub"><input id="globalunsub" name="globalunsub" type="checkbox"> <span>Unsubscribe me from all mailing lists.</span></label></p> </div><input class="hs-button primary" id="submitbutton" type="submit" value="Update email preferences"> <div class="clearer"></div> </div> </form>
ParameterTypeDescription Default
header
String

Rendert Text in einem h1-Tag über dem Formular für die Abonnementeinstellungen.

"Communication Preferences"
subheader_text
String

Füllt Text unterhalb der Überschrift über den Abmeldeeinstellungen.

"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
unsubscribe_single_text
String

Rendert Text in einem <p class="header"> über den Abonnementoptionen.

"Uncheck the types of emails you do not want to receive:"
unsubscribe_all_text
String

Rendert Text in einem <p class="header"> über der Kontrollkästcheneingabe für die Abmeldung von allen E-Mails.

"Or check here to never receive any emails:"
unsubscribe_all_unsubbed_text
String

Füllt Text in einem <p> aus, das rendert, wenn ein Kontakt derzeit von allen E-Mails abgemeldet ist.

"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_option
String

Legt den Text neben der Kontrollkästcheneingabe für die Abmeldung von allen E-Mails fest.

"Unsubscribe me from all mailing lists."
button_text
String

Legt den Text der Schaltfläche „Einsenden“ fest, mit der die Abo-Einstellungen aktualisiert werden.

"Update email preferences"
resubscribe_button_text
String

Legt den Text der Schaltfläche „Einsenden“ fest, wenn Kontakte sich erneut anmelden.

"Yes, resubscribe me!"

E-Mail-Abo-Bestätigung

Die Aktualisierungsbestätigung für E-Mail-Abonnements ist ein Modul, das der Danksagungsvorlage hinzugefügt werden kann, wenn ein Empfänger seine Abonnementeinstellungen aktualisiert oder sich abmeldet. Es sollte auf einer Abo-Einstellungen-Systemvorlage verwendet werden.

{% email_subscriptions_confirmation "email_subscriptions_confirmation" %} {% email_subscriptions_confirmation "email_subscriptions_confirmation" label="Subscriptions Update Confirmation", unsubscribe_all_success="You have successfully unsubscribed from all email communications.", subscription_update_success="You have successfully updated your email preferences.", subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n" %}<span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""></span> <h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">example@email.com</span></h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""><br></span> <p><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</span></p> </div> <div class="success" id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">You have successfully updated your email preferences.</span> </div>
ParameterTypeDescription Default
header
String

Rendert Text in einem h1-Tag über dem Abmeldeformular.

"Communication Preferences"
subheader_text
String

Füllt Text über der Bestätigungsnachricht.

"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
unsubscribe_all_success
String

Legt den Text fest, der angezeigt wird, wenn sich jemand von sämtlicher E-Mail-Kommunikation abmeldet.

"You have successfully unsubscribed from all email communications."
subscription_update_success
String

Legt den Text fest, wenn ein Empfänger seine Abo-Einstellungen aktualisiert.

"You have successfully updated your email preferences."

Mitgliedschaftsanmeldung

Erstellt ein Anmeldeformular für den Zugang zu privatem Content

{% member_login "my_login" %} {% member_login "my_login" email_label="Email", password_label="Password", remember_me_label="Remember Me", reset_password_text="Forgot your password?", submit_button_text="Login", show_password="Show password" %}<span id="hs_cos_wrapper_my_login" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_login" style="" data-hs-cos-general-type="widget" data-hs-cos-type="member_login"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/login?domain=default&amp;hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&amp;updated=1644243124141&amp;redirect_url=/" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/"> <input id="hs-membership-form-hubspotutk" name="hubspotutk" type="hidden" value=""> <div class="hs-form-field"> <label class="hs-login-widget-email-label" for="hs-login-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-login-widget-email" value=""> </div> <div class="hs-form-field"> <label class="hs-login-widget-password-label" for="hs-login-widget-password">Password*</label> <a class="hs-login-widget-show-password" href="javascript:show_password('hs-login-widget-password');">Show password</a> <input class="hs-input" name="password" type="password" placeholder="Password" id="hs-login-widget-password"> </div> <div class="hs-form-field"> <input class="hs-input" name="remember_me" type="checkbox" id="hs-login-widget-remember" value="true" checked=""> <label for="hs-login-widget-remember">Remember Me</label> </div> <div> <a id="hs_login_reset" href="/_hcms/mem/reset/request">Forgot your password?</a> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Login"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> <div id="hs-membership-rate-limit-error-text" style="display:none"> You've made too many attempts at this request. Please try this action again in a few minutes. </div> <script type="text/javascript"> function show_password(id) { var input = document.getElementById(id); input.type = input.type === 'password' ? 'text' : 'password'; } </script> <script> function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } document.getElementById('hs-membership-form-hubspotutk').value = getCookie("hubspotutk"); </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
Zeichenfolge

Das Label für das E-Mail-Eingabefeld.

"Email"
password_label
Zeichenfolge

Das Label für das Passworteingabefeld.

"Password"
remember_me_label
Zeichenfolge

Das Label für das Kontrollkästchen „Merken“.

"Remember Me"
reset_password_text
Zeichenfolge

Der Text für den Hyperlink zum Zurücksetzen des Passworts.

"Forgot your password?"
submit_button_text
Zeichenfolge

Der Text für die Schaltfläche „Einsenden“.

"Login"
show_password
Zeichenfolge

Der Text für den Link zum Enthüllen des Passworts.

"Show password"

Registrierung einer Mitgliedschaft

Erstellt ein Formular zur Registrierung für den Zugang zu privatem Content

{% member_register "my_register" %} {% member_register "my_register" email_label="Email", password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save Password", show_password="Show password" %}<span id="hs_cos_wrapper_my_register" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_register" style="" data-hs-cos-general-type="widget" data-hs-cos-type="member_register"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/register?domain=default&amp;hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&amp;updated=1644243124290&amp;redirect_url=/_hcms/mem/login?success%3Dtrue" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/_hcms/mem/login?success=true"> <input id="hs-membership-form-hubspotutk" name="hubspotutk" type="hidden" value=""> <div class="hs-form-field"> <label for="hs-register-widget-email">Email*</label> <input class="hs-input" name="email_read_only" type="email" value="" id="hs-register-widget-email" disabled=""> <input name="email" type="hidden" value=""> <input name="token" type="hidden" value=""> </div> <div class="hs-form-field"> <label for="hs-register-widget-password">Password*</label> <a class="hs-register-widget-show-password" href="javascript:show_password('hs-register-widget-password');">Show password</a> <input class="hs-input" name="password" type="password" placeholder="Password" id="hs-register-widget-password"> </div> <div class="form-input-validation-message" id="hs-membership-password-requirements"> <ul class="no-list hs-error-msgs"> <li> <label>Password must be at least 8 characters long and include lower and uppercase letters, a number, and a symbol</label> </li> </ul> </div> <div class="hs-form-field"> <label for="hs-register-widget-password-confirm">Confirm Password*</label> <a class="hs-register-widget-show-password" href="javascript:show_password('hs-register-widget-password-confirm');">Show password</a> <input class="hs-input" name="password_confirm" type="password" placeholder="Confirm Password" id="hs-register-widget-password-confirm"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Save Password"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> <script type="text/javascript"> function show_password (id) { var input = document.getElementById(id); input.type = input.type === 'password' ? 'text' : 'password'; } </script> <script> function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } document.getElementById('hs-membership-form-hubspotutk').value = getCookie("hubspotutk"); </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
Zeichenfolge

Das Label für das E-Mail-Eingabefeld.

"Email"
password_label
Zeichenfolge

Das Label für das Passworteingabefeld.

"Password"
password_confirm_label
Zeichenfolge

Das Label für das Feld zur Bestätigung des Passworts.

"Confirm Password"
submit_button_text
Zeichenfolge

Der Text für die Schaltfläche „Einsenden“.

"Save Password"
show_password
Zeichenfolge

Der Text für den Link zum Enthüllen des Passworts.

"Show password"

Anfrage zum Zurücksetzen des Passworts

Erstellt ein Formular zum Versenden einer E-Mail zum Zurücksetzen des Passworts für den Zugriff auf passwortgeschützte Seiten. 

{% password_reset_request "my_password_reset_request" %} {% password_reset_request "my_password_reset_request" email_label="Email", submit_button_text="Send Reset Email" %}<span id="hs_cos_wrapper_my_password_reset_request" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_reset_request"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <div class="hs-form-field"> <ul class="no-list" style="text-align:center"> <li> <label class="hs-membership-global-message"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/reset/request?domain=default&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;redirect_url=/" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/"> <div class="hs-form-field"> <label for="hs-reset-request-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-reset-request-widget-email"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Send Reset Email"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
Zeichenfolge

Das Label für das E-Mail-Eingabefeld.

"Email"
submit_button_text
Zeichenfolge

Der Text für die Schaltfläche „Einsenden“.

"Send Reset Email"
password_reset_message
Zeichenfolge

Die Nachricht, die angezeigt wird, nachdem die E-Mail zum Zurücksetzen des Passworts angefordert wurde.

False

Zurücksetzen des Passworts

Rendert ein Formular zum Zurücksetzen des Passworts für den Zugriff auf passwortgeschützte Seiten. 

{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}<span id="hs_cos_wrapper_my_password_reset_request" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_reset_request"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <div class="hs-form-field"> <ul class="no-list" style="text-align:center"> <li> <label class="hs-membership-global-message"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/reset/request?domain=default&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;redirect_url=/" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/"> <div class="hs-form-field"> <label for="hs-reset-request-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-reset-request-widget-email"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Send Reset Email"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
password_label
Zeichenfolge

Das Text-Label für das Feld zur Eingabe des Passworts.

"Email"
password_confirm_label
Zeichenfolge

Das Text-Label für das Feld zur Eingabe der Passwortbestätigung.

"Send Reset Email"
submit_button_text
Zeichenfolge

Das Text-Label für die Schaltfläche „Formular einsenden“.

False
show_password
Zeichenfolge

Das Text-Label für die Schaltfläche zum Einblenden des eingegebenen Passwortwerts.

False
password_requirements
Zeichenfolge

Das Text-Label, das die Passwortanforderungen beschreibt.

False

Passwortaufforderung

Fügt eine Passwortaufforderung zu passwortgeschützten Seiten hinzu.

{% password_prompt "password_prompt" %} {% password_prompt "my_password_prompt" submit_button_text="Submit", bad_password_message="Sorry, please try again.\n", label="Password Prompt" %}<span id="hs_cos_wrapper_password_prompt" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_prompt" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_prompt"> <form method="post" action="/_hcms/protected/auth"> <input name="content_id" type="hidden" value="1"> <input name="redirect_url" type="hidden" value="https://preview.hs-sites.com/content-rendering/v1/public/_hcms/preview/template/multi"> <input name="password" type="password" id="hs-pwd-widget-password" style="height: 22px; margin-top: -5px"> <input type="submit" class="hs-button primary large" value="Submit"> </form> <script type="text/javascript"> document.getElementById("hs-pwd-widget-password").focus(); </script> </span>
ParameterTypeDescription Default
submit_button_text
Zeichenfolge

 Label für Schaltfläche unter dem Kennworteingabefeld.

"Submit"
bad_password_message
Zeichenfolge

 Bei Eingabe eines falschen Passworts wird eine Meldung angezeigt.

"<p>Sorry, please try again.</p>"
password_placeholder
Zeichenfolge

 Definiert einen Platzhaltertext im Passwortfeld.

"Password"

Text

Erzeugt eine einzelne Textzeile. Dieses Tag kann in Verbindung mit dem no_wrapper=True-Parameter nützlich sein, um Ihrem Markup hinzugefügt zu werden. Wenn Sie zum Beispiel möchten, dass Ihre Endbenutzer das Ziel eines vordefinierten Anchors definieren können, könnten Sie die href mit einem Texmodul mit no_wrapper=True ausfüllen.

{% text "text" %} {% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}<span id="hs_cos_wrapper_simple_text_field" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">This is the default value for this text field</span>
ParameterTypeDescription Default
value
Zeichenfolge

Legt den Standardtext für das einzeilige Textfeld fest.

Textbereich

Eine Textbereich ähnelt einem Textmodul insofern, dass Benutzern die Eingabe von Klartext ermöglicht wird, ihnen aber einen größeren Bereich für das Arbeiten im Content-Editor bietet. Dieses Modul unterstützt kein HTML. Wenn Sie „textarea“ direkt innerhalb eines vordefinierten Wrapping-Tags verwenden möchten, fügen Sie den Parameter no_wrapper=true hinzu.

{% textarea "my_textarea" %} {% textarea "my_textarea" label="Enter plain text block", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.", no_wrapper=True %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.
ParameterTypeDescription Default
value
Zeichenfolge

Legt den Standardtext von „textarea“ fest.

Video-Player

Rendern Sie einen Video-Player für eine Videodatei vom Datei-Manager, für die die Einstellung Einbetten, Teilen und Tracking zulassen aktiviert ist.

{% video_player "embed_player" %} {% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
ParameterTypeDescription Default
hide_playlist
Boolesch

Blendet die Video-Playlist aus.

True
playlist_color
Zeichenfolge

Ein HEX-Farbwert für die Playlist.

play_button_color
Zeichenfolge

Ein HEX-Farbwert für die Wiedergabe- und Pausentasten.

#2A2A2A
embed_button
Boolesch

Zeigt die Schaltfläche „Einbetten“ im Player an.

False
viral_sharing
Boolesch

Zeigt die Schaltfläche zum Teilen in sozialen Netzwerken im Player an.

False
width
Zahl

Breite des eingebetteten Video-Players.

Auto
height
Zahl

Höhe des eingebetteten Video-Players.

Auto
player_id
Zahl

Die player_id des einzubettenden Videos.

style
Zeichenfolge

Zusätzlicher Stil für Player.

conversion_asset
JSON

Event-Einstellung für Player. Kann CTA oder Formular vor oder nach der Videowiedergaben darstellen. Dieser Parameter nimmt ein JSON-Objekt mit drei Parametern auf: Typ (FORM oder CTA), id (die GUID des Typobjekts), Position (POST oder PRE).

See above example
placeholder_alt_text
Zeichenfolge

Der ALT-Text des Videos.


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.