La función de ventana emergente de Elementor también es buena cuando construimos páginas web usando el editor de Elementor; esta función puede ayudarte a atraer la atención del usuario, proporcionar información importante u ofertas especiales, etc. Veamos como Elementor crea una ventana emergente y configura la ventana emergente

Crear una ventana emergente

En primer lugar, es necesario crear una ventana emergente, y puede configurar su primera ventana emergente siguiendo los pasos que se indican a continuación. Siga esta guía utilizando elPulsador manualActiva una ventana emergente.

1. Vaya a Panel de control > Plantillas > Ventana emergente > Añadir nueva
2. Asigne un nombre a la plantilla y haga clic en "Crear una plantilla"
3. Elige una plantilla de la biblioteca o crea tu propio diseño.
4. Haga clic en "escriba a", luego haga clic en "Guardar y cerrar"
5. Abra una nueva página en Elementor (CTRL / CMD + E, Nueva página)
6. Arrastre el widget de botón
7. En "Diseño", seleccione la opción"Enlaces" > "Dinámica" > "Acciones" > "Popups"
8. hacer clic (con un ratón u otro dispositivo señalador)ventana emergente>Abrir ventana emergente> Seleccione la ventana emergente que ha creado
9. Vaya a la página Live, haga clic en el botón y vea aparecer la ventana emergente

Para este tipo de ventana emergente básica que aparece al hacer clic en un botón, no se requieren condiciones, disparadores ni reglas avanzadas.

Esta es la configuración básica. Pruébalo para tener una idea de cómo utilizar Elementor popups.

Configuración de ventanas emergentes

Una ventana emergente es una ventana modal de llamada a la acción que aparece y cubre una página en un momento determinado o bajo determinados desencadenantes y condiciones. Las ventanas emergentes están diseñadas para centrar la atención del usuario después de que éste haya realizado una acción.

En primer lugar, vaya aPlantillas > Ventana emergente. Controle el diseño, las condiciones, las reglas y los estilos de la ventana emergente y, a continuación, diseñe el contenido de la ventana emergente.tome nota deHaga clic en el icono de engranaje de Configuración de ventanas emergentes de la barra de herramientas situada en la parte inferior del panel para editar la configuración de las ventanas emergentes.

Diseño de ventanas emergentes

establecer

apertura (jerga ajedrecística)

1. amplitudPara fijar la anchura exacta de la ventana emergente, utilice px o vh
2. AlturaUtilice px o vh para establecer la altura exacta de la ventana emergente. Utilice una anchura y una altura de 100vh para crear una ventana emergente a pantalla completa.
3. nivel (de logro, etc.): Selecciona la posición horizontal de la ventana emergente, desde la izquierda, el centro o la derecha.
4. perpendicular: Selecciona la posición vertical de la ventana emergente, desde arriba, el centro o abajo.
5. Superposición: Mostrar u ocultar la superposición de fondo
6. botón de cierrePermite mostrar u ocultar el botón de cierre
7. ¿Cuántos segundos transcurren antes de que aparezca el botón?(si se selecciona el botón de apagado): seleccione el número de segundos que se debe esperar antes de mostrar el botón de apagado.
8. Animación de entrada: Seleccione la animación de entrada para la ventana emergente en las opciones desplegables, como Fundido y Zoom. Seleccione cualquier efecto de animación para previsualizar el efecto.
9. Animación de salidaSeleccione la animación de salida para la ventana emergente en las opciones desplegables, como Fundido y Zoom. Seleccione cualquier efecto de animación para previsualizar el efecto.
10. Duración de la animación: establece la duración de la animación en milisegundos

Ajustes generales

1. leyendaIntroduzca un título para la ventana emergente. Este título sólo se mostrará en el backend y no se mostrará al usuario.
2. situación: borrador, pendiente, privado o emitido

Configuración de la vista previa

Previsualizar contenido dinámico comoElija entre cualquier archivo, página, entrada, medio o página 404.

Nota: Para ver la selección, debe recargar la página después de seleccionar el contenido dinámico.

peinado

ventana emergente

