> 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/es/sitios-y-zonas/configuracion-de-anuncios-nativos.md).

# Configuración de anuncios nativos

Crear una [zona de anuncio nativo](/publishers/es/sitios-y-zonas/create-zone.md#recommendation-widget) es simple y, sin embargo, poderosamente personalizable. Puedes usar procesos ligeramente diferentes para configurar una zona de anuncio nativo según tus necesidades:

* **Escenario A**: Simplemente quieres configurar una zona de anuncio, elegir la relación de aspecto de las imágenes de la zona de anuncio nativo y luego establecer en tu sitio el tamaño de la zona de anuncio para que coincida.
* **Escenario B**: Quieres configurar la zona de anuncio para que coincida con un tamaño o una relación de imagen personalizada, de modo que la zona de anuncio se vea igual que tu sitio y encaje perfectamente.
* **Escenario C**: Tienes una zona en tu sitio de un tamaño específico y quieres crear una zona de anuncio que encaje en ella y se vea bien.

Sea cual sea el escenario que elijas, lo primero que debes hacer es crear una zona de anuncio nativo.

## Creación de una zona de anuncio nativo

Cuando hayas iniciado sesión como editor, haz clic en **Sitios y zonas**, **Nueva zona**, y despliega la sección **Nativa** , selecciona el formato de anuncio nativo **Widget de recomendación** y haz clic en **Siguiente**.

![Crear zona nativa](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/1lsZ4Ki3CIL173vBDbzo/assets/hires/create-zone-native.png)

Completa los detalles de la zona y haz clic en **Siguiente**.

{% tabs %}
{% tab title="Paso nativo A: Diseño rápido: establece la relación de aspecto" %}
En este escenario, estableces la relación de aspecto de las imágenes en el Panel de administración y no es necesario establecer el tamaño total de la zona de anuncio. Al usar el **Diseño rápido**, la zona de anuncio que crees se adaptará automáticamente al tamaño del contenedor en el que la coloques.

{% stepper %}
{% step %}

### Paso 1

![Paso nativo 1](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/i4nnDybTXZj0jYx8l8ie/assets/hires/native/sca-step1.png)

Selecciona la pestaña **Diseño rápido** En la **Diseño de escritorio** sección, establece el número de columnas y filas de anuncios que deseas en escritorio.
{% endstep %}

{% step %}

### Paso 2

![Paso nativo 2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/XcQLr7Fi2GR8u2O7oLcD/assets/hires/native/sca-step2.png)

A continuación, elige la relación de aspecto de tus imágenes en el desplegable de **Configuración de imagen** Puedes elegir entre **1:1**, **4:3** o **16:9**, para que coincida con las miniaturas de tu sitio.
{% endstep %}

{% step %}

### Paso 3

![Paso nativo 3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/5LzyX7rTkfZEucmCbY04/assets/hires/native/sca-step3.png)

* Una vez que hayas elegido la relación de aspecto, usa la casilla de verificación para elegir si quieres mostrar texto o no, y luego decide dónde se muestra.
* Este texto consta de un **Título** y una **Descripción**. Puedes activarlos y desactivarlos individualmente en las secciones **Título** y **Descripción** si lo deseas.
* Comprueba la vista previa de la derecha para ver cómo se ve tu zona de anuncio, y ajusta la configuración de nuevo si es necesario.
  {% endstep %}

{% step %}

### Paso 4

![Paso nativo 4](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/pXcT9dbHa7ocZdeuSgGC/assets/hires/native/sca-step4.png)

* Repite los pasos 1-3 anteriores en la sección **Diseño móvil** para configurar tu zona de anuncio para móvil.
  {% endstep %}

{% step %}

### Paso 5

![Paso nativo 5](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

* Comprueba la vista previa tanto de **Escritorio** y **Móvil** en el lado derecho de la pantalla. Puedes establecer dónde ocurre el punto de ruptura entre la vista de escritorio y la móvil en el desplegable de **Punto de ruptura móvil** de **Opciones avanzadas**.
* El punto de ruptura puede configurarse en **800 px** para iPad, **450 px** para móvil y **No adaptable**. Cuando cambiamos el punto de ruptura, esto cambia si nuestra configuración en la sección Diseño de escritorio afecta al escritorio y al iPad, o solo al escritorio en sí.
* Cuando estés satisfecho con el aspecto de la vista previa, haz clic en **Crear**.
  {% endstep %}

{% step %}

### Paso 6

![Paso nativo 6](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

* Copia la **Etiqueta HTML de la zona** y añádela a tu sitio.
* La zona de anuncio se ajustará automáticamente al 100 % del contenedor en el que coloques la etiqueta. Es decir, cuanto mayor sea el contenedor, mayores serán tanto la zona como los anuncios.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Escenario B: Diseño rápido: establece un tamaño de imagen personalizado" %}
En este escenario, quieres poder cambiar el tamaño de la imagen y el espaciado del anuncio para que coincidan con tu sitio. Harías esto si realmente quieres que los anuncios nativos parezcan parte del contenido editorial de tu sitio.

{% stepper %}
{% step %}

### Paso 1

![Paso nativo 7](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/esjgXHOuLYDy2kSfiWXV/assets/hires/native/scb-step1.png)

* Selecciona la pestaña **Diseño rápido** En la **Diseño de escritorio** sección, establece el número de columnas y filas de anuncios que deseas en escritorio.
  {% endstep %}

{% step %}

### Paso 2

![Paso nativo 8](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/9knI85T5uv4S2k0ennMD/assets/hires/native/scb-step2.png)

* En el **Configuración de imagen** desplegable, selecciona **Tamaño personalizado** y establece el ancho y el alto de las imágenes para que coincidan con tu sitio. Si el sitio contiene una metaetiqueta y es adaptable, cuando se vea el sitio, las imágenes también se ajustarán a medida que el tamaño de la pantalla disminuya. La información sobre el **Tamaño del widget** y el **Tamaño de imagen** se mostrará en la esquina superior derecha, encima de la vista previa.
  {% endstep %}

{% step %}

### Paso 3

![Paso nativo 9](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/YWchSf0txs1p9pbnCBXb/assets/hires/native/scb-step3.png)

* Una vez que hayas establecido el tamaño de la imagen, elige si quieres mostrar texto o no, usando la casilla de verificación de **Texto** y elige dónde se muestra.
* Comprueba la vista previa de la derecha para ver cómo se ve tu zona de anuncio, y ajusta la configuración de nuevo si es necesario.
  {% endstep %}

{% step %}

### Paso 4

![Paso nativo 10](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/A8dhcTNINaI7ni1fz9Ho/assets/hires/native/scb-step4.png)

* Repite los pasos 1-3 en la **Diseño móvil** para configurar tu zona de anuncio para móvil.
  {% endstep %}

{% step %}

### Paso 5

![Paso nativo 11](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4EatUeZ6VmU4VsaUQpfE/assets/hires/native/scb_advance1.png)

* En el **Opciones avanzadas** sección, puedes establecer cuántos píxeles de **Espaciado vertical** y **Espaciado horizontal** quieres alrededor de cada anuncio.

{% hint style="info" %}
**Nota**: Cambiar esta configuración modificará el tamaño total de la zona de anuncio.
{% endhint %}
{% endstep %}

{% step %}

### Paso 6

![Paso nativo 12](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

* Comprueba la vista previa tanto de **Escritorio** y **Móvil** en el lado derecho de la pantalla. Puedes establecer dónde ocurre el punto de ruptura entre la vista de escritorio y la móvil en el desplegable de **Punto de ruptura móvil** de **Opciones avanzadas**.
* El punto de ruptura puede configurarse en **800 px** para iPad, **450 px** para móvil y **No adaptable**. Cuando cambiamos el punto de ruptura, esto cambia si nuestra configuración en la sección Diseño de escritorio afecta al escritorio y al iPad, o solo al escritorio en sí.
* Cuando estés satisfecho con el aspecto de la vista previa, haz clic en **Crear**.
  {% endstep %}

{% step %}

### Paso 7

![Paso nativo 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

* Copia la **Etiqueta HTML de la zona** y añádela a tu sitio.
* Asegúrate de que el tamaño de la zona de anuncio en tu sitio coincida con el tamaño de la zona que acabas de crear.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Escenario C: Diseño personalizado: establece un tamaño fijo de la zona" %}
En este escenario, quieres poder establecer el tamaño de la zona de anuncio para que coincida con lo que necesita tu sitio y ajustar la configuración para asegurarte de que los anuncios se muestren bien.

{% stepper %}
{% step %}

### Paso 1

![Paso nativo 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/JEhQvAhXNjExOj7GXOyw/assets/hires/native/scc-step1.png)

Selecciona la pestaña **Diseño personalizado** En la **Diseño de escritorio** sección, establece el **Ancho** y el **Alto** de la zona de anuncios total que deseas crear.
{% endstep %}

{% step %}

### Paso 2

![Paso nativo 14](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/WVwRdNmMUtNGQnymV67U/assets/hires/native/scc-step2.png)

A continuación, elige cuántas **Columnas** y **Filas** de anuncios deseas mostrar en la zona de anuncio. Comprueba la vista previa de la derecha para ver qué configuración funciona para el tamaño que has elegido.
{% endstep %}

{% step %}

### Paso 3

![Paso nativo 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/oObBcmxtsFqPjD2pa1fl/assets/hires/native/scc-step3.png)

Una vez que hayas elegido cuántas columnas y filas quieres, elige si quieres mostrar texto o no, usando la casilla de verificación de **Texto** y elige dónde se muestra usando el desplegable de **Posición del texto** .
{% endstep %}

{% step %}

### Paso 4

![Paso nativo 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/wdY8i3TWgXoyIWW3SYrW/assets/hires/native/scc-step4.png)

Repite los pasos 1-3 en la **Diseño móvil** para configurar tu zona de anuncio para móvil.
{% endstep %}

{% step %}

### Paso 5

![Paso nativo 16](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

* Comprueba la vista previa tanto de **Escritorio** y **Móvil** en el lado derecho de la pantalla. Puedes establecer dónde ocurre el punto de ruptura entre la vista de escritorio y la móvil en el desplegable de **Punto de ruptura móvil** de **Opciones avanzadas**.
* El punto de ruptura puede configurarse en **800 px** para iPad, **450 px** para móvil y **No adaptable**. Cuando cambiamos el punto de ruptura, esto cambia si nuestra configuración en la sección Diseño de escritorio afecta al escritorio y al iPad, o solo al escritorio en sí.
* Cuando estés satisfecho con el aspecto de la vista previa, haz clic en **Crear**.
  {% endstep %}

{% step %}

### Paso 6

![Paso nativo 17](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

Copia la **Etiqueta HTML de la zona** y añádela a tu sitio.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

## Seleccionar No adaptable en el punto de ruptura móvil

* Cuando el Punto de ruptura móvil se establece en No adaptable en Opciones avanzadas, aparecerá el siguiente modal en la pantalla.

![No adaptable2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/AHKGWus2UFehm3E9QMTe/assets/hires/unresponsive2.png)

![No adaptable3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/MbemiUHb7Szd9C1r4JWZ/assets/hires/unresponsive3.png)

* Al hacer clic en **CONTINUAR** en el modal, se servirá el diseño de escritorio para los anuncios en todos los dispositivos, incluidos los móviles y las tabletas.
* El diseño móvil ya no podrá ser editado por el usuario cuando se seleccione No adaptable.
* La configuración de imagen se actualiza al tamaño personalizado predeterminado (ancho: 200 px y alto: 200 px) si no se guardó previamente.

## Uso de CSS personalizado con anuncios nativos

![banner](https://212229893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGoSwRYjxsR1XS6va6yLj%2Fuploads%2FbUrcdZCax7qachURBVTS%2Fimage.png?alt=media\&token=75616bc9-e5e7-42a2-8c9b-34707a1e0bc2)

En el **CSS personalizado** sección, puedes añadir CSS personalizado para asegurarte de que la zona de anuncio se muestre correctamente en tu sitio. Se proporcionan las clases CSS más importantes como punto de partida. Obtén más información sobre CSS [aquí](https://www.w3schools.com/css/default.asp).

{% hint style="info" %}
**Nota**: Ten en cuenta que los cambios en el CSS personalizado no se mostrarán en la vista previa: solo se mostrarán en tu sitio.
{% endhint %}

### Clases CSS para anuncios nativos

Se proporcionan cinco clases CSS en el cuadro para empezar, y puedes pegar estilos adicionales según te convenga. Estas cinco clases CSS dan estilo a los elementos más importantes del anuncio nativo de la siguiente manera:

![CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ThwwsRHFlTOSbIoMqI1E/assets/hires/native-ad-css-class.png)

| Clase                              | Acción                                                      |
| ---------------------------------- | ----------------------------------------------------------- |
| .msg-native-widget-outer-container | Da estilo a todo el contenedor del widget.                  |
| .msg-native-widget-item            | Da estilo a los contenedores de los elementos individuales. |
| .msg-native-widget-item-image      | Da estilo a la imagen.                                      |
| .msg-native-widget-item-title      | Da estilo al texto del título.                              |
| .msg-native-widget-item-text       | Da estilo al texto de la descripción                        |

### Clases CSS adicionales

También puedes dar estilo al anuncio nativo usando estas clases CSS adicionales:

| Clase                                 | Acción                                                                         |
| ------------------------------------- | ------------------------------------------------------------------------------ |
| .msg-native-widget                    | Envuelve todo el widget.                                                       |
| .msg-native-widget-header             | Envuelve los elementos del encabezado.                                         |
| .msg-native-widget-outer-container    | Envuelve todos los anuncios.                                                   |
| .msg-native-widget-item-container     | Envuelve el cuadro del anuncio.                                                |
| .msg-native-widget-item-image-wrapper | Envuelve la imagen en el cuadro del anuncio.                                   |
| .msg-native-widget-item-image-ratio   | Establece la relación de aspecto de la imagen del anuncio.                     |
| .msg-native-widget-item-content       | Envuelve todo el texto del cuadro del anuncio.                                 |
| .msg-native-widget-item-content-box   | Esto envuelve el título, la descripción y la marca del envoltorio del anuncio. |
| .msg-native-widget-item-brand         | Da estilo a la marca del anuncio.                                              |

**Ejemplos**

* Los siguientes ejemplos muestran cómo los editores pueden adaptar los estilos CSS en la configuración de la zona de anuncio nativo según sus necesidades.

{% stepper %}
{% step %}

#### 1. Para colocar el cuadro de texto sobre la imagen.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/QFAzxUnKNOild5gSn0VS/assets/hires/native-ad-css-text-on-image.png)

```css

 .msg-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. Para modificar el tamaño del cuadro de texto.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/qx3YHuopQjx13mXCcF6v/assets/hires/native-ad-css-size-of-text-box.png)

```css

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

```

{% endstep %}

{% step %}

#### 3. Para colocar el cuadro de texto sobre la imagen y añadir un fondo al cuadro de texto con opacidad.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rrwKCULO65AOG3mF2Y5z/assets/hires/native-ad-css-text-on-image-with-background.png)

```css

 .msg-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;
    }
.msg-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 4. Para curvar los bordes de la imagen.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/FwVaN0LAs4cUEaw1RaTy/assets/hires/native-ad-css-round-the-corners.png)

```css

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

```

{% endstep %}

{% step %}

#### 5. Para establecer un estilo para la fuente. De esta manera, el editor puede usar fuentes disponibles en su sitio web y otras distintas de las disponibles en la configuración de la zona.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4VgfwQ8IQHImagcqHtFr/assets/hires/native-ad-css-other-options.png)

```css

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

```

{% endstep %}

{% step %}

#### 6. Para añadir relleno entre la imagen y el texto, de modo que el texto pueda estar cerca o lejos de la imagen. También puedes usar padding-bottom para añadir relleno debajo del texto.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/zusqVYVxOAml6RhFfaHw/assets/hires/native-ad-css-change-padding.png)

```css

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

```

{% endstep %}

{% step %}

#### 7. Para personalizar el color de fondo del cuadro de texto, de modo que solo afecte al cuadro de texto que está debajo de cada imagen, dejando el espacio entre las imágenes y los cuadros transparente o con un color de fondo diferente.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/H08catOYIpWoAcmXJHoh/assets/hires/native-ad-css-customise-background-color.png)

```css

 .msg-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.msg-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.msg-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 8. Para añadir un borde que cubra una imagen y su cuadro de texto. Esto ayudará a separar cada imagen dentro de ese widget nativo.

![ejemplo de CSS del anuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ZPr4F1I8Cbu9MhAnXpGy/assets/hires/native-ad-css-set-border.png)

```css

.msg-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.msg-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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.exoclick.com/publishers/es/sitios-y-zonas/configuracion-de-anuncios-nativos.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.