--- title: "Diseña un pop-up y su teaser" description: "Elige el tipo de pop-up, da estilo al pop-up y al botón de cerrar, y añade un teaser que invite a los visitantes a abrirlo." url: https://scratcher.io/es/help/sharing/popup-design-and-teaser language: es --- 1. [Centro de ayuda](https://scratcher.io/es/help) 2. [Publicar y compartir](https://scratcher.io/es/help/sharing) 3. Diseña un pop-up y su teaser # Diseña un pop-up y su teaser Elige el tipo de pop-up, da estilo al pop-up y al botón de cerrar, y añade un teaser que invite a los visitantes a abrirlo. Una campaña de pop-up tiene dos partes: el propio pop-up y un teaser opcional. El teaser es un pequeño banner en tu web, como «Gira y gana 🎁», que abre el pop-up al hacer clic en él. ## Tipo y posición del pop-up Abre **Ubicación** en **Diseño** en el editor: - **Tipo**: un pop-up estándar, una barra en la parte superior o inferior de la pantalla, un deslizable en la esquina o una página completa. La barra, el deslizable y la página completa forman parte de los planes superiores. - **Alineación**: dónde se coloca el pop-up. Las barras pueden ir arriba o abajo, los deslizables a la izquierda o a la derecha, y los pop-ups estándar en cualquier punto de una cuadrícula de 3 × 3. La primera vez que abres un pop-up nuevo, Scratcher te pide el dominio en el que se va a mostrar. Puedes cambiarlo más tarde en **Dominio**. ## Dale estilo al pop-up Haz clic en **Configuración del pop-up** encima de la página, o haz clic en el borde del pop-up. En la pestaña **Estilos**: - **Pop-up**: **Fondo**, **Fondo superpuesto** (la capa oscurecida detrás del pop-up), **Borde**, **Tamaño**, **Forma**, **Alineación del contenido** y **Margen**. - **Botón de cerrar**: su **Fondo**, el color del **Icono**, el **Tamaño**, la esquina (**Alineación**) y el **Margen**. En la pestaña **Efectos**, elige cómo se abre y se cierra el pop-up, por ejemplo con **Fundido** o **Deslizar**. Complementos del pop-up: - **Ocultar el teaser al cerrar**: oculta también el teaser cuando alguien cierra el pop-up. - **Ocultar tras enviar el formulario**: no vuelve a mostrar el pop-up a los visitantes que ya se han registrado en él. ## El teaser En **Flujo**, la fila **Teaser** te permite activar y desactivar el teaser. Haz clic en **Configuración** en su menú para configurarlo: - **Acción**: **Mostrar pop-up**, **Enlace** o **Ninguno**. - **Ocultar en escritorio**, **Ocultar en tableta**, **Ocultar en móvil**. - **Estilos**: el **Fondo**, el **Borde**, el **Tamaño**, la **Forma**, la esquina (**Alineación**) y el **Margen** del teaser, y su propio botón de cerrar. El teaser aparece en cuanto se carga la página; los desencadenantes de **Visualización** solo se aplican al pop-up. Diseña el teaser como una página y guárdalo con **Guardar teaser como plantilla** para reutilizarlo. ## Imagen de fondo en los pop-ups Los pop-ups tienen un elemento **Fondo de imagen** que llena un lado del pop-up con una imagen. Define su **Altura en móvil** para controlar cuánto ocupa de la pantalla en los móviles. ## Abre un pop-up desde tu propio botón Con el complemento de desencadenante **Desencadenante de clic**, el pop-up se abre cuando alguien hace clic en un elemento de tu web. Introduce el selector CSS del elemento, por ejemplo `.open-competition`. Pregunta a tu desarrollador web si no estás seguro. Publicar y compartir - [Comparte el enlace y el código QR de tu campaña](https://scratcher.io/es/help/sharing/share-your-campaign-link) - [Inserta una campaña en tu web](https://scratcher.io/es/help/sharing/embed-on-your-website) - [Muestra una campaña como pop-up](https://scratcher.io/es/help/sharing/show-a-campaign-as-a-popup) - [Diseña un pop-up y su teaser](https://scratcher.io/es/help/sharing/popup-design-and-teaser) - [Elige la dirección web de tu campaña](https://scratcher.io/es/help/sharing/campaign-url-and-own-domain) - [Envía correos desde tu propio dominio](https://scratcher.io/es/help/sharing/email-sending-domain) - [Alterna campañas con las programaciones de campañas](https://scratcher.io/es/help/sharing/campaign-schedules) ## Artículos relacionados - [Cómo funcionan los ajustes de los elementos](https://scratcher.io/es/help/elements/element-settings-basics): Las pestañas Contenido, Estilos, Configuración y Efectos, tamaños, formas, bordes, colores y fondos, cambios para móvil y complementos. - [Inserta una campaña en tu web](https://scratcher.io/es/help/sharing/embed-on-your-website): Coloca una campaña dentro de una página de tu web con el script de inserción, comprueba que funciona y soluciona los problemas habituales. - [Muestra una campaña como pop-up](https://scratcher.io/es/help/sharing/show-a-campaign-as-a-popup): Instala el script una vez, elige el tipo de pop-up y decide en qué páginas, cuándo y con qué frecuencia aparece. ## ¿Sigues necesitando ayuda? Hay personas reales para ayudarte. Si ya usas Scratcher, lo más rápido es el chat dentro de la plataforma. - **[Chatea con nosotros](https://platform.scratcher.io/login)** Inicia sesión y haz clic en el botón del chat, abajo a la derecha. Rex responde al instante y nuestro equipo está a un clic. - **[Reserva una reunión](https://scratcher.io/es/book-a-meeting)** Una videollamada gratuita de 30 minutos con nuestro equipo: una demostración, ideas para campañas o ayuda con tu configuración. - **[Escríbenos](mailto:contact@scratcher.io)** Escribe a contact@scratcher.io y te responderemos.