Cómo construir una barra de progreso de lectura para sus publicaciones de blog Divi (sin un complemento)

Agregar una barra de progreso de lectura (o indicador de desplazamiento) a la plantilla de su publicación de blog es una forma inteligente de mostrar el progreso de lectura de un usuario para un artículo determinado. La idea es mostrar una barra de progreso fija en la parte superior de la publicación que se correlaciona directamente con la posición de desplazamiento del usuario en el contenido de la publicación. Cuando el usuario llega al artículo, la barra de progreso comienza a llenarse. Cuando el usuario llega al final del artículo, la barra de progreso está llena al 100%.

En este tutorial, le mostraremos cómo crear una barra de progreso de lectura para las publicaciones de blog de Divi que sea lo suficientemente inteligente como para saber cuándo el usuario comienza y termina (desplazándose) el contenido real de la publicación, no toda la página. Esto le dará una indicación más precisa del progreso de la lectura.

Le mostraremos cómo agregar esta barra de progreso de lectura a la plantilla de publicación de blog predeterminada de Divi o una plantilla de publicación personalizada utilizando Divi Theme Builder .

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial. Observe cómo la barra de progreso se fija en la parte superior de la plantilla de publicación. La barra de progreso comienza a llenarse una vez que el usuario llega al contenido real de la publicación/artículo y finaliza cuando el usuario finaliza el contenido de la publicación.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para importar el diseño de la sección a su Divi Theme Builder, navegue hasta Divi Theme Builder .

Haga clic en el icono de portabilidad.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, la plantilla de la sección aparecerá en Divi Theme Builder.

Vayamos al tutorial, ¿de acuerdo?

Parte 1: Importación de las plantillas prefabricadas

Para este tutorial, vamos a utilizar un par de plantillas prefabricadas de nuestro sexto paquete de creación de temas. Vamos a importar la plantilla de sitio web predeterminada que nos dará un encabezado global funcional donde agregaremos la barra de información de la publicación. Y vamos a importar la plantilla de publicación de blog para probar nuestros resultados en una publicación en vivo.

IMPORTANTE: Sería mejor importar estas plantillas en un sitio de prueba para que no arruine un sitio en vivo.

Importar la plantilla de sitio web predeterminada

Primero, deberás descargar el cuarto paquete GRATUITO Theme Builder para Divi . Luego descomprima el archivo.

Desde el Panel de WordPress, navega a Divi > Generador de temas. Luego haga clic en el icono de portabilidad en la parte superior derecha. En la ventana emergente de portabilidad, seleccione la pestaña de importación. A continuación, elija el archivo JSON de plantilla de sitio web predeterminado de la carpeta descargada y haga clic en el botón Importar. Esto importará una nueva plantilla de sitio web predeterminada con un encabezado y pie de página globales.

Importar la plantilla de publicación

Repita este proceso para importar la plantilla de publicación desde la misma carpeta descargada. Abra la ventana emergente de portabilidad, elija el archivo json de la plantilla de publicación y haga clic en el botón Importar. Esto le dará una plantilla de publicación asignada a todas las publicaciones en su sitio, junto con el encabezado predeterminado y un pie de página.

Deshabilitar Global en el encabezado de la plantilla de publicación

Vamos a agregar nuestra barra de información de publicación dinámica al encabezado de la plantilla de publicación. Sin embargo, debido a que queremos la barra de información de la publicación solo en la plantilla de publicación, debemos deshabilitar global en el encabezado para que nuestra barra no se agregue a todos los encabezados en todo el sitio. Para deshabilitar global en el encabezado global, abra el menú de configuración en el encabezado global y seleccione «Deshabilitar global».

Ahora el encabezado debe ser gris con la etiqueta «Encabezado personalizado». Una vez que esté listo, haga clic en el icono de edición para editar la plantilla de diseño del encabezado.

Diseño de la barra de progreso de lectura

Agregar la sección y la fila

Dentro del editor de diseño de encabezado, cree una nueva sección regular debajo de la sección actual que contiene el encabezado.

Luego agregue una columna a la sección.

Ajustes de sección

Abra la configuración de la sección y actualice lo siguiente:

  • Relleno: 0px arriba, 0px abajo

Configuración de fila

Después de agregar la configuración de la sección, abra la configuración de la fila y actualice lo siguiente:

  • color de fondo: #2b2b2b

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

  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%
  • Relleno: 0px arriba, 0px abajo

Creación de la barra de desplazamiento con un módulo divisor

La barra de progreso crecerá gradualmente en ancho para ocupar el contenedor/fila vacío. Para construir esto, usaremos un módulo divisor con un color de fondo personalizado. Una vez que diseñemos el divisor con el estilo que queremos que se vea la barra de progreso, agregaremos el código necesario para que el divisor aumente de ancho en el momento adecuado mientras se desplaza hacia abajo en la página.

Agregar módulo divisor

Cree un nuevo módulo divisor dentro de la columna.

Luego deshabilite la visibilidad del divisor. Vamos a agregar un color de fondo para que sirva como el color de la barra de progreso. Actualice lo siguiente:

  • Mostrar divisor: NO
  • Degradado de fondo Color izquierdo: #ff4349
  • Degradado de fondo Color derecho: #fe7f47
  • Dirección del gradiente: 90 grados

