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


VER CURSOS

 

 

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.

 

crear botón de te llamamos ya en la web con Divi y wordpress

Diseño que vamos a hacer de ventana emergente para acción de llamar

 

 

 

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.

Aprende a añadir un botón de clic to call o llamada en móviles: Botón clic to call

 

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:

 

divi builder backend construcción de enlace + formulario emergente

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 con modulo divi para ventana emergente

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

 

asignar clase css para el modulo botón

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.

 

Aprende a utilizar los efectos animados de la plantilla Divi: Animaciones Plantilla Divi

 

 

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;