Cómo Añadir Paginación al Blog de Divi

Te muestro la solución fácil para añadir paginación al blog de nuestro tema favorito
10/11/2023

En mi experiencia como consultor de Diseño Web y de Posicionamiento SEO he podido ver uno de los talones de Aquiles de Divi, la forma de mostrar y previsualizar entradas en su blog.

Y una de las cosas que más me frustraba ha sido ver que no hay forma humana de poner paginación en el blog de forma nativa. Por suerte, gracias a la inspiración de Peeaye Creative, tengo una solución para ofrecerte, en su contenido me voy a basar.

¡Vamos allá!

Paso 1: Instalar el plugin de paginación WordPress WP-PageNavi

Puedes hacerlo desde esta página, o desde tu WP-Admin buscándola por su nombre.

plugin paginacion divi

Lo puedes pegar en:

  • Divi -> Opciones de tema -> CSS Personalizado.
  • En el CSS personalizado editando la propia página (pulsando en el engranaje, avanzado y CSS Personalizado)
  • Como CSS personalizado en el propio módulo ‘Blog’ de Divi en Avanzado -> CSS Personalizado.

 /* Convierte los enlaces de paginación del blog en botones */
.pagination .alignleft a,
.pagination .alignright a {
color: #ffffff;
background: #0071fc;
border: 2px solid #0070fc;
padding: .7em 1.3em;
border-radius: 50px;
text-transform: capitalize;
transition: all 0.3s ease-in-out;
}
/* — lo mismo pero al pasar el ratón por encima –*/
.pagination .alignleft a:hover,
.pagination .alignright a:hover {
background: transparent;
color: #0070fc;
border: 2px solid #0070fc;
transition: all 0.3s ease-in-out;
}

Explicación del CSS

  1. Selector:

    • .pagination .alignleft a, .pagination .alignright a: Este selector apunta a los enlaces (<a>) que están dentro de elementos con las clases .alignleft o .alignright, y estos a su vez deben estar dentro de un elemento con la clase .pagination. Esto es típico en blogs o sitios web que tienen paginación, es decir, varias páginas de contenido donde puedes ir de una a otra.
  2. Estilos:

    • color: #ffffff;: Cambia el color del texto de los enlaces a blanco.
    • background: #0071fc;: Pone un fondo azul a los enlaces.
    • border: 2px solid #0070fc;: Añade un borde sólido de 2 píxeles de grosor y de color azul alrededor de los enlaces.
    • padding: .7em 1.3em;: Añade espacio dentro de los enlaces, .7em en la parte superior e inferior y 1.3em en los lados izquierdo y derecho.
    • border-radius: 50px;: Redondea las esquinas del borde de los enlaces, dándoles una forma más de botón.
    • text-transform: capitalize;: Hace que la primera letra de cada palabra en los enlaces se convierta en mayúscula.
    • transition: all 0.3s ease-in-out;: Esta propiedad hace que los cambios en el estilo del enlace (como el color de fondo o el color del texto) se hagan gradualmente en un período de 0.3 segundos, en lugar de instantáneamente, cuando se pasa el ratón por encima o se hacen otros cambios.
  3. Selector para el efecto al pasar el ratón (hover):

    • .pagination .alignleft a:hover, .pagination .alignright a:hover: Este selector es similar al primero, pero con :hover al final. Esto significa que los estilos que se definan aquí se aplicarán cuando el usuario pase el ratón por encima de los enlaces.
  4. Estilos al pasar el ratón:

    • background: transparent;: Hace que el fondo del enlace sea transparente (en lugar del azul original) cuando se pasa el ratón por encima.
    • color: #0070fc;: Cambia el color del texto a azul (el mismo color que el borde) cuando se pasa el ratón por encima.
    • border: 2px solid #0070fc;: Mantiene el mismo estilo de borde que antes.
    • transition: all 0.3s ease-in-out;: Mantiene el efecto de transición suave cuando se cambian los estilos al pasar el ratón.

 

Paso 3: Código CSS para tunear los enlaces de página

Del mismo modo que antes, puedes pegarlo en:

  • Divi -> Opciones de tema -> CSS Personalizado.
  • En el CSS personalizado editando la propia página (pulsando en el engranaje, avanzado y CSS Personalizado)
  • Como CSS personalizado en el propio módulo ‘Blog’ de Divi en Avanzado -> CSS Personalizado.
/*style the 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;
  border: none;
transition: all .5s;
}
 
 
/*style the wp-pagenavi current page number*/
 
.wp-pagenavi span.current {
color: #ffffff !important;
background: #0070fc !important;
border-radius: 100px;
}
 
 
/*style the wp-pagenavi pagination links on hover*/
 
.wp-pagenavi a:hover {
color: #ffffff!important;
background: #0070fc!important;
}
 
 
/*style the wp-pagenavi pages text*/
 
