# Contenido de pop-up web
El **contenido de pop-up web** es el diseño visual que los visitantes ven cuando aparece un pop-up web en tu sitio web. Créalo en **Contenido** y luego adjúntalo a una [campaña de pop-up web](/es/product/messaging-channels/web-popups/create-web-popups-campaigns/).
## Crear contenido de pop-up web
1. Ve a **Contenido** → **Contenido de pop-up web**.
2. Haz clic en **Crear contenido de pop-up web**.
3. Elige una plantilla de inicio de la galería.
4. Una vez que hayas elegido una plantilla, personaliza el pop-up en el editor.
### Nombrar el pop-up
Haz clic en el nombre del pop-up en la barra superior para editarlo. El nombre identifica este contenido dentro de Pushwoosh, en la lista de contenidos y en el asistente de campaña. Los visitantes del sitio web no lo ven.
### Editar la configuración del pop-up
Ajusta la apariencia y la posición del pop-up en el panel de configuración a la izquierda del lienzo:
#### Imágenes
Si el diseño incluye una o más imágenes, cada una obtiene su propio bloque en la parte superior del panel con una vista previa y controles.
Haz clic en **Cambiar imagen** para elegir un archivo de la [Galería de medios](/es/product/content/media-store/) de tu proyecto.
Debajo de la vista previa:
- **Fit:** cómo la imagen llena su marco: **Natural**, **Cover** o **Contain**. No se muestra para una imagen de fondo, que siempre cubre su área.
- **Blur:** suaviza la imagen, de 0 a 20 px.
- **Dim:** solo para imágenes de fondo. Añade una capa oscura sobre la foto para que el texto colocado encima permanezca legible, de 0 a 100%.
Algunos diseños también añaden una sección de **Layout** con ajustes de colocación de imagen:
- **Image width:** parte del ancho del pop-up, como porcentaje.
- **Image position:** **Left** o **Right**, para diseños con una imagen junto al texto.
La sección **Layout** solo aparece cuando el diseño actual tiene configuraciones como estas. En un diseño de barra inferior, ofrece **Buttons width** en lugar de controles de imagen.
#### Tamaño y estilo del pop-up
En la sección **Popup**:
- **Width, Height (empty = auto):** deja ambos vacíos para un pop-up que se ajusta a su contenido, o establece un tamaño fijo en píxeles. En un pop-up con varias páginas, cada página tiene su propio tamaño.
- **Corner radius, Shadow:** el redondeo de las esquinas y la sombra del pop-up.
- **Animation:** cómo aparece el pop-up: **None**, **Fade** o **Slide**.
#### Colores
Haz clic en **Colors** para expandir la paleta de colores del pop-up:
- **Background, Accent (buttons):** el fondo del pop-up y el color de acento aplicado a los botones.
- **Text, Secondary text:** el color del texto del cuerpo y del texto secundario, como leyendas y encabezados.
- **Text over image:** solo se muestra para diseños con texto sobre una imagen de fondo. Establece el color utilizado para ese texto.
#### Ubicación y superposición
En la sección **PLACEMENT**:
- **Position:** elige dónde se ancla el pop-up en la página usando la cuadrícula de 3×3.
- **Edge offset:** establece la distancia en píxeles desde el borde seleccionado.
En la sección **OVERLAY**:
- **Dim the page behind:** actívalo para oscurecer el resto de la página mientras se muestra el pop-up.
- **Color, Opacity:** establece el color y la opacidad de la superposición de 0 a 1.
### Editar texto
Haz clic en cualquier bloque de texto en el pop-up para editarlo en línea. Aparecerá una barra de herramientas sobre él:
- Aplica formato de **negrita**, *cursiva* o subrayado.
- Añade o elimina un enlace.
- Establece la alineación a la izquierda, al centro o a la derecha.
- Elige un estilo de texto: **Icon**, **Eyebrow**, **Heading 1–3**, **Body** o **Caption**.
### Editar botones
Haz clic en un botón para abrir su barra de herramientas:
- Elige el estilo del botón: **Primary** o **Secondary**.
- Elige lo que hace el botón:
- **Open a link:** introduce la URL de destino.
- **Close the popup**.
- **Go to page:** elige otra página del pop-up a la que cambiar. Esta opción aparece una vez que el pop-up tiene más de una página. Consulta [Trabajar con varias páginas](#work-with-multiple-pages).
## Trabajar con varias páginas
Un pop-up web puede tener más de una página, por ejemplo, para guiar a los visitantes a través de una breve oferta de varios pasos.
### Añadir una página
Haz clic en **+ Add page** para abrir el menú de añadir página:
- **Duplicate current page:** copia la página activa, incluyendo cualquier edición que hayas hecho, como una nueva página.
- Elige uno de los diseños de una sola página para añadir una página nueva con el contenido de demostración de ese diseño. La nueva página es independiente de las demás, por lo que puede usar un diseño diferente.
Cada pestaña es una página. Haz clic en una pestaña para cambiar a ella.
### Establecer la página de inicio
La pestaña marcada con ★ es la **página de inicio**, la página que los visitantes ven primero. Para cambiarla, abre otra pestaña y haz clic en ☆ en esa pestaña.
### Eliminar una página
En la pestaña activa, haz clic en **✕**. Se abrirá un diálogo de confirmación. Haz clic en **Delete** para eliminar la página. Esto no se puede deshacer.
## Guardar el contenido
Revisa el contenido, las imágenes y las acciones de los botones. Cuando hayas terminado, haz clic en **Save** en la barra superior.
## Usar el contenido en una campaña
Después de guardar, el contenido aparece en **Contenido** → **Contenido de pop-up web**. Ábrelo desde la lista para seguir editando.
Para mostrarlo en el sitio, ve a **Campañas** → **Web popups**, crea o edita una campaña y elige este contenido en el paso **Contenido**.
Luego, configura la audiencia, los ajustes de visualización, la frecuencia y las opciones de lanzamiento. Para ver el flujo completo, consulta [Crear campañas de pop-up web](/es/product/messaging-channels/web-popups/create-web-popups-campaigns/).
4. Una vez que hayas elegido una plantilla, personaliza el pop-up en el editor.
### Nombrar el pop-up
Haz clic en el nombre del pop-up en la barra superior para editarlo. El nombre identifica este contenido dentro de Pushwoosh, en la lista de contenidos y en el asistente de campaña. Los visitantes del sitio web no lo ven.
### Editar la configuración del pop-up
Ajusta la apariencia y la posición del pop-up en el panel de configuración a la izquierda del lienzo:
#### Imágenes
Si el diseño incluye una o más imágenes, cada una obtiene su propio bloque en la parte superior del panel con una vista previa y controles.
Haz clic en **Cambiar imagen** para elegir un archivo de la [Galería de medios](/es/product/content/media-store/) de tu proyecto.
Debajo de la vista previa:
- **Fit:** cómo la imagen llena su marco: **Natural**, **Cover** o **Contain**. No se muestra para una imagen de fondo, que siempre cubre su área.
- **Blur:** suaviza la imagen, de 0 a 20 px.
- **Dim:** solo para imágenes de fondo. Añade una capa oscura sobre la foto para que el texto colocado encima permanezca legible, de 0 a 100%.
Algunos diseños también añaden una sección de **Layout** con ajustes de colocación de imagen:
- **Image width:** parte del ancho del pop-up, como porcentaje.
- **Image position:** **Left** o **Right**, para diseños con una imagen junto al texto.
La sección **Layout** solo aparece cuando el diseño actual tiene configuraciones como estas. En un diseño de barra inferior, ofrece **Buttons width** en lugar de controles de imagen.
#### Tamaño y estilo del pop-up
En la sección **Popup**:
- **Width, Height (empty = auto):** deja ambos vacíos para un pop-up que se ajusta a su contenido, o establece un tamaño fijo en píxeles. En un pop-up con varias páginas, cada página tiene su propio tamaño.
- **Corner radius, Shadow:** el redondeo de las esquinas y la sombra del pop-up.
- **Animation:** cómo aparece el pop-up: **None**, **Fade** o **Slide**.
#### Colores
Haz clic en **Colors** para expandir la paleta de colores del pop-up:
- **Background, Accent (buttons):** el fondo del pop-up y el color de acento aplicado a los botones.
- **Text, Secondary text:** el color del texto del cuerpo y del texto secundario, como leyendas y encabezados.
- **Text over image:** solo se muestra para diseños con texto sobre una imagen de fondo. Establece el color utilizado para ese texto.
#### Ubicación y superposición
En la sección **PLACEMENT**:
- **Position:** elige dónde se ancla el pop-up en la página usando la cuadrícula de 3×3.
- **Edge offset:** establece la distancia en píxeles desde el borde seleccionado.
En la sección **OVERLAY**:
- **Dim the page behind:** actívalo para oscurecer el resto de la página mientras se muestra el pop-up.
- **Color, Opacity:** establece el color y la opacidad de la superposición de 0 a 1.
### Editar texto
Haz clic en cualquier bloque de texto en el pop-up para editarlo en línea. Aparecerá una barra de herramientas sobre él:
- Aplica formato de **negrita**, *cursiva* o subrayado.
- Añade o elimina un enlace.
- Establece la alineación a la izquierda, al centro o a la derecha.
- Elige un estilo de texto: **Icon**, **Eyebrow**, **Heading 1–3**, **Body** o **Caption**.
### Editar botones
Haz clic en un botón para abrir su barra de herramientas:
- Elige el estilo del botón: **Primary** o **Secondary**.
- Elige lo que hace el botón:
- **Open a link:** introduce la URL de destino.
- **Close the popup**.
- **Go to page:** elige otra página del pop-up a la que cambiar. Esta opción aparece una vez que el pop-up tiene más de una página. Consulta [Trabajar con varias páginas](#work-with-multiple-pages).
## Trabajar con varias páginas
Un pop-up web puede tener más de una página, por ejemplo, para guiar a los visitantes a través de una breve oferta de varios pasos.
### Añadir una página
Haz clic en **+ Add page** para abrir el menú de añadir página:
- **Duplicate current page:** copia la página activa, incluyendo cualquier edición que hayas hecho, como una nueva página.
- Elige uno de los diseños de una sola página para añadir una página nueva con el contenido de demostración de ese diseño. La nueva página es independiente de las demás, por lo que puede usar un diseño diferente.
Cada pestaña es una página. Haz clic en una pestaña para cambiar a ella.
### Establecer la página de inicio
La pestaña marcada con ★ es la **página de inicio**, la página que los visitantes ven primero. Para cambiarla, abre otra pestaña y haz clic en ☆ en esa pestaña.
### Eliminar una página
En la pestaña activa, haz clic en **✕**. Se abrirá un diálogo de confirmación. Haz clic en **Delete** para eliminar la página. Esto no se puede deshacer.
## Guardar el contenido
Revisa el contenido, las imágenes y las acciones de los botones. Cuando hayas terminado, haz clic en **Save** en la barra superior.
## Usar el contenido en una campaña
Después de guardar, el contenido aparece en **Contenido** → **Contenido de pop-up web**. Ábrelo desde la lista para seguir editando.
Para mostrarlo en el sitio, ve a **Campañas** → **Web popups**, crea o edita una campaña y elige este contenido en el paso **Contenido**.
Luego, configura la audiencia, los ajustes de visualización, la frecuencia y las opciones de lanzamiento. Para ver el flujo completo, consulta [Crear campañas de pop-up web](/es/product/messaging-channels/web-popups/create-web-popups-campaigns/).