Cambiar la paginación del módulo 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.

Lo que queremos lograr es algo como esto:

Por qué la paginación predeterminada de Divi es un problema

Si has trabajado con el módulo de blog de Divi por un tiempo, ya sabes a qué me refiero. El sistema de paginación que incluye Divi de manera nativa es el más básico posible: un enlace de "Entradas anteriores" a la derecha y "Entradas más recientes" a la izquierda. Funciona, claro, pero le falta muchísimo contexto.

El problema desde la perspectiva del usuario es evidente: si estás navegando el blog y llegas a la página 4 de 12, no tienes manera de saberlo. No hay número de página visible, no hay indicador de cuánto contenido falta por explorar. El usuario no sabe si ya llegó al final o si todavía tiene 8 páginas por delante. Eso genera frustración y, en muchos casos, abandono.

Pero el impacto en SEO es igual de importante. Los motores de búsqueda como Google pueden seguir los enlaces de paginación de un blog para indexar todas las páginas, pero lo hacen de manera más eficiente cuando la estructura es clara y predecible. Con una paginación numerada (página 1, página 2, página 3...), los bots tienen un mapa explícito de la estructura de tu blog. Con el sistema anterior/siguiente de Divi, la navegación es funcional pero menos legible para los crawlers.

Yoast SEO, por ejemplo, genera automáticamente etiquetas rel="prev" y rel="next" en el head de tus páginas cuando detecta paginación. Esas etiquetas le dicen a Google cómo está conectada la secuencia de páginas de tu blog, lo que ayuda a consolidar la señal de indexación. Pero para que eso funcione bien, la paginación tiene que ser numerada. WP-PageNavi, el plugin que vamos a usar en este tutorial, activa ese comportamiento automáticamente.

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.

Personalizar los colores y el tamaño de la paginación

El snippet de arriba usa #FF4200 como color de acento: es el naranja característico de UXDivi, y aparece tanto en el número de página activo como en el hover de los demás números. Lo más probable es que ese naranja no sea el color de tu marca, así que lo primero que debes hacer es reemplazarlo por tu propio hexadecimal.

En el CSS hay exactamente dos líneas donde aparece ese color: dentro del bloque .wp-pagenavi span.current y dentro del bloque .wp-pagenavi a:hover. Reemplaza ambas ocurrencias de #FF4200 por el color de tu marca y ya tienes la paginación adaptada a tu diseño. Si quieres mantener consistencia visual, usa el mismo color que tienes en tus botones principales o en tus enlaces.

Si prefieres un diseño más minimalista, sin el fondo gris claro en los números inactivos, puedes simplificar el CSS así:

/* Versión minimalista: sin fondo en números inactivos */

.wp-pagenavi a,
.wp-pagenavi span {
	color: #333333;
	background: transparent;
	font-size: 1em !important;
	font-weight: 600 !important;
	padding: 0.4em 0.75em !important;
	border-radius: 4px;
	transition: all .3s;
}

.wp-pagenavi span.current {
	color: #TU_COLOR !important;
	background: transparent !important;
	border-bottom: 2px solid #TU_COLOR;
}

.wp-pagenavi a:hover {
	color: #TU_COLOR !important;
	background: transparent !important;
}

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

Esta versión usa un subrayado para indicar la página activa en lugar de un botón con fondo de color, lo que queda muy bien en diseños tipográficos limpios. El radio del border-radius también está ajustado a 4px en lugar de 100px para un look más cuadrado si el diseño lo pide.

Consejo: si tu blog tiene un fondo oscuro o una sección con fondo de color, recuerda que el CSS de WP-PageNavi se aplica globalmente. Puedes restringirlo a un contexto específico usando un selector más preciso como .et_pb_posts .wp-pagenavi a para que los estilos solo afecten la paginación dentro del módulo de blog de Divi, sin tocar otras instancias del plugin en otras partes del sitio.

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.

WP-PageNavi vs scroll infinito: cuándo usar cada uno

Antes de cerrar, vale la pena hablar de una pregunta que surge frecuentemente: ¿no sería mejor usar scroll infinito en lugar de paginación numerada? La respuesta es "depende", y en la mayoría de los blogs de contenido la paginación numerada gana por varios factores.

La paginación numerada le da al usuario un sentido de posición: sabe que está en la página 3 de 8, puede saltar a la página 5, puede volver a la 1. Esto es especialmente valioso cuando el blog tiene mucho contenido acumulado y los visitantes recurrentes quieren retomar desde donde se quedaron. El scroll infinito, en cambio, no tiene "marcadores" de posición: si el usuario recarga la página, vuelve al principio.

Para SEO, la ventaja de WP-PageNavi es más clara todavía. Cada página numerada tiene su propia URL (/blog/page/2/, /blog/page/3/), lo que significa que Google puede indexarlas por separado. Yoast SEO maneja automáticamente las etiquetas rel="prev" y rel="next" en el <head> de cada una de esas URLs para indicarle a Google que son parte de una secuencia. Con scroll infinito esto no existe por defecto, y si no implementas paginación por URL en paralelo, el contenido de las páginas más profundas queda sin indexar.

El scroll infinito tiene su lugar en feeds visuales, portfolios de imágenes, tiendas con muchos productos o cualquier contexto donde el usuario quiere explorar sin fricciones y no necesita referencia de posición. Para un blog educativo o de tutoriales como este, donde el contenido tiene jerarquía y el usuario puede querer buscar un artículo específico que vio antes, la paginación numerada es la opción correcta.

Consejo: Yoast SEO detecta automáticamente la paginación generada por WP-PageNavi y agrega las etiquetas rel="prev" y rel="next" sin que tengas que configurar nada extra. Si usas Rank Math o SEOPress, el comportamiento es el mismo. Solo asegúrate de que tu plugin SEO esté actualizado a una versión reciente para que el soporte de paginación esté activo.

Conclusión

Cambiar la paginación del módulo de blog de Divi es uno de esos ajustes que parece pequeño pero tiene un impacto real en la experiencia de tu sitio. Con WP-PageNavi instalado y el snippet CSS personalizado, tienes una paginación numerada, visualmente integrada con tu diseño y amigable para los motores de búsqueda. Todo eso en menos de 5 minutos y sin tocar el núcleo de Divi ni instalar herramientas pesadas.

El siguiente paso, una vez que tengas la paginación funcionando, es asegurarte de que el módulo de blog en sí esté bien configurado: cuántos posts muestra por página, en qué orden, qué categorías incluye. Esa configuración determina cuántas páginas tendrá tu paginación y cómo se distribuye el contenido entre ellas.

🎓 ¿Quieres dominar el módulo de blog de Divi de principio a fin? En UXDivi tenemos un tutorial completo donde cubrimos todas las opciones de configuración del módulo: layouts, filtros por categoría, excerpt, imagen destacada y más. Es el punto de partida ideal si quieres que tu blog quede exactamente como lo imaginas.