Necesito saber cómo crear ventanas emergentes con Elementor ?
Elementor no es solo un creador de páginas. Es un Plugin de WordPress versátil. Hay varias otras cosas que puedes hacer con él. Elementor aparte de la creación de páginas web. Una de ellas es la creación de popups.
En este artículo, le mostraremos cómo crear una ventana emergente con la ayuda de la función Popup Builder deElementor.
Crear una ventana emergente con Elementor es muy fácil. Puede crear su ventana emergente con la interfaz visual de Elementor, donde todo es arrastrar y soltar. Elementor también ofrece plantillas emergentes que puede usar para crear sus ventanas emergentes. Simplemente tendrás que seleccionar un modelo, publicarlo y definir el disparador.
Descubre Cómo instalar Elementor en WordPress
Antes de continuar, es crucial tener en cuenta que el generador de ventanas emergentes de Elementor solo está disponible en la versión pro.
Cómo crear una ventana emergente con Elementor
Al crear una ventana emergente con Elementor, puede establecer un disparador (una acción para mostrar la ventana emergente) y configurar la condición (en qué páginas desea que aparezca su ventana emergente). Además, también puede establecer una regla avanzada (que se explica más adelante).
Lea también: Cómo crear un botón de degradado multicolor en Elementor
En esta guía, crearemos una ventana emergente de llamada a la acción con un activador al hacer clic en un botón. La ventana emergente se mostrará cuando un usuario haga clic en un botón.
Suponiendo que haya instalado Elementor Pro, inicie sesión en el panel de control de WordPress y vaya a Plantillas -> Ventanas emergentes y haga clic en el botón Añadir encima.
Dale un nombre a tu ventana emergente y haz clic en el botón CREAR UN MODELO.
Seleccione una plantilla emergente que desee utilizar. Pase el mouse sobre él y haga clic en el botón insertar para insertarlo en el editor de Elementor.
Si prefiere crear la ventana emergente desde cero, simplemente puede cerrar la biblioteca de plantillas para abrir el editor de Elementor.
En el editor de Elementor, puede personalizar la ventana emergente. Puede reemplazar el contenido predeterminado (textos en particular) con su propio contenido. Utilice el navegador para que sea más fácil saltar entre secciones y widgets.
También puede agregar animación de entrada/salida, habilitar/deshabilitar la superposición y habilitar/deshabilitar el botón de cierre.
Una vez que hayas terminado, haz clic en el botón PUBLICAR.
En el siguiente paso, se le pedirá que configure las condiciones de visualización y los disparadores. También hay una opción para establecer reglas avanzadas:
- Condiciones de visualización: Determina en qué páginas aparece la ventana emergente en su sitio web. Puede configurar la ventana emergente para que aparezca en todo el sitio web, páginas específicas, publicaciones específicas, categorías específicas, etc.
- Disparadores: Un disparador es una acción para mostrar la ventana emergente. Elementor admite 6 tipos de disparadores: en la carga de la página, en el desplazamiento, en el desplazamiento del elemento, al hacer clic, Después de la inactividad, en la salida de la página
- Reglas avanzadas: Requisitos que se deben cumplir para que aparezca la ventana emergente. Por ejemplo, puede configurar la ventana emergente para que aparezca si un visitante llega a su sitio web a través de un motor de búsqueda o una determinada URL. Popup Builder de Elementor ofrece 7 opciones de reglas avanzadas que puede configurar.
Como queremos mostrar la ventana emergente cuando un usuario hace clic en un botón, abra la pestaña disparadores y activa la opción Al hacer clic. Haga clic en Guardar y cerrar.
Cree una nueva página/publicación y edítela con Elementor (también puede editar una página existente).
Añade el Widget de botón arrastrándolo desde el panel izquierdo al área de edición. O bien, si está editando una página existente que ya contiene un botón, haga clic en el widget Botón para ponerlo en modo de edición.
Descubre también: Cómo establecer un tamaño personalizado para el icono del botón de Elementor
En opción Bouton debajo de la pestaña Contenido, establecer el enlace a Emergente. Para ello, puede hacer clic en la sección Enlace dinámico.
Haga clic en el icono de llave inglesa en el campo Emergente y seleccione la ventana emergente que acaba de crear. Escriba el nombre de la ventana emergente para encontrar su ventana emergente.
Cliquez sur PUBLICAR / ACTUALIZAR después de editar la página. Antes de hacer clic en el botón PUBLICAR / ACTUALIZAR, puede obtener una vista previa de su página primero para ver si la ventana emergente ya está funcionando.
¡Consigue Elementor Pro ahora!
Conclusión
Con Elementor Pro, ya no necesita instalar ningún complemento emergente porque las funciones que ofrece Elementor Pro incluyen un generador de ventanas emergentes.
Popup Builder de Elementor le permite crear cualquier tipo de ventana emergente. Desde una ventana emergente de llamada a la acción como la que acabamos de crear arriba, una ventana emergente de formulario registro, una barra de notificaciones, un botón para compartir en redes sociales, etc.
Dado que la ventana emergente se crea con el editor de Elementor, básicamente puede agregar cualquier widget a su ventana emergente. Con Popup Builder de Elementor, también puede crear un menú de sitio web creativo como el que se muestra a continuación:
Elementor ofrece plantillas emergentes para ahorrar tiempo en la creación de una ventana emergente. También puede usar una plantilla si no tiene idea de qué diseño emergente desea crear.
Listo ! Eso es todo por este artículo que le muestra cómo crear ventanas emergentes con Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
