Cómo agregar fácilmente una ventana emergente modal al sitio web de WordPress: tutorial de 3 pasos

¿Sabía que un estudio reciente sobre 2 mil millones de ventanas emergentes modales tenía una tasa de conversión del 9.28% entre el primer 10%? Sí. Las ventanas emergentes hacen que las visitas al sitio sean fáciles de usar y lo ayuden a obtener más registros en los boletines rápidos. Las ventanas emergentes han cambiado drásticamente en la forma en que se ven y funcionan. Como resultado, se vuelven más populares en los sitios web modernos que nunca. ¿También desea agregar modal a su sitio web y aprovechar las ventajas para ofrecer? Entonces este blog es exactamente lo que necesitas. Esta es la única guía que necesitará para averiguar sobre los modos emergentes y cómo agregarlos fácilmente a su sitio de WordPress.
Se esconde el contenido
¿Qué es una ventana modal?
Configuración que necesita comenzar
Cómo agregar una ventana emergente modal a WordPress en 3 pasos en el elemento usando ElementsKit
Cómo agregar un diseño personalizado de alguna manera con el Generador PopUp ElementsKit
Use las secciones de ElementsKit premartas para modelos hermosos
Agregue el Formulario de contacto 7 en el modal con ElementsKit
Envolver
¿Qué es una ventana modal? Las ventanas emergentes modales son muy comunes y es muy poco probable que no haya dado una. ¿Pero conoces las definiciones de la ventana emergente modal? Vamos a ver.
Un modal (también llamado una ventana modal o un cuadro de caja de luz) es una página web que se muestra al frente y desactiva todos los demás contenidos de la página. Para volver al contenido principal, el usuario debe comprometerse con el camino completando una acción o cerrándola. – Las ventanas modales de Hubspot son diferentes de los cuadros de diálogo antiguos. En ventanas emergentes sin modelo, los usuarios tienen acceso a toda la ventana incluso cuando se activa la ventana emergente. Entonces puedo ignorar la ventana emergente y seguir haciendo su trabajo. Por otro lado, el nuevo modal emergente crea una nueva “forma” en forma de ventana infantil y desactiva la ventana principal. Como resultado, el usuario no puede trabajar en la ventana original hasta que tome medidas o cierre la ventana modal. ¿Cuál es el beneficio? La ventaja es que tiene la atención del visitante en su sitio web, incluso si es por un segundo o dos. Y enfoque la atención de su usuario en su mensaje es lo que necesita, ¿verdad? Porque si veo lo que tienes para ofrecer, seguirán siendo más de un segundo, lo que garantizará una ventaja.
¿Por qué usar PopUp Modal en su sitio web de WordPress, la mayoría de las personas creen que las ventanas emergentes son molestas? Por supuesto, no los culpo. Vaya a un sitio para hacer su trabajo y de repente aparece una ventana emergente y se interrumpe, ciertamente es molesto.
Sin embargo, al ser propietario de un negocio, debe mirar una ventana emergente. Porque crees o no, estas inquietantes ventanas emergentes funcionan como un milagro. Los modos emergentes han demostrado ser extremadamente exitosos, especialmente en la colección de leads. Según Sumo, recolectaron alrededor de 23,645,948 direcciones de correo electrónico en menos de dos años usando una ventana emergente. ¡En muchos casos, la tasa de conversión aumentó a 50.2%! Entonces, si desea aumentar su lista de correo electrónico y acelerar la tasa de conversión, el pop modal es lo que le gusta porque son imanes de plomo probados. Además, las modalidades son simples y flexibles y no necesita enviar a los usuarios a otra página para completar una acción. Más clientes potenciales con una mejor experiencia de usuario. Por lo tanto, nunca cree que las modalidades son inútiles o muertas y comiencen a usarlas hoy. Los usos comunes de una ventana modal en el diseño web moderno son extremadamente efectivos cuando necesita que los visitantes del sitio tomen u observen un mensaje importante. Algunos de los usos comunes de una ventana modal en el diseño web incluyen:
Muestra tu mensaje de bienvenida
Recopilar correos electrónicos y clientes potenciales para suscribirse al boletín
Forma de autenticación
Muestre el mensaje de advertencia antes de hacer una acción
Mostrar política de cookies
Mostrar contenido multimedia como imagen (producto) o galería de video, etc.
Para formularios en varios pasos para una mejor experiencia de usuario.
Enumeré solo algunas de las muchas formas de usar el modo en el diseño web. Después de saber cómo crear uno, encontrará varias formas de usarlos en su sitio para obtener resultados óptimos. Así que comencemos.
La configuración que debe comenzar a asumir que ha instalado WordPress en su sitio. Además de WordPress, necesitará un generador de páginas y un complemento emergente de WordPress para avanzar en su sitio web:
Elementor (versión gratuita)
Elementskit (versión gratuita y profesional)
Elementor es un creador de páginas gratuito, y Elementskit es uno de los mejores complementos emergentes de WordPress. ¿Ha terminado de instalar? Comencemos el proceso principal ahora.
Verifique las características de Elementskit
Cómo agregar una ventana emergente modal a WordPress en 3 pasos en elemento usando ElementsKit si cree que es difícil agregar una ventana emergente a su sitio de WordPress, listo para sorprenderte. Siga los pasos a continuación y cree fácilmente un modal en el WP.
Paso 1: active el widget emergente modal
Access ElementsKit> Widgets> Activar modificación PopUp L> Haga clic en Guardar cambios
Activar widget modal
Paso 2: Agregar modal
Busque una ventana emergente emergente, deslice y fije el widget en la sección que desea aparecer.

