# Hinzufügen von benutzerdefiniertem HTML unter dem Header (d-header-wrap) anstelle von main-outlet

**URL:** https://meta.discourse.org/t/adding-custom-html-under-header-d-header-wrap-instead-of-main-outlet/253416
**Category:** Development
**Created:** [31. Januar 2023 um 00:09 UTC](https://meta.discourse.org/t/adding-custom-html-under-header-d-header-wrap-instead-of-main-outlet/253416 "2023-01-31T00:09:25Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![AmericanGuy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/americanguy/32/291084_2.png) [@AmericanGuy](https://meta.discourse.org/u/AmericanGuy)
#### Post date: [31. Januar 2023 um 00:09 UTC](https://meta.discourse.org/t/adding-custom-html-under-header-d-header-wrap-instead-of-main-outlet/253416/1 "2023-01-31T00:09:25Z")

</div>

Hey alle zusammen! Ich versuche, benutzerdefiniertes HTML unter dem Header außerhalb des main-outlet mit der wrap-Klasse hinzuzufügen, da ich vermeiden möchte, dass es in der Mitte zentriert wird.

Figma hat etwas Ähnliches (Beispiel)

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/1/d/01d4fe001e5fd5cfd8903ca157ccff8d3ab6f772.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/3/a/53a538a7b7cc0aaff5f69433b056583a73b9e1b5.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [31. Januar 2023 um 21:08 UTC](https://meta.discourse.org/t/adding-custom-html-under-header-d-header-wrap-instead-of-main-outlet/253416/2 "2023-01-31T21:08:52Z")

</div>

Hallo @AmericanGuy! 👋

Es gibt eine ausgezeichnete Theme-Komponente, mit der Sie alle verfügbaren Auslässe sehen können, in denen Sie benutzerdefinierten HTML-Code hinzufügen können:

> [@(deprecated) Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673?u=canapin):
>
> mega the ability to debug plugin outlets is now included in core. Check out [this topic](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215) for more details play_button Original theme component info

Nachdem Sie die Theme-Komponente in Ihrem Theme aktiviert haben, können Sie die Positionen der Auslässe auf Ihrer Website ein- oder ausblenden, indem Sie auf das Auslasssymbol neben dem Suchsymbol klicken: ![outlet icon](https://global.discourse-cdn.com/meta/original/4X/7/2/e/72e2ecfbcdb706f15e518654ab6d7dfbc815f2a9.png)

 ![outlets](https://global.discourse-cdn.com/meta/original/4X/d/c/3/dc3047f0c96cfb8ac43fb3de36dd36badc3f934c.png)

Sie sehen, dass es einen Auslass namens „below-site-header“ direkt unter dem Header gibt.

Jetzt können Sie Ihr benutzerdefiniertes HTML in diesen Auslass einfügen, indem Sie diesen Code im Tab **Head** Ihres Themes oder Ihrer Komponente verwenden:

```xml
<script type="text/x-handlebars" data-template-name="/connectors/below-site-header/my-custom-element">
    test
</script>

```

(ersetzen Sie `my-custom-element` durch einen eindeutigen und beschreibenderen Namen)

Hier sehen Sie, wie es aussehen wird (schauen Sie oben links im Bild):

 ![below-site-header outlet](https://global.discourse-cdn.com/meta/original/4X/0/6/a/06a1d05c05ccbb6db9f4cb4ed694feac8b917c50.png)

Mehr über Auslässe können Sie hier lesen: [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648#modifying-discourse-templates-22) 🪄

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2. März 2023 um 21:09 UTC](https://meta.discourse.org/t/adding-custom-html-under-header-d-header-wrap-instead-of-main-outlet/253416/3 "2023-03-02T21:09:25Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.