Tutorial Divi: Cambiar la paginación del módulo del blog de Divi

En este tutorial de Divi te enseñamos a cambiar la paginación que viene por defecto en el módulo de blog de Divi, y lo haremos de manera sencilla con un plugin gratuito y con algo de código CSS personalizado. Este es otro tutorial de nuestra serie de contenidos de Tutoriales Free donde nos centramos en el mejoramiento y personalización del blog en Divi.

Tiempo de lectura estimado: 3 minutos

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Lo que queremos lograr es algo como esto:

Comencemos con el tutorial: Plugin WP-Pagenavi

En nuestra página principal de blog y en la mayoría de los sitios web que hacemos, nos gusta usar el plugin WP-PageNavi. Este plugin agrega una paginación avanzada al módulo de blog de Divi. Con solo instalar y activar el plugin, reemplaza el “anterior” o “Entradas más antiguas” y “Publicaciones más recientes” por numeración de páginas o elementos enlazados.

Una vez que instales y actives el complemento, la paginación aparecera automáticamente en el módulo del blog. No hay mayor configuración que hacer, por lo que todo lo que tienes que hacer ahora es modificar un poco los estilos de la paginación con el código CSS personalizado que dejaremos a continuación.

Para agregar el código CSS a tu sitio web solo debes copiar y pegar el snippet de código presentado a continuación. Si estás utilizando un childtheme de Divi, coloca este fragmento de código en el archivo style.css. De lo contrario, puedes colocarlo en Divi > Opciones de tema > Cuadro de código CSS personalizado:

/*Estilo de wp-pagenavi pagination links*/

.wp-pagenavi a,
.wp-pagenavi span {
	color: #000000;
	background: #f1f3f5;
	font-size: 1em !important;
	line-height: 1em;
	font-weight: bold !important;
	padding: 0.45em 0.8em !important;
	border-radius: 100px;
	transition: all .5s;
}


/*Estilo de wp-pagenavi numero de pagina activo*/

.wp-pagenavi span.current {
	color: #ffffff !important;
	background: #FF4200 !important;
	border-radius: 100px;
}


/*Estilo de wp-pagenavi pagination links on hover*/

.wp-pagenavi a:hover {
	color: #ffffff!important;
	background: #FF4200!important;
}


/*Estilo de wp-pagenavi textos de paginas*/

.wp-pagenavi .pages {
	background: none;
}


/*remover borde y centrar el wp-pagenavi links*/

.wp-pagenavi {
	border-top: none;
	text-align: center;
}

La primera parte de nuestro código CSS le da estilo a los números, la siguiente le da estilo al número de página actual, luego, la siguiente le da estilo a los números “al pasar el mouse on hover”, la siguiente oculta el fondo de las letras de las páginas y la última elimina el borde y centra la paginación completa. Nuevamente, repasamos todo esto en el video, así que si realmente quieres aprender, asegúrate de verlo.

Aquí está el resultado final usando el plugin WP-PageNavi y CSS para cambiar la paginación del módulo del blog de Divi:

¡Y eso es todo! Ahora recuerda que puedes modificar los colores de fondo o letras cambiando los códigos de color hexadecimal del código CSS tal como mostramos en el tutorial.

Artículos relacionados

Comentarios

  1. Hola buenas, lo primero gracias por el aporte.
    Decirte que usé hoy este recurso y lo personalice sin problemas, salvo que al paginar no sube arriba al top de la página, se queda unos 500px más abajo.
    Es decir, funciona, pero al pulsar en el número “2” de la paginación hace el scroll hacia arriba, pero no llega al top.

    Mil gracias de antemano

  2. Gracias por el tutorial lo he adaptado a mi página y funciono muy bien, tengo la duda de en donde puedo ajustar la paginación que aparece en la url, es decir, ninguno me aparece si es de la página 1 ,2,3,4,5 etc, esto lo puede tomar el buscador como un nivel de navegación de más de 5 o los niveles de navegación no aplican para el blog.

    Muchas gracias.

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →