Native-Anzeigen-Einrichtung

Erstellen einer Native-Anzeige 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

Füllen Sie die Zonen-Details aus und klicken Sie auf Weiter.

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.

1

Schritt 1

Native Schritt 1

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.

2

Schritt 2

Native Schritt 2

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.

3

Schritt 3

Native Schritt 3

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

4

Schritt 4

Native Schritt 4

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

5

Schritt 5

Native Schritt 5

• 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 responsiveingestellt 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.

6

Schritt 6

Native Schritt 6

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

Szenario B: Schnelles Layout: Benutzerdefinierte Bildgröße festlegen

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

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

Nicht responsiv3

• 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

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.

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

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

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.

1

1. Um das Textfeld über das Bild zu platzieren.

native CSS-Beispiel

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

2

2. Um die Größe des Textfelds zu ändern.

native CSS-Beispiel

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

3

3. Um das Textfeld über das Bild zu platzieren und dem Textfeld einen Hintergrund mit Deckkraft hinzuzufügen.

native CSS-Beispiel

 .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;
    }

4

4. Um die Bildränder abzurunden.

native CSS-Beispiel

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

5

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

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

6

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

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

7

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

 .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;
    }

8

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

.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}