Configuration des annonces natives

Créer une Annonce native la zone est simple et pourtant puissamment personnalisable. Vous pouvez utiliser des processus légèrement différents pour configurer une zone d’annonce native selon vos besoins :

• Scénario A: Vous souhaitez simplement configurer une zone d’annonce, choisir le ratio d’aspect des images de la zone d’annonce native, puis définir sur votre site la taille de la zone d’annonce correspondante.
• Scénario B: Vous souhaitez configurer la zone d’annonce afin qu’elle corresponde à une taille ou un ratio d’image personnalisé, de sorte que la zone d’annonce ait le même aspect que votre site et s’y intègre parfaitement.
• Scénario C: Vous avez sur votre site une zone d’une taille spécifique et souhaitez créer une zone d’annonce qui s’y adapte et qui soit esthétique.

Quel que soit le scénario choisi, la première chose à faire est de créer une zone d’annonce native.

Créer une zone d’annonce native

Lorsque vous êtes connecté en tant qu’éditeur, cliquez sur Sites et zones, Nouvelle zone, puis développez la Native section, sélectionnez le format d’annonce native Widget de recommandation et cliquez sur Suivant.

Créer la zone native

Renseignez les détails de la zone et cliquez sur Suivant.

Scénario A : Disposition rapide : définir le ratio d’aspect

Dans ce scénario, vous définissez le ratio d’aspect des images dans le panneau d’administration, et il n’est pas nécessaire de définir la taille totale de la zone d’annonce. Lors de l’utilisation de la Disposition rapide, la zone d’annonce que vous créez s’adaptera automatiquement à la taille du conteneur dans lequel vous la placez.

1

Étape 1

Étape native 1

Sélectionnez le Disposition rapide onglet. Dans la Disposition bureau section, définissez le nombre de colonnes et de lignes d’annonces que vous souhaitez afficher sur ordinateur.

2

Étape 2

Étape native 2

Ensuite, choisissez le ratio d’aspect de vos images dans la liste déroulante Paramètres d’image liste déroulante. Vous pouvez choisir entre 1:1, 4:3 ou 16:9, pour correspondre aux miniatures de votre site.

3

Étape 3

Étape native 3

• Une fois le ratio d’aspect choisi, utilisez la case à cocher pour décider si vous souhaitez afficher le texte ou non, puis déterminez où il s’affiche.
• Ce texte se compose d’un Titre et d’une Description. Vous pouvez les activer et les désactiver individuellement dans les Titre et Description sections si vous le souhaitez.
• Vérifiez l’aperçu à droite pour voir à quoi ressemble votre zone d’annonce, et ajustez à nouveau les paramètres si nécessaire.

4

Étape 4

Étape native 4

• Répétez les étapes 1 à 3 ci-dessus dans la Disposition mobile section pour configurer votre zone d’annonce pour mobile.

5

Étape 5

Étape native 5

• Vérifiez l’aperçu pour ordinateur et mobile sur le côté droit de l’écran. Vous pouvez définir l’emplacement du point de rupture entre l’affichage ordinateur et mobile dans le Point de rupture mobile menu déroulant des Options avancées.
• Le point de rupture peut être défini sur 800 px pour iPad, 450 px pour mobile et Non réactif. Lorsque nous modifions le point de rupture, cela change si nos paramètres de la section Disposition bureau s’appliquent à l’ordinateur et à l’iPad, ou seulement à l’ordinateur.
• Lorsque l’aperçu vous convient, cliquez sur Créer.

6

Étape 6

Étape native 6

• Copiez la balise HTML de la zone et ajoutez-la à votre site.
• La zone d’annonce s’adaptera automatiquement à 100 % du conteneur dans lequel vous insérez la balise. Autrement dit, plus le conteneur est grand, plus la zone et les annonces le seront également.

Scénario B : Disposition rapide : définir une taille d’image personnalisée

Scénario C : Disposition personnalisée : définir une taille fixe de zone

Sélection de l’option Non réactif dans le point de rupture mobile

• Lorsque le point de rupture mobile est réglé sur Non réactif dans les options avancées, la fenêtre modale ci-dessous apparaît à l’écran.

