Seleccionar página

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;

 

nueva sección divi para ventana emergente

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;

 

Código css popup

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;

 

fila divi para ventana emergente

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

 

asignar color de fondo a la ventana emergenet

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

 

asignar padding popup

Padding o relleno personalizado de la fila de la ventana emergente

 

A continuación guardamos la fila y la página

 

Con el plugin Divi Booster podrás añadir más de 90 nuevas opciones de Configuración a la plantilla Divi: Divi Booster

 

 

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:

 

icono aspa para cerrar el popup

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;

 

modulo anuncio para cerrar popup

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.

¿Conoces todos los módulos de la plantilla Divi?, Aquí tienes una guía: Módulos Divi Builder

 

 

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:

 

utilizamos un modulo codigo para la funcionalidad de la ventana emergente

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”

 

acción te llamamos ya en la web

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

 

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com