Cómo agregar una ventana emergente activada por desplazamiento a las publicaciones de su blog en Divi
Publicado: 2020-01-03Agregar una ventana emergente activada por desplazamiento a las publicaciones de su blog parece algo realmente inteligente. Es posible que los haya visto antes al leer otros blogs. A medida que el usuario se desplaza hasta un punto determinado de la publicación (generalmente el final), de repente aparece un cuadro que contiene una llamada a la acción. El propósito de una ventana emergente activada por desplazamiento es presentar una llamada a la acción dirigida a los visitantes en el momento exacto en que desea que la vean en la página. En resumen, es una gran herramienta para impulsar conversiones u obtener clientes potenciales 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 las publicaciones de su blog en Divi desde cero, sin un complemento. Para hacer esto, usaremos Divi Theme Builder para diseñar una ventana emergente que presenta una publicación relacionada por categoría y también una ventana emergente que incluye una opción de correo electrónico. La activación del desplazamiento se logrará mediante un pequeño fragmento de jQuery.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido a las ventanas emergentes activadas por desplazamiento que crearemos.
Crearemos una ventana emergente para revelar una publicación relacionada (por categoría) como se ve a continuación.
Y también le mostraremos cómo agregar una suscripción de correo electrónico a la ventana emergente, como se ve aquí.
Descargue la plantilla de publicación Divi emergente activada por desplazamiento GRATIS
Para poner sus manos en la plantilla de publicación de este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json en Divi Theme Builder usando la opción de portabilidad de Theme Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá instalar y activar Divi Theme. Asegúrese de tener la última versión de Divi.
Deberá descargar el cuarto paquete de creación de temas, ya que utilizaremos la plantilla de publicación prefabricada de ese paquete para este tutorial.
También necesitará al menos algunas publicaciones de blog creadas con fines de prueba para que la plantilla de publicación muestre los resultados.
Después de eso, estará listo para comenzar.
Creación de una ventana emergente activada por desplazamiento al final de sus publicaciones de blog Divi
Importación de la plantilla de publicación de blog del cuarto paquete de creación de temas
Desde el panel de WordPress, vaya a Divi> Theme Builder. 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 de importación. (Este archivo de importación estará dentro de la carpeta Fourth Theme Builder Pack)
También puede seleccionar la opción para importar el encabezado y pie de página globales como diseños estáticos.
Una vez importada la plantilla, haga clic en el icono para editar el área del cuerpo personalizada.
Esto lo llevará al editor de diseño de la 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 por 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 manera, cuando un visitante se desplaza hasta la parte inferior de la publicación, recibirá una publicación relacionada sugerida en una ventana emergente.
He aquí 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 la publicación en el diseño de la plantilla de publicación.
Configuración de filas
Antes de agregar un módulo, actualice la configuración de la fila de la siguiente manera:
- Color de fondo: #ffffff
- Ancho de la canaleta: 1
- Ancho: 300px (escritorio), 200px (teléfono)
- Relleno: 20px arriba, 0px abajo
- Box Shadow: ver captura de pantalla
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 de título de nuestra ventana emergente de publicación relacionada.
Contenido
Actualice el contenido del cuerpo con el texto "Publicación relacionada".
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
Agregar módulo de blog
Debajo del módulo de texto, agregue un módulo de blog.
Contenido
Como solo queremos presentar una publicación relacionada, vamos a limitar el recuento de publicaciones a una e incluir 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:
- Número de publicaciones: 1
- Categorías incluidas: Categoría actual
Elementos
En el grupo de opciones de elementos, asegúrese de seleccionar mostrar solo la imagen destacada. Esconde todo lo demás.
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% arriba, 5% izquierda, 5% derecha
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 resto del contenido de la página.
Este paso ocultará la fila de la vista cuando utilice el generador visual en la interfaz. Por lo tanto, puede ser mejor implementar la vista de estructura alámbrica 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:
position: fixed; bottom: 0%; right: -300px;
Y actualice el índice Z:
- Índice Z: 999
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, la ventana emergente se mostrará u ocultará. Los puntos de activación de desplazamiento serán determinados por un elemento con una clase CSS. Como queremos que el punto de activación de 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 de desplazamiento.
Agregar punto de activación de desplazamiento n. ° 1
Para agregar nuestro primer punto de activación de desplazamiento, agreguemos un módulo divisor directamente debajo del módulo de contenido de la publicación.
Luego agregue la siguiente clase CSS:
- Clase CSS: post-waypoint
Eso fue fácil.
Agregar punto de activación de desplazamiento n. ° 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.
Luego péguelo en un lugar más abajo de la plantilla de publicación donde desea que se cierre (u oculte) la ventana emergente. 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.
Agregar código personalizado con 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.
Luego pegue el siguiente código en el cuadro de código:
<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>
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.
Agregar una opción de correo electrónico a la ventana emergente activada por desplazamiento
La ventana emergente de la publicación relacionada es genial, pero tal vez le gustaría recibir una opción de correo electrónico para que aparezca en la ventana emergente. Esto es fácil de hacer. De hecho, incluso podemos usar la opción de correo electrónico ya diseñada en el diseño de pie de página prefabricado en esta plantilla.
Guardar la opción de correo electrónico de pie de página en la biblioteca Divi
Guarde su diseño y salga al generador de temas. Luego haga clic para editar el diseño de la plantilla de pie de página personalizado.
Busque el módulo de suscripción de correo electrónico y guárdelo en la biblioteca divi.
Agregar opción de correo electrónico guardado a la fila emergente
Ahora regrese al diseño de la plantilla de cuerpo personalizado y agregue el correo electrónico guardado en la misma fila que está usando como ventana emergente. Recuerde, cualquier cosa dentro de esa fila se mostrará como contenido emergente.
Dado que no está utilizando el módulo de texto y blog, puede desactivarlos para que no se vean en la interfaz.
Configuración de Optin de correo electrónico
Una vez que la suscripción al correo electrónico esté en su lugar y los otros módulos estén deshabilitados, actualice la configuración de suscripción al correo electrónico de la siguiente manera:
- Título: "¿Le gustó este artículo?"
- Cuerpo: "¡Únase a nuestro boletín!"
Luego agregue el siguiente relleno:
- Relleno: 5% abajo, 20 px a la derecha
Resultado
Ahora mira el resultado en una publicación en vivo.
Pensamientos finales
Las ventanas emergentes activadas por desplazamiento definitivamente podrían ser un activo valioso para su blog. Proporcionan una forma discreta de capitalizar clientes potenciales calificados. Use una ventana emergente de publicación relacionada para mantenerlos interesados en su sitio o use una opción de correo electrónico para ayudar a hacer crecer su lista. Y con Divi, también puede agregar casi cualquier otro contenido que se le ocurra. Y puede decidir exactamente cuándo desea que el visitante vea esas ventanas emergentes, lo cual es bastante poderoso. Espero que lo encuentre útil para su propio blog o próximo proyecto.
Espero tener noticias tuyas en los comentarios a continuación.
¡Salud!