Las ventanas emergentes son ventanas modales de llamada a la acción que aparecen y se superponen a la página en un momento específico o bajo condiciones y desencadenantes específicos. Las ventanas emergentes están diseñadas para centrar la atención del usuario una vez que ha realizado una acción.

Para empezar, ve a Plantillas> Popups. Controle el diseño, las condiciones, las reglas y los estilos de la ventana emergente y luego diseñe el contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más de la ventana emergente.

Nota: Haga clic en el icono de rueda dentada Configuración emergente en la barra de herramientas inferior del panel para editar la configuración emergente.

file-g14cgxxhiw-8176402

Diseño emergente

Configuraciones

Diseño

  1. Anchura: Establece el ancho exacto de la ventana emergente, usando px o vh
  2. Altura: Establece la altura exacta de la ventana emergente, usando px o vh. Use 100vh para ancho y alto para crear ventanas emergentes de pantalla completa
  3. Horizontal: Elija la posición horizontal de la ventana emergente, desde Izquierda, Centro o Derecha
  4. Vertical: Elija la posición vertical de la ventana emergente, desde Arriba, Centro o Abajo
  5. Cubrir: Muestra u oculta la superposición de fondo
  6. Botón Cerrar: Elija Mostrar u Ocultar el botón Cerrar
  7. Mostrar botón después de x segundos (si se eligió Mostrar botón de cierre): seleccione la cantidad de segundos que debe esperar antes de mostrar el botón de cierre
  8. Animación de entrada: Elija la animación de entrada de la ventana emergente, como desvanecimiento y zoom, en las selecciones desplegables. Elija cualquier efecto de animación para obtener una vista previa del efecto.
  9. Salir de la animación: Elija la animación de salida de la ventana emergente, como fundido y zoom, en las selecciones desplegables. Elija cualquier efecto de animación para obtener una vista previa del efecto.
  10. Duración de la animación: Establece la duración de la animación, en milisegundos

Configuración general

  1. Título: Ingrese el título de la ventana emergente. Este título solo se mostrará en el backend, no para el usuario.
  2. Estado: Borrador, Pendiente de revisión, Privado o Publicado

Configuración de vista previa

  1. Vista previa del contenido dinámico como: Elija entre Archivos, Páginas, Publicaciones, Medios o páginas 404.

Nota: Para ver el contenido que ha elegido, debe volver a cargar la página después de seleccionar el contenido dinámico.

Estilo

file-lruzhoowu8-5345889

Surgir

  1. Tipo de fondo: Elija un color de fondo, una imagen o un degradadoConcepto de Degradado¿Qué es un Degradado?El Degradado es una técnica que está fundamentalmente vinculado con el terreno del diseño gráfico y la maquetación, con todo lo que tiene que ver con la elaboración de imágenes o su modificación. Se trata de combinar dos colores de forma que uno va perdiendo intensidad a medida que el otro la va ganando, realizando una transición cromática suave que puede obtener resultados muy impactantes.Una más
  2. Tipo de borde: Seleccione el tipo de borde, eligiendo entre ninguno, sólido, doble, punteado, discontinuo o ranurado
  3. Radio de borde: Establece el radio del borde para controlar la redondez de las esquinas de cada lado de la ventana emergente
  4. Sombra de la caja: Ajustar las opciones de sombra del cuadro

Cubrir

  1. Tipo de fondo: Elija un color de fondo, una imagen o un degradado

Botón Cerrar

  1. Posición: Elija mostrar el botón Cerrar en el interior o el exterior de la ventana emergente
  2. Posición vertical: Use el control deslizante para seleccionar la posición vertical del botón Cerrar
  3. Posicion horizontal: Use el control deslizante para seleccionar la posición horizontal del botón Cerrar
Normal | Flotar
  1. Color: Seleccione el color del botón Cerrar para los estados Normal y Hover
  2. Color de fondo: Elija el color de fondo del botón Cerrar para los estados Normal y Hover
  3. Talla: Establece el tamaño del botón de cierre

Avanzado

file-tf4sp63xtw-5092525

