El módulo de blog de Divi ya nos permite conseguir una presentación bastante cuidada sin tocar demasiado. Aun así, hay detalles que podemos mejorar cuando queremos que el diseño se sienta un poco más propio. Uno de ellos es la paginación en WordPress.
Cuando tenemos bastantes entradas, esos enlaces para avanzar o volver atrás empiezan a tener más importancia. Son los que permiten seguir recorriendo el blog sin tener que regresar a la página principal. Divi incluye esta navegación de serie, pero podemos cambiar su aspecto. Por ejemplo, podemos modificar los textos, darles forma de botón, ajustar espacios y colores o incluso trabajar con números de página si queremos que resulte más fácil saber en qué parte del blog estamos.
Al personalizar la paginación y estilos al módulo blog de Divi también podemos tocar otros detalles de las tarjetas. Un efecto sencillo sobre la imagen destacada, por ejemplo, puede hacer que cada entrada responda al pasar el cursor sin necesidad de rehacer todo el diseño.
Algunos de estos cambios se pueden resolver con unas pocas líneas de CSS. También podemos modificar aspectos como el número y el espacio de las tarjetas al cambiar las columnas del módulo Blog de Divi. Para otros ajustes puede resultar más práctico utilizar un plugin, sobre todo si buscamos opciones que Divi no ofrece.
No hace falta aplicar todos los efectos disponibles. Si la paginación destaca demasiado o las imágenes tienen animaciones muy fuertes, podemos terminar quitándole protagonismo al contenido. Es por esto que vamos a ver varias formas de ajustar la paginación del módulo blog de Divi y algunos estilos adicionales que podemos aplicar para darle un acabado más personalizado sin complicar demasiado la estructura.
Tabla de contenidos
Por qué es importante la paginación y estilos a módulo blog de Divi
Cuando un blog empieza a crecer, llega un punto en el que mostrar demasiadas entradas en una sola página deja de resultar práctico. No solo hacemos que el visitante tenga que desplazarse mucho, sino que también puede costarle más llegar hasta publicaciones antiguas. Ahí es donde la paginación empieza a tener sentido.
Al trabajar la paginación y estilos a módulo blog de Divi, podemos decidir cuántas entradas mostrar antes de pasar a una nueva página. Por ejemplo, podemos dejar nueve artículos visibles y permitir que el usuario siga avanzando cuando quiera ver más.
Esto ayuda bastante en blogs donde publicamos con frecuencia, porque evita que la página principal termine convirtiéndose en una lista interminable. También podemos utilizar el módulo Blog de Divi en páginas de categorías para organizar mejor las publicaciones según el contenido que queramos mostrar.
La paginación también forma parte del diseño. Si ya tenemos unos colores, una tipografía y determinados estilos para los botones, podemos intentar que esos enlaces de navegación sigan la misma línea. Divi nos deja ajustar varios detalles para que no parezcan un elemento separado del resto de la página.
Otra posibilidad es utilizar números de página en lugar de limitarnos a anterior y siguiente. Cuando tenemos muchas publicaciones, esto permite hacerse una idea de cuánto contenido queda y saltar con más facilidad entre distintas páginas. Este tipo de navegación también puede utilizarse al crear una página de resultados de búsqueda en Divi.
En móvil conviene echarle un vistazo aparte. Los enlaces necesitan suficiente espacio para poder pulsarlos bien y no deberían quedar demasiado juntos ni perderse entre otros elementos. Personalizar la paginación y estilos a módulo blog de Divi no significa convertir esta parte en algo llamativo. De hecho, por lo general funciona mejor cuando resulta fácil de encontrar y usar sin robar protagonismo a las entradas.
Si el visitante puede seguir recorriendo el blog sin tener que pensar demasiado en cómo avanzar, la paginación ya está haciendo bien su trabajo.
Modificar la paginación.
Podemos comenzar ajustando algunas de las configuraciones básicas que se incluyen en la pestaña de diseño del módulo Blog, en el botón de alternar texto de paginación. Es muy extraño, pero tratan estos enlaces como texto en lugar de enlaces, al igual que el Divi Blog leer más. Es por eso que necesitamos conocer qué podemos hacer con nuestra paginación en formato de texto.
Aquí podemos modificar los valores de esta paginación, según las propias opciones.
Cambiar los enlaces de texto de la paginación del blog Divi en botones.
Conociendo que Divi agrega estos botones como texto, podemos ver ahora que tenemos algunos estilos de diseño básicos configurados, continuemos agregando algo de CSS para que los enlaces de paginación se vean más como botones y no como simple texto con estilos. Podemos agregar un color de fondo, un borde y un efecto de desplazamiento para dar sensación más de botón en lugar de propio texto.
Para realizar todos los cambios que vamos a hacer, es necesario agregarlos a nuestro css personalizado.
Para agregar códigos personalizados CSS, podemos hacerlos de varias maneras. Una de las más simples para que funcione de forma correcta es agregar este tipo de código en:
Apariencia > Personalizar > CSS adicional
Otra opción es hacerlo de forma manual a nuestro archivo style, esta opción no es muy recomendada, ya que al momento de actualizar nuestro tema es posible que estos ajustes se pierdan. De igual forma, este archivo se encuentra en:
WePanel > Gestión de archivos > public_html > dominio > wp-content > themes > tema utilizado > archivo style.css
Estas dos formas no son las únicas, también podemos ver en nuestro tema la opción, por ejemplo, en Divi tenemos este panel de CSS o estilos si vamos a Divi > Opciones del tema > CSS personalizado.
El código que debemos agregar es el siguiente:
/*Estilizar los 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;
}
/*Estilizar los botones en hover*/
.pagination .alignleft a:hover,
.pagination .alignright a:hover {
background: transparent;
color: #0070fc;
border: 2px solid #0070fc;
transition: all 0.3s ease-in-out;
}
En la página principal de nuestro blog y en la mayoría de los sitios web que diseñemos, es bueno utilizar un complemento llamado WP-PageNavi. Este complemento agrega paginación avanzada al módulo Divi Blog. Con solo instalar y activar el complemento, reemplaza el antiguo:
← Publicaciones más antiguas | Publicaciones más recientes →
Esto por enlaces de página numerados, esta es una acción que debemos agregar si nuestra página es orientada a blogs, ya que esta numeración es mucho mejor realizarla para este tipo de contenidos.
Una vez que se instala y se activa el complemento, la paginación aparece de forma automatica en el módulo del blog. No hay otras configuraciones, por lo que todo lo que tenemos que hacer ahora es diseñar la paginación que queramos. De esta forma es como se ve por defecto, aquí hay una captura de pantalla:
Esto es algo que podemos mejorar bastante con algo de CSS, podemos agregar el código a nuestro sitio web copiando y pegando el fragmento completo a continuación. Al igual que los códigos anteriores, podemos agregarlos de varias formas:
Para agregar códigos personalizados css podemos hacerlos de varias maneras. Una de las mas simples para que funcione de forma correcta es agregar este tipo de código en:
Apariencia > Personalizar > Css adicional
Otra opción es hacerlo de forma manual a nuestro archivo style, esta opcion no es muy recomendada, ya que al momento de actualizar nuestro tema es posible que estos ajustes se pierdan. De igual forma, este archivo se encuentra en:
Panel > Administrador de archivos > public_html > domninio > wp-content > themes > tema utilizado > archivo style.css
Estas dos formas no son las únicas, también podemos ver de forma directa en nuestro tema la opción, por ejemplo en divi tenemos este panel de css o estilos si vamos a Divi > Opciones del tema > CSS personalizado
El código que debemos agregar es el siguiente:
/*Estilo de paginacion*/
.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 numeracion actual*/
.wp-pagenavi span.current {
color: #ffffff !important;
background: #0070fc !important;
border-radius: 100px;
}
/*Estilo de hover*/
.wp-pagenavi a:hover {
color: #ffffff!important;
background: #0070fc!important;
}
/*Estilo de texto*/
.wp-pagenavi .pages {
background: none;
}
/*Remover bordes de links*/
.wp-pagenavi {
border-top: none;
text-align: center;
}
Vamos a explicar un poco lo que hace cada una de las partes de este código. La primera parte aplica estilo a los números, la siguiente aplica estilo al número de página actual, la siguiente aplica estilo a los números al pasar el mouse por encima, la siguiente oculta el fondo alrededor de las páginas y la última elimina el borde y centra toda la paginación. Aquí está el resultado final usando el complemento WP-PageNavi y CSS para agregar y diseñar la paginación de nuestro módulo Divi Blog:
Imagen destacada rotativa en blog de Divi
Este fragmento de código que agregaremos ahora puede hacer ambas cosas (efecto de zoom y rotación), pero si lo deseamos, podemos cambiarlo.
/*Ajustar el margen de la imagen*/
.et_pb_post .entry-featured-image-url {
margin: 0;
}
/*mantener zoom en imagen*/
.et_pb_blog_grid .et_pb_image_container {
overflow: hidden;
}
/*Transicion fluida*/
.et_pb_blog_grid .et_pb_image_container img {
transition: all 0.95s ease;
-moz-transition: all 0.95s ease;
-webkit-transition: all 0.95s ease;
}
/*zoom en hover*/
.et_pb_blog_grid .et_pb_post:hover img {
transform: scale(1.15) rotate(1deg);
-moz-transform: scale(1.15) rotate(1deg);
-webkit-transform: scale(1.15) rotate(1deg);
}
Una vez realizamos esto, tendremos este efecto:
Conclusión
Personalizar la paginación y estilos a módulo blog de Divi puede parecer un cambio menor, pero empieza a notarse bastante cuando el blog tiene muchas entradas.
Si la navegación está bien resuelta, el usuario puede seguir avanzando entre publicaciones sin tener que buscar cómo hacerlo. Y si además esos enlaces mantienen los mismos colores, tipografías y estilos del resto de la web, todo se siente más integrado. No hace falta rehacer por completo el módulo de blog. Podemos empezar por algo tan simple como cambiar los enlaces de paginación, darles aspecto de botón o ajustar el espacio entre ellos.
Si tenemos bastante contenido, también puede venir bien utilizar números de página para que el visitante tenga una referencia más clara de dónde se encuentra.
A partir de ahí podemos tocar otros detalles, como las imágenes destacadas o algún efecto al pasar el cursor. La idea no es llenar el blog de animaciones, sino añadir pequeños cambios que acompañen el diseño que ya tenemos. La versión móvil también merece una revisión. Lo que se ve bien en escritorio puede quedar demasiado junto cuando el espacio se reduce, en especial en los enlaces de paginación.
Por eso conviene comprobar que cada botón sea fácil de pulsar y que la navegación siga siendo clara en pantallas pequeñas. Al trabajar la paginación y estilos a módulo blog de Divi, lo mejor suele ser ir haciendo ajustes pequeños. Si el visitante puede moverse por las entradas sin esfuerzo y la navegación encaja con el resto de la web, no necesitamos complicarla mucho más.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
