Native Ads einrichten

Creating a Native Ad zone is simple and yet powerfully customizable. You are able to use slightly different processes for setting up a native ad zone depending on your needs:

• Szenario A: Sie möchten einfach einen Anzeigenbereich einrichten, das Seitenverhältnis der Bilder des nativen Anzeigenbereichs auswählen und dann die Größe des Anzeigenbereichs auf Ihrer Website entsprechend einstellen.
• Szenario B: Sie möchten den Anzeigenbereich so einrichten, dass er einer benutzerdefinierten Bildgröße oder einem benutzerdefinierten Bildverhältnis entspricht, damit der Anzeigenbereich genauso aussieht wie Ihre Website und sich perfekt einfügt.
• Szenario C: Sie haben auf Ihrer Website einen Bereich mit einer bestimmten Größe und möchten einen Anzeigenbereich erstellen, der in diesen Bereich passt und gut aussieht.

Für welches Szenario Sie sich auch entscheiden, als Erstes müssen Sie eine Native Ad-Zone erstellen.

Erstellen einer Native Ad Zone

Wenn Sie als Publisher eingeloggt sind, klicken Sie auf Seiten & Zonen, Neue Zone, und erweitern Sie den Abschnitt Native, wählen Sie das Native Ad-Format Empfehlungs-Widget und klicken Sie auf Weiter.

Füllen Sie die Angaben zur Zone aus und klicken Sie auf Weiter.

Szenario A: Schnelles Layout: Seitenverhältnis festlegen

In diesem Szenario legen Sie das Seitenverhältnis für die Bilder in der Verwaltungskonsole fest und es ist nicht notwendig, die Gesamtgröße der Anzeigenzone festzulegen. Wenn Sie das Schnell-Layout verwenden, passt sich der von Ihnen erstellte Anzeigenbereich automatisch an die Größe des Containers an, in dem Sie ihn platzieren.

Schritt 1:

Wählen Sie die Registerkarte Quick Layout. Legen Sie im Abschnitt Desktop-Layout die Anzahl der Anzeigenspalten und -zeilen fest, die Sie auf dem Desktop haben möchten.

Schritt 2:

Wählen Sie dann das Seitenverhältnis für Ihre Bilder aus dem Dropdown-Menü Bildeinstellungen. Sie können zwischen 1:1, 4:3 oder 16:9 wählen, um die Miniaturansichten auf Ihrer Website anzupassen.

Schritt 3:

• Nachdem Sie das Seitenverhältnis gewählt haben, wählen Sie mit dem Kontrollkästchen aus, ob der Text angezeigt werden soll oder nicht, und entscheiden dann, wo er angezeigt werden soll.
• Dieser Text besteht aus einem Titel und einer Beschreibung. Sie können diese in den Abschnitten Titel und Beschreibung einzeln ein- und ausschalten, wenn Sie dies wünschen.
• Überprüfen Sie die Vorschau auf der rechten Seite, um zu sehen, wie Ihr Anzeigenbereich aussieht, und passen Sie die Einstellungen bei Bedarf erneut an.

Schritt 4:

• Wiederholen Sie die Schritte 1 bis 3 im Abschnitt Layout für Mobilgeräte, um Ihre Anzeigenzone für Mobilgeräte einzurichten.

Schritt 5:

• Überprüfen Sie die Vorschau für Desktop und Mobil auf der rechten Seite des Bildschirms. Sie können im Dropdown-Menü Mobiler Unterbrechungspunkt der Erweiterten Optionen festlegen, wo der Unterbrechungspunkt zwischen Desktop- und mobiler Ansicht liegt.
• Der Haltepunkt kann auf 800px für iPad, 450px für Mobile und Unresponsive gesetzt werden. Wenn wir den Haltepunkt ändern, ändert sich, ob unsere Einstellungen im Abschnitt "Desktop-Layout" Desktop und iPad oder nur den Desktop selbst betreffen.
• Wenn Sie mit dem Aussehen der Vorschau zufrieden sind, klicken Sie auf Erstellen.

Schritt 6:

• Kopieren Sie den Zone HTML Tag und fügen Sie ihn in Ihre Website ein.
• Der Anzeigenbereich passt sich automatisch an 100 % des Containers an, in den Sie den Tag eingefügt haben, d. h. je größer der Container ist, desto größer werden sowohl der Bereich als auch die Anzeigen sein.

Szenario B: Schnelles Layout: Festlegen einer benutzerdefinierten Bildgröße

In diesem Szenario möchten Sie die Möglichkeit haben, die Bildgröße und den Abstand der Anzeige an Ihre Website anzupassen. Sie würden dies tun, wenn Sie wirklich möchten, dass die nativen Anzeigen so aussehen, als ob sie Teil des redaktionellen Inhalts Ihrer Website wären.

Schritt 1:

