Agregar una ventana emergente activada por desplazamiento a las publicaciones de tu blog parece algo realmente inteligente. Es posible que los hayas visto antes al leer otros blogs. A medida que el usuario se desplaza a un cierto punto de la publicación (generalmente el final), aparece de repente un cuadro que contiene un llamado a la acción. El propósito completo de una ventana emergente activada por desplazamiento es presentar un llamado a la acción dirigido a los visitantes en el momento exacto en que desea que lo vean en la página. En resumen, es una gran herramienta para aumentar las conversiones o ganar leads calificados. Debido a esto, muchos complementos que aumentan la conversión (como nuestro propio Bloom o como Optin Monster ) le permiten hacer lo mismo.

En este tutorial, le mostraremos cómo agregar una ventana emergente activada por desplazamiento a sus publicaciones de blog en Divi desde cero, sin un complemento. Para hacer esto, utilizaremos Divi Theme Builder para diseñar una ventana emergente que presente una publicación relacionada por categoría y también una ventana emergente que incluya una opción de correo electrónico. La activación del desplazamiento se realizará utilizando un pequeño fragmento de jQuery.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido a las ventanas emergentes activadas por desplazamiento que crearemos.

Crearemos en una ventana emergente para revelar una publicación relacionada (por categoría) como se ve a continuación.

ventana emergente activada por desplazamiento

ventana emergente activada por desplazamiento

Y también le mostraremos cómo agregar un correo electrónico a la ventana emergente, como se ve aquí.

ventana emergente activada por desplazamiento

ventana emergente activada por desplazamiento

Crear una ventana emergente activada por desplazamiento al final de las publicaciones de tu blog Divi

Importar la plantilla de publicación de blog desde el cuarto paquete de generador de temas

Desde el panel de WordPress, navega hasta Divi> Generador de temas. Dentro del generador de temas, seleccione el icono de portabilidad en la parte superior derecha de la página. En la ventana emergente de portabilidad, seleccione la pestaña de importación, elija el archivo theme-builder-pack-4-post-template.json y haga clic en el botón importar. (Este archivo de importación estará dentro de la carpeta del cuarto paquete de generador de temas)

ventana emergente activada por desplazamiento

También puede seleccionar la opción para importar el encabezado y pie de página global como diseños estáticos.

ventana emergente activada por desplazamiento

Después de importar la plantilla, haga clic en el icono para editar el área del cuerpo personalizado.

ventana emergente activada por desplazamiento

Esto lo llevará al editor de diseño de plantilla del cuerpo donde agregaremos las ventanas emergentes activadas por desplazamiento.

Diseño de la ventana emergente activada por desplazamiento con una publicación relacionada por categoría

La ventana emergente estará contenida en una fila Divi. Por lo tanto, una vez que tengamos la funcionalidad emergente en su lugar, puede llenar esa fila con cualquier módulo para crear el contenido que desee. Para este primer ejemplo, crearemos una ventana emergente con una publicación relacionada por categoría. De esa forma, cuando un visitante se desplaza al final de la publicación, recibirá una publicación relacionada que se le sugerirá en una ventana emergente.

Aquí te explicamos cómo hacerlo.

Agregar fila de una columna

Primero agregue una fila de una columna justo debajo de la fila que contiene el módulo de contenido de publicación en el diseño de plantilla de publicación.

ventana emergente activada por desplazamiento

Configuración de fila

Antes de agregar un módulo, actualice la configuración de la fila de la siguiente manera:

  • Color de fondo: #ffffff
  • Ancho de canal: 1
  • Ancho: 300 px (escritorio), 200 px (teléfono)
  • Acolchado: 20px arriba, 0px abajo
  • Box Shadow: ver captura de pantalla

ventana emergente activada por desplazamiento

Agregar módulo de texto

Después de personalizar la configuración de la fila, agregue un módulo de texto a la fila. Esta será el área del título de nuestra ventana emergente de publicación relacionada.

ventana emergente activada por desplazamiento

Contenido

Actualice el contenido del cuerpo con el texto «Publicación relacionada».

ventana emergente activada por desplazamiento

Diseño

Luego actualice la configuración de diseño de la siguiente manera:

  • Fuente de texto: Heebo
  • Estilo de fuente de texto: TT
  • Color del texto del texto: # f94857
  • Alineación de texto: centro

ventana emergente activada por desplazamiento

Agregar módulo de blog

Debajo del módulo de texto, agregue un módulo de blog.

ventana emergente activada por desplazamiento

Contenido

Como solo queremos presentar una publicación relacionada, limitaremos el recuento de publicaciones a una e incluiremos la “categoría actual” para que la publicación que se muestra en la ventana emergente comparta la misma categoría de la publicación real que se muestra en la plantilla.

Actualice lo siguiente:

  • Recuento de publicaciones: 1
  • Categorías incluidas: Categoría actual

ventana emergente activada por desplazamiento

Elementos

En el grupo de opciones de elementos, asegúrese de seleccionar para mostrar solo la imagen destacada. Esconde todo lo demás.

ventana emergente activada por desplazamiento

Diseño

