Seleccionar página

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.

Por Jefferson M.

Oct 20, 2020

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 Blog Hub Design donde nos centramos en el mejoramiento y personalización del blog en Divi.

Tiempo de lectura estimado: 3 minutos

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:

Personalizar 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.

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web's fantásticas con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🖐 ¡RECIBE UN TIP NUEVO CADA DÍA ! 😎

Suscribiendote a esta lista de correo, recibirás cada día un tip / recurso / mini-tuto completamente gratuito sobre diseño web con WordPress y Divi. Además recibirás nuestras ofertas únicamente cuando las publiquemos.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros Tips Diarios