1. Tipo de fondoSeleccionar color de fondo, imagen o degradado
2. Tipo de bordeSeleccione el tipo de borde: ninguno, sólido, doble, punteado, discontinuo o dentado.
3. Radio del bordeAjuste el radio del borde para controlar el redondeo de las esquinas en cada lado de la ventana emergente.
4. sombra del marcoOpciones de sombreado del cuadro de ajuste

sobrescribir

Tipo de fondoSeleccionar color de fondo, imagen o degradado

botón de cierre

1. colocaciónPermite mostrar el botón de cierre dentro o fuera de la ventana emergente.
2. posición vertical: Utilice el control deslizante para seleccionar la posición vertical del botón de cierre
3. posición horizontal: Utilice el control deslizante para seleccionar la posición horizontal del botón de cierre

Normal |Hover

1. color: Selección del color del botón "Cerrar" en los estados "Normal" y "Hover".
2. color de fondo: Elija el color de fondo del botón "Cerrar" en los estados "Normal" y "Hover".
3. Talla Tamaño del botón de cierre

alta

alta

1. Intervalo de tiempo para mostrar el botón de cierre (en segundos)Introduzca el número de segundos. El botón Cerrar sólo aparecerá una vez transcurrido este tiempo.
2. Tiempo de desconexión automática (ms)Introduzca el número de milisegundos que se esperará antes de cerrar automáticamente la ventana emergente. Déjelo en blanco para desactivar el cierre automático.
3. Impedir el cierre de la superposición: Si selecciona Sí, el usuario no podrá cerrar la ventana emergente haciendo clic en la superposición.
4. Evita que se pulse la tecla ESC para cerrarLa selección de "Sí" impide al usuario cerrar la ventana emergente pulsando la tecla ESC.
5. Desactivar el desplazamiento de páginaSeleccione "Sí" para evitar que los usuarios se desplacen por la página que aparece detrás de la ventana emergente.
6. Evitar múltiples ventanas emergentesSi el usuario ve otra ventana emergente en la página que está visitando, seleccione Sí para ocultar esta ventana emergente.
7. Abrir por selector: Introduzca la lista de selectores (IDs CSS, clases o elementos de datos) que activarán manualmente la ventana emergente.
8. margenAjuste de márgenes
9. AcolchadoAjustar el relleno alrededor de la ventana emergente
10. Clase CSSañadir clases personalizadas sin puntos (por ejemplo, my-class)

CSS personalizado

CSS personalizadoIntroduzca su propio CSS

Control de las ventanas emergentes mediante la configuración de la publicación

Condiciones

requisito previoPermite establecer en qué páginas del sitio se mostrará la ventana emergente.

Establezca las condiciones para determinar dónde se utiliza la ventana emergente (excluidos los activadores manuales). Por ejemplo, añada la condición "Contiene" y seleccione la opción"Singular">"Inicio"para mostrar la ventana emergente sólo en la página de inicio del sitio.

Establecer desencadenantes

flip-flop (electrónica)es la acción del usuario que hará que aparezca su campaña. Seleccione Sí o No para cada opción que hará que aparezca la ventana emergente.

1. Cuando se carga la página: Si se establece en "Sí", establece el número de segundos que se debe esperar antes de activar la ventana emergente cuando se carga la página.
2. rodanteSi está en "Sí", seleccione la dirección (arriba o abajo) y la cantidad de desplazamiento antes de activar la ventana emergente. El desplazamiento hacia abajo se basa en que la página se desplace hacia abajo elpor ciento; el desplazamiento hacia arriba se basa en el desplazamiento hacia arribanúmero de píxeles.
3. Al desplazarse al elemento: Si se establece en Sí, introduzca el nombre del selector (CSS ID) que activará una ventana emergente cuando el usuario se desplace hasta ella. El ID CSS también debe añadirse a la pestaña Avanzado del elemento.
4. haciendo clic enSi está en "Sí", introduzca el número de clics que activarán la ventana emergente.
5. post-inactividadSi está en "Sí", introduzca el número de segundos de inactividad del usuario que activarán la ventana emergente.
6. Intención de salida de la páginaSí: Establézcalo como "Sí" para activar una ventana emergente cuando la actividad del ratón del usuario indique la intención de salir de la página.