Tire y suje el widget Paso 3: Configure la configuración para completar el icono de edición en la sección emergente para acceder a las opciones de edición.
Para cambiar el texto del botón, vaya a Contenido> Cambiar el botón> Etiqueta y editar
Cambie el texto del botón Toggler

Para cambiar el título y el subtítulo, vaya a Contenido> Encabezado y modifique las opciones con la personalización
Para cambiar el contenido del cuerpo, extienda la sección de contenido y edite el texto.

Cambia el texto de tu cuerpo
Vaya a Contenido> Subsol> Button> CTA y cambie la etiqueta CTA y la URL

Cambiar CTA y URL
Finalmente, haga clic en Actualizar para guardar.

Terminado. Ahora haga clic en el botón Vista previa para ver los resultados.
Vista previa bien hecha! Creaste tu ventana emergente modal.

Configuración adicional para modal
La configuración adicional ahora debe echar un vistazo a la configuración modal adicional que puede personalizar:
Apariencia: extienda la opción de apariencia para cambiar el tipo de interruptor, la posición emergente y la opción de visualización emergente. Tipo de tipo: no tiene que tener una manera que se active cuando alguien hace clic en un botón. Elementskit le ofrece otras 2 opciones que puede elegir la imagen: puede elegir cualquier imagen personalizada de cualquier tamaño en lugar de un botón como interruptor para su manera de elegir una imagen personalizada

Vaya a Contenido> Tipo de tipo> Elija la imagen
Vaya a Toggler Image> Elija una imagen, tamaño de imagen y alineación

Tiempo: también puede establecer el camino de activación después de un cierto tiempo, sin ninguna acción del usuario. Por ejemplo, para aparecer para aparecer después de 3 segundos