Non réactif2

Non réactif3

• En cliquant sur CONTINUER dans la fenêtre modale, la disposition bureau des annonces sera diffusée sur tous les appareils, y compris les mobiles et les tablettes.
• La disposition mobile ne sera plus modifiable par l’utilisateur lorsque Non réactif est sélectionné.
• Les paramètres d’image sont mis à jour avec la taille personnalisée par défaut (largeur : 200 px et hauteur : 200 px) s’ils n’ont pas été enregistrés auparavant.

Utilisation de CSS personnalisé avec les annonces natives

bannière

Dans la CSS personnalisé section, vous pouvez ajouter du CSS personnalisé pour vous assurer que la zone d’annonce s’affiche correctement sur votre site. Les classes CSS les plus importantes sont fournies comme point de départ. En savoir plus sur le CSS ici.

Remarque: Sachez que les modifications du CSS personnalisé n’apparaîtront pas dans l’aperçu : elles apparaîtront uniquement sur votre site.

Classes CSS pour les annonces natives

Cinq classes CSS sont fournies dans la boîte au départ, et vous pouvez y ajouter des styles supplémentaires selon vos besoins. Ces cinq classes CSS stylisent les éléments les plus importants de l’annonce native comme suit :

CSS de l’annonce native

Classe	Action
.exo-native-widget-outer-container	Stylise l’ensemble du conteneur du widget.
.exo-native-widget-item	Stylise les conteneurs des éléments individuels.
.exo-native-widget-item-image	Stylise l’image.
.exo-native-widget-item-title	Stylise le texte du titre.
.exo-native-widget-item-text	Stylise le texte de description

Classes CSS supplémentaires

Vous pouvez également styliser l’annonce native à l’aide de ces classes CSS supplémentaires :

Classe	Action
.exo-native-widget	Encadre l’ensemble du widget.
.exo-native-widget-header	Encadre les éléments de l’en-tête.
.exo-native-widget-outer-container	Encadre toutes les annonces.
.exo-native-widget-item-container	Encadre le bloc d’annonce.
.exo-native-widget-item-image-wrapper	Encadre l’image dans le bloc d’annonce.
.exo-native-widget-item-image-ratio	Définit le ratio d’aspect de l’image de l’annonce.
.exo-native-widget-item-content	Encadre tout le texte du bloc d’annonce.
.exo-native-widget-item-content-box	Cela encadre le titre, la description et la marque du conteneur d’annonce.
.exo-native-widget-item-brand	Stylise la marque de l’annonce.

Exemples

• Les exemples suivants montrent comment les éditeurs peuvent adapter les styles CSS lors de la configuration d’une zone d’annonce native selon leurs besoins.

1

1. Pour placer la zone de texte sur l’image.

Exemple de CSS pour annonce native

 .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. Pour modifier la taille de la zone de texte.

Exemple de CSS pour annonce native

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

3

3. Pour placer la zone de texte sur l’image et ajouter un fond à la zone de texte avec opacité.

Exemple de CSS pour annonce native

 .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. Pour arrondir les bordures de l’image.

Exemple de CSS pour annonce native

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

5

5. Pour définir un style pour la police. De cette façon, l’éditeur peut utiliser les polices disponibles sur son site Web ainsi que d’autres polices que celles disponibles dans la configuration de la zone.

Exemple de CSS pour annonce native

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

6

6. Pour ajouter une marge intérieure entre l’image et le texte, afin que le texte puisse être soit proche, soit éloigné de l’image. Vous pouvez également utiliser padding-bottom pour ajouter une marge intérieure sous le texte.

Exemple de CSS pour annonce native

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

7

7. Pour personnaliser la couleur de fond de la zone de texte afin qu’elle n’affecte que la zone de texte située sous chaque image, en laissant l’espace entre les images et les blocs transparent ou avec une couleur de fond différente.

Exemple de CSS pour annonce native

 .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. Pour ajouter une bordure qui englobe une image et sa zone de texte. Cela aidera à séparer chaque image dans ce widget natif.

Exemple de CSS pour annonce native

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