Cómo crear y mostrar ventanas emergentes por etiqueta de publicación en WordPress

¿Desea crear y mostrar una ventana emergente por etiqueta de publicación en WordPress? Así que sigue leyendo este artículo.

Estamos seguros de que ya está familiarizado con la pequeña ventana que aparece cuando navega por un sitio web. Pues se llama popup o ventana emergente. Las ventanas emergentes pueden aparecer en diferentes tamaños y posiciones en pantalla en un sitio web.

En WordPress, hay muchos complementos para crear ventanas emergentes, como Elementor Pro, JetPopup, Brizy Pro y más.

Lo importante que debe recordar es que las ventanas emergentes no deben resultar molestas para los visitantes de su sitio web. Por tanto, crea una ventana emergente lo más sencilla y atractiva posible.

Indice

Algunos complementos de WordPress para crear ventanas emergentes

Elementor Pro

Elementor Pro es una extensión de Elementor con cientos de funciones premium. Le brinda poderosas herramientas profesionales que aceleran su flujo de trabajo y diseño. Elementor Pro le brinda control total sobre el diseño y el diseño de su sitio web. En este caso, puede personalizar libremente el diseño de su ventana emergente.

utiliser Elementor Pro crear una ventana emergente por etiqueta de publicación es muy simple y fácil de usar. Puede definir fácilmente las condiciones de visualización de su ventana emergente de una manera muy precisa.

JetPopup de Crocoblock es una extensión para Elementor. Puede comprarlo como un complemento independiente o comprarlo en un paquete con otros complementos de Crocoblock. La ventaja de usar JetPopup para crear una ventana emergente es que viene con muchas características geniales.

Puedes jugar con los disparadores de la ventana emergente.
Puede crear animaciones para la ventana emergente.
Hay disponible una gran cantidad de plantillas emergentes.

Lea también: 22 mejores complementos premium para Elementor

Brizy Pro

El generador de ventanas emergentes de Brizy Pro te ofrece dos opciones. La primera es la ventana emergente activada por clic, y la segunda son las condiciones y activadores automáticos.

Apertura al hacer clic: su ventana emergente se puede activar simplemente haciendo clic en los elementos de su página.
Activadores y condiciones automáticos: puede configurar las acciones de los visitantes que determinarán cuándo se muestran las ventanas emergentes.

Como se mencionó anteriormente, tiene varias opciones para crear una ventana emergente en WordPress. En este tutorial, le mostraremos cómo crear y mostrar una ventana emergente por etiqueta de publicación usando la versión Elementor Pro, así que asegúrate de tener uno.

Lo primero que debe hacer es crear una nueva plantilla emergente. Para crear una nueva plantilla emergente, vaya a Plantillas > Ventanas emergentes en su tablero de WordPress y haga clic en el botón Agregar nuevo

A continuación, agregue el nombre de su ventana emergente y haga clic en el botón CREA UN MODELO.

Se le dirigirá a la biblioteca de plantillas, puede elegir una plantilla de la ventana de la biblioteca o diseñar su propia plantilla emergente. Para usar una plantilla de la biblioteca, simplemente haga clic en el botón insertar.

Pero en este tutorial, vamos a crear la plantilla Popup desde cero. Haga clic en el icono X para cerrar la biblioteca de plantillas.

Necesitamos hacer algunos ajustes en la configuración de Popup antes de comenzar a crear una plantilla de Popup. Puede encontrar la mejor configuración para su sitio. En este tutorial, le mostraremos la configuración de ventanas emergentes de su elección.

Haga clic en el icono de engranaje en la esquina inferior izquierda. En la configuración emergente, cambie el Manga en el 90% del ancho de la vista (VW) Y Puesto de trabajo en centro inferior.

A continuación, diseñe su plantilla Popup. Agregue una nueva sección y seleccione la estructura de 5 columnas. En la sección de configuración, configure el Manga en 950. Puedes jugar con tu configuración.

Por ejemplo, puede ir a la pestaña Estilo para configurar el fondo, vaya a la pestaña Avanzado para personalizar el margen, y muchos más.

Ahora volvamos a sus columnas. En la columna de la izquierda, establezca el ancho en 33% y para los otros cuatro en 16%.

En la columna de la izquierda, agregaremos un widget de título con algo de texto. Puede agregar texto invitando a los visitantes de su sitio web a ver otro contenido que sea relevante para el contenido actual, o cualquier otro texto de su elección.

A la derecha, agregaremos un widget de imagen. Puede agregar imágenes de miniaturas/imágenes destacadas de publicaciones o cargarlas manualmente.

Ahora la estructura está lista. Volver a Configuración emergente para personalizar las animaciones de entrada, salida y margen. En este tutorial, configuramos la entrada a Desvanecerse y la salida en Desvanecerse hasta. Luego ve a la pestaña Avanzado y establezca el margen en 30 (valor común para enlaces).

Ahora que el diseño está listo, haga clic en el botón PUBLICAR para configurar las condiciones de visualización y los disparadores. Para definir la condición de visualización, haga clic en el botón AGREGAR UNA CONDICIÓN y seleccione su opción de la lista desplegable.

Como desea mostrar la ventana emergente por etiqueta de publicación, puede establecer las siguientes condiciones de visualización (ver animación).

Haga clic en Siguiente. en la pestaña disparadores, establezca el gatillo en en desplazamiento cambiando el interruptor a Sí. Definir el Dirección en Bas y la Manga más del 95%. Porque queremos que la ventana emergente aparezca cuando los visitantes lleguen al final de nuestro artículo.

En este tutorial, no vamos a definir Reglas avanzadas. Así que haz clic en GUARDAR Y CERRAR. Bueno, ahora hemos terminado.

Veamos qué aspecto tiene.

Aquí acaba de terminar su ventana emergente. Vea también nuestros artículos relacionados:

Descargar Elementor Pro

Comparte este artículo :

mikhos gartner

Mikhos Gartner es un experto en herramientas digitales que compra, prueba y revisa herramientas SAAS para pequeñas empresas. Basándose en años de experiencia en el campo de la tecnología, ofrece reseñas interesantes. Su contenido se consume ampliamente y atiende a millones de usuarios cada mes.