> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Cómo editar y configurar un popup en LanderLab

> Aprende a añadir contenido, definir disparadores, configurar el fondo y controlar el botón de cierre de tus popups de LanderLab, todo desde el editor.

Una vez creado el popup, el editor te da control total. Añade el contenido que quieras al lienzo del popup y usa la barra lateral derecha para controlar cuándo aparece, cómo se ve y cómo se cierra.

## Añadir contenido a tu popup

Haz clic en un popup del panel Popups para activarlo en el lienzo. La barra lateral izquierda cambia al panel **Elements**, el mismo que usas para crear tu landing page.

Arrastra y suelta cualquier elemento directamente dentro del popup. Los usos más habituales son:

1. Titulares y texto
2. Imágenes y vídeo
3. Botones de CTA
4. Formularios y captación de leads
5. Embudos de quiz
6. Enlaces de redirección
7. Cuentas atrás
8. Código personalizado

<Tip>
  Puedes usar el creador con IA dentro del popup. Haz clic en el icono de IA del lienzo para generar o reescribir contenido directamente dentro del popup.
</Tip>

***

## Barra lateral derecha: ajustes del popup

Cuando un popup está seleccionado, la barra lateral derecha muestra tres pestañas: **Popup**, **Backdrop** y **Close**.

### Pestaña Popup

Aquí controlas cuándo y cómo aparece el popup.

**Trigger:** elige qué hace que se muestre el popup:

1. **On Page Load:** se muestra en cuanto el visitante llega a la página.
2. **After Delay:** se muestra tras un número de segundos. Introduce el tiempo de espera en el campo que aparece.
3. **On Scroll (%):** se muestra cuando el visitante se ha desplazado un porcentaje de la página. Puedes definir valores distintos para escritorio, tablet y móvil.
4. **Exit Intent:** se muestra cuando el visitante está a punto de abandonar la página. **General:** controla la posición, la animación y la frecuencia con la que se muestra:
5. **Position:** en qué parte de la pantalla aparece el popup: Center, Top Left, Top Center, Top Right, Left Center, Right Center o Bottom Left.
6. **Animation:** cómo entra el popup: Scale, Fade, Slide Up, Slide Down o Bounce.
7. **Stay Dismissed:** si está activado, los visitantes que cierren el popup no volverán a verlo durante 30 días.
8. **Show Once:** el popup solo se activa una vez por sesión.
9. **Size, Layout, Background, Typography:** las opciones de estilo habituales. Define el ancho del popup y ajusta el espaciado, el color de fondo y los estilos de texto para que encajen con el diseño de tu página.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Zx0uueNfZU59VGZ2/images/popup.png?fit=max&auto=format&n=Zx0uueNfZU59VGZ2&q=85&s=292b86d068dbbf1cb8a92ee9df0318e4" alt="La pestaña Popup de la barra lateral derecha, con los ajustes de disparador, posición, animación y frecuencia" width="1926" height="992" data-path="images/popup.png" />
</Frame>

***

### Pestaña Backdrop

El backdrop es la capa oscurecida que aparece detrás del popup. Ayuda a centrar la atención del visitante en el contenido del popup.

1. **Visibility:** muestra u oculta el backdrop por completo.
2. **Close on click:** si está activado, al hacer clic en cualquier punto del backdrop se cierra el popup.
3. **Color:** define el color y la opacidad del backdrop. Por defecto es `rgba(0,0,0,0.5)`.
4. **Blur:** aplica un efecto de desenfoque al contenido de la página que queda detrás del popup.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/v1fA0mj2dYGqUhgW/images/backdrop.png?fit=max&auto=format&n=v1fA0mj2dYGqUhgW&q=85&s=e0f6d3e95c738086b4b37b62edf9863a" alt="La pestaña Backdrop de la barra lateral derecha, con los ajustes de visibilidad, cierre al hacer clic, color y desenfoque" width="1926" height="992" data-path="images/backdrop.png" />
</Frame>

***

### Pestaña Close

Controla el botón de cierre que se muestra en el popup.

1. **Visibility:** muestra u oculta el botón de cierre.
2. **Shape:** elige el estilo del icono del botón de cierre.
3. **Position:** coloca el botón dentro o fuera de la caja del popup.
4. **Size and Offset:** ajusta el tamaño del botón y su distancia respecto a la esquina.
5. **Close on ESC:** si está activado, pulsar la tecla Escape también cierra el popup.
6. **Colors:** define el color de fondo y del icono del botón de cierre.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/v1fA0mj2dYGqUhgW/images/close.png?fit=max&auto=format&n=v1fA0mj2dYGqUhgW&q=85&s=36527d074c83a9c780cfa3608613bfab" alt="La pestaña Close de la barra lateral derecha, con los ajustes de visibilidad, forma, posición, tamaño y color del botón de cierre" width="1926" height="992" data-path="images/close.png" />
</Frame>
