En este primer reto o práctica del Taller WordPress vamos a ver como añadir un popup o ventana emergente (overlay) después de que el visitante realice una acción como hacer clic en un enlace o botón, con wordpress y la plantilla Divi
¿Qué necesitas?
- Una instalación de WordPress
- La plantilla Divi instalada en tu wordpress
La acción que detonará la aparición de la ventana emergente será la de hacer clic en un botón.
De esta manera cuando un visitante hace clic en el enlace nos aparece una ventana emergente u overlay y no habrá un cambio de URL.
DESCUENTOS DIVI
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
Aquí puedes ver un ejemplo de lo que queremos hacer:
Aunque nosotros modificaremos el diseño para adaptarlo a lo que sería la opción que hay en algunas webs donde aparece un botón de “te llamamos” y al hacer clic aparece un sencillo formulario para escribir el teléfono y esperar a recibir la llamada.
Diseño que vamos a hacer de ventana emergente para acción de llamar
ÍNDICE DEL POST
1.- Funcionalidades de PopUp o ventana emergente tras hacer clic en un botón
Los usos que puede tener esta acción son muy variados, pero vamos a poner algunos ejemplos:
i.- Te llamamos: habrás visto en algunos sitios web que aparece un botón o enlace con el texto “¿quieres que te llamemos?” o “te llamamos” y cuando haces clic en el enlace aparece un pequeño formulario para que introduzcas tu nombre y teléfono para que puedas recibir una llamada inmediata.
Una vez que el visitante rellena el formulario recibimos un email con los datos para poder llamar al cliente.
Pues esta es una de las funcionalidades que puedes aplicar en tu web con lo que vamos a ver en este interesante post.
ii.- Lead magnet: habitualmente cuando hacemos clic en una determinada parte de un blog para obtener un “regalo” la web nos lleva a una página (página de desembarco o landing page) donde podemos rellenar un formulario y de esta manera obtener el regalo o Lead Magnet.
Pero podríamos también usar lo que vamos a ver en este post y que al realizar la acción apareciera una ventana emergente con el formulario de suscripción.
iii.- Más información: también podremos usar este sistema de ventana emergente tras realizar una acción para que el visitante pueda ampliar la información sobre un determinado elemento a través de un contenido incluido en dicha ventana emergente.
2.- Creación funcionalidad de ventana emergente tras hacer clic en botón con Divi
Vamos a ponernos manos a la obra y a crear la estructura de botón + ventana emergente con nuestra plantilla Divi y WordPress.
Te adelanto la estructura final de los módulos que iremos añadiendo a la página en este segundo apartado:
Estructura de módulos de botón + ventana emergente o popup con formulario
2.1.- Crear sección con botón de acción
Vamos primero a crear una sección estándar con una sola columna y en la que incluiremos un módulo botón.
Evidentemente esto es solo un ejemplo, tú puedes usar en tu caso las columnas que precises y modificar la estructura que vamos a ver aquí para adaptar esta estructura a tu caso específico.
Lo que tienes que tener en cuenta es que en la URL de destino del botón tendremos que poner “#” y algo más.
Ya que si no pones nada en la URL de destino, al hacer clic en el botón se recargará la página y si solo pones “#” el navegador nos llevará a la parte superior de la página.
Pondremos por ejemplo “#notemuevas” y al hacer clic en el botón ni se recargará la página ni se desplazará, que es lo que queremos.
Crear botón de llamada a la acción
Ahora vamos a asignar una clase CSS al botón a la que luego recurriremos con el código jQuery para hacer que la ventana emergente aparezca tras la acción de clic en el botón.
Vamos a asignar al botón la clase CSS: button
Para ello iremos a la pestaña “Avanzado” del módulo botón y en el campo “Clase CSS” pondremos: button
Clase css del botón: button
A continuación guarda el módulo y la página.
2.2.- Crear bloque de formulario en la ventana emergente
Ahora vamos a crear un breve formulario en el cual aparecerá una vez que el visitante haga clic en el botón y que mostrará dos únicos campos: nombre y teléfono.
El cliente enviará el formulario, nosotros recibiremos el correspondiente email y procederemos a llamar al futuro cliente.
2.2.1.- Añadir una nueva sección para la ventana emergente
Lo primero que haremos será añadir una nueva sección estándar en la misma página y justo debajo de la sección en la que teníamos el botón.
Ahora iremos a la pestaña “Avanzado” de la sección y en el campo de la “clase CSS” pondremos: popup
Posteriormente, en el apartado CSS “Personalizado > Antes“, pondremos el siguiente código:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Configurar sección para ventana emergente
Nota: el color de fondo utilizado es un color negro con un poco de transparencia, pero puedes poner el color que quieras de fondo modificando el apartado: “background” del código anterior.
Ahora iremos al bloque: “Elemento principal” y añadiremos el siguiente código:
display: none;
Configuración sección popup
A continuación guarda la sección y la página.
2.2.2.- Añadir una nueva fila
Añadimos una nueva fila de una sola columna dentro de la sección creada en el apartado anterior.
Ahora en la configuración de la fila iremos a la pestaña “Avanzado” y añadiremos el siguiente código en bloque “elemento principal”:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
crear fila para popup
Ahora vamos a poner un color de fondo muy clarito para la ventana emergente. Para ello iremos a la pestaña “Contenido” y en el campo “Fondo” estableceremos el color: #fefbfb
Color de fondo de la ventana emergente
En la pestaña “diseño” iremos al bloque “Tamaño” y en el campo “Usar anchura personalizada” pondremos el selector en “SI”.
A continuación en anchura personalizada pondremos: 1291 px
Ahora estableceremos los márgenes y para eso desde la misma pestaña “Diseño” en la que estamos haremos scroll hasta el apartado “Separación > relleno personalizado” y pondremos 30px en relleno superior, derecha e izquierda
Padding o relleno personalizado de la fila de la ventana emergente
A continuación guardamos la fila y la página
2.2.3.- Añadir formulario de contacto a la ventana emergente
Ahora añadiremos un módulo tipo formulario de contacto en la fila que acabamos de crear en el apartado anterior.
Eliminaremos todos los campos del formulario excepto el campo “Name” y añadiremos un nuevo campo que denominaremos “Teléfono”.
En la pestaña “Diseño” de la configuración del campo teléfono iremos al campo “hacer anchura completa” y seleccionaremos “NO”.
Procederemos a configurar los detalles del módulo formulario de contacto poniendo el email de destino y el patrón del mensaje.
2.2.4.- Módulo anuncio para cerrar la ventana emergente
Bajo el módulo del formulario de contacto podremos un módulo anuncio con la única finalidad de que aparezca un icono en forma de aspa para poder cerrar la ventana emergente.
Elegiremos en la pestaña “Contenido” de la configuración del módulo el siguiente icono:
Elección del icono para cerrar la ventana emergente
En la pestaña “Diseño” en el campo “color de icono” seleccionaremos el “color blanco” para que el aspa resalte en el fondo oscuro de la capar emergente.
En el campo “Usar tamaño de fuente de icono” seleccionaremos “SI”, y en el campo “Tamaño de fuente de icono” pondremos 33px
Ahora iremos a la pestaña “Avanzado”:
En el campo Clase CSS pondremos “close” y en CSS personalizado, en el campo “elemento principal” pondremos el siguiente código:
position: absolute;
top: -55px;
right: -30px;
cursor: pointer;
Configuración módulo anuncio para que aparezca un aspa para cerrar la ventana emergente
A continuación guardamos el módulo y la página.
2.2.5.- Introducir el código JQuery
Para introducir el código JQuery tenemos dos opciones: introducirlo en un módulo de código en la misma página o introducirlo en el head de todas las páginas a través de la opción de integración de Divi en las opciones del tema.
El código a añadir es el siguiente:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
i.- En un módulo de código:
En caso de añadir el código en un módulo de código, lo que haremos será añadir dicho módulo encima del módulo botón y en la configuración introducir el código visto antes:
En este caso utilizamos un módulo código para añadir el JQuery
Guarda el módulo y guarda la página.
ii.- Integración en opciones del tema:
Si utilizamos esta opción iremos a: “Divi > Opciones del tema”, después haremos clic en la pestaña “Integration”.
Añadiremos el código en la ventana: “Agregar código al <head> de su blog”
Utilizamos la opción de integración de Divi para añadir el JQuery
Haz clic en “guardar cambios”
NOTA: te ha de quedar claro que debes elegir solo una de las dos opciones para añadir el Código JQuery
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquin
He visto tu video y la verdad esta interesante y muy bien explicado, tengo una pega en mi proyecto y me gustaría que me comentaras como se puede hacer esto ya que no veo la forma y hace apenas un par de días que estoy usando Divi.
La cuestión es esta , tengo una sección llamada HEADER y allí hay un modulo llamado TITULO DE ANCHURA COMPLETA. Este modulo muestra dos botones. el caso es que no puedo asignar una clase a cada botón por separado y cuando abro las opciones me aparece solo para dar estilos a los mismos, y nada mas , todo en el mismo módulo. En otras palabras los botones son parte integral del modulo y estan dibujados con etiquetas , no son botones de modulo boton.
Espero haber sido claro, muchas gracias
Nota: Te he enviado la misma pregunta en otro post por error, la coloco aqui que es donde realmente debe ir.
Gracias nuevamente
Buenas.
Con el procedimiento explicado en el post solo es posible implementar la funcionalidad en un único botón en la página
Hola Joaquin, muchas gracias por el post, me ha sido muy útil. Pero tengo un problema: me gustaría que cada botón (son 6 botones en la misma página) descargara un archivo diferente, pero me descarga siempre el mismo a pesar de poner urls diferentes. ¿Sabes si hay algún modo de solucionarlo?
Gracias!
Hola Marta.
No es posible poner varios en la misma página
Hola, el cuadro se pone debajo de mi menú que tengo, y no puedo cerrarlo como haría para que ponga adelante?
Buenas,
Intenta reducir el tamaño de la barra de menú.
Hola.
Súper bueno tu post.
Mira, solo una cosa: seguí todas las instrucciones y me quedó muy lindo el pop-up emergente desde el botón.
Sin embargo hay una porción de él que se tapa por la barra del menú principal, ya que el botón está muy arriba.
¿Me hago entender?: por ejemplo, si el problema estuviera en tu página (en esta), el menú ‘INICIO’, ‘DESCARGA REGALO’, ‘QUIEN SOY’, etc, tapa la parte superior de ese popup al salir…
¿Qué puedo hacer?
¡Abrazos!
Buenas,
Seguramente el alto que tienes en el header o cabecera de la web es más alto de lo habitual. Si no puedes reducir esa altura, pues tendrás que ir probando a modificar los códigos CSS para adaptarlo a tu caso concreto.
Puedes modificar los atributos de tipo «TOP» e ir probando o probar a itroducir algún margin-top (info margin-top). Otra opción podría ser probar a modificar el margen superior en la sección de la parte de arriba.
Hola Joaquin, si.
Lo intenté pero no parece tener nada que ver.
Pero lo solucioné cambiando un poco el diseño y me quedó mega especial. En vez de un formulario puse un video, ahora lo voy a probar en versión movil a ver qué tal va.
¡Abrazos y gracias!
ok,
perfecto
Un saludo
Da gusto encontrar a alguien que explique tan bien algo tan complicado (para mí).
Gracias por tu ayuda. He conseguido insertar mi pop up 🙂
Gracias por tu tiempo y tu esfuerzo.
Un saludo.
Gracias
Un saludo 😉
Excelente post, muchas gracias tengo un pequeño detalle cuando doy clic en el boton enviar no aparece un mensaje de enviado o a algo asi, lo configure en el formulario en divi pero no aparece. La info del formulario si llega al correo. Gracias
Buenas Luis,
Hay otra opción en el formulario que es redirigirlo a otra página (página de agradecimiento) cuando se envía correctamente. Mira a ver si esta opción funciona correctamente.
En este post tienes más info sobre el módulo formulario de contacto de Divi
Excelente. Pero tiene errores.
En la versión móvil, cuando voy a ingresar los datos, el palito que parpadea, está más abajo, y no en la casilla en la que estoy escribiendo.
Cuando termino de rellenar los datos y le doy a »enviar», aparece el formulario típico, o sea, no se cierra al recuadro.
hola, excelente tutorial. Lo unico que me sucede es que el popup se abre y a los segundo se cierra solo…
Hola Emiliano,
Gracias por tus palabras.
Pues lo cierto es que no tengo ni idea de porque se te cierra el PopUp. Comprueba otra vez si has copiado todo correctametne, porque no se me ocurre que puede ser.
Amí me sucede lo mismo 🙁
Hola, ya te he felicitado por tu excelente material, ahora me ha quedado una duda, si no quiero poner un botón, si no una liga (al pincharla se abra la ventana emergente), en vez de button, que tengo que poner?, mil gracias de antemano.
Hola Rocío,
gracias por tus palabras.
Imagino que cuando dices una liga, te refieres a un enlace (link).
No lo he probado nunca pero puedes probar a añadir un módulo texto en vez del módulo botón. En el módulo texto añade la clase «Button» todo igual que hemos hecho con el botón. Y dentro del módulo texto pon el enlace.
Excelente material, muchas gracias, y éxito en todo lo que emprendas.
Excelente post. Muchas gracias, me ha servido de mucha ayuda. Como podría meter scroll en el popup?
Un abrazo.
Buenas,
No se como podrías añadir una barra de scroll. Echa un vistazo a este post a ver si te sirviera de alguna ayuda: Scroll text
Buenas este mismo botón se podían poner en el menú principal ??
muchas gracias .
Buenas,
no es posible hacerlo desde el menú
lo siento
HOla Joaqui´!!! me funciona de 10 lo único que como lo he colocado en botón del banner principal el aspa se me tapa con el menú ¿cómo puedo solucionarlo?
Muchas gracias
Buenas,
la posición del aspa la controlas desde el módulo anuncio.
Concretamente, en el CSS personalizado, en el campo “elemento principal” has añadido un código CSS.
En ese código tienes la posición definida por las variables top (arriba) y right (derecha). Prueba a modificar el valor de la variable TOP para ajustar a que el aspa aparezca más abajo
Si fuera para suscribirse en vez de formulario de contacto debería poner un correo optin ¿verdad)
Buenas,
Para que aparezca un formulario de suscripción tendrías que probar con el módulo tipo optin en vez del módulo formulario de contacto.
Y si lo quiero aplicar a un botón por ejemplo de la página principal para que se descarguen un lead magnet. Tengo botón y al pinchar quiero que aparezca un pop up emergente para que se descarguen LM y se suscriban a mi página ¿se haría de la misma manera? Tengo que crear página por cada botón que quiera?
No entiendo muy bien a que te refieres, porque normalmente el lead magenet se descarga después de que el cliente se haya suscrito y confirmado su suscripción. Por lo que entiendo que solo sería un botón y aparecería un formulario de suscripción en vez de un formulario de contacto.
Muchas gracias por el tutorial y enseñar a hacer modificaciones con css a las plantillas de divi espero que puedas publicar cosas nuevas.
Gracias a tí,
ya está publicado el reto 2 del taller wordpress
un saludo
Hola,
Tengo una duda, en mi web quiero utilizar varios botones de llamada a la acción y tenia pensado poner en cada uno un formulario en un popup según explicas en este articulo, he realizado el primero y funciona perfectamente, pero al hacer el segundo no me funcionaba aunque cambiaba las variables button por button2 en la función jQuery y en la Clase CSS correspondiente al igual que popup por popup2.
He terminado por poner en los dos botones button y tambien popup y me muestra el primer formulario cuanto pulso en cualquiera de los dos botones.
Agradecería que me dijeras que código tengo que cambiar para que pueda cada botón de llamada a la acción, mostrar su formulario correspondiente. Lo necesito porque así sabré por cual de los botones se está interesando, al tener una frase distinta para cada formulario en el patrón de mensaje.
Lo he probado cambiando de nombre a la función que aparece en el JQuery pero no lo consigo.
Gracias de antemano porque tus explicaciones y tu video me están ayudando a configurar mi web.
Muchas gracias
Hola Samuel,
De las dos opciones que se proponen para introducir el código JQuery ¿cuál has utilizado?
1.- Prueba a utilizar el método en el que el código se añade en integración opciones del tema
2.- Añade el mismo código para el segundo botón pero cambiando button por button2
3.- En el módulo botón asociado al segundo formulario pon en Clase CSS button2 en vez de button
a ver si así te funcionan
Hola Joaquín decirte que tu blog me sirve de muchísima ayuda, la pregunta es, existe alguna manera en divi de crear la popup sin la sección botón? o sea que salga directamente el formulario con la página index, o tendría que añadir un pluging? En ese caso me podrías aconsejar uno. Muchísimas gracias
Hola Héctor,
No hay ninguna opción en Divi para generar automáticamente un popup,
necesitas algún plugin tipo PopUP, que además te permita añadir un formulario (ya que muchos no lo incluyen)
Yo utilizo este plugin para popup de mis cursos (aunque una versión un poco más antigua). Yo probaría a utilizar este integrando un shortcode del plugin de formulario Contact Form 7 (yo no lo he probado)
Aquí también te dejo un post con ejemplos de plugins para popups a ver si ves algo que te sirva (antes de elegir asegúrate de que el plugin está actualizado a las últimas versiones de wordpress):
http://dejujo.com/plugin-wordpress-popup-ten-ventanas-emergentes-en-tu-web/
Magnífico post. Funciona fenomenal. Muchas gracias por tus aportaciones.
Muchas gracias Antonio,
me alegro que te haya gustado el aporte para crear un botón de «te llamamos ya!!» en la web
Excelente amigo, muchas gracias !!!
Gracias a tí por seguir el blog
Un saludo