Avanzado

  1. Mostrar botón de cierre después de (segundos): Introduzca un número de segundos. El botón de cerrar solo aparecerá después de que haya pasado ese tiempo.
  2. Cerrar automáticamente después de (ms): Ingrese el número de ms a esperar antes de cerrar automáticamente la ventana emergente. Déjelo en blanco para desactivar el cierre automático.
  3. Evitar el cierre en superposición: Seleccione Sí para evitar que los usuarios puedan cerrar la ventana emergente haciendo clic en la superposición.
  4. Evitar el cierre con la tecla ESC: Seleccione Sí para evitar que los usuarios puedan cerrar la ventana emergente presionando la tecla ESC.
  5. Deshabilitar el desplazamiento de página: Seleccione Sí para evitar que los usuarios se desplacen por la página que se muestra detrás de la ventana emergente
  6. Evite múltiples ventanas emergentes: Si el usuario ha visto otra ventana emergente en la página que visita, oculte esta ventana emergente seleccionando Sí
  7. Abrir por selector: Ingrese una lista de selectores que activarán manualmente la ventana emergente (ID de CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a más, clases o elementos de datos). Vea las instrucciones
  8. Margen: Ajustar los márgenes
  9. Relleno: Ajusta el relleno alrededor de la ventana emergente
  10. Clases CSS: Agregue su clase personalizada sin el punto (por ejemplo, mi clase)

CSS personalizado

CSS personalizado: Ingrese su propio CSS


<h1Concepto de H1¿Qué es un H1?El H1 es un elemento primordial en cualquier página web y algo que nace del lenguaje HTML. Consiste en una etiqueta que suele utilizarse para indicar el fragmento más importante de una página, normalmente la cabecera que más ha de señalar en ella y captar la atención del lector.Su conocimiento y su utilización son algo primordial de cara al SEO e inclusive de cara a más>Controlar la ventana emergente a través de la configuración de publicación

Establecer condiciones

Condiciones le permite establecer en qué páginas de su sitio web aparecerá la ventana emergente.

file-kvihq5hjjj-8120044

Establezca las condiciones que determinan dónde se usa su ventana emergente (excluyendo la activación manual). Por ejemplo, agregue una condición Incluir y elija Singular> Portada para mostrar solo la ventana emergente en la página de inicio del sitio. Obtenga más información sobre las condiciones.

Establecer disparadores

Disparadores son las acciones del usuario que hacen que su campaña aparezca. Seleccione Sí o No para cada opción que hará que aparezca la ventana emergente.

file-8wdw7aeeik-2137423

  1. Carga en la página: Si se establece en Sí, establezca el número de segundos de espera, al cargar la página, antes de que se active la ventana emergente.
  2. En desplazamiento: Si se establece en Sí, seleccione la dirección (Arriba o Abajo) y la cantidad de desplazamiento antes de que se active la ventana emergente. El desplazamiento hacia abajo se basa en porcentaje de la página desplazada hacia abajo; El desplazamiento hacia arriba se basa en número de píxeles desplazado hacia arriba.
  3. Al desplazarse al elemento: Si se establece en Sí, ingrese el nombre del selector (ID de CSS) que activará la ventana emergente cuando el usuario se desplace hacia ella. También debe agregar el ID de CSS a la pestaña Avanzado del elemento.
  4. Al hacer clic: Si se establece en Sí, ingrese el número de clics que activarán la ventana emergente
  5. Después de inactividad: Si se establece en Sí, ingrese la cantidad de segundos de inactividad del usuario que activarán la ventana emergente.
  6. Intención de salida en la página: Establezca Sí para activar la ventana emergente cuando la actividad del mouse del usuario indique la intención de salir de la página

Reglas avanzadas

Reglas avanzadas especificar otros requisitos que se deben cumplir para generar una ventana emergente.

