> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/publishers/de/sites-and-zonen/einrichtung-nativer-anzeigen.md). # Einrichtung nativer Anzeigen Erstellen einer [Native-Anzeige](/publishers/de/sites-and-zonen/create-zone.md#recommendation-widget) Zone ist einfach und dennoch leistungsstark anpassbar. Je nach Ihren Bedürfnissen können Sie bei der Einrichtung einer Native-Anzeigen-Zone leicht unterschiedliche Vorgehensweisen verwenden: * **Szenario A**: Sie möchten einfach eine Anzeigenzone einrichten, das Seitenverhältnis der Bilder der Native-Anzeigen-Zone wählen und dann die Größe der Anzeigenzone auf Ihrer Website entsprechend festlegen. * **Szenario B**: Sie möchten die Anzeigenzone so einrichten, dass sie zu einer benutzerdefinierten Bildgröße oder einem benutzerdefinierten Seitenverhältnis passt, damit die Anzeigenzone genauso aussieht wie Ihre Website und perfekt hineinpasst. * **Szenario C**: Sie haben auf Ihrer Website eine Zone mit einer bestimmten Größe und möchten eine Anzeigenzone erstellen, die hineinpasst und gut aussieht. Unabhängig davon, für welches Szenario Sie sich entscheiden, müssen Sie zunächst eine Native-Anzeigen-Zone erstellen. ## Erstellen einer Native-Anzeigen-Zone Wenn Sie als Publisher angemeldet sind, klicken Sie auf **Websites & Zonen**, **Neue Zone**, und erweitern Sie den **Native** Bereich, wählen Sie das Native-Anzeigenformat **Empfehlungs-Widget** und klicken Sie auf **Weiter**. ![Zone Native erstellen](/files/253202c9b59d1fa7076234cb4d85bdd7d447327c) Füllen Sie die Zonen-Details aus und klicken Sie auf **Weiter**. {% tabs %} {% tab title="Szenario A: Schnelles Layout: Seitenverhältnis festlegen" %} In diesem Szenario legen Sie im Admin-Panel das Seitenverhältnis für die Bilder fest, und es ist nicht erforderlich, die gesamte Größe der Anzeigenzone festzulegen. Bei Verwendung des **Schnellen Layouts**, passt sich die von Ihnen erstellte Anzeigenzone automatisch an die Größe des Containers an, in den Sie sie einfügen. {% stepper %} {% step %} ### Schritt 1 ![Native Schritt 1](/files/2731ce3e9e1c4096fceb0e740b49cb26d15bf056) Wählen Sie die **Schnellen Layouts** Registerkarte aus. In der **Desktop-Layout** Sektion legen Sie die Anzahl der Spalten und Zeilen der Anzeigen fest, die Sie auf dem Desktop anzeigen möchten. {% endstep %} {% step %} ### Schritt 2 ![Native Schritt 2](/files/fb6f69e55738b452a7cbd9eb7e051669e1de60fb) Wählen Sie als Nächstes das Seitenverhältnis für Ihre Bilder aus den **Bildeinstellungen** Dropdown-Menü aus. Sie können zwischen **1:1**, **4:3** oder **16:9**, wählen, um die Miniaturbilder auf Ihrer Website anzupassen. {% endstep %} {% step %} ### Schritt 3 ![Native Schritt 3](/files/6e21a7d44ffd82d80a2039ca634c0c97fe36c162) * Nachdem Sie das Seitenverhältnis ausgewählt haben, verwenden Sie das Kontrollkästchen, um festzulegen, ob Sie Text anzeigen möchten oder nicht, und entscheiden Sie dann, wo er angezeigt wird. * Dieser Text besteht aus einem **Titel** und einer **Beschreibung**. Sie können diese bei Bedarf in den **Titel** und **Beschreibung** Bereichen einzeln ein- und ausschalten. * Prüfen Sie die Vorschau rechts, um zu sehen, wie Ihre Anzeigenzone aussieht, und passen Sie die Einstellungen bei Bedarf erneut an. {% endstep %} {% step %} ### Schritt 4 ![Native Schritt 4](/files/d486b67ddad6e2efe169bb1a11096913123122b2) * Wiederholen Sie die oben genannten Schritte 1-3 im **Mobile-Layout** Bereich, um Ihre Anzeigenzone für Mobilgeräte einzurichten. {% endstep %} {% step %} ### Schritt 5 ![Native Schritt 5](/files/0e5c4eb4f67cc7a8cd86ad39d87aff3a752d4cd6) * Prüfen Sie die Vorschau für sowohl **Desktop** und **Mobil** auf der rechten Seite des Bildschirms. Sie können im **Mobile-Breakpoint** Dropdown-Menü unter **Erweiterte Optionen**. * festlegen, wo der Breakpoint zwischen Desktop- und Mobilansicht liegt. Der Breakpoint kann auf **800 px** für iPad, **450 px** für Mobilgeräte und **Nicht responsiv**eingestellt werden. Wenn wir den Breakpoint ändern, bestimmt das, ob unsere Einstellungen im Bereich Desktop-Layout Desktop und iPad betreffen oder nur den Desktop selbst. * Wenn Sie mit der Vorschau zufrieden sind, klicken Sie auf **Erstellen**. {% endstep %} {% step %} ### Schritt 6 ![Native Schritt 6](/files/cb2d08516e4c723091fc21e9344ae2e70cff765a) * Kopieren Sie den **Zone-HTML-Tag** und fügen Sie ihn in Ihre Website ein. * Die Anzeigenzone passt sich automatisch auf 100 % des Containers an, in den Sie das Tag einfügen. Das heißt: Je größer der Container, desto größer sind sowohl die Zone als auch die Anzeigen. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Szenario B: Schnelles Layout: Benutzerdefinierte Bildgröße festlegen" %} In diesem Szenario möchten Sie die Bildgröße und den Abstand der Anzeige an Ihre Website anpassen können. Dies würden Sie tun, wenn Sie wirklich möchten, dass die Native-Anzeigen so aussehen, als wären sie Teil des redaktionellen Inhalts Ihrer Website. {% stepper %} {% step %} ### Schritt 1 ![Native Schritt 7](/files/3678fb57c44774bc6355c22be46733a69509b96d) * Wählen Sie die **Schnellen Layouts** Registerkarte aus. In der **Desktop-Layout** Sektion legen Sie die Anzahl der Spalten und Zeilen der Anzeigen fest, die Sie auf dem Desktop anzeigen möchten. {% endstep %} {% step %} ### Schritt 2 ![Native Schritt 8](/files/df63748d568715e089c6c4e93581d6e62c94285a) * Im **Bildeinstellungen** Dropdown-Menü wählen Sie **Benutzerdefinierte Größe** und legen Sie die Breite und Höhe der Bilder so fest, dass sie zu Ihrer Website passen. Wenn die Website ein Meta-Tag enthält und responsiv ist, reagieren die Bilder beim Aufruf der Website ebenfalls, wenn die Bildschirmgröße kleiner wird. Informationen zur **Widget-Größe** und die **Bildgröße** werden oben rechts über der Vorschau angezeigt. {% endstep %} {% step %} ### Schritt 3 ![Native Schritt 9](/files/b47f2b55fa2abd1f0b0d059761b300535e9bd10f) * Nachdem Sie die Bildgröße festgelegt haben, wählen Sie mit dem **Text** Kontrollkästchen aus, ob Sie Text anzeigen möchten oder nicht, und wählen Sie aus, wo er angezeigt wird. * Prüfen Sie die Vorschau rechts, um zu sehen, wie Ihre Anzeigenzone aussieht, und passen Sie die Einstellungen bei Bedarf erneut an. {% endstep %} {% step %} ### Schritt 4 ![Native Schritt 10](/files/5359929caf0db2c31d96d8d7405c7aa4f265cb34) * Wiederholen Sie die Schritte 1-3 im **Mobile-Layout** Bereich, um Ihre Anzeigenzone für Mobilgeräte einzurichten. {% endstep %} {% step %} ### Schritt 5 ![Native Schritt 11](/files/aae59cb3e1f45e4698ace6dcd6676a2d88025761) * Im **Erweiterte Optionen** Bereich können Sie festlegen, wie viele Pixel **vertikalen Abstands** und **horizontalen Abstands** Sie um jede Anzeige haben möchten. {% hint style="info" %} **Hinweis**: Durch das Ändern dieser Einstellungen ändert sich die Gesamtgröße der Anzeigenzone. {% endhint %} {% endstep %} {% step %} ### Schritt 6 ![Native Schritt 12](/files/0e5c4eb4f67cc7a8cd86ad39d87aff3a752d4cd6) * Prüfen Sie die Vorschau für sowohl **Desktop** und **Mobil** auf der rechten Seite des Bildschirms. Sie können im **Mobile-Breakpoint** Dropdown-Menü unter **Erweiterte Optionen**. * festlegen, wo der Breakpoint zwischen Desktop- und Mobilansicht liegt. Der Breakpoint kann auf **800 px** für iPad, **450 px** für Mobilgeräte und **Nicht responsiv**eingestellt werden. Wenn wir den Breakpoint ändern, bestimmt das, ob unsere Einstellungen im Bereich Desktop-Layout Desktop und iPad betreffen oder nur den Desktop selbst. * Wenn Sie mit der Vorschau zufrieden sind, klicken Sie auf **Erstellen**. {% endstep %} {% step %} ### Schritt 7 ![Native Schritt 13](/files/cb2d08516e4c723091fc21e9344ae2e70cff765a) * Kopieren Sie den **Zone-HTML-Tag** und fügen Sie ihn in Ihre Website ein. * Stellen Sie sicher, dass die Größe der Anzeigenzone auf Ihrer Website der Größe der Zone entspricht, die Sie gerade erstellt haben. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Szenario C: Benutzerdefiniertes Layout: Feste Zonengröße festlegen" %} In diesem Szenario möchten Sie die Größe der Anzeigenzone so festlegen können, dass sie den Anforderungen Ihrer Website entspricht, und die Einstellungen so anpassen, dass die Anzeigen gut angezeigt werden. {% stepper %} {% step %} ### Schritt 1 ![Native Schritt 13](/files/6a6ffd20d737f7bddecd8229997ad3c23d151a5c) Wählen Sie die **Benutzerdefiniertes Layout** Registerkarte aus. In der **Desktop-Layout** Bereich legen Sie die **Breite** und die **Höhe** der gesamten Anzeigenzone fest, die Sie erstellen möchten. {% endstep %} {% step %} ### Schritt 2 ![Native Schritt 14](/files/a7c937ef6a915ff8427c36c31dbbe57214cf8c3f) Wählen Sie dann aus, wie viele **Spalten** und **Zeilen** von Anzeigen Sie in der Anzeigenzone anzeigen möchten. Prüfen Sie die Vorschau rechts, um zu sehen, welche Einstellungen für die von Ihnen gewählte Größe funktionieren. {% endstep %} {% step %} ### Schritt 3 ![Native Schritt 15](/files/19708b7fbfe5a4f6038c1a7f9f625c2673aed8ab) Nachdem Sie festgelegt haben, wie viele Spalten und Zeilen Sie möchten, wählen Sie mit dem **Text** Kontrollkästchen aus, ob Sie Text anzeigen möchten oder nicht, und wählen Sie mit dem **Textposition** Dropdown-Menü aus, wo er angezeigt wird. {% endstep %} {% step %} ### Schritt 4 ![Native Schritt 15](/files/93f447245760e2ea2cbb09fc9416429af5c6f57a) Wiederholen Sie die Schritte 1-3 im **Mobile-Layout** Bereich, um Ihre Anzeigenzone für Mobilgeräte einzurichten. {% endstep %} {% step %} ### Schritt 5 ![Native Schritt 16](/files/0e5c4eb4f67cc7a8cd86ad39d87aff3a752d4cd6) * Prüfen Sie die Vorschau für sowohl **Desktop** und **Mobil** auf der rechten Seite des Bildschirms. Sie können im **Mobile-Breakpoint** Dropdown-Menü unter **Erweiterte Optionen**. * festlegen, wo der Breakpoint zwischen Desktop- und Mobilansicht liegt. Der Breakpoint kann auf **800 px** für iPad, **450 px** für Mobilgeräte und **Nicht responsiv**eingestellt werden. Wenn wir den Breakpoint ändern, bestimmt das, ob unsere Einstellungen im Bereich Desktop-Layout Desktop und iPad betreffen oder nur den Desktop selbst. * Wenn Sie mit der Vorschau zufrieden sind, klicken Sie auf **Erstellen**. {% endstep %} {% step %} ### Schritt 6 ![Native Schritt 17](/files/cb2d08516e4c723091fc21e9344ae2e70cff765a) Kopieren Sie den **Zone-HTML-Tag** und fügen Sie ihn in Ihre Website ein. {% endstep %} {% endstepper %} {% endtab %} {% endtabs %} ## Auswahl von Unresponsive im Mobile-Breakpoint * Wenn der Mobile-Breakpoint unter Erweiterte Optionen auf Nicht responsiv gesetzt ist, wird das untenstehende Modal auf dem Bildschirm angezeigt. ![Nicht responsiv2](/files/a42d7e65bb7b47e6f646478318c0dc23d4939979) ![Nicht responsiv3](/files/8be791c23a9390a18ad260f9d6eb6b099b707644) * Wenn Sie im Modal auf **FORTFAHREN** klicken, wird das Desktop-Layout für Anzeigen auf allen Geräten, einschließlich Mobilgeräten und Tablets, ausgeliefert. * Das Mobile-Layout kann vom Benutzer nicht mehr bearbeitet werden, wenn Nicht responsiv ausgewählt ist. * Die Bildeinstellungen werden auf die Standard-Benutzerdefinierte Größe aktualisiert (Breite - 200 px und Höhe - 200 px), falls sie zuvor nicht gespeichert wurden. ## Benutzerdefiniertes CSS mit Native-Anzeigen verwenden ![Banner](/files/3ac34c42e8314956e39008db8dc487d8c3054467) Im **Benutzerdefiniertes CSS** Bereich können Sie benutzerdefiniertes CSS hinzufügen, um sicherzustellen, dass die Anzeigenzone auf Ihrer Website korrekt angezeigt wird. Die wichtigsten CSS-Klassen werden als Ausgangspunkt bereitgestellt. Erfahren Sie mehr über CSS [hier](https://www.w3schools.com/css/default.asp). {% hint style="info" %} **Hinweis**: Beachten Sie, dass Änderungen am benutzerdefinierten CSS nicht in der Vorschau angezeigt werden: Sie werden nur auf Ihrer Website selbst angezeigt. {% endhint %} ### CSS-Klassen für Native-Anzeigen Es werden zunächst fünf CSS-Klassen im Feld bereitgestellt, und Sie können bei Bedarf zusätzliche Formatierungen einfügen. Diese fünf CSS-Klassen gestalten die wichtigsten Elemente der Native-Anzeige wie folgt: ![native CSS](/files/f86b9b93617644b85946e781014ee234fb72ad3d) | Klasse | Aktion | | ---------------------------------- | ----------------------------------------------- | | .exo-native-widget-outer-container | Gestaltet den gesamten Widget-Container. | | .exo-native-widget-item | Gestaltet die Container der einzelnen Elemente. | | .exo-native-widget-item-image | Gestaltet das Bild. | | .exo-native-widget-item-title | Gestaltet den Titeltext. | | .exo-native-widget-item-text | Gestaltet den Beschreibungstext | ### Zusätzliche CSS-Klassen Sie können die Native-Anzeige auch mithilfe dieser zusätzlichen CSS-Klassen gestalten: | Klasse | Aktion | | ------------------------------------- | ------------------------------------------------------------------------------- | | .exo-native-widget | Umhüllt das gesamte Widget. | | .exo-native-widget-header | Umhüllt die Kopfzeilenelemente. | | .exo-native-widget-outer-container | Umhüllt alle Anzeigen. | | .exo-native-widget-item-container | Umhüllt die Anzeigenbox. | | .exo-native-widget-item-image-wrapper | Umhüllt das Bild in der Anzeigenbox. | | .exo-native-widget-item-image-ratio | Legt das Seitenverhältnis des Anzeigenbildes fest. | | .exo-native-widget-item-content | Umhüllt den gesamten Anzeigentext. | | .exo-native-widget-item-content-box | Dies umschließt den Titel, die Beschreibung und die Marke des Anzeigenwrappers. | | .exo-native-widget-item-brand | Gestaltet die Anzeigenmarke. | **Beispiele** * Die folgenden Beispiele zeigen, wie Publisher CSS-Stile bei der Einrichtung einer Native-Ad-Zone an ihre Bedürfnisse anpassen können. {% stepper %} {% step %} #### 1. Um das Textfeld über das Bild zu platzieren. ![native CSS-Beispiel](/files/dccdc7abcf9eded4da2382a6d4fe4fd04d38ff3b) ```css .exo-native-widget-item-content { position: absolute !important; bottom: 0px !important; z-index: 3 !important; top: unset !important; height: 50px !important; left: 15px; } ``` {% endstep %} {% step %} #### 2. Um die Größe des Textfelds zu ändern. ![native CSS-Beispiel](/files/962ef14b28c639263de560c5f0d13583f9ff7e92) ```css .exo-native-widget-item-content { height: 50px !important; } ``` {% endstep %} {% step %} #### 3. Um das Textfeld über das Bild zu platzieren und dem Textfeld einen Hintergrund mit Deckkraft hinzuzufügen. ![native CSS-Beispiel](/files/4e3c6120aad320dde416e1bbc498eb961b686bad) ```css .exo-native-widget-item-content { position: absolute !important; bottom: 0px !important; z-index: 3 !important; top: unset !important; height: 50px !important; background-color: black !important; opacity: 0.7 !important; } .exo-native-widget-item-title { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .exo-native-widget-item-text { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .exo-native-widget-item-brand { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } ``` {% endstep %} {% step %} #### 4. Um die Bildränder abzurunden. ![native CSS-Beispiel](/files/ba69203dd38923f02a8911248c8d39505fd8603e) ```css .exo-native-widget-item-image { border-radius: 5% !important; } ``` {% endstep %} {% step %} #### 5. Um einen Stil für die Schriftart festzulegen. Auf diese Weise kann der Publisher Schriftarten verwenden, die auf seiner Website verfügbar sind, und nicht nur diejenigen, die bei der Zoneneinrichtung verfügbar sind. ![native CSS-Beispiel](/files/13476c7bd8bfc4df1689e31c9ae673e54a202735) ```css .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand { font-family: fantasy !important; } ``` {% endstep %} {% step %} #### 6. Um den Abstand zwischen Bild und Text zu vergrößern, damit der Text entweder nah am Bild oder weiter davon entfernt sein kann. Sie können auch padding-bottom verwenden, um unter dem Text Abstand hinzuzufügen. ![native CSS-Beispiel](/files/85cdc964960e43e6191243c8aee3867a4981f398) ```css .exo-native-widget-item-content { padding: 30px !important; } ``` {% endstep %} {% step %} #### 7. Um die Hintergrundfarbe des Textfelds anzupassen, sodass nur das Textfeld unter jedem Bild betroffen ist und der Bereich zwischen Bildern und Boxen transparent bleibt oder eine andere Hintergrundfarbe erhält. ![native CSS-Beispiel](/files/bc42f01318f076334970733cd04e3af4aaf898ca) ```css .exo-native-widget-item-content { background-color: #ABE1FA !important; padding: 10px !important; } .exo-native-widget-outer-container { background-color: white !important; padding: 10px !important; } .exo-native-widget-item-title { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .exo-native-widget-item-text { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .exo-native-widget-item-brand { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } ``` {% endstep %} {% step %} #### 8. Um einen Rahmen hinzuzufügen, der ein Bild und sein Textfeld umschließt. Dadurch wird jedes Bild innerhalb dieses Native-Widgets besser voneinander abgegrenzt. ![native CSS-Beispiel](/files/f316cab3e440f91d0a510daa5c2652cdc2914e45) ```css .exo-native-widget-item-container { border: 10px #0073B7 solid !important; padding: 10px !important; } .exo-native-widget-outer-container { margin: 10px !important; } ``` {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.exoclick.com/publishers/de/sites-and-zonen/einrichtung-nativer-anzeigen.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.