Cómo configurar ventanas emergentes en un sitio WordPress con Elementor

Las ventanas emergentes son ventanas con modo de llamada a la acción que aparecen y cubren una página en un momento determinado o bajo determinados desencadenantes y condiciones. Las ventanas emergentes captan principalmente la atención de los usuarios después de que hayan realizado una acción.

En primer lugar, vaya aPlantillas > Ventana emergente. Controle el dise?o, las condiciones, las reglas y los estilos de las ventanas emergentes y, a continuación, dise?e el contenido de las mismas.

tome nota deHaga clic en Expulsar en la barra de herramientas situada en la parte inferior del panel.Colocación de las marchaspara editar la configuración de la ventana emergente.

Imagen[1]-Cómo configurar popups con Elementor en un sitio web WordPress - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Dise?o de ventanas emergentes

establecer

apertura (jerga ajedrecística)

  1. amplitudFijar la anchura exacta de la ventana emergente mediante px o vh
  2. alto gradoUtilice px o vh para establecer la altura exacta de la ventana emergente. Utilice 100vh tanto para la anchura como para la altura para crear ventanas emergentes 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. sobrescribirMostrar u ocultar la superposición de fondo
  6. botón de cierrePermite mostrar u ocultar el botón de cierre
  7. Botón de visualización después de x segundos(si se selecciona Mostrar botón de apagado): seleccione el número de segundos que se debe esperar antes de mostrar el botón de apagado.
  8. Ir a animación: 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 muestra en el backend y no se mostrará al usuario.
  2. situación: Borrador, Pendiente de revisión, Privado o Publicado

Configuración de la vista previa

