> 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 Creando un [anuncio nativo](/publishers/es/sitios-y-zonas/create-zone.md#recommendation-widget) la zona es sencilla y, sin embargo, muy personalizable. Puedes usar procesos ligeramente diferentes para configurar una zona de anuncios nativos según tus necesidades: * **Escenario A**: Simplemente quieres configurar una zona de anuncios, elegir la relación de aspecto de las imágenes de la zona de anuncios nativos y luego ajustar el tamaño de la zona de anuncios en tu sitio para que coincida. * **Escenario B**: Quieres configurar la zona de anuncios para que coincida con un tamaño o una proporción de imagen personalizados, de modo que la zona de anuncios 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 anuncios 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 anuncios nativos. ## Creación de una zona de anuncios nativos Cuando hayas iniciado sesión como Publisher, haz clic en **Sitios y zonas**, **Nueva zona**, y despliega la **Nativo** sección, selecciona el formato de anuncio nativo **Widget de recomendaciones** y haz clic en **Siguiente**. ![Crear zona nativa](/files/ba9d66eab8d1ce0e6fd8e15f0dea95e13d6b19a2) Completa los detalles de la zona y haz clic en **Siguiente**. {% tabs %} {% tab title="Paso 1 del anuncio nativo: Diseño rápido: establecer 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 anuncios. Al usar el **Diseño rápido**, la zona de anuncios que crees se adaptará automáticamente al tamaño del contenedor en el que la coloques. {% stepper %} {% step %} ### Paso 1 ![Paso 1 del anuncio nativo](/files/a20f1dc2f12aa11d8d4c872ea11e4ecb1adb24a8) Selecciona la **Diseño rápido** pestaña. En la **Diseño de escritorio** sección, establece el número de columnas y filas de anuncios que quieres en escritorio. {% endstep %} {% step %} ### Paso 2 ![Paso 2 del anuncio nativo](/files/6f0806bcdd29c843542b4d332b5738c8c9bcd603) A continuación, elige la relación de aspecto para tus imágenes en el menú desplegable de **Configuración de imagen** Puedes elegir entre **1:1**, **4:3** o **16:9**, para coincidir con las miniaturas de tu sitio. {% endstep %} {% step %} ### Paso 3 ![Paso 3 del anuncio nativo](/files/a1866f590b72c31b551d02d95112b3c870541abd) * Una vez que hayas elegido la relación de aspecto, usa la casilla de verificación para elegir si deseas mostrar texto o no, y luego decide dónde se mostrará. * Este texto consiste en un **Título** y una **Descripción**. Puedes activarlos y desactivarlos de forma individual en las **Título** y **Descripción** secciones si lo deseas. * Revisa la vista previa de la derecha para ver cómo se ve tu zona de anuncios y ajusta la configuración de nuevo si es necesario. {% endstep %} {% step %} ### Paso 4 ![Paso 4 del anuncio nativo](/files/4b167477b26f5f47a09eabb922f3f6fe08a0465f) * Repite los pasos 1-3 anteriores en la **Diseño móvil** sección para configurar tu zona de anuncios para móvil. {% endstep %} {% step %} ### Paso 5 ![Paso 5 del anuncio nativo](/files/b9ec495863d3a05763ce51ddd75937c9d64f2db8) * 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 **Punto de ruptura móvil** menú desplegable de **Opciones avanzadas**. * El punto de ruptura puede establecerse en **800 px** para iPad, **450 px** para móvil y **Sin respuesta**. Cuando cambiamos el punto de ruptura, esto cambia si nuestros ajustes en la sección Diseño de escritorio afectan al escritorio y al iPad, o solo al escritorio. * Cuando estés satisfecho con el aspecto de la vista previa, haz clic en **Crear**. {% endstep %} {% step %} ### Paso 6 ![Paso 6 del anuncio nativo](/files/f8280c999728bc39c145b12e2a606715261c537a) * Copia la **etiqueta HTML de la zona** y añádela a tu sitio. * La zona de anuncios se ajustará automáticamente al 100 % del contenedor en el que coloques la etiqueta. Es decir, cuanto más grande sea el contenedor, más grandes serán tanto la zona como los anuncios. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Escenario B: Diseño rápido: establecer 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 7 del anuncio nativo](/files/e0cc1c1c9a1b3048277083cdf3a4ff6c8d60aa07) * Selecciona la **Diseño rápido** pestaña. En la **Diseño de escritorio** sección, establece el número de columnas y filas de anuncios que quieres en escritorio. {% endstep %} {% step %} ### Paso 2 ![Paso 8 del anuncio nativo](/files/3a9c473a523f1ebae381f38a6ef94b9ae2b293fe) * En el **Configuración de imagen** menú 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 visualice el sitio, las imágenes también se adaptarán a medida que disminuya el tamaño de la pantalla. 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 9 del anuncio nativo](/files/0f6939f15cc524d32a9de4a743519a611b4f43d9) * 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 mostrará. * Revisa la vista previa de la derecha para ver cómo se ve tu zona de anuncios y ajusta la configuración de nuevo si es necesario. {% endstep %} {% step %} ### Paso 4 ![Paso 10 del anuncio nativo](/files/e9d8d204900e2c6d2a1a0db0f388a248ce76f5d3) * Repite los pasos 1-3 en la **Diseño móvil** sección para configurar tu zona de anuncios para móvil. {% endstep %} {% step %} ### Paso 5 ![Paso 11 del anuncio nativo](/files/e31d2eededfc00b66c313e32285f90acbf0e37c6) * 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 estos ajustes modificará el tamaño total de la zona de anuncios. {% endhint %} {% endstep %} {% step %} ### Paso 6 ![Paso 12 del anuncio nativo](/files/b9ec495863d3a05763ce51ddd75937c9d64f2db8) * 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 **Punto de ruptura móvil** menú desplegable de **Opciones avanzadas**. * El punto de ruptura puede establecerse en **800 px** para iPad, **450 px** para móvil y **Sin respuesta**. Cuando cambiamos el punto de ruptura, esto cambia si nuestros ajustes en la sección Diseño de escritorio afectan al escritorio y al iPad, o solo al escritorio. * Cuando estés satisfecho con el aspecto de la vista previa, haz clic en **Crear**. {% endstep %} {% step %} ### Paso 7 ![Paso 13 del anuncio nativo](/files/f8280c999728bc39c145b12e2a606715261c537a) * Copia la **etiqueta HTML de la zona** y añádela a tu sitio. * Asegúrate de que el tamaño de la zona de anuncios 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: establecer un tamaño fijo de la zona" %} En este escenario, quieres poder establecer el tamaño de la zona de anuncios 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 13 del anuncio nativo](/files/844ea8058d5b252d2d1ac83cf6352a6b7131dbec) Selecciona la **Diseño personalizado** pestaña. En la **Diseño de escritorio** sección, establece el **Ancho** y el **Alto** de la zona total de anuncios que deseas crear. {% endstep %} {% step %} ### Paso 2 ![Paso 14 del anuncio nativo](/files/ba6099a1b98efcaa0bcee6a0d2961cae54b8e5d2) A continuación, elige cuántas **Columnas** y **Filas** de anuncios quieres mostrar en la zona de anuncios. Revisa la vista previa de la derecha para ver qué ajustes funcionan para el tamaño que has elegido. {% endstep %} {% step %} ### Paso 3 ![Paso 15 del anuncio nativo](/files/a3fae2b048a814dca2c54ba6171cad8751c1e026) Una vez que hayas elegido cuántas columnas y filas quieres, elige si deseas mostrar texto o no usando la **Texto** casilla de verificación, y elige dónde se mostrará usando el **Posición del texto** menú desplegable. {% endstep %} {% step %} ### Paso 4 ![Paso 15 del anuncio nativo](/files/bb4b5d4c41dc92ac4a2174fefe8b3ef478a5e634) Repite los pasos 1-3 en la **Diseño móvil** sección para configurar tu zona de anuncios para móvil. {% endstep %} {% step %} ### Paso 5 ![Paso 16 del anuncio nativo](/files/b9ec495863d3a05763ce51ddd75937c9d64f2db8) * 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 **Punto de ruptura móvil** menú desplegable de **Opciones avanzadas**. * El punto de ruptura puede establecerse en **800 px** para iPad, **450 px** para móvil y **Sin respuesta**. Cuando cambiamos el punto de ruptura, esto cambia si nuestros ajustes en la sección Diseño de escritorio afectan al escritorio y al iPad, o solo al escritorio. * Cuando estés satisfecho con el aspecto de la vista previa, haz clic en **Crear**. {% endstep %} {% step %} ### Paso 6 ![Paso 17 del anuncio nativo](/files/f8280c999728bc39c145b12e2a606715261c537a) Copia la **etiqueta HTML de la zona** y añádela a tu sitio. {% endstep %} {% endstepper %} {% endtab %} {% endtabs %} ## Selección de Sin respuesta en el Punto de ruptura móvil * Cuando el Punto de ruptura móvil se establece en Sin respuesta en Opciones avanzadas, el siguiente modal aparecerá en la pantalla. ![Sin respuesta2](/files/f249081e4019ca2997045352c62eb223ed899834) ![Sin respuesta3](/files/0b9e7b6c0fa116bcb0274443e4b133e8f82072da) * Al hacer clic en **CONTINUAR** en el modal, se mostrará el diseño de escritorio de 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 Sin respuesta. * 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](/files/826c24083708f31dff8578f6da1b2f090a5e9f76) En el **CSS personalizado** sección, puedes añadir CSS personalizado para asegurarte de que la zona de anuncios se muestre correctamente en tu sitio. Se proporcionan como punto de partida las clases CSS más importantes. 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 propio sitio. {% endhint %} ### Clases CSS para anuncios nativos Hay cinco clases CSS proporcionadas en el cuadro para comenzar, y puedes pegar estilos adicionales como consideres conveniente. Estas cinco clases CSS dan estilo a los elementos más importantes del anuncio nativo de la siguiente manera: ![CSS del anuncio nativo](/files/6ad1f1f60e89927c9800512c4f02f61acb9eb111) | Clase | Acción | | ---------------------------------- | ----------------------------------------------------------- | | .exo-native-widget-outer-container | Da estilo a todo el contenedor del widget. | | .exo-native-widget-item | Da estilo a los contenedores de los elementos individuales. | | .exo-native-widget-item-image | Da estilo a la imagen. | | .exo-native-widget-item-title | Da estilo al texto del título. | | .exo-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 | | ------------------------------------- | ------------------------------------------------------------------------------ | | .exo-native-widget | Envuelve todo el widget. | | .exo-native-widget-header | Envuelve los elementos del encabezado. | | .exo-native-widget-outer-container | Envuelve todos los anuncios. | | .exo-native-widget-item-container | Envuelve la caja del anuncio. | | .exo-native-widget-item-image-wrapper | Envuelve la imagen en la caja del anuncio. | | .exo-native-widget-item-image-ratio | Establece la relación de aspecto de la imagen del anuncio. | | .exo-native-widget-item-content | Envuelve todo el texto de la caja del anuncio. | | .exo-native-widget-item-content-box | Esto envuelve el título, la descripción y la marca del contenedor del anuncio. | | .exo-native-widget-item-brand | Da estilo a la marca del anuncio. | **Ejemplos** * Los siguientes ejemplos muestran cómo los Publishers pueden adaptar los estilos CSS en la configuración de la zona de anuncios nativos según sus necesidades. {% stepper %} {% step %} #### 1. Para colocar el cuadro de texto sobre la imagen. ![ejemplo de CSS para anuncio nativo](/files/1aaa177370ba018e6551424fc67d5d1d8ead5093) ```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. Para modificar el tamaño del cuadro de texto. ![ejemplo de CSS para anuncio nativo](/files/1fea46afa479397339af3c739a695d0a4abbbd58) ```css .exo-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 para anuncio nativo](/files/463246fb405a201f09aefaa38c5fd4a6d759a181) ```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. Para redondear los bordes de la imagen. ![ejemplo de CSS para anuncio nativo](/files/508c17dcf51f0b5b3136d0ab019ddf1b738b9016) ```css .exo-native-widget-item-image { border-radius: 5% !important; } ``` {% endstep %} {% step %} #### 5. Para definir un estilo para la fuente. De esta manera, el Publisher puede usar fuentes disponibles en su sitio web y otras distintas de las disponibles en la configuración de la zona. ![ejemplo de CSS para anuncio nativo](/files/940dd6414f52a8befb091c5df266748459eec4cd) ```css .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand { font-family: fantasy !important; } ``` {% endstep %} {% step %} #### 6. Para añadir espaciado 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 espacio debajo del texto. ![ejemplo de CSS para anuncio nativo](/files/33f575e9e405f42f1a53355204ea95183c4d4172) ```css .exo-native-widget-item-content { padding: 30px !important; } ``` {% endstep %} {% step %} #### 7. Para personalizar el color de fondo del cuadro de texto para 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 para anuncio nativo](/files/46995977b71166c46ac25d20e9da5fda43576850) ```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. 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 para anuncio nativo](/files/337f4c780728c4c29849de7b0e6f2d3c7dae83b5) ```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/es/sitios-y-zonas/configuracion-de-anuncios-nativos.md?ask=&goal= ``` `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.