.wp-pagenavi .pages {
background: none;
}
 
 
/*remove border and center the wp-pagenavi links*/
 
.wp-pagenavi {
border-top: none;
text-align: center;
}

Explicación del CSS y ayuda para personalizar los colores

Este código CSS está diseñado para personalizar la apariencia de los enlaces de paginación en un sitio web que utiliza WordPress, específicamente aquellos que usan el plugin “WP-PageNavi”. Vamos a desglosarlo:

  1. Estilizar los enlaces de paginación y los span de WP-PageNavi:

    • .wp-pagenavi a, .wp-pagenavi span: Este selector apunta a los elementos <a> (enlaces) y <span> dentro del contenedor .wp-pagenavi, que es el que genera el plugin WP-PageNavi.
      • color: #000000;: Establece el color del texto de estos elementos a negro.
      • background: #f1f3f5;: Pone un color de fondo claro (gris claro) a estos elementos.
      • font-size: 1em !important;: Establece el tamaño de la fuente a 1em, y !important asegura que este estilo prevalezca sobre otros posibles estilos.
      • line-height: 1em;: Establece la altura de línea, que es la distancia vertical entre líneas de texto, a 1em.
      • font-weight: bold !important;: Hace que el texto sea en negrita, y !important garantiza que este estilo tenga prioridad.
      • padding: 0.45em 0.8em !important;: Añade relleno alrededor del texto dentro de los enlaces y span, y !important asegura que este estilo se aplique.
      • border-radius: 100px;: Redondea las esquinas de estos elementos para que tengan bordes curvos.
      • border: none;: Elimina cualquier borde que pudieran tener estos elementos.
      • transition: all .5s;: Añade una transición suave de 0.5 segundos a todos los cambios de estilo.
  2. Estilizar el número de página actual en WP-PageNavi:

    • .wp-pagenavi span.current: Este selector apunta al <span> que representa la página actual en la paginación.
      • color: #ffffff !important;: Cambia el color del texto a blanco.
      • background: #0070fc !important;: Pone un fondo azul a este elemento.
      • border-radius: 100px;: Mantiene los bordes redondeados.
  3. Estilizar los enlaces de paginación al pasar el ratón (hover):

    • .wp-pagenavi a:hover: Apunta a los enlaces dentro de .wp-pagenavi cuando el ratón pasa sobre ellos.
      • color: #ffffff!important;: Cambia el color del texto a blanco al pasar el ratón.
      • background: #0070fc!important;: Cambia el fondo a azul al pasar el ratón.
  4. Estilizar el texto de las páginas en WP-PageNavi:

    • .wp-pagenavi .pages: Selecciona el elemento que muestra el texto de las páginas (como “Página 1 de 5”).
      • background: none;: Elimina cualquier fondo de este elemento.
  5. Eliminar el borde y centrar los enlaces de WP-PageNavi:

    • .wp-pagenavi: Selecciona el contenedor principal de la paginación.
      • border-top: none;: Elimina el borde superior de este contenedor.
      • text-align: center;: Centra los elementos dentro del contenedor.

 

Resultado final en la web de un cliente

Te muestro lo bien que ha quedado en la web de un cliente.

ejemplo de resultado paginación en Divi

Conclusiones

Espero que te haya ayudado este artículo, dar las gracias a Peeaye Creative por haberme enseñado este código en su blog en inglés.

Esto ha sido todo, puede que te interese ver otros de mis artículos de diseño web y blogs, como uno para mostrar a la izquierda la imagen destacada en el blog de Divi.

Roberto M
Consultor Experto en Marketing Digital especializado en SEO y Diseño Web. Impulsa tu negocio con estrategias efectivas y resultados comprobados. Maximiza tu presencia digital y alcanza tus metas aprovechando su experiencia.
¿Necesitas ayuda con tu proyecto?
¡Trabajemos juntos!

Estás a un email de distancia de multiplicar tu negocio.

Contáctame

Comparte este artículo

Artículos relacionados

Cambiar el Orden de las Columnas SOLO en MOVIL (Divi + WordPress)

Conozco tu situación. Has diseñado una web que se ve genial en ordenador, con un efecto perfecto en la vista del usuario, sin embargo, cuando vas al teléfono, el orden no favorece a la navegación ni muestra el contenido como desearías, y no quieres tener que cambiar...

Cómo hacer una Tabla HTML Responsive (con HTML y CSS) y sin plugins

Consigue una tabla para tu sitio (Wordpress y Divi inclusive) En este artículo te voy a enseñar cómo hacer una tabla responsive que funciona muy bien, en cualquier sitio, incluidos Wordpress, Divi, Elemento o cualquier otro tema o constructor. Solo vas a necesitar un...