La dinámica de previsualización esElija entre cualquier archivo, página, entrada, medio o página 404.

    tome nota de: Para ver la selección, hay que recargar la página después de seleccionar el contenido dinámico.

    peinado

    Imagen [2] - Cómo Configurar Popups con Elementor en un Sitio Web WordPress - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida
    1. Tipo de fondoSeleccionar color de fondo, imagen o degradado
    2. Tipo de bordeElija el tipo de borde: sin borde, borde sólido, borde de doble línea, borde punteado, borde discontinuo o borde 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ón: Elija si desea mostrar el botón "Cerrar" dentro o fuera de la ventana emergente.
      2. posición verticalBotón "Cerrar": utilice el control deslizante para seleccionar la posición vertical del botón "Cerrar".
      3. posición horizontalBotón "Cerrar": utilice el control deslizante para seleccionar la posición horizontal del botón "Cerrar".

      Normal | Hover

      1. color: Selección del color del botón "Cerrar" en estado normal y hover.
      2. color de fondo: Elija el color de fondo del botón "Cerrar" en los estados "Normal" y "Hover".
      3. TallaAjuste del tama?o del botón de cierre

      Avanzado

      Imagen [3] - Cómo Configurar Popups con Elementor en un Sitio Web WordPress - Photon Flux | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

      Avanzado

      1. Muestra el botón de apagado después de (en segundos)Introduzca el número de segundos. El botón de apagado sólo se muestra una vez transcurrido este tiempo.
      2. Tiempo de desconexión automática (ms)Introduzca el número de milisegundos que debe esperar antes de cerrar automáticamente la ventana emergente. Déjelo en blanco para desactivar el cierre automático.
      3. Evitar la anulación del cierre: Al seleccionar Sí se impide que el usuario cierre la ventana emergente haciendo clic en Anular.
      4. Impide el cierre pulsando la tecla ESCLa selección de "Sí" impide al usuario pulsar la tecla ESC para cerrar la ventana emergente.
      5. Desactivar el desplazamiento de páginaLa selección de "Sí" impide al usuario desplazarse 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 visitada, seleccione Sí para ocultar esta ventana emergente.
      7. Pulse el selector para abrir: 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 web aparecerá la ventana emergente.

      Imagen [4] - Cómo Configurar Popups con Elementor en un Sitio Web WordPress - Photon Flux | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

      Establezca condiciones para determinar dónde se utilizará la ventana emergente (excluidos los activadores manuales). Por ejemplo, a?ada una condición de inclusión y seleccione
      Singular > Inicio.para que la ventana emergente sólo aparezca en la página de inicio del sitio.

      Establecer desencadenantes

      flip-flop (electrónica)es la acción del usuario que provoca la aparición de la campa?a. Para cada opción que provoque una ventana emergente, seleccione "sea"o"obstruido".

      Imagen [5] - Cómo Configurar Popups con Elementor en un Sitio Web WordPress - Photon Flux | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida
      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 tras la carga de la página.
      2. rodante: Si se establece en Sí, selecciona la dirección (arriba o abajo) y la cantidad de desplazamiento antes de activar la ventana emergente. El desplazamiento hacia abajo se basa en el desplazamiento hacia abajo de la páginapor ciento; desplazamiento hacia arriba basado en el desplazamiento hacia arribanúmero de píxeles.
      3. Al desplazarse a un elementoSi se establece en Sí, introduzca el nombre del selector (CSS ID) que activará una ventana emergente cuando el usuario se desplace sobre el elemento. 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 activaron la ventana emergente.
      5. post-inactividadSi está en "Sí", introduzca el número de segundos de inactividad del usuario que activaron 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.

      Imagen [6] - Cómo Configurar Popups con Elementor en un Sitio Web WordPress - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida
      1. Aparece después de ver X páginas: Si se establece en "Sí", establece el número de páginas vistas antes de que se active la ventana emergente.
      2. Se muestra después de X 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. Mostrado hasta X vecesNúmero máximo de veces que puede mostrarse la ventana emergente. Si el recuento se establece en abierto, la ventana emergente sólo podrá abrirse el número de veces establecido. Si el contador está en Off, la ventana emergente sólo estará abierta hasta que el usuario la cierre por X vez, después de 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íficaSi 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 la coincidencia de patrones de URL.
      5. Mostrar a la llegada: Si se establece en Sí, muestra si el usuario ha llegado 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 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.

      Nota: La ventana emergente no puede mostrarse más de una vez sin recargar o volver a entrar en la página.

      Control de ventanas emergentes mediante activación manual

      Las ventanas emergentes pueden activarse manualmente. Los enlaces dinámicos pueden utilizar acciones emergentes para abrir o cerrar ventanas emergentes. Los formularios pueden utilizar una opción de acción posterior al envío para abrir o cerrar una ventana emergente. Cualquier elemento puede desencadenar manualmente una ventana emergente al hacer clic utilizando un selector único (clase, ID o elemento de datos).

      • Desde cualquier elemento vinculado, seleccioneDinámica > Funcionamiento > Ventana emergente. Haga clic en el botónventana emergenteelegir porAbrir ventana emergentetal vezCerrar la ventana emergente. Si decide cerrar la ventana emergente, aparecerá el icono "ya no aparece" estará disponible.
      • En el formulario de Elementor, seleccione"Acciones tras el 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 asigne al elemento un nombre de clase (sin el punto inicial) o un nombre de ID (sin el # inicial). En la ventana emergente delrequisito previoen la que se selecciona la página que contiene el elemento con el selector único (por ejemplo, la páginaCondiciones > Contiene > 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 los elementos del menú de navegación del tema, contenido en widgets del editor de texto, elementos o scripts que no sean de Elementor, etc.
      Imagen [7] - Cómo Configurar Popups con Elementor en un Sitio WordPress - Photon Flux | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

      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
      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
      ? Declaración de reproducción
      Este artículo fue escrito por Harry
      EL FIN
      Si le gusta, apóyela.
      felicitaciones0 compartir (alegrías, beneficios, privilegios, etc.) con los demás
      comentarios compra de sofás

      Por favor, inicie sesión para enviar un comentario

        Sin comentarios