En la pestaña de diseño, actualice lo siguiente:

  • Fuente del título: Heebo
  • Peso de la fuente del título: Ultra Bold
  • Tamaño del texto del título: 16px
  • Altura de la línea de título: 1.4em
  • Relleno: 5% superior, 5% izquierda, 5% derecha

ventana emergente activada por desplazamiento

Configuración avanzada de filas

Clase CSS, CSS personalizado e índice Z

En la pestaña avanzada, debemos darle a nuestra fila una clase CSS, un poco de CSS personalizado y actualizar el índice z para que la ventana emergente permanezca por encima del otro contenido de la página.

Este paso ocultará la fila de la vista cuando use el generador visual en la parte frontal. Por lo tanto, puede ser mejor implementar la vista de estructura antes de actualizar estas opciones.

Una vez en el modo de vista de estructura alámbrica, abra la configuración de la fila y agregue la siguiente Clase CSS:

  • Clase CSS: post-fila

Luego agregue el siguiente CSS personalizado al elemento principal:

01
02
03
position: fixed;
bottom: 0%;
right: -300px;

Y actualice el Índice Z:

  • Índice Z: 999

ventana emergente activada por desplazamiento

Agregar divisores como puntos de activación de desplazamiento

En este punto, nuestra ventana emergente está lista para funcionar. Ahora debemos decidir dónde agregar nuestros puntos de activación de desplazamiento en la plantilla de publicación, de modo que una vez que el usuario se desplace a estos puntos, se mostrará u ocultará la ventana emergente. Los puntos de activación de desplazamiento estarán determinados por un elemento con una clase CSS. Dado que queremos que el punto de activación del desplazamiento esté en la parte inferior de la publicación, podemos usar un divisor con una clase CSS como nuestro elemento de punto de activación del desplazamiento.

Agregar punto de activación de desplazamiento # 1

Para agregar nuestro primer punto de activación de desplazamiento, agreguemos un módulo divisor directamente debajo del módulo de contenido de publicación.

ventana emergente activada por desplazamiento

Luego agregue la siguiente clase CSS:

  • Clase CSS: post-waypoint

ventana emergente activada por desplazamiento

Eso fue fácil.

Agregar punto de activación de desplazamiento # 2

Ahora para agregar el segundo punto de activación (el que ocultará la ventana emergente más abajo en la página), copie el módulo divisor que acaba de crear.

ventana emergente activada por desplazamiento

Luego péguelo en un lugar más abajo de la plantilla de publicación donde desea que la ventana emergente se cierre (u oculte). Para este ejemplo, lo agrego justo debajo del módulo de blog de publicaciones relacionadas y justo encima de la sección de comentarios de la plantilla de publicación.

ventana emergente activada por desplazamiento

Agregar código personalizado con el módulo de código

Todo lo que queda por hacer para que funcione esta ventana emergente activada por desplazamiento es un pequeño código.

Continúe y agregue un módulo de código a la plantilla de publicación.

ventana emergente activada por desplazamiento

Luego pegue el siguiente código en el cuadro de código:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

ventana emergente activada por desplazamiento

Resultado

Para ver el resultado, visite una de las publicaciones de su blog y desplácese hacia abajo en la página. Debería ver la ventana emergente de la publicación relacionada cuando llegue al final del contenido de la publicación. Sigue desplazándote para verlo oculto justo después de la sección de publicaciones relacionadas de la publicación.

ventana emergente activada por desplazamiento

ventana emergente activada por desplazamiento

Agregar un correo electrónico opcional a la ventana emergente activada por desplazamiento

La ventana emergente de publicación relacionada es genial, pero tal vez quieras que aparezca una ventana emergente de correo electrónico. Esto es fácil de hacer. De hecho, incluso podemos usar el correo electrónico optin ya diseñado en el diseño de pie de página prefabricado en esta plantilla.

Guardar correo electrónico de pie de página Optin en Divi Library

Guarde su diseño y salga al generador de temas. Luego haga clic para editar el diseño de plantilla de pie de página personalizado.

ventana emergente activada por desplazamiento

Encuentre el módulo optin de correo electrónico y guárdelo en la biblioteca divi.

ventana emergente activada por desplazamiento

Agregar correo electrónico guardado Optin a la fila emergente

Ahora regrese al diseño de plantilla de cuerpo personalizado y agregue el correo electrónico guardado en la misma fila que está utilizando como ventana emergente. Recuerde, cualquier cosa dentro de esa fila se mostrará como contenido emergente.

ventana emergente activada por desplazamiento

Como no está utilizando el módulo de texto y blog, puede deshabilitarlos para que no se vean en el front-end.

Configuración de correo electrónico optin

Una vez que el correo electrónico esté en su lugar y los otros módulos estén deshabilitados, actualice la configuración del correo electrónico de la siguiente manera:

  • Título: «¿Te gustó este artículo?»
  • Cuerpo: «¡Únete a nuestro boletín!»

ventana emergente activada por desplazamiento

Luego agregue el siguiente relleno:

  • Acolchado: 5% inferior, 20 px a la derecha

ventana emergente activada por desplazamiento

Resultado

Ahora mira el resultado en una publicación en vivo.

ventana emergente activada por desplazamiento

ventana emergente activada por desplazamiento

Pensamientos fina

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!