> 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/fr/sites-et-zones/configuration-des-annonces-natives.md).

# Configuration des annonces natives

Créer une [Annonce native](/publishers/fr/sites-et-zones/create-zone.md#recommendation-widget) 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](/files/cbe35ff10c7e5a6e47c79734a6f47d89589766ec)

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

{% tabs %}
{% tab title="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.

{% stepper %}
{% step %}

### Étape 1

![Étape native 1](/files/67bda79fa9c45763babab3ff15a03b5c6c2fd65a)

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.
{% endstep %}

{% step %}

### Étape 2

![Étape native 2](/files/8b2fa02eba05712b0af837480d8dc26d069f8494)

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.
{% endstep %}

{% step %}

### Étape 3

![Étape native 3](/files/15a31b09befb92b713a531798c9c2f0912a4b28a)

* 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.
  {% endstep %}

{% step %}

### Étape 4

![Étape native 4](/files/4a40ec1cd9021b9617bd9c37e68c468008c1e4dc)

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

{% step %}

### Étape 5

![Étape native 5](/files/388b6fa33e653ec3c61e64bdd6c6b46afe4d2487)

* 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**.
  {% endstep %}

{% step %}

### Étape 6

![Étape native 6](/files/2d903ad372a73e3318a16e422f9e9a9bab9bcbdc)

* 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.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scénario B : Disposition rapide : définir une taille d’image personnalisée" %}
Dans ce scénario, vous souhaitez pouvoir modifier la taille de l’image et l’espacement de l’annonce pour les adapter à votre site. Vous feriez cela si vous voulez vraiment que les annonces natives aient l’air de faire partie du contenu éditorial de votre site.

{% stepper %}
{% step %}

### Étape 1

![Étape native 7](/files/e672bf7d3164ba7ab4e63a9a668c33f800fa15f7)

* 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.
  {% endstep %}

{% step %}

### Étape 2

![Étape native 8](/files/9bac30b38a317a38dc763382677ef14375dae2fb)

* Dans la **Paramètres d’image** liste déroulante, sélectionnez **Taille personnalisée** et définissez la largeur et la hauteur des images pour correspondre à votre site. Si le site contient une balise méta et qu’il est responsive, lorsque le site est consulté, les images s’adapteront également à mesure que la taille de l’écran diminue. Des informations sur la **Taille du widget** et le **Taille de l’image** s’afficheront dans le coin supérieur droit au-dessus de l’aperçu.
  {% endstep %}

{% step %}

### Étape 3

![Étape native 9](/files/4912e0b4c55414ec3898c4c7a7abfd5ab806ae50)

* Une fois la taille de l’image définie, choisissez si vous souhaitez afficher le texte ou non à l’aide de la **Texte** case à cocher, et choisissez où il s’affiche.
* Vérifiez l’aperçu à droite pour voir à quoi ressemble votre zone d’annonce, et ajustez à nouveau les paramètres si nécessaire.
  {% endstep %}

{% step %}

### Étape 4

![Étape native 10](/files/b112eb72dd876d4ea3511a03a2b2c23d68d0d572)

* Répétez les étapes 1 à 3 dans la **Disposition mobile** section pour configurer votre zone d’annonce pour mobile.
  {% endstep %}

{% step %}

### Étape 5

![Étape native 11](/files/4e8a2ffbb19420e52ca9c072afd901903b019b89)

* Dans la **Options avancées** section, vous pouvez définir combien de pixels de **Espacement vertical** et **Espacement horizontal** vous souhaitez autour de chaque annonce.

{% hint style="info" %}
**Remarque**: la modification de ces paramètres changera la taille globale de la zone d’annonce.
{% endhint %}
{% endstep %}

{% step %}

### Étape 6

![Étape native 12](/files/388b6fa33e653ec3c61e64bdd6c6b46afe4d2487)

* 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**.
  {% endstep %}

{% step %}

### Étape 7

![Étape native 13](/files/2d903ad372a73e3318a16e422f9e9a9bab9bcbdc)

* Copiez la **balise HTML de la zone** et ajoutez-la à votre site.
* Assurez-vous que la taille de la zone d’annonce sur votre site correspond à la taille de la zone que vous venez de créer.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scénario C : Disposition personnalisée : définir une taille fixe de zone" %}
Dans ce scénario, vous souhaitez pouvoir définir la taille de la zone d’annonce en fonction des besoins de votre site, et ajuster les paramètres pour vous assurer que les annonces s’affichent correctement.

{% stepper %}
{% step %}

### Étape 1

![Étape native 13](/files/7dd3cd6ea067c0dfb3ece215478e0c0fb722b1f2)

Sélectionnez le **Disposition personnalisée** onglet. Dans la **Disposition bureau** section, définissez la **Largeur** et le **Hauteur** de la zone d’annonce totale que vous souhaitez créer.
{% endstep %}

{% step %}

### Étape 2

![Étape native 14](/files/29b5851bbd57d75176ba63b3d631b09d5f46103c)

Ensuite, choisissez combien de **Colonnes** et **Lignes** d’annonces vous souhaitez afficher dans la zone d’annonce. Vérifiez l’aperçu à droite pour voir quels paramètres conviennent à la taille que vous avez choisie.
{% endstep %}

{% step %}

### Étape 3

![Étape native 15](/files/908b55012530a2096db98f08983d60299ce5896c)

Une fois que vous avez choisi le nombre de colonnes et de lignes souhaité, choisissez si vous souhaitez afficher le texte ou non à l’aide de la **Texte** case à cocher, et choisissez où il s’affiche à l’aide de la **Position du texte** liste déroulante.
{% endstep %}

{% step %}

### Étape 4

![Étape native 15](/files/75f09bdbeb98cfeb2c10f53cb27bb759e2f93e3d)

Répétez les étapes 1 à 3 dans la **Disposition mobile** section pour configurer votre zone d’annonce pour mobile.
{% endstep %}

{% step %}

### Étape 5

![Étape native 16](/files/388b6fa33e653ec3c61e64bdd6c6b46afe4d2487)

* 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**.
  {% endstep %}

{% step %}

### Étape 6

![Étape native 17](/files/2d903ad372a73e3318a16e422f9e9a9bab9bcbdc)

Copiez la **balise HTML de la zone** et ajoutez-la à votre site.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

## 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](/files/99f516d23ee2e8dd913134b1e682a416dcac3538)

![Non réactif3](/files/e69c7ea01a47ac09f8537c7793387875cee1abf5)

* 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](/files/4effa0111df92809c5f33c261597d6af30f97401)

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](https://www.w3schools.com/css/default.asp).

{% hint style="info" %}
**Remarque**: Sachez que les modifications du CSS personnalisé n’apparaîtront pas dans l’aperçu : elles apparaîtront uniquement sur votre site.
{% endhint %}

### 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](/files/1be21087374786b9dfde004f41f9d00919886403)

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

{% stepper %}
{% step %}

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

![Exemple de CSS pour annonce native](/files/16f3e3c9727463b5183ccbeb43971c1cb04235d6)

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

![Exemple de CSS pour annonce native](/files/005f23937b2580d9e62befcc23fdbbede7ba3e92)

```css

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

```

{% endstep %}

{% step %}

#### 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](/files/430821faffd6145682a8a9c9a32e1805fe39f03e)

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

![Exemple de CSS pour annonce native](/files/05427fe94bb2693514cc305734fa7890656563be)

```css

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

```

{% endstep %}

{% step %}

#### 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](/files/de17cadd7c09743dfd0b97f10a7a98716603809f)

```css

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

```

{% endstep %}

{% step %}

#### 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](/files/fb51b6fa3160b2390212771cbe58670c09879012)

```css

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

```

{% endstep %}

{% step %}

#### 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](/files/fb843bada2da13827511a083ad395ca92dacf08f)

```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. 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](/files/4deeea4acc32aa7bfe68afb2a0d7e9e7fbad2148)

```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/fr/sites-et-zones/configuration-des-annonces-natives.md?ask=<question>&goal=<endgoal>
```

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