file-kteybnngnx-7963464

  1. Mostrar después de X páginas vistas: Si se establece en Sí, establezca el número de visitas a la página antes de que se active la ventana emergente.
  2. Mostrar después de X sesiones: Si se establece en Sí, establezca el número de sesiones de usuario antes de que se active la ventana emergente (una sesión comienza cuando el usuario visita el sitio web y finaliza cuando el usuario cierra el navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más).
  3. Preséntate hasta X veces: Máximo de veces que se mostrará la ventana emergente. Si Count está configurado en On Open, esto solo permitirá que la ventana emergente se abra tantas veces como el número configurado. Si Count está configurado en On Close, la ventana emergente solo se abrirá hasta que el usuario la haya cerrado por enésima vez, después de lo cual no se volverá a abrir. Esta configuración se establece en el almacenamiento local y permanecerá allí hasta que se elimine.
  4. Al llegar de una URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo más específica: Si se establece en Sí, muestra u oculta la ventana emergente si un usuario llega desde una URL específica (ingresa la URL específica). RegexLas abreviaturas regex y regexp denotan expresiones regulares que se usan en la informática teórica, programación, desarrollo de software, procesamiento de textos y optimización de motores de búsqueda. Las expresiones regulares se pueden usar para describir cadenas y números de cadenas en una forma lógica general con el fin de buscarlas, sustituirlas, manipularlas o procesarlas en documentos, código fuente o una base de datos. Ejemplo: En un editor de texto habilitado más es una opción para que los usuarios avanzados establezcan reglas avanzadas para patrones de URL coincidentes.
  5. Mostrar al llegar de: Si se establece en Sí, muestra si el usuario llega de los motores de búsquedaConcepto de Motores de Búsqueda¿Qué son los Motores de Búsqueda?Los Motores de búsqueda, o Search Engines, son lo que se conoce comúnmente como buscadores. Todos aquellos sistemas informáticos que trabajan buscando todos los archivos almacenados en internet por medio de de arañas o crawlers para elaborar páginas de resultados que sirvan para que los usuarios accedan a webs tras realizar una búsqueda. Son los responsables de que, al buscar cualquier más, un enlaceConcepto de Dominio¿Qué es un Enlace?En Internet, un link, además conocido como enlace o hipervínculo, es cualquier texto o imagen que se encuentra en una página web y en la que el usuario puede pulsar o clicar para ser dirigido a otro contenido distinto. Es el principal medio de “desplazamiento” en la red, puesto que se encuentra presente en prácticamente cualquier portal que visites a día de hoy, inclusive en más externo (ingrese la URL del enlace específico) y / o un enlace interno (ingrese la URL del enlace específico).
  6. Ocultar para usuarios registrados: Configúrelo en Sí para ocultar la ventana emergente para todos los usuarios que iniciaron sesión o para seleccionar roles personalizados. Para sitios web con cachéUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y más, es posible que esta función no funcione correctamente
  7. Mostrar en dispositivos: Seleccione Sí para elegir que se muestre en el escritorio, la tableta y / o dispositivos móviles

Nota: las ventanas emergentes no se pueden mostrar más de una vez si la página no se vuelve a cargar o se vuelve a ingresar.


Ventana emergente de control mediante activación manual

Las ventanas emergentes se pueden activar manualmente. Los enlaces dinámicos pueden usar la acción emergente para abrir o cerrar una ventana emergente. El formulario puede usar la opción Acciones después de enviar para abrir o cerrar una ventana emergente. Cualquier elemento puede usar un selector único (clase, ID o elemento de datos) para activar manualmente una ventana emergente cuando se hace clic en ese elemento.

  • De cualquier elemento de enlace, elija Dinámico> Acciones> Ventana emergente. Hacer clic Surgir para seleccionar ya sea Abrir ventana emergente o Cerrar elemento emergente. Si se elige Cerrar ventana emergente, la opción «No volver a aparecer«se convertirá en una opción disponible.
  • Desde un formulario de Elementor, elija Acciones después de enviar> Agregar acción> Abrir ventana emergente o Cerrar ventana emergente
  • A partir de una Selector personalizado: Cualquier elemento puede tener un conjunto de selectores que se puede utilizar como un disparador emergente manual. Edite el elemento y vaya a Avanzado> Clases CSS (o ID de CSS) y asigne al elemento un nombre de clase (sin el punto anterior) o un nombre de identificación (sin el # anterior). En las ventanas emergentes Condiciones, elija la página que incluye el elemento con el selector único (p. ej. Condiciones> Incluir> Singular> Páginas> Título de su página). Cuando un usuario visita esa página y hace clic en el elemento, se activa la ventana emergente. Esto es útil para abrir una ventana emergente desde el elemento del menú de navegación de un tema, el contenido dentro de un widget del Editor de texto, desde un elemento o script que no es de Elementor, etc.

Al activar una ventana emergente desde un selector personalizado, tenga en cuenta que el elemento no tiene que ser un «enlace». También se puede hacer clic en un elemento en el que normalmente no se puede hacer clic, como el texto sin formato, para generar la ventana emergente. También tenga en cuenta que el Disparadores y Reglas avanzadas estarán ignorado mientras usa esta opción.