• Wählen Sie die Registerkarte Quick Layout. Legen Sie im Abschnitt Desktop-Layout die Anzahl der Anzeigenspalten und -zeilen fest, die Sie auf dem Desktop haben möchten.

Schritt 2:

• Wählen Sie in der Dropdown-Liste Bildeinstellungen die Option Benutzerdefinierte Größe und passen Sie die Breite und Höhe der Bilder an Ihre Website an. Wenn die Website ein Meta-Tag enthält und responsiv ist, reagieren die Bilder bei der Anzeige der Website auch auf die Verringerung der Bildschirmgröße. Informationen über die Widgetgröße und die Bildgröße werden in der oberen rechten Ecke über der Vorschau angezeigt.

Schritt 3:

• Nachdem Sie die Bildgröße festgelegt haben, wählen Sie über das Kontrollkästchen Text aus, ob Sie Text anzeigen möchten oder nicht, und wählen Sie aus, wo er angezeigt werden soll.
• Überprüfen Sie die Vorschau auf der rechten Seite, um zu sehen, wie Ihr Anzeigenbereich aussieht, und passen Sie die Einstellungen bei Bedarf erneut an.

Schritt 4:

• Wiederholen Sie die Schritte 1-3 im Abschnitt Layout für Mobilgeräte, um Ihre Anzeigenzone für Mobilgeräte einzurichten.

Schritt 5:

• Im Abschnitt Erweiterte Optionen können Sie festlegen, wie viele Pixel vertikaler Abstand und horizontaler Abstand Sie um jede Anzeige herum haben möchten.

---

Hinweis: Wenn Sie diese Einstellungen ändern, ändert sich die Gesamtgröße des Anzeigenbereichs.

---

Schritt 6:

• Überprüfen Sie die Vorschau für Desktop und Mobil auf der rechten Seite des Bildschirms. Sie können im Dropdown-Menü Mobiler Unterbrechungspunkt der Erweiterten Optionen festlegen, wo der Unterbrechungspunkt zwischen Desktop- und mobiler Ansicht liegt.
• Der Haltepunkt kann auf 800px für iPad, 450px für Mobile und Unresponsive gesetzt werden. Wenn wir den Haltepunkt ändern, ändert sich, ob unsere Einstellungen im Abschnitt "Desktop-Layout" Desktop und iPad oder nur den Desktop selbst betreffen.
• Wenn Sie mit dem Aussehen der Vorschau zufrieden sind, klicken Sie auf Erstellen.

Schritt 7:

• Kopieren Sie den Zone HTML Tag und fügen Sie ihn in Ihre Website ein.
• Vergewissern Sie sich, dass die Größe der Anzeigenzone auf Ihrer Website mit der Größe der gerade erstellten Zone übereinstimmt.

Szenario C: Benutzerdefiniertes Layout: Feste Zonengröße festlegen

In diesem Szenario möchten Sie die Größe des Anzeigenbereichs an die Anforderungen Ihrer Website anpassen und die Einstellungen optimieren, um sicherzustellen, dass die Anzeigen gut angezeigt werden.

Schritt 1:

Wählen Sie die Registerkarte Benutzerdefiniertes Layout. Legen Sie im Abschnitt Desktop-Layout die Breite und die Höhe des gesamten Anzeigenbereichs fest, den Sie erstellen möchten.

Schritt 2:

Wählen Sie als Nächstes, wie viele Spalten und Zeilen von Anzeigen Sie in der Anzeigenzone anzeigen möchten. Überprüfen Sie die Vorschau auf der rechten Seite, um zu sehen, welche Einstellungen für die von Ihnen gewählte Größe funktionieren.

Schritt 3:

Nachdem Sie die Anzahl der gewünschten Spalten und Zeilen festgelegt haben, wählen Sie mit dem Kontrollkästchen Text aus, ob der Text angezeigt werden soll oder nicht, und wählen Sie mit dem Dropdown-Menü Textposition aus, wo er angezeigt werden soll.

Schritt 4:

Wiederholen Sie die Schritte 1-3 im Abschnitt Layout für Mobilgeräte, um Ihre Anzeigenzone für Mobilgeräte einzurichten.

Schritt 5:

• Überprüfen Sie die Vorschau für Desktop und Mobil auf der rechten Seite des Bildschirms. Sie können im Dropdown-Menü Mobiler Unterbrechungspunkt der Erweiterten Optionen festlegen, wo der Unterbrechungspunkt zwischen Desktop- und mobiler Ansicht liegt.
• Der Haltepunkt kann auf 800px für iPad, 450px für Mobile und Unresponsive gesetzt werden. Wenn wir den Haltepunkt ändern, ändert sich, ob unsere Einstellungen im Abschnitt "Desktop-Layout" Desktop und iPad oder nur den Desktop selbst betreffen.
• Wenn Sie mit dem Aussehen der Vorschau zufrieden sind, klicken Sie auf Erstellen.

