¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear una barra de progreso de lectura para publicaciones de blog Divi (sin plugins añadidos)

Sep 16, 2020 | Tutoriales para Divi

Agregar una barra de progreso de lectura (o indicador de desplazamiento) a la plantilla de publicación de su 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 correlacione 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á 100% llena.

En este tutorial, le mostraremos cómo crear una barra de progreso de lectura para las publicaciones del blog 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 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.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos 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 termina el contenido de la publicación.

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 predefinidas

Para este tutorial, usaremos 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: Lo mejor sería importar estas plantillas en un sitio de prueba para no estropear un sitio en vivo.

Importar la plantilla de sitio web predeterminada

Primero, deberá descargar el cuarto paquete de creación de temas GRATUITO para Divi . Luego descomprime el archivo.

Desde el panel de WordPress, navegue a Divi> Theme Builder. Luego haga clic en el ícono de portabilidad en la parte superior derecha. En la ventana emergente de portabilidad, seleccione la pestaña de importación. Luego 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 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, 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 desactivar global en el encabezado global, abra el menú de configuración en el encabezado global y seleccione «Desactivar global».

barra de información de publicación dinámica divi

Ahora el encabezado debería 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.

barra de información de publicación dinámica divi

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.

Configuración de la sección

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

  • Relleno: 0px arriba, 0px abajo

Configuración de filas

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: 1
  • Ancho: 100%
  • Ancho máximo: 100%
  • Relleno: 0px arriba, 0px abajo

Crear la barra de desplazamiento con un módulo divisor

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

Agregar módulo divisor

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

Luego desactive 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
  • Color de degradado de fondo a la izquierda: # ff4349
  • Gradiente 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 un ID de CSS personalizado de la siguiente manera:

  • ID de CSS: scrollBar

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 de texto: Heebo
  • Peso de la fuente del texto: negrita
  • Estilo de fuente de texto: TT
  • Color del texto del texto: #ffffff
  • Tamaño del texto del texto: 13px
  • Espaciado de letras de texto: 3px
  • Altura de la 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: Absoluto
  • Ubicación: Centro Izquierdo

Antes de salir del módulo de texto, agregue una clase CSS para que podamos apuntar 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, necesitamos 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 esto 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, verá que se corrigió en la parte superior de la página.

No olvide guardar los cambios.

Agregar el selector (clase CSS) al módulo de contenido de la 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 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 contenido de publicación y agregue la siguiente clase CSS:

  • Clase CSS: et-post-content

Luego guarda los cambios.

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

barra de información de publicación dinámica divi

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 la 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 de arriba y los comentarios de abajo que sesgarían la longitud real del artículo).

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

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This