Si estás creando tu blog en WordPress seguro te habrás dado cuenta lo poca intuitiva que es su paginación. ¿A qué me refiero? Pues, digamos que en una página sólo se pueden mostrar 10 entradas, pero tenemos 20 de ellas. Entonces WordPress separa las 20 en dos páginas de 10 cada una para mostrarlas.
¿Hasta ahí todo bien verdad? El problema es que los enlaces clickeables para pasar a la siguiente página, no son muy evidentes a simple vista.
Y no lo digo yo, lo dicen mis clientes al reclamarme por qué no aparecen sus demás entradas. Les explico que se mostrarán más al hacer click al texto de “Entradas más antiguas” y sólo en ese entonces se percatan de su existencia.
Y si nuestros clientes no entienden a simple vista que hay más entradas para explorarlas, mucho peor será con los usuarios de su web.
¿La solución? Quizá hacer más llamativos los enlaces con css. Pero, personalmente prefiero además convertir esa paginación simple de WordPress es una más interesante paginación numérica.
¿Y qué hay de la paginación del módulo Blog de Divi?
El módulo Blog de Divi trabaja con la paginación por defecto de wordpress. Así que simplemente muestra los textos de “Entradas más antiguas” y “Entradas más recientes”.
Si hay algo que resaltar con respecto a la paginación en el Modulo de Divi es que llama a la siguiente página por medio de AJAX. Es decir, carga las siguientes entradas sin necesidad de recargar toda la página. Utilizando un elegante efecto. Punto para Divi.
¿Ya tienes el tema Divi con licencia?
Si estás creando tu web (y su sección de Blog) utilizando Divi, te habrás dado cuenta que es una de las mejores inversiones que se pueden hacer en WordPress.
Si es que aún no cuentas con una licencia oficial, puedes adquirir una cuenta con licencias para usos ilimitados y con el soporte de Elegant Themes, al 20% de descuento desde éste enlace a la web oficial.
Por otro lado, si sólo deseas activar la licencia en un sitio web, desde aquí ofrecemos el servicio de activación de licencias a un precio muy económico. Así que, ya no hay excusas para empezar a disfrutar los beneficios de ésta potente herramienta.
Entonces, ¿Cómo mejoramos la paginación?
Lo haremos a través del plugin: WP-PageNavi. Lo único que necesitaremos es instalar y activar éste plugin desde el repositorio de WordPress y vualá. Paginación numérica activada.
Desde la pestaña diseño y en la sección de Mostrar paginación Texto (En el módulo Blog), podemos cambiar algunos estilos. Los más importantes sean quizá: la alineación (Ubicación a la izquierda, centro o derecha) el tamaño y el color de las letras (que recomiendo definir).
El problema ahora es que los demás estilos (de la paginación) que no podemos editar desde Divi, son muy básicos. Vamos a mejorarlos un poco.
Como bonus, creé un generador de código para lograr estilos como éstos, con todo y efectos hover. Simplemente elijan sus preferencias de estilos y denle click a “generar código”.
Te puede interesar:
Cómo cambiar el tamaño de las imágenes de las entradas del módulo Blog Divi
Herramienta generadora de estilos para la paginación
Lo único que deberán llenar es, primero, la clase CSS personalizada del módulo blog cuya paginación queremos que le afecten los estilos. Si no quieren ponerle una clase, dejen ese espacio en blanco. Al hacer eso, el código afectará a todos los módulos blog de ese diseño. Aunque yo prefiero utilizar clases para hacerlo más específico.
Luego deberán elegir entre los tres tipos de estilos de botones. E ingresar el color que desean que tenga el mismo.
Por último le hacen click al botón “Generar código” y vualá. Código listo para copiar y pegar.
Para que puedan visualizar la herramienta, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver Herramienta”.
Y automáticamente aparecerá…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones y sorteos de productos de mi Tienda de elementos y layouts para Divi. Además, que tenemos una comunicación más directa para compartir y resolver dudas.
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver la herramienta del tutorial debajo de éste mensaje
Herramienta generadora de Códigos
¿Qué hacer con éste código?
El último paso será, simplemente, agregar al diseño donde tengas el módulo blog, un módulo código. Y dentro escribir agregar el código css dentro de las etiquetas <style></style> de la siguiente forma:
Guardas los cambios y listo. Los estilos se habrán aplicado.
Tambíen puedes aplicar ésta mejora en la paginación en los geniales estilos de nuestro pack Blog
En nuestra tienda tenemos un pack de asombrosos estilos para mostrar tus entradas con el módulo Blog. El pack incluye 22 estilos y viene en plantillas json listas para soltar directamente a nuestros diseños.
Obviamente, éste método para mejorar la paginación en el módulo Blog, también funciona con las plantillas de nuestro pack. Cada Blog de cada estilo ya tiene una clase personalizada que van desde vic-blog-layout-01 hasta vic-blog-layout-22. Puedes utilizar ésas clases en la herramienta de arriba.
Palabras Finales
Como vimos, es muy fácil mejorar significativamente la paginación del módulo Divi Blog. Y personalizarla con la herramienta generadora de códigos.
Si te gusta éste tipo de contenido, no olvides confirmar tu suscripción desde el correo que te llegó a tu bandeja de entrada.
Además, dale una ojeada a nuestra tienda, seguramente hallarás elementos para Divi que te encantarán. Saludos y volverán a escuchar de mí en el próximo artículo.
Pdta. ¿Ya te suscribiste a mi canal de Youtube?, si no lo haz hecho aún, hazlo desde aquí
0 comentarios