> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# HubL-Standardtags

> Umfassender Referenzleitfaden der Syntax und der verfügbaren Parameter für alle HubL-Tags

Diese Seite ist ein umfassender Referenzleitfaden der Syntax und der verfügbaren Parameter für alle standardmäßigen HubL-Tags, einschließlich der [Tags für Systemseiten](#system-page-tags) 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](/cms/reference/hubl/tags/dnd-areas). Wenn Sie eine ältere Website betreiben, sollten Sie sich auch die [Liste der veralteten HubL-Tags](/cms/versions-deprecations/deprecated/hubl/filters-functions) ansehen.

<Tip>
  Für die meisten Tags auf dieser Seite gibt es [Äquivalente in den Standardmodulen](/cms/reference/modules/default-modules). Module können innerhalb von [dnd\_areas](https://developers.hubspot.de/docs/cms/start-building/building-blocks/drag-and-drop/overview) und [flexiblen Spalten](#flexible-column) verwendet werden, was sie leistungsfähiger und benutzerfreundlicher macht als die Tags, die Sie hier sehen.
</Tip>

## Blogkommentare

Rendert den Code zum Einbetten von Kommentaren in einer Blog-Vorlage, einschließlich der Kommentare selbst und des Formulars für Kommentare. Weitere Informationen zum Anpassen der Einstellungen für Blogkommentare und Formulare finden Sie in der [Wissensdatenbank](https://knowledge.hubspot.com/de/blog/set-up-and-moderate-your-blog-comments).

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% blog_comments "blog_comments" label="Blog comments" select_blog="359485112" %}
  ```

  ```text ausgabe.txt theme={null}
  <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"></div>
  <div id="hs_form_target_{formID}" data-hs-forms-root="true">
  <div class="hs-comment-message hs-common-confirm-message">
  Your comment has been received.
  </div>
  <form
  id="hsForm_id"
  method="POST"
  accept-charset="UTF-8"
  enctype="multipart/form-data"
  novalidate=""
  action="https://forms.hsforms.com/submissions/v3/public/submit/formsnext/multipart/{hubID}/{formID}"
  class="hs-form-private hs-form stacked"
  target="target_iframe_07e1eb93-87f2-48039"
  data-instance-id="{formID}"
  data-formid="{formID}"
  data-portal-id="123456"
  data-test-id="hsForm_{formID}"
  data-hs-cf-bound="true"
  >
  <div
  class="hs_firstname hs-firstname hs-fieldtype-text field hs-form-field"
  >
  <label
  id="label-firstname-07e1eb93"
  class=""
  placeholder="Enter your First Name"
  for="firstname-07e1eb9339"
  ><span>First Name</span
  ><span class="hs-form-required">*</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="firstname-{formID}"
  name="firstname"
  required=""
  placeholder=""
  type="text"
  class="hs-input"
  inputmode="text"
  autocomplete="given-name"
  value=""
  />
  </div>
  </div>
  <div
  class="hs_lastname hs-lastname hs-fieldtype-text field hs-form-field"
  >
  <label
  id="label-lastname-{formID}"
  class=""
  placeholder="Enter your Last Name"
  for="lastname-{formID}"
  ><span>Last Name</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="lastname-{formID}"
  name="lastname"
  placeholder=""
  type="text"
  class="hs-input"
  inputmode="text"
  autocomplete="family-name"
  value=""
  />
  </div>
  </div>
  <div class="hs_email hs-email hs-fieldtype-text field hs-form-field">
  <label
  id="label-email-{formID}"
  class=""
  placeholder="Enter your Email"
  for="email-{formID}"
  ><span>Email</span><span class="hs-form-required">*</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="email-{formID}"
  name="email"
  required=""
  placeholder=""
  type="email"
  class="hs-input"
  inputmode="email"
  autocomplete="email"
  value=""
  />
  </div>
  </div>
  <div
  class="hs_website hs-website hs-fieldtype-text field hs-form-field"
  >
  <label
  id="label-website-{formID}"
  class=""
  placeholder="Enter your Website"
  for="website-{formID}"
  ><span>Website</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="website-{formID}"
  name="website"
  placeholder=""
  type="text"
  class="hs-input"
  inputmode="url"
  value=""
  />
  </div>
  </div>
  <div
  class="hs_comment hs-comment hs-fieldtype-textarea field hs-form-field"
  >
  <label
  id="label-comment-{formID}"
  class=""
  placeholder="Enter your Comment"
  for="comment-{formID}"
  ><span>Comment</span><span class="hs-form-required">*</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <textarea
  id="comment-{formID}"
  class="hs-input hs-fieldtype-textarea"
  name="comment"
  required=""
  placeholder=""
  ></textarea>
  </div>
  </div>
  <div class="hs_recaptcha hs-recaptcha field hs-form-field">
  <div class="input">
  <div
  class="grecaptcha-badge"
  data-style="inline"
  style="width: 256px; height: 60px; box-shadow: gray 0px 0px 5px;"
  >
  <div class="grecaptcha-logo">
  <iframe
  title="reCAPTCHA"
  width="256"
  height="60"
  role="presentation"
  name="a-pp7yub2hvkn1"
  frameborder="0"
  scrolling="no"
  sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"
  src="https://www.google.com/recaptcha/enterprise/anchor?{queryParams}"
  ></iframe>
  </div>
  <div class="grecaptcha-error"></div>
  <textarea
  id="g-recaptcha-response"
  name="g-recaptcha-response"
  class="g-recaptcha-response"
  style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"
  ></textarea>
  </div>
  <iframe style="display: none;"></iframe>
  </div>
  <input
  type="hidden"
  name="g-recaptcha-response"
  id="hs-recaptcha-response"
  value=""
  />
  </div>
  <div class="hs_submit hs-submit">
  <div class="hs-field-desc" style="display: none;"></div>
  <div class="actions">
  <input
  type="submit"
  class="hs-button primary"
  value="Submit Comment"
  />
  </div>
  </div>
  <input name="hs_context" type="hidden" value="{submissionContext}" />
  <iframe name="target_iframe_{formID}" style="display: none;"></iframe>
  </form>
  </div>
  </div>
  </span>
  ```
</CodeGroup>

| Parameter     | Typ                    | Beschreibung                                                                                                                                                                                                                                                                           | Standard  |
| ------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `limit`       | Zahl                   | 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 Blogkommentare 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-and-Drop-Layouts](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates) ein Blog-Inhaltsmodul enthalten, werden diese Module nicht mit einem einzigen Tag erstellt. Sie verwenden stattdessen bedingte Logik, um zu definieren, wie ein Blogbeitrag und eine Blog-Auflistung gerendert werden sollen. [Mehr über die Programmieren von Blog-Vorlagen erfahren Sie hier.](/cms/start-building/building-blocks/templates/blog)

## Blogbeitragsfilter

Erstellt eine verlinkte Auflistung von Beiträgen nach Thema, Beiträgen nach Monat oder Beiträgen nach Autor.

<Warning>
  ### Hinweis:

  Dieses Modul kann nur in Blogbeitragsvorlagen verwendet werden.
</Warning>

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter          | Typ                    | Beschreibung                                                                                                                                   | Standard    |
| ------------------ | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `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"`   |

## Blogbeitragsauflistung

Fügt eine Auflistung der beliebtesten oder besten Beiträge hinzu.

<Warning>
  ### Hinweis:

  Dieses Tag kann nur in Blogbeitragsvorlagen 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 Funktion `hsPostListingComplete(feeds)`, wobei `feeds` der jQuery-Selektor in allen Feeds ist, die abgeschlossen wurden. Sie sollten das DOM-Objekt in dieser Funktion direkt bearbeiten.
</Warning>

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter                | Typ                    | Beschreibung                                                                                                                                                                                                                          | Standard    |
| ------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `select_blog`            | "default" oder Blog-ID | Wählt den HubSpot-Blog aus, der für die Auflistung 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 Blogbeiträ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 Blogbeiträ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 eine Auflistung von Blogbeiträ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.

Dieses Tag generiert nicht ein bearbeitbares Modul auf Seiten-/Beitragsebene, sondern wird vollständig mit HubL konfiguriert.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter            | Typ          | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                          | Standard  |
| -------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `blog_ids`           | Zahl         | Die IDs der Blogs, von denen Beiträge aufgenommen werden sollen. Wenn nicht angegeben, enthalten sie Beiträge vom Standard-Blog.                                                                                                                                                                                                                                                                                      |           |
| `blog_post_ids`      | Zeichenfolge | Die IDs der Blogbeiträge, die beim Auffinden relevanter Blogbeiträge verwendet werden sollen, getrennt durch Kommas. Verwenden Sie diesen Parameter nur, wenn das Widget auf Seiten angezeigt wird. Wenn er in Blogbeiträgen verwendet wird, sucht er nach relevanten Beiträgen, die auf dem aktuell angezeigten Blogbeitrag basieren.                                                                                |           |
| `blog_post_override` | Zeichenfolge | Die IDs der Blogbeiträge, die trotz aller anderen Parameterwerte und Filter immer in der zurückgegebenen Auflistung erscheinen sollen (durch Komma getrennt).                                                                                                                                                                                                                                                         |           |
| `limit`              | Zahl         | Die maximale Anzahl an aufzulistenden Blogbeiträgen.                                                                                                                                                                                                                                                                                                                                                                  | `3`       |
| `tags`               | Zeichenfolge | Die Blog-Tags, die verwendet werden sollen, um festzustellen, ob ein Beitrag relevant ist (durch Komma getrennt). Blogbeiträge mit den angegebenen Tags werden für die Relevanz höher eingestuft.                                                                                                                                                                                                                     |           |
| `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`         | datetime     | Datum der frühesten Veröffentlichung. Ein [Beispiel](#examples) finden Sie unten.                                                                                                                                                                                                                                                                                                                                     |           |
| `end_date`           | datetime     | Datum der letzten Veröffentlichung. Ein [Beispiel](#examples) finden Sie unten.                                                                                                                                                                                                                                                                                                                                       |           |
| `blog_authors`       | Zeichenfolge | Die Namen der Autoren, von denen Beiträge aufgenommen werden sollen (durch Komma getrennt). Ein [Beispiel](#examples) finden Sie unten.                                                                                                                                                                                                                                                                               |           |
| `path_prefixes`      | Zeichenfolge | URL-Pfade oder Unterverzeichnisse, aus denen Beiträge aufgenommen werden sollen (durch Komma getrennt). Wenn ein Blogbeitrag ein ähnliches Präfix in seinem Pfad hat, wird die Relevanz des Beitrags erhöht und damit sein Ranking im Listing verbessert.                                                                                                                                                             |           |
| `callback`           | Zeichenfolge | Der Name einer JavaScript-Funktion, um zurückgegebene Blogbeiträge darzustellen. Der Funktion wird ein Array von Blogbeitragsobjekten übergeben, die formatiert werden sollen. Wenn weder der `callback`- noch der `post_formatter`-Parameter angegeben ist, erzeugt das Tag HTML in einem Standardformat. Nachfolgend finden Sie ein [Beispiel](#examples).                                                          | `none`    |
| `post_formatter`     | Zeichenfolge | Der Name eines benutzerdefinierten Makros zum Rendern zurückgegebener Blogbeiträge. Dem Makro werden drei Parameter übergeben, nämlich das zu formatierende Blogbeitragsobjekt, die Anzahl der Blogbeiträge in der Iteration und die Gesamtzahl der Blogbeiträge in den Ergebnissen. Wenn nicht angegeben oder auf `default` festgelegt, wird der integrierte Formatierer verwendet, um jeden Beitrag zu formatieren. | `default` |
| `allow_any_language` | Boolesch     | Wenn diese Option auf `false` festgelegt ist, werden nur Beiträge in der Sprache der Seite angezeigt, auf der das Tag verwendet wird. Wenn 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`   |

<Warning>
  Wir empfehlen dringend die Verwendung des `callback`-Parameters anstelle von `post_formatter`, um die Ladegeschwindigkeit der Seite zu verbessern.
</Warning>

### Beispiele

In diesem Beispiel wird eine Auflistung von Beiträgen generiert, die von einem der drei angegebenen `blog_authors` in zwei verschiedenen Blogs verfasst wurden.

```hubl theme={null}
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}
```

Im folgenden Beispiel wird eine Liste mit 10 Beiträgen generiert, die sich auf einen bestimmten Blogbeitrag beziehen, das Blog-Tag „sales enablement“ enthalten und auf einen bestimmten Veröffentlichungszeitraum beschränkt sind. Dieses Beispiel gibt den `blog_post_ids`-Parameter an, sodass er auf einer Seite verwendet wird.

```hubl theme={null}
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}
```

Im folgenden Beispiel wird mithilfe des `callback`-Parameters eine Auflistung von fünf Beiträgen generiert, um die HTML-Ausgabe der Beitrags-Auflistung zu steuern.

```hubl theme={null}
{% related_blog_posts limit=5, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="https://developers.hubspot.de/docs${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="https://developers.hubspot.de/docs${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';

      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>
```

## Social-Media-Sharing in Blogs

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

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% blog_social_sharing "blog_social_sharing" %}
  {% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter              | Typ                    | Beschreibung                                                                                                                                                                                                                                                                      | Standard  |
| ---------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `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`   |

## Blog-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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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',
  id: 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>
  ```
</CodeGroup>

| Parameter          | Typ                    | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Standard                    |
| ------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `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.<br />Ersetzen Sie beispielsweise die Hub-ID und Formular-ID durch die Informationen aus der URL Ihres Standard-Formulars für Blog-Abonnenten: `edit_form_link=" <ul>\n <li><a href="https://developers.hubspot.de/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> "`. <br />Beachten Sie bitte, dass die `\n`-Zeilenumbruchzeichen oben eine zusätzliche Zeile vor und nach dem Link hinzufügen. |                             |

## 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`](/cms/reference/modules/export-to-template-context) kombiniert wird.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% boolean "boolean" %}
  {% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}
  ```

  ```text ausgabe.txt theme={null}
  false
  ```
</CodeGroup>

| Parameter | Typ      | Beschreibung                                                      | Standard |
| --------- | -------- | ----------------------------------------------------------------- | -------- |
| `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`](/cms/reference/modules/export-to-template-context) kombiniert wird.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% choice "choice" %}
  {% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter | Typ      | Beschreibung                                                                                                                                                                                                                                                                       |
| --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% color "color" %}
  {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}
  ```

  ```text ausgabe.txt theme={null}
  #000000
  ```
</CodeGroup>

| Parameter | Typ          | Beschreibung                                  |
| --------- | ------------ | --------------------------------------------- |
| `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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter      | Typ          | Beschreibung                                                                                                                                                                                                      |
| -------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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.\*                                                                                                                                                                       |

<Info>
  \*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](https://knowledge.hubspot.com/de/website-and-landing-pages/clone-hubspot-content). 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](/cms/reference/hubl/functions#cta), die einen CTA von der ID generiert.
</Info>

## 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](/cms/reference/modules/using-modules-in-templates#block-syntax) verwenden.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter | Typ          | Beschreibung                                    |
| --------- | ------------ | ----------------------------------------------- |
| `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](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview).

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 „Vorlagennutzung“ ein „Nutzungs-Snippet“ angezeigt.

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

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% module "module_15677217712485" path="/Custom/Test custom module"  %}
  {% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter   | Typ          | Beschreibung                                                                                                                                                                                                                                                               |
| ----------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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

Um Platzhalterinhalte für ein Modul im Editor darzustellen, können Sie entweder Standardinhalte zu Modulfeldern hinzufügen oder das `editor_placeholder`-HubL-Tag verwenden. Dies kann nützlich sein, wenn das Modul keinen Standard-Content hat oder benötigt, oder um die Modulerstellung zu optimieren.

<Frame>
  <img src="https://www.hubspot.de/hubfs/Knowledge_Base_2023_2024/editor-placeholder-appearance-example-2.png" alt="module-placeholder-content" />
</Frame>

Um einen Editor-Platzhalter zu einem benutzerdefinierten Modul hinzuzufügen, fügen Sie zunächst eine [if-Anweisung](/cms/reference/hubl/if-statements) zum HTML-Code des Moduls hinzu, um den Platzhalter zu rendern, wenn im Editor kein Inhalt ausgewählt ist. Zum Beispiel könnte der folgende Code verwendet werden, um einen Editor-Platzhalter zu einem CTA-Modul hinzuzufügen:

```hubl theme={null}
{% if module.label %}
   {% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
  {% editor_placeholder %}
{% endif %}
```

<Info>
  Die erste `if`-Anweisung gibt an, ob das Modul vorhanden ist. Dann identifiziert die `elif`-Anweisung, ob das Modul im Kontext des Editors mithilfe der `is_in_editor`-Variablen gerendert wird.

  Diese Variable gibt `true` zurück, wenn der Inhalt in einem beliebigen Content-Editor gerendert wird, aber Sie können mit anderen [In-App-Editor- und Vorschau-Variablen ](/cms/reference/hubl/variables#in-app-editor-and-preview-variables) noch spezifischer sein.
</Info>

Definieren Sie dann den Platzhalterinhalt in der `meta.json`-Datei des Moduls.

```json theme={null}
{
  "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"
  }
}
```

| Parameter          | Typ          | Beschreibung                                    |
| ------------------ | ------------ | ----------------------------------------------- |
| `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. |

## Flexible Spalte

Flexible Spalten sind vertikale Spalten in einer Vorlage, mit denen Content-Autoren mithilfe des [Content-Editors](https://knowledge.hubspot.com/de/website-pages/edit-page-content-in-a-drag-and-drop-area) 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](/cms/reference/fields/module-theme-fields#repeaters) enthalten, die eine ähnliche Funktionalität bieten.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

<Warning>
  ### Hinweis:

  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" %}`
</Warning>

## Formular

Ermöglicht Benutzern die Auswahl eines HubSpot-Formulars, das sie ihrer Seite hinzufügen können. Der folgende Code enthält ein Beispiel für die Verwendung der Standard-Tag-Syntax von HubL und ein Beispiel für die Verwendung der [Blocksyntax](/cms/reference/modules/using-modules-in-templates#block-syntax).

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% form "my_form"
  form_to_use="{formID}",
  title="Free Trial"
  %}

  <!-- Block syntax example -->
  {% module_block form "my_form"
  form_follow_ups_follow_up_type="",
  form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
  title="Free Trial",
  notifications_are_overridden=True,
  response_message="Thanks for submitting the form.",
  response_type="inline",
  overrideable=True,
  gotowebinar_webinar_key="",
  webinar_id="",
  webinar_source"",
  label="Form"
  %}
  {% module_attribute "notifications_override_email_addresses" is_json=True %}
  ["email_address@website.com"]
  {% end_module_attribute %}
  {% end_module_block %}
  ```

  ```text ausgabe.txt theme={null}
  <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: '123456',
  formId: '{formID}',
  formInstanceId: '6756',
  id: 1,
  redirectUrl: 'http:\/\/www.hubspot.com\/',
  deactivateSmartForm: true,
  css: '',
  target: '#hs_form_target_module_13885064832664947',
  contentType: 'landing-page',
  formData: {
  cssClass: 'hs-form stacked hs-custom-form',
  },
  });
  </script>
  </div>
  ```
</CodeGroup>

| Parameter                                | Typ          | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ---------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `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ählng    | 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"` (Standard) sein.                                                                                                                                                                                                                                                                                                                                                                                      |
| `response_message`                       | Zeichenfolge | Legt eine Inline-Danksagung fest Dieser Parameter unterstützt HTML.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `notifications_are_overridden`           | Boolesch     | Wenn dieser Wert auf `True` gesetzt ist, sendet das Formular Benachrichtigungen an die im `notifications_override_email_addresses`-Parameter ausgewählten E-Mail-Adressen, anstatt an die Standardwerte des Formulars. Die Standardeinstellung ist `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.                                                                                                                                                                                                                                                                                                                                                 |
| `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 Accounts verfügbar, die [mit Salesforce integriert](https://knowledge.hubspot.com/de/salesforce/install-the-hubspot-salesforce-integration) sind.                                                                                                                                                                                                                                                                   |
| `gotowebinar_webinar_key`                | Zeichenfolge | : Gibt das GoToWebinar-Webinar an, für das Kontakte nach dem Einsenden des Formulars registriert werden sollen. Nur verfügbar für Accounta, die die [GoToWebinar-Integration](https://knowledge.hubspot.com/de/integrations/use-the-gotowebinar-integration-with-hubspot) verwenden.                                                                                                                                                                                                                                                                                                                         |
| `webinar_id`                             | Zeichenfolge | : Ein allgemeineres Feld, das die ID des Microsoft Teams- oder GoToWebinar-Webinars angibt, für das Kontakte nach dem Einsenden des Formulars registriert werden sollen. Nur in Accounts verfügbar, die die [GoToWebinar](https://knowledge.hubspot.com/de/integrations/use-the-gotowebinar-integration-with-hubspot)- oder [Microsoft Teams](https://knowledge.hubspot.com/de/integrations/connect-hubspot-and-microsoft-teams)-Integrationen verwenden, und wenn `support_all_webinar_types` in der [Definition der Formularfelder](/cms/reference/fields/module-theme-fields#form)auf `true` gesetzt ist. |
| `webinar_source`                         | Zeichenfolge | Die ID der Integrations-App, entweder GoToWebinar (`35161`) oder Microsoft Teams (`221635`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

## Fußzeile

Rendert Copyright-Informationen mit dem Jahr und dem Unternehmensnamen, die in den [Marketing-E-Mail-Einstellungen](https://knowledge.hubspot.com/de/marketing-email/edit-office-location-information-in-email-footers#edit-your-default-email-footer-information-in-your-settings) des Accounts angegeben sind.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% page_footer "page_footer" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

## Galerie

Erzeugt ein HubSpot-Galerie-Tag. Dieses Galerie-Tag basiert auf [Slick](http://kenwheeler.github.io/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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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></span
  >
  ```
</CodeGroup>

| Parameter          | Typ         | Beschreibung                                                                                                                                                                                     | Standard     |
| ------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| `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    | 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`          |

## Header

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

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% header "header"  %}
  {% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter    | Typ          | Beschreibung                                                                             | Standard                |
| ------------ | ------------ | ---------------------------------------------------------------------------------------- | ----------------------- |
| `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](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.10), [5.14.0](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.14.0) und [6.4.2](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.2).

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

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% icon
  name="Accessible Icon"
  style="REGULAR"
  unicode="f368"
  icon_set="fontawesome-5.14.0"
  purpose="decorative"
  title="Accessible Icon"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter  | Typ          | Beschreibung                                                                                                                                                                                                                                                                                                 | Standard     |
| ---------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| `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:<ul><li>`fontawesome-5.14.0`</li><li>`fontawesome-5.0.10`</li><li>`fontawesome-6.4.2`</li></ul>                                                                                                                                               |              |
| `purpose`  | Zeichenfolge | Der Zweck des Symbols, das für die [Barrierefreiheit](https://docs.fontawesome.com/v5/web/other-topics/accessibility) 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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter | Typ          | Beschreibung                                                                                                                                                     | Standard                  |
| --------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `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.](/cms/best-practices/testing-staging-performance/lazy-loading) |                           |

## 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`](/cms/reference/modules/export-to-template-context)-Parameters.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  //cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
  ```
</CodeGroup>

| Parameter | Typ          | Beschreibung                         |
| --------- | ------------ | ------------------------------------ |
| `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](https://knowledge.hubspot.com/de/website-and-landing-pages/create-pages-in-multiple-languages).

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter      | Typ        | Beschreibung                                                                                                                                                                                                                                                                                                                                                               | Standard    |
| -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `display_mode` | Aufzählung | Die Sprache des Textes in der Sprachumschaltung. Werte sind:<ul><li>`Pagelang` bedeutet, dass die Namen der Sprachen in der Sprache der Seite angezeigt werden, auf der sich die Sprachauswahl befindet.</li><li>`Localized` bedeutet, dass die Namen jeder Sprache in ihrer eigenen Sprache angezeigt werden.</li><li>`Hybrid` ist eine Kombination aus beidem.</li></ul> | `Localized` |

## Verlinktes Bild

Erstellt ein vom Benutzer auswählbares Bild, das in einen Link eingeschlossen ist. Dieses Tag 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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter         | Typ          | Beschreibung                                                                                                                                                     | Standard                  |
| ----------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `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**                                                                            | `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.](/cms/best-practices/testing-staging-performance/lazy-loading) |                           |

## Logo

Ein logo-Tag rendert das Logo Ihres Unternehmens aus den [Brand-Kit-Einstellungen](https://knowledge.hubspot.com/de/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo) des Accounts.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% logo "logo" %}
  {% logo "my_logo" width="200" %}
  ```

  ```text ausgabe.txt theme={null}
  <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&width=200"
  class="hs-image-widget "
  width="200"
  alt="HubSpot logo"
  title="HubSpo logot"
  />
  </a>
  </span>
  ```
</CodeGroup>

| Parameter                | Typ          | Beschreibung                                                                                                                                                                    | Standard                      |
| ------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `alt`                    | Zeichenfolge | Legt den Standard-ALT-Text für das Bild fest.                                                                                                                                   | `Value in brand kit settings` |
| `src`                    | Zeichenfolge | Füllt das src-Attribut des img-Tags aus.                                                                                                                                        | `Value in brand kit settings` |
| `link`                   | Zeichenfolge | Legt die Ziel-URL des Links fest, der das img-Tag einschließt.                                                                                                                  |                               |
| `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**                                                                                           | `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` und `center`.                                                                                  |                               |
| `style`                  | Zeichenfolge | Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Beispiel:`style="border:1px solid blue; margin:10px"`                                                                          |                               |
| `suppress_company_name`  | Boolesch     | Blendet Unternehmensnamen aus, wenn kein Bild-Logo festgelegt ist.                                                                                                              | `False`                       |
| `use_account_default`    | Boolesch     | Auf `true` festlegen, um den Unternehmensnamen aus den Standardeinstellungen des Accounts zu verwenden.                                                                         | `False`                       |
| `open_in_new_tab`        | Boolesch     | Legt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht.                                                                                      | `False`                       |
| `override_inherited_src` | Boolesch     | Wenn auf `true` festgelegt, 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 Attribut zum Laden des img-Elements für [browserbasiertes Lazy-Loading](/cms/best-practices/testing-staging-performance/lazy-loading).                              |                               |

## Menü

Erzeugt ein erweitertes Menü basierend auf einer Menüstruktur unter **Inhaltseinstellungen > Erweiterte Menüs.** Unter [Menüs und Navigation](/cms/start-building/building-blocks/modules/menus-and-navigation) finden Sie weitere Informationen zur Verwendung von Menüs in [Vorlagen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/overview) und [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview). Wenn `id` auf `null` festgelegt ist, stellt das menu-Tag das Standardmenü für den HubSpot-Account dar.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter       | Typ          | Beschreibung                                                                                                                                                                                                                                                                                                                  | Standard       |
| --------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `id`            | Zahl         | 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`    | Zahl         | 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"` |
| `label`         | Zeichenfolge | Etwas Rich-Content, um diese Entität zu beschreiben                                                                                                                                                                                                                                                                           | `False`        |
| `label`         | Zeichenfolge | Etwas Rich-Content, um diese Entität zu beschreiben                                                                                                                                                                                                                                                                           | `False`        |

## 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](/cms/reference/hubl/functions#require-css), 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` verwenden.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {{ standard_header_includes }}
  <!-- more html -->

  {% require_css %}
  <style>
  body {
  color: red;
  }
  </style>
  {% end_require_css %}

  {{ standard_footer_includes }}
  ```

  ```text ausgabe.txt theme={null}
  <!-- other standard header html -->
  <style>
  body {
  color: red;
  }
  </style>
  <!-- more html -->
  <!-- other standard footer html -->
  ```
</CodeGroup>

## 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.

```hubl theme={null}
{% 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)`](/cms/reference/hubl/functions#require-js).

<CodeGroup>
  ```text eingabe.txt theme={null}
  {{ standard_header_includes }}
  <!-- more html -->

  {% require_js position="footer" %}
  <script>
  console.log("The CMS is awesome!");
  </script>
  {% end_require_js %}

  {{ standard_footer_includes }}
  ```

  ```text ausgabe.txt theme={null}
  <!-- other standard header html -->
  <!-- more html -->
  <script>
  console.log('The CMS is awesome!');
  </script>
  <!-- other standard footer html -->
  ```
</CodeGroup>

| Parameter  | Typ          | Beschreibung                                                                                                              | Standard   |
| ---------- | ------------ | ------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter | Typ          | Beschreibung                             | Standard                                                                                                                                                                                                                                                                                                                                                                                           |
| --------- | ------------ | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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 [benefits](#) and</li><li>Turning visitors into leads.</li></ul>` |

## RSS-Listing

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

<Warning>
  ### Hinweis:

  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 Funktion `hsRssFeedComplete(feeds)`, wobei `feeds` der jQuery-Selektor in allen Feeds ist, die abgeschlossen wurden. Sie können das DOM-Objekt in dieser Funktion direkt bearbeiten.
</Warning>

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter                | Typ          | Beschreibung                                                                                                                                                                                                                                                        | Standard      |
| ------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `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 `limit_to_chars`-Parameter 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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% section_header "section_header" %}
  {% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header"  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter       | Typ          | Beschreibung                                                           | Standard                     |
| --------------- | ------------ | ---------------------------------------------------------------------- | ---------------------------- |
| `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](/cms/start-building/building-blocks/modules/menus-and-navigation) 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](/cms/reference/modules/using-modules-in-templates#block-syntax) verwenden, um einer Standard-Menüstruktur einzurichten.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter     | Typ        | Beschreibung                                                                                                                                                                | Standard       |
| ------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `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](/cms/reference/modules/using-modules-in-templates#block-syntax) verwendet werden, um die Symbolbilder und mehr anzupassen.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter      | Typ          | Beschreibung                                                             | Standard                          |
| -------------- | ------------ | ------------------------------------------------------------------------ | --------------------------------- |
| `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-and-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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% space "space" %}
  {% space "spacer" label="Horizontal Spacer" %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

## Systemseiten-Tags

Die folgenden Tags können auf [Systemseiten](https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/overview#system-pages) 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](https://knowledge.hubspot.com/de/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages) verwendet werden.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter           | Typ          | Beschreibung                                                                    | Standard                |
| ------------------- | ------------ | ------------------------------------------------------------------------------- | ----------------------- |
| `header`            | Zeichenfolge | Rendert Text in einem h1-Tag über dem Abmeldeformular.                          | `"Email Unsubscribe"`   |
| `input_help_text`   | Zeichnefolge | Rendert Hilfetext in einem h3-Tag über dem Feld für das E-Mail-Abmeldeformular. | `"Your email address:"` |
| `input_placeholder` | Zeichenfolge | Fügt Platzhaltertext im E-Mail-Adressformularfeld hinzu.                        | `"email@example.com"`   |
| `button_text`       | Zeichenfolge | Ä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](https://knowledge.hubspot.com/de/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages) verwendet werden.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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:"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter                       | Typ          | Beschreibung                                                                                                     | Standard                                                                                                                                          |
| ------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `header`                        | Zeichenfolge | Rendert Text in einem h1-Tag über dem Formular für die Abonnementeinstellungen.                                  | `"Communication Preferences"`                                                                                                                     |
| `subheader_text`                | Zeichenfolge | Füllt Text unterhalb der Überschrift über den Abmeldeeinstellungen.                                              | `"<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"` |
| `unsubscribe_single_text`       | Zeichenfolge | Rendert Text in einem `<p class="header">` über den Abonnementoptionen.                                          | `"Uncheck the types of emails you do not want to receive:"`                                                                                       |
| `unsubscribe_all_text`          | Zeichenfolge | 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` | Zeichenfolge | 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`        | Zeichenfolge | Legt den Text neben der Kontrollkästcheneingabe für die Abmeldung von allen E-Mails fest.                        | `"Unsubscribe me from all mailing lists."`                                                                                                        |
| `button_text`                   | Zeichenfolge | Legt den Text der Schaltfläche „Einsenden“ fest, mit der die Abo-Einstellungen aktualisiert werden.              | `"Update email preferences"`                                                                                                                      |
| `resubscribe_button_text`       | Zeichenfolge | 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](https://knowledge.hubspot.com/de/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages) verwendet werden.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter                     | Typ          | Beschreibung                                                                                           | Standard                                                                                                                                          |
| ----------------------------- | ------------ | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `header`                      | Zeichenfolge | Rendert Text in einem h1-Tag über dem Abmeldeformular.                                                 | `"Communication Preferences"`                                                                                                                     |
| `subheader_text`              | Zeichenfolge | Füllt Text über der Bestätigungsnachricht.                                                             | `"<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"` |
| `unsubscribe_all_success`     | Zeichenfolge | 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` | Zeichenfolge | Legt den Text fest, wenn ein Empfänger seine Abo-Einstellungen aktualisiert.                           | `"You have successfully updated your email preferences."`                                                                                         |

### Anmeldung für zugriffsbeschränkte Inhalte

Erstellt ein Anmeldeformular für den Zugang zu [privatem Content](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content).

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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&hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&updated=1644243124141&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="https://developers.hubspot.de/docsjavascript: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="https://developers.hubspot.de/docs/_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>
  ```
</CodeGroup>

| Parameter             | Typ          | Beschreibung                                               | Standard                  |
| --------------------- | ------------ | ---------------------------------------------------------- | ------------------------- |
| `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 Zugriffsberechtigung

Erstellt ein Formular zur Registrierung für den Zugang zu [privatem Content](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content).

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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&hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&updated=1644243124290&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="https://developers.hubspot.de/docsjavascript: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="https://developers.hubspot.de/docsjavascript: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>
  ```
</CodeGroup>

| Parameter                | Typ          | Beschreibung                                          | Standard             |
| ------------------------ | ------------ | ----------------------------------------------------- | -------------------- |
| `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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% password_reset_request "my_password_reset_request" %}
  {% password_reset_request "my_password_reset_request"
  email_label="Email",
  submit_button_text="Send Reset Email"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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&hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&updated=1644243124282&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>
  ```
</CodeGroup>

| Parameter                | Typ          | Beschreibung                                                                                            | Standard             |
| ------------------------ | ------------ | ------------------------------------------------------------------------------------------------------- | -------------------- |
| `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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
  ```

  ```text ausgabe.txt theme={null}
  <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&hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&updated=1644243124282&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>
  ```
</CodeGroup>

| Parameter                | Typ          | Beschreibung                                                                       | Standard             |
| ------------------------ | ------------ | ---------------------------------------------------------------------------------- | -------------------- |
| `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`          | Zeichenfole  | 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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% password_prompt "password_prompt" %}
  {% password_prompt "my_password_prompt"
  submit_button_text="Submit",
  bad_password_message="Sorry, please try again.\n",
  label="Password Prompt"
  %}
  ```

  ```text ausgabe.txt theme={null}
  <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>
  ```
</CodeGroup>

| Parameter              | Typ          | Beschreibung                                                      | Standard                            |
| ---------------------- | ------------ | ----------------------------------------------------------------- | ----------------------------------- |
| `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.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% text "text" %}
  {% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
  ```

  ```text ausgabe.txt theme={null}
  <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
  >
  ```
</CodeGroup>

| Parameter | Typ          | Beschreibung                                            |
| --------- | ------------ | ------------------------------------------------------- |
| `value`   | Zeichenfolge | Legt den Standardtext für das einzeilige Textfeld fest. |

## Textbereich (Textarea)

Ein Textbereich (textarea) ä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 `no_wrapper=true`-Parameter hinzu.

<CodeGroup>
  ```text eingabe.txt theme={null}
  {% 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 %}
  ```

  ```text ausgabe.txt theme={null}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis
  lacus vehicula rutrum.
  ```
</CodeGroup>

| Parameter | Typ          | Beschreibung                               |
| --------- | ------------ | ------------------------------------------ |
| `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.

<Tabs>
  <Tab title="Eingabe">
    ```hubl theme={null}
    {% 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"}" %}
    ```
  </Tab>
</Tabs>

| Parameter              | Typ          | Beschreibung                                                                                                                                                                                                                                     | Standard            |
| ---------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- |
| `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`            | Nummer       | 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.                                                                                                                                                                                                                         |                     |