> 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/it/siti-e-zone/configurazione-degli-annunci-nativi.md).

# Configurazione degli annunci nativi

Creare una [annuncio nativo](/publishers/it/siti-e-zone/create-zone.md#recommendation-widget) zona è semplice ma altamente personalizzabile. Puoi utilizzare processi leggermente diversi per configurare una zona di annunci nativi in base alle tue esigenze:

* **Scenario A**: vuoi semplicemente configurare una zona pubblicitaria, scegliere il rapporto d’aspetto delle immagini della zona di annunci nativi e poi impostare sul tuo sito la dimensione della zona pubblicitaria in modo corrispondente.
* **Scenario B**: vuoi configurare la zona pubblicitaria in modo che corrisponda a una dimensione o a un rapporto immagine personalizzati, così che la zona pubblicitaria abbia lo stesso aspetto del tuo sito e si integri perfettamente.
* **Scenario C**: hai una zona sul tuo sito di una dimensione specifica e vuoi creare una zona pubblicitaria che si adatti e abbia un bell’aspetto.

Qualunque scenario tu scelga, la prima cosa da fare è creare una zona di Annuncio Nativo.

## Creazione di una Zona di Annuncio Nativo

Quando sei autenticato come Publisher, fai clic su **Siti e Zone**, **Nuova zona**, ed espandi la **Nativo** sezione, seleziona il formato Annuncio Nativo **Widget di Raccomandazione** e fai clic su **Avanti**.

![Crea Zona Nativa](/files/73f9dfd963ed895e355145a43a43b097fbea1eb3)

Compila i dettagli della zona e fai clic su **Avanti**.

{% tabs %}
{% tab title="Scenario A: Layout Rapido: Imposta il rapporto d’aspetto" %}
In questo scenario, imposti il rapporto d’aspetto delle immagini nel Pannello di Amministrazione e non è necessario impostare la dimensione totale della zona pubblicitaria. Quando usi il **Layout Rapido**, la zona pubblicitaria che crei si adatterà automaticamente alla dimensione del contenitore in cui la inserisci.

{% stepper %}
{% step %}

### Passaggio 1

![Passaggio 1 Nativo](/files/351ac417f1fed5a179462245472c8891a5473a4c)

Seleziona la **Layout Rapido** scheda. Nella **Layout Desktop** sezione, imposta il numero di colonne e righe di annunci che desideri sul desktop.
{% endstep %}

{% step %}

### Passaggio 2

![Passaggio 2 Nativo](/files/25eb77db3c64015306c2d3c8e6545012e9df37e9)

Quindi, scegli il rapporto d’aspetto per le tue immagini dal menu a discesa **Impostazioni Immagine** Puoi scegliere tra **1:1**, **4:3** o **16:9**, per adattarlo alle miniature sul tuo sito.
{% endstep %}

{% step %}

### Passaggio 3

![Passaggio 3 Nativo](/files/cb77f72c72f16ad0d4cf029da78f46d71f67cd95)

* Dopo aver scelto il rapporto d’aspetto, usa la casella di controllo per scegliere se vuoi mostrare o meno il testo, quindi decidi dove mostrarlo.
* Questo testo consiste in un **Titolo** e una **Descrizione**. Puoi attivarli e disattivarli singolarmente nelle **Titolo** e **Descrizione** sezioni, se lo desideri.
* Controlla l’anteprima a destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni.
  {% endstep %}

{% step %}

### Passaggio 4

![Passaggio 4 Nativo](/files/b5f7a74541460505c5c4a11463339f2b19be2bc4)

* Ripeti i passaggi 1-3 sopra nella **Layout Mobile** sezione per configurare la tua zona pubblicitaria per il mobile.
  {% endstep %}

{% step %}

### Passaggio 5

![Passaggio 5 Nativo](/files/52b4b08f9a8e94b6f2d4786f535e84534268ed6d)

* Controlla l’anteprima sia per **Desktop** e **Mobile** sul lato destro dello schermo. Puoi impostare dove avviene il punto di interruzione tra visualizzazione desktop e mobile nel **Punto di Interruzione Mobile** menu a discesa di **Opzioni Avanzate**.
* Il punto di interruzione può essere impostato a **800px** per iPad, **450px** per mobile e **Non reattivo**. Quando cambiamo il punto di interruzione, cambia se le impostazioni nella sezione Layout Desktop influenzano desktop e iPad, oppure solo il desktop stesso.
* Quando sei soddisfatto dell’aspetto dell’anteprima, fai clic su **Crea**.
  {% endstep %}

{% step %}

### Passaggio 6

![Passaggio 6 Nativo](/files/abbdf6371aaff527a33c56ba59f7708f29437e87)

* Copia il **Tag HTML della Zona** e aggiungilo al tuo sito.
* La zona pubblicitaria si adatterà automaticamente al 100% del contenitore in cui inserisci il tag. Vale a dire, più grande è il contenitore, più grandi saranno sia la zona sia gli annunci.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scenario B: Layout Rapido: Imposta una dimensione immagine personalizzata" %}
In questo scenario, vuoi poter modificare la dimensione dell’immagine e la spaziatura dell’annuncio per adattarle al tuo sito. Lo faresti se vuoi davvero che gli annunci nativi sembrino parte del contenuto editoriale del tuo sito.

{% stepper %}
{% step %}

### Passaggio 1

![Passaggio 7 Nativo](/files/affd55baa38aa691c5eda9c4d93ec6de04ababf0)

* Seleziona la **Layout Rapido** scheda. Nella **Layout Desktop** sezione, imposta il numero di colonne e righe di annunci che desideri sul desktop.
  {% endstep %}

{% step %}

### Passaggio 2

![Passaggio 8 Nativo](/files/e1de3417e78a14c6299647ac69b40b95cf9d42df)

* Nel **Impostazioni Immagine** menu a discesa, seleziona **Dimensione Personalizzata** e imposta la larghezza e l’altezza delle immagini in modo che corrispondano al tuo sito. Se il sito contiene un meta tag ed è reattivo, quando il sito viene visualizzato anche le immagini si adatteranno man mano che la dimensione dello schermo diminuisce. Le informazioni sulla **Dimensione Widget** e il **Dimensione Immagine** verranno visualizzate nell’angolo in alto a destra sopra l’anteprima.
  {% endstep %}

{% step %}

### Passaggio 3

![Passaggio 9 Nativo](/files/2d5c90e24b905b3d15287dd184d849e35e63ea66)

* Una volta impostata la dimensione dell’immagine, scegli se vuoi mostrare o meno il testo usando la casella di controllo **Testo** e scegli dove mostrarlo.
* Controlla l’anteprima a destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni.
  {% endstep %}

{% step %}

### Passaggio 4

![Passaggio 10 Nativo](/files/4ed62c106ded316d1b2dec7f619735d0047c5824)

* Ripeti i passaggi 1-3 nella **Layout Mobile** sezione per configurare la tua zona pubblicitaria per il mobile.
  {% endstep %}

{% step %}

### Passaggio 5

![Passaggio 11 Nativo](/files/c59e48705e0c700a6f6530460fa86584606ae15c)

* Nel **Opzioni Avanzate** sezione, puoi impostare quanti pixel di **Spaziatura Verticale** e **Spaziatura Orizzontale** vuoi attorno a ciascun annuncio.

{% hint style="info" %}
**Nota**: modificare queste impostazioni cambierà la dimensione complessiva della zona pubblicitaria.
{% endhint %}
{% endstep %}

{% step %}

### Passaggio 6

![Passaggio 12 Nativo](/files/52b4b08f9a8e94b6f2d4786f535e84534268ed6d)

* Controlla l’anteprima sia per **Desktop** e **Mobile** sul lato destro dello schermo. Puoi impostare dove avviene il punto di interruzione tra visualizzazione desktop e mobile nel **Punto di Interruzione Mobile** menu a discesa di **Opzioni Avanzate**.
* Il punto di interruzione può essere impostato a **800px** per iPad, **450px** per mobile e **Non reattivo**. Quando cambiamo il punto di interruzione, cambia se le impostazioni nella sezione Layout Desktop influenzano desktop e iPad, oppure solo il desktop stesso.
* Quando sei soddisfatto dell’aspetto dell’anteprima, fai clic su **Crea**.
  {% endstep %}

{% step %}

### Passaggio 7

![Passaggio 13 Nativo](/files/abbdf6371aaff527a33c56ba59f7708f29437e87)

* Copia il **Tag HTML della Zona** e aggiungilo al tuo sito.
* Assicurati che la dimensione della zona pubblicitaria sul tuo sito corrisponda alla dimensione della zona che hai appena creato.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scenario C: Layout Personalizzato: Imposta una dimensione fissa della zona" %}
In questo scenario, vuoi poter impostare la dimensione della zona pubblicitaria in modo che corrisponda alle esigenze del tuo sito, e modificare le impostazioni per assicurarti che gli annunci vengano visualizzati bene.

{% stepper %}
{% step %}

### Passaggio 1

![Passaggio 13 Nativo](/files/bd7fd2c3c56fb5b4457459702103f86325e2c9c2)

Seleziona la **Layout Personalizzato** scheda. Nella **Layout Desktop** sezione, imposta la **Larghezza** e il **Altezza** della zona pubblicitaria totale che desideri creare.
{% endstep %}

{% step %}

### Passaggio 2

![Passaggio 14 Nativo](/files/1ea7d627bb4d01b92a95f66ad6e8baeb292ba912)

Quindi, scegli quanti **Colonne** e **Righe** di annunci desideri visualizzare nella zona pubblicitaria. Controlla l’anteprima a destra per vedere quali impostazioni funzionano per la dimensione che hai scelto.
{% endstep %}

{% step %}

### Passaggio 3

![Passaggio 15 Nativo](/files/866de9151a8224faab2a7151af613a06d98d71a8)

Una volta scelto quante colonne e righe vuoi, scegli se vuoi mostrare o meno il testo usando la **Testo** casella di controllo, e scegli dove mostrarlo usando il menu a discesa **Posizione del Testo** .
{% endstep %}

{% step %}

### Passaggio 4

![Passaggio 15 Nativo](/files/3fa96f7fb0b4be2e5cd5269c6a5bbf4d2df50735)

Ripeti i passaggi 1-3 nella **Layout Mobile** sezione per configurare la tua zona pubblicitaria per il mobile.
{% endstep %}

{% step %}

### Passaggio 5

![Passaggio 16 Nativo](/files/52b4b08f9a8e94b6f2d4786f535e84534268ed6d)

* Controlla l’anteprima sia per **Desktop** e **Mobile** sul lato destro dello schermo. Puoi impostare dove avviene il punto di interruzione tra visualizzazione desktop e mobile nel **Punto di Interruzione Mobile** menu a discesa di **Opzioni Avanzate**.
* Il punto di interruzione può essere impostato a **800px** per iPad, **450px** per mobile e **Non reattivo**. Quando cambiamo il punto di interruzione, cambia se le impostazioni nella sezione Layout Desktop influenzano desktop e iPad, oppure solo il desktop stesso.
* Quando sei soddisfatto dell’aspetto dell’anteprima, fai clic su **Crea**.
  {% endstep %}

{% step %}

### Passaggio 6

![Passaggio 17 Nativo](/files/abbdf6371aaff527a33c56ba59f7708f29437e87)

Copia il **Tag HTML della Zona** e aggiungilo al tuo sito.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

## Selezione di Non reattivo nel Punto di Interruzione Mobile

* Quando il Punto di Interruzione Mobile è impostato su Non reattivo nelle Opzioni Avanzate, la finestra modale qui sotto apparirà sullo schermo.

![Non reattivo2](/files/2a2ddf7b12bdb58652443e7304b40b08435f47d9)

![Non reattivo3](/files/5cd319e57b5467fd8874dc2cd7ce2f245d8372b7)

* Facendo clic su **CONTINUA** nella finestra modale verrà utilizzato il layout desktop per gli annunci su tutti i dispositivi, inclusi mobile e tablet.
* Il layout Mobile non sarà più modificabile dall’utente quando viene selezionato Non reattivo.
* Le impostazioni dell’immagine vengono aggiornate alla dimensione personalizzata predefinita (larghezza - 200px e altezza - 200px) se non salvate in precedenza.

## Uso di CSS personalizzato con gli Annunci Nativi

![banner](/files/4e6ee3ef810105fb84eb9d7d41caca887554ddb7)

Nel **CSS personalizzato** sezione, puoi aggiungere CSS personalizzato per assicurarti che la zona pubblicitaria venga visualizzata correttamente sul tuo sito. Le classi CSS più importanti sono fornite come punto di partenza. Scopri di più su CSS [qui](https://www.w3schools.com/css/default.asp).

{% hint style="info" %}
**Nota**: tieni presente che le modifiche al CSS personalizzato non verranno mostrate nell’anteprima: saranno visibili solo sul tuo sito.
{% endhint %}

### Classi CSS per annunci nativi

Sono fornite cinque classi CSS nella casella iniziale, e puoi incollare ulteriore stile come preferisci. Queste cinque classi CSS stilizzano i seguenti elementi più importanti dell’annuncio nativo:

![CSS dell’annuncio nativo](/files/88e0d3e1a736352a46b23272b500ce50722a1976)

| Classe                             | Azione                                       |
| ---------------------------------- | -------------------------------------------- |
| .exo-native-widget-outer-container | Stilizza l’intero contenitore del widget.    |
| .exo-native-widget-item            | Stilizza i contenitori dei singoli elementi. |
| .exo-native-widget-item-image      | Stilizza l’immagine.                         |
| .exo-native-widget-item-title      | Stilizza il testo del titolo.                |
| .exo-native-widget-item-text       | Stilizza il testo della descrizione          |

### Classi CSS aggiuntive

Puoi anche stilizzare l’annuncio nativo usando queste classi CSS aggiuntive:

| Classe                                | Azione                                                                      |
| ------------------------------------- | --------------------------------------------------------------------------- |
| .exo-native-widget                    | Avvolge l’intero widget.                                                    |
| .exo-native-widget-header             | Avvolge gli elementi dell’intestazione.                                     |
| .exo-native-widget-outer-container    | Avvolge tutti gli annunci.                                                  |
| .exo-native-widget-item-container     | Avvolge il box dell’annuncio.                                               |
| .exo-native-widget-item-image-wrapper | Avvolge l’immagine nel box dell’annuncio.                                   |
| .exo-native-widget-item-image-ratio   | Imposta il rapporto d’aspetto dell’immagine dell’annuncio.                  |
| .exo-native-widget-item-content       | Avvolge tutto il testo del box dell’annuncio.                               |
| .exo-native-widget-item-content-box   | Avvolge il titolo, la descrizione e il brand del contenitore dell’annuncio. |
| .exo-native-widget-item-brand         | Stilizza il brand dell’annuncio.                                            |

**Esempi**

* I seguenti esempi mostrano come i Publisher possono adattare gli stili CSS nella configurazione della Zona Annuncio Nativo in base alle loro esigenze.

{% stepper %}
{% step %}

#### 1. Per posizionare il riquadro del testo sopra l’immagine.

![esempio CSS annuncio nativo](/files/1dd7c95d6f9b20169fb16b9a3cf6fe3cec240bf1)

```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. Per modificare la dimensione del riquadro del testo.

![esempio CSS annuncio nativo](/files/04670f09721f11d436c82e84181b6d6befdd185f)

```css

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

```

{% endstep %}

{% step %}

#### 3. Per posizionare il riquadro del testo sopra l’immagine e aggiungere uno sfondo al riquadro del testo con opacità.

![esempio CSS annuncio nativo](/files/dab36fd4be7be36aeeebd8cd63d6e2d500e11139)

```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. Per arrotondare i bordi dell’immagine.

![esempio CSS annuncio nativo](/files/6f0920faad7ff474ee4e1dd58cf2aa89c1db5237)

```css

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

```

{% endstep %}

{% step %}

#### 5. Per impostare uno stile per il font. In questo modo il Publisher può usare i font disponibili sul proprio sito web e diversi da quelli disponibili nella configurazione della Zona.

![esempio CSS annuncio nativo](/files/55e203826a07f2cbfc6f6694d783cc21e3b9ab94)

```css

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

```

{% endstep %}

{% step %}

#### 6. Per aggiungere spaziatura tra l’immagine e il testo, in modo che il testo possa essere vicino o lontano dall’immagine. Puoi anche usare padding-bottom per aggiungere spazio sotto il testo.

![esempio CSS annuncio nativo](/files/23113ee39bf1d4139697eca8aa86f9a5f3651c35)

```css

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

```

{% endstep %}

{% step %}

#### 7. Per personalizzare il colore di sfondo del riquadro del testo in modo che influisca solo sul riquadro del testo sotto ogni immagine, lasciando lo spazio tra le immagini e i riquadri trasparente o con un colore di sfondo diverso.

![esempio CSS annuncio nativo](/files/6bb75e3a4e445c214ecb04d0a7273f38b1044cbc)

```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. Per aggiungere un bordo che copra un’immagine e il suo riquadro del testo. Questo aiuterà a separare ogni immagine all’interno di quel Widget Nativo.

![esempio CSS annuncio nativo](/files/8dfacdf7ba9b4ad9c8617787133f40fa9ac65d52)

```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/it/siti-e-zone/configurazione-degli-annunci-nativi.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.