Schritt 6:

Kopieren Sie den Zone HTML Tag und fügen Sie ihn in Ihre Website ein.

Auswählen der Unresponsiven in Mobile Breaking Point

• Wenn der Mobile Breaking Point unter Erweiterte Optionen auf Unresponsive eingestellt ist, wird das untenstehende Modal auf dem Bildschirm angezeigt.

• Wenn Sie im Modal auf Weiter klicken, wird das Desktop-Layout für Anzeigen auf allen Geräten, einschließlich Mobilgeräten und Tablets, angezeigt.
• Das mobile Layout kann vom Benutzer nicht mehr bearbeitet werden, wenn Unresponsive ausgewählt ist.
• The image settings are updated to default custom size (Width - 200px and height - 200px) if not saved previously.  

Benutzerdefinierte CSS mit Native Ads verwenden

In the Custom CSS section, you can add custom CSS to ensure that the ad zone displays correctly on your site. The most important CSS classes are provided as a starting point. Find out more about CSS here.

---

Hinweis: Beachten Sie, dass Änderungen am benutzerdefinierten CSS nicht in der Vorschau angezeigt werden: Sie werden nur auf Ihrer Website selbst angezeigt.

---

CSS-Klassen für native Anzeigen

In der Box sind zunächst fünf CSS-Klassen enthalten, die Sie nach Belieben ergänzen können. Mit diesen fünf CSS-Klassen werden die wichtigsten Elemente der nativen Anzeige wie folgt gestaltet:

Klasse	Aktion
.exo-native-widget-outer-container	Formatiert den gesamten Widget-Container.
.exo-native-widget-item	Gestalten Sie die Behälter der einzelnen Artikel.
.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 mit diesen zusätzlichen CSS-Klassen gestalten:

Klasse	Aktion
.exo-native-widget	Umhüllt das gesamte Widget.
.exo-native-widget-header	Umhüllt die Kopfelemente.
.exo-native-widget-outer-container	Umfasst alle Anzeigen.
.exo-native-widget-item-container	Umhüllt die Adbox.
.exo-native-widget-item-image-wrapper	Umhüllt das Bild in der Adbox.
.exo-native-widget-item-image-ratio	Legt das Seitenverhältnis des Anzeigenbildes fest.
.exo-native-widget-item-Inhalt	Umfasst den gesamten Text der Adbox.
.exo-native-widget-item-content-box	Dies umschließt den Titel, die Beschreibung und die Marke des Anzeigenumschlags.
.exo-native-widget-item-brand	Gestaltet die Anzeigenmarke.

Beispiele

• Die folgenden Beispiele zeigen, wie Publisher die CSS-Stile bei der Einrichtung der Native Ad Zone nach ihren Bedürfnissen anpassen können.

1. So platzieren Sie das Textfeld über dem Bild.

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

1. So ändern Sie die Größe des Textfelds.

 .exo-native-widget-item-content {
      height: 50px  !important;
   }

1. So platzieren Sie den Textrahmen über dem Bild und fügen dem Textrahmen einen Hintergrund mit Deckkraft hinzu.

 .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: 15px;
    color: white !important
    }
.exo-native-widget-item-text {
  margin-left: 15px;
  color: white !important
}

1. Um die Bildränder zu krümmen.

 .exo-native-widget-item-image {
    border-radius: 5% !important;
    }

1. Um einen Stil für die Schriftart festzulegen. Auf diese Weise kann der Herausgeber Schriftarten verwenden, die auf seiner Website verfügbar sind, und andere als die, die in der Zoneneinrichtung verfügbar sind.

 .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
   font-family: fantasy !important;
   }

1. Mit padding-bottom fügen Sie einen Abstand zwischen Bild und Text ein, so dass der Text entweder nah oder weit vom Bild entfernt sein kann. Sie können auch padding-bottom verwenden, um eine Auffüllung unterhalb des Textes hinzuzufügen.

 .exo-native-widget-item-content {
    padding: 30px !important;
    }

1. Sie können die Hintergrundfarbe des Textfeldes so anpassen, dass sie sich nur auf das Textfeld unter dem jeweiligen Bild auswirkt und der Raum zwischen den Bildern und Feldern transparent bleibt oder eine andere Hintergrundfarbe erhält.

 .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: 15px;
}

.exo-native-widget-item-text {
margin-left: 15px;
}

1. Zum Hinzufügen eines Rahmens, der ein Bild und sein Textfeld bedeckt. Dies hilft, jedes Bild innerhalb des nativen Widgets zu trennen.

 .exo-native-widget-item-container {
  border: 2px #0073B7 solid !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important
}

.exo-native-widget-outer-container {
  margin-bottom: 10px !important;
  margin-right: 10px !important
}