En la pestaña de diseño, actualice la altura de la barra de progreso:

  • altura: 20px

En la pestaña avanzada, asigne al divisor una ID de CSS personalizada de la siguiente manera:

  • ID de CSS: barra de desplazamiento

Necesitaremos esto para apuntar a la barra de desplazamiento para la funcionalidad con jQuery más adelante.

Agregar etiqueta de contador de porcentaje de barra de progreso

Para agregar la etiqueta del contador de porcentaje de la barra de progreso, agregue un módulo de texto debajo del módulo divisor.

Luego agregue el siguiente HTML al contenido del cuerpo:

01
<p>Reading Progress: <span></span></p>

Las spanetiquetas son importantes aquí porque usaremos jQuery para completar las spanetiquetas con el contador de porcentaje.

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

  • Fuente del texto: Heebo
  • Peso de fuente de texto: Negrita
  • Estilo de fuente de texto: TT
  • Texto Color del texto: #ffffff
  • Texto Tamaño del texto: 13px
  • Espaciado entre letras de texto: 3px
  • Altura de línea de texto: 1em

Luego actualice un poco el relleno izquierdo:

  • relleno: 10px a la izquierda

En la pestaña avanzada, asigne al módulo de texto una posición absoluta en el centro de la columna/fila. Esto asegurará que no ocupe ningún espacio real en el documento y permanezca centrado verticalmente dentro de la barra.

  • Posición: Absoluta
  • Ubicación: Centro Izquierdo

Antes de salir del módulo de texto, agregue una Clase CSS para que podamos orientarlo con nuestro código jQuery.

  • Clase CSS: et-progress-label

Agregar el código jQuery

Para darle a la barra de progreso la funcionalidad mágica que necesita, debemos agregar el código jQuery necesario.

Para hacer esto, agregue un nuevo módulo de código debajo del módulo de texto.

Luego pega el siguiente código:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');  
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();         
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>   

Y para el último paso, debemos darle a nuestra sección una posición fija. Guardamos esto para el final porque ocultará la sección detrás de las secciones anteriores que contienen el contenido del encabezado.

Abra la configuración de la sección para la sección que contiene la barra de progreso y actualice lo siguiente:

  • Posición: Fija
  • Índice Z: 998

Luego abra la configuración de la sección superior que contiene el contenido del encabezado y actualice el Índice Z de la siguiente manera:

  • Índice Z: 999

Ahora, la barra de progreso se ocultará inicialmente detrás de la parte superior del encabezado. Luego, cuando el usuario se desplace hacia abajo en la publicación, la verá fija en la parte superior de la página.

No olvides guardar los cambios.

Agregar el selector (clase CSS) al módulo de contenido de publicación en la plantilla del área del cuerpo.

En este momento, el código está escrito para reconocer un elemento con la clase «et-post-content» como el contenido principal de la publicación.

Dado que estamos utilizando una plantilla personalizada para el cuerpo de la publicación, debemos aplicar esa clase de CSS al módulo de contenido de la publicación de la plantilla para que nuestro código pueda calcular adecuadamente el progreso de lectura a medida que el usuario se desplaza hacia abajo en la publicación.

Para hacer esto, abra la plantilla del área del cuerpo de la plantilla de publicación en el generador de temas.

Abra la configuración del módulo de publicación de contenido y agregue la siguiente clase de CSS:

  • Clase CSS: et-post-contenido

Luego guarde los cambios.

Una vez hecho esto, guarde los cambios en el diseño y en el generador de temas.

Resultado final

Para ver el resultado en acción, abra una publicación en vivo en su sitio web. Asegúrese de que la publicación tenga suficiente contenido para que haya espacio para desplazarse hacia abajo en la página.

Uso de la barra de progreso de lectura en la plantilla de publicación predeterminada de Divi (no una plantilla personalizada)

Si no está utilizando una plantilla de cuerpo personalizada para la publicación y desea agregar la barra de progreso de lectura a la plantilla de publicación de blog predeterminada en Divi , todo lo que tiene que hacer es actualizar una sola clase CSS en el código.

Primero, asegúrese de que se haya eliminado el área del cuerpo personalizado de la plantilla de publicación.

Luego abra el diseño de plantilla de encabezado personalizado y actualice el módulo de código reemplazando esta línea de código…

01
var $postContent = $('.et-post-content');

con este…

01
var $postContent = $('.entry-content');

La clase «contenido de entrada» apuntará al div en la plantilla de publicación predeterminada que contiene el contenido de la publicación del blog (excluyendo el título, la imagen destacada, los metadatos anteriores y los comentarios a continuación que distorsionarían la longitud real del artículo).

Resultado

Aquí está el resultado de una publicación usando la plantilla de publicación predeterminada.

Pensamientos finales

Esta barra de progreso de lectura es mucho más inteligente que el típico indicador de desplazamiento que muestra el progreso del desplazamiento por toda la página/documento. Esta barra apunta solo al contenido real de la publicación que el usuario leerá, brindando una descripción precisa del progreso de la lectura. Esto es genial para aquellos blogs que tienden a tener textos y comentarios extensos. ¡También funcionaría muy bien para los cursos en línea para darles a esos estudiantes esa motivación adicional para seguir adelante!

Espero escuchar de usted en los comentarios.

¡Salud!