Vaya a Contenido> Tipo de tipo> Tiempo
Agregue tiempo en el cambio después (en segundos)
Show emergente: tiene dos opciones para el tipo de visualización emergente: modal y diapositiva. Posición emergente: puede elegir colocar la ventana emergente en cualquier lugar de la ventana. Las opciones de posición disponibles para elegir son: Top izquierda
El centro superior
A la derecha
El centro a la izquierda
Centro
El centro a la derecha
Abajo a la izquierda
El centro inferior
Abajo a la derecha
Pop-Up: Extienda la opción emergente para elegir el ancho y la altura mínimo. Aquí tiene la opción de mostrar u ocultar el icono de cierre, el encabezado y el sótano. También puede ajustar la posición horizontal y vertical y agregar animación dependiendo de su deseo “. Si no desea obligar al usuario a hacer clic. De esta manera, el usuario puede hacer clic en cualquier lugar en la ventana para renunciar al modal. Cerrar icono: Aquí puede cambiar la posición del icono de cierre. Puede configurar la ventana emergente a la derecha, la ventana emergente a la parte superior izquierda, la ventana a la parte superior derecha, la ventana en la parte superior izquierda. También puede cambiar las posiciones verticales y horizontales. Además, puede elegir cualquier icono en la biblioteca o puede usar una imagen SVG como icono. Entilla: Además de cambiar el título y el subtítulo, puede mostrar u ocultar el divisor aquí. Base: expanda la opción del sótano para cambiar la etiqueta, la variante y la alineación de los botones del sótano. También puede elegir ocultarlos si lo desea desde aquí.
Cómo agregar un diseño personalizado con el generador emergente ElementsKit ahora, sabe cómo cambiar el texto, la posición, la animación y hacer mucho más para personalizar su ventana modal. Pero todavía se ve un poco aburrido, ¿verdad? Al igual que cualquier otro modal. Si puede agregar una imagen o video personalizado o cualquier otro widget a la ventana modal, al igual que una página, sería genial. Puede agregar cualquier diseño personalizado a su modelo con ElementsKit. Siga los pasos para crear fácilmente su diseño personalizado deseado: vaya a Contenido> Contenido> Activar la activación de la plantilla
Haga clic en el botón modal y una vez que se abra la modalidad, haga clic en la opción de edición para abrir el área de widget
Activar la plantilla
Una vez que el área del widget está abierta, puede buscar cualquier widget> diapositiva y sujetar> actualización para guardar.
Por ejemplo, si desea agregar un video, busque el video en el área del widget y tire y sujete para agregar su modelo y actualización. Ahora el video debería aparecer en la ventana modal.
Modo de vista previa con video
Use las secciones de Elements Kit prefabricadas para modelos hermosos ¿Tiene tiempo para crear un diseño desde cero? No te preocupes. El generador de elementos PopUp Ilestskit ofrece muchas secciones construidas que puede elegir para crear modales cautivadores para resaltar su mensaje al espectador.
Abra la sección de widgets de Elegskit para usar los widgets incorporados en Elementskit, siga los pasos a continuación:

Haga clic en la opción Editar en el modal para abrir el área de widget
Haga clic en el botón EK para abrir otra ventana de widget con secciones prefabricadas.
Acceso> Secciones> Elija la sección que le guste> Inserción e inserción

Después de la inserción, puede cambiar la imagen, los textos o el color de fondo dependiendo de su preferencia y actualización.
¡Y aquí está el resultado final!

Modo de vista previa con sección prefabricada
Elementskit ofrece más de 60 widgets y más de 500 secciones preparadas. Obtenga más información sobre Elementskit y cómo usarlos para mejorar su sitio web.
Agregue el Formulario de contacto 7 de una manera con Elementskit, como dije anteriormente, las modalidades son efectivas para obtener más suscripciones al boletín y recopilar datos de datos. Pero para eso, debe agregar un formulario de contacto a su manera, ¿verdad? No se asuste, no necesitará otro complemento emergente de WordPress para agregar un formulario de contacto a la ventana POP. El complemento Elementskit WordPress es un complemento todo en uno para creadores emergentes. Siga las instrucciones a continuación para agregar el popular Formulario de contacto 7 en su camino con el fabricante emergente del complemento Elementskit. Antes de seguir estos pasos, asegúrese de haber creado un formulario de contacto en su sitio web utilizando el Formulario de contacto 7, Elementor Page Builder y ElementsKit. También puede echar un vistazo al video tutorial a continuación para crear un formulario de contacto.
Vamos a empezar.

Contenido de acceso> Contenido> Habilitar la activación de la plantilla
Haga clic en la opción de edición para abrir el área de widgets
Busque el formulario de contacto, deslice y fije en la sección que desea agregar.

Extienda la opción de estilo en el Formulario de contacto 7
Elija entre el formulario y la actualización prefabricados.
Modal con la vista previa del Formulario de contacto 7 aquí tiene una ventana emergente modal con un formulario de contacto para mejorar su lista de correos electrónicos. ¿Puede crear un widget personalizado sin tener un conocimiento de codificación profunda? Verifique cómo crear fácilmente un widget personalizado sin ningún código usando ElementsKit.
¡Felicidades! Ahora sabe cómo crear modos emergentes, crear ventanas emergentes para el formulario de contacto y hacer cualquier personalización en el sitio web de WordPress sin esfuerzo, utilizando el ELEMENSKIT PRO POBUPS y el constructor de páginas de Elemenor. No te detengas aquí. Continúe experimentando cuántas formas puede usar modalmente en su sitio web. Y si necesita ayuda, deje un comentario a continuación. Para obtener más detalles y leer más blogs en los complementos de WordPress, únase a nuestra comunidad de Facebook y Twitter. Si prefiere tutoriales en video, suscríbase a nuestro canal de YouTube.