Reglas avanzadas

Reglas avanzadasEspecifica los requisitos adicionales que deben cumplirse para generar la ventana emergente.

1. Se muestra después de cuántas páginas vistas: Si se establece en Sí, fija el número de páginas vistas antes de activar la ventana emergente.
2. Se muestra después de cuántas sesiones: Si se establece en "Sí", establece el número de sesiones de usuario antes de que se active la ventana emergente (la sesión comienza cuando el usuario visita el sitio y termina cuando cierra el navegador).
3. Mostrar hasta cuántas vecesNúmero máximo de veces que puede mostrarse la ventana emergente. Si "Cuenta" está configurado como "Al Abrir", la ventana emergente sólo podrá abrirse el número de veces establecido. Si "Count" está ajustado a "Closed", la ventana emergente sólo se abrirá hasta que el usuario la cierre por X vez, tras lo cual no se volverá a abrir. Esta configuración se almacena localmente y permanecerá allí hasta que se elimine.
4. Al llegar desde una URL específica: Si se establece en Sí, muestra u oculta la ventana emergente cuando un usuario llega desde una URL específica (introduzca una URL específica). Regex es una opción para que los usuarios avanzados establezcan reglas avanzadas para hacer coincidir patrones de URL.
5. Mostrar a la llegada: Si se establece en Sí, muestra si el usuario llegó desde un motor de búsqueda, un enlace externo (introduzca la URL de un enlace específico), y/o un enlace interno (introduzca la URL de un enlace específico).
6. Ocultar a los usuarios registrados: Establezca Sí para ocultar las ventanas emergentes para todos los usuarios registrados o roles personalizados seleccionados. Es posible que esta función no funcione correctamente en los sitios almacenados en caché.
7. Aparece en el dispositivoSeleccione "Sí" para que se muestre en ordenadores de sobremesa, tabletas o dispositivos móviles.

Atención:Si no se recarga la página ni se vuelve a entrar en ella, la ventana emergente no podrá mostrarse más de una vez.

Control de ventanas emergentes mediante activación manual

Las ventanas emergentes pueden activarse manualmente. Los enlaces dinámicos pueden utilizar Acción de ventana emergente para activar o desactivar las ventanas emergentes, y los formularios pueden utilizar la opción Actuar al enviar para activar o desactivar las ventanas emergentes. Cualquier elemento puede tener un selector único (clase, ID o elemento de datos) que activa manualmente una ventana emergente cuando se hace clic en el elemento.

• Desde cualquier elemento vinculado, seleccioneDinámica > Acciones > Ventana emergente. Haga clic en el botón"Ventanas emergentes".elegir por"Abrir ventana emergente"tal vez"Cerrar ventanas emergentes".. Si decide cerrar la ventana emergente, "ya no aparece" estará disponible.
• En el formulario de Elementor, seleccioneAcciones posteriores al envío > Añadir acción > Abrir ventana emergente o Cerrar ventana emergente
• De selectores personalizados: cualquier elemento puede tener un selector establecido que se puede utilizar como disparador manual de ventanas emergentes. Edite el elemento y vaya aAvanzado > Clases CSS(oCSS ID) y, a continuación, especifique el nombre de clase (sin el punto inicial) o el nombre de ID (sin el # inicial) del elemento. En la ventana emergente deCondicionesen el que la página que contiene el elemento se selecciona mediante un selector único (por ejemploCondiciones > Incluir > Singular > Páginas > Título de su página). La ventana emergente se activará cuando el usuario visite la página y haga clic en el elemento. Esto es útil para abrir ventanas emergentes desde elementos del menú de navegación de un tema, contenido en widgets del editor de texto, desde elementos o scripts que no sean de Elementor, etc.

Al activar una ventana emergente desde un selector personalizado, tenga en cuenta que el elemento no tiene por qué ser un "enlace". Los elementos en los que normalmente no se puede hacer clic (por ejemplo, texto sin formato) también se pueden pulsar para generar una ventana emergente. Tenga en cuenta también que los activadores y las reglas avanzadas se ignoran cuando se utiliza esta opción.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres