Una guía práctica sobre cómo diseñar la paginación en Divi

La paginación es uno de esos elementos de un sitio web que a menudo se pasa por alto, especialmente cuando se trata de diseño. Y hay varios lugares donde la paginación puede ser apropiada para usar en su sitio web. Básicamente, la paginación (o un menú de paginación) permite a los usuarios navegar a través de múltiples páginas de elementos (un archivo de publicaciones, por ejemplo). Esto es especialmente útil para reducir el contenido de la página inicial.

Divi tiene varios módulos que incluyen la paginación (como el módulo de la galería) que se pueden diseñar utilizando la configuración incorporada. Algunos de estos módulos (como el blog y la cartera) heredan la paginación predeterminada del tema Divi (o WordPress) que puede simplificarse demasiado para algunos sitios. Pero con la ayuda de un complemento, puede reemplazar la paginación de todo su tema por uno más complejo. Luego, puede diseñarlo con CSS como lo necesite.

En este tutorial, le mostraré cómo diseñar la paginación en Divi. Esto es lo que repasaremos:

• Cosas a considerar al diseñar la paginación en Divi
• Módulo de galería de estilo Divi y paginación del módulo de cartera filtrable
• Estilos de paginación avanzados para el módulo de galería y el módulo de cartera filtrable
• Módulo de blog de estilo y paginación del módulo de cartera
• Agregar paginación compleja a Divi usando el complemento WP-PageNavi
• Diseñar la paginación de WP-PageNavi con CSS personalizado

Empecemos.

Vistazo

Esta publicación trata principalmente sobre cómo diseñar la paginación. Sin embargo, aquí hay un par de estilos de paginación complejos que les mostraré cómo construir.

Empezando

Suscríbete a nuestro canal de Youtube

Para este tutorial, necesitará lo siguiente:

• el tema Divi instalado y activo.
• Para probar los diseños de paginación de diferentes módulos, necesitará contenido simulado. Por ejemplo, para diseñar la paginación del módulo del portafolio (o portafolio filtrable), necesitará alrededor de 12-16 proyectos agregados a su tema para que tenga suficiente contenido para permitir que la paginación surta efecto. Para el módulo de la galería, también necesitará entre 12 y 16 imágenes para completar la galería.
• Si va a querer utilizar el complemento WP-PageNavi, deberá instalar y activar el complemento. Este es un complemento gratuito que se puede descargar del directorio de WordPress desde el panel de WordPress de su sitio. Simplemente navegue a Complemento> Agregar nuevo y busque WP-PageNavi.
  

Una vez que tenga algo de contenido simulado en su lugar, estará listo para crear una nueva página. Desde su panel de WordPress, vaya a Páginas> Agregar nuevo. Darle un título a la página e implementar Divi Builder. Seleccione la opción de "Construir desde cero". Luego haga clic en Construir en la interfaz.

Ahora está listo para comenzar a probar algunos diseños de paginación.

Cosas a considerar al diseñar la paginación en Divi

En términos generales, probablemente no quiera volverse demasiado loco con el diseño de la paginación porque, como cualquier menú de navegación, es importante mantenerlo simple e intuitivo. Sin embargo, aquí hay algunas cosas que puede considerar al diseñar la paginación en Divi.

Fuente de paginación

La paginación es un gran lugar para romper con las fuentes principales que está utilizando para su sitio. Desea elegir las mejores fuentes orientadas a las interfaces de usuario y la navegación. Y dado que la paginación contiene principalmente números, desea asegurarse de que la fuente muestre todos los números con la misma altura y ancho (lo que los expertos en tipografía llaman forro y tabular). Algunos de mis favoritos conservadores incluyen Oxygen, Nunito Sans y Source Sans Pro. Y si tiene muchas páginas en su paginación, es posible que deba liberar algo de espacio eligiendo una fuente condensada como Fjalla One o Roboto Condensed.

Estilo de fuente de paginación

También puede probar algunos estilos de fuente para diferenciar su paginación. Por ejemplo, puede usar el estilo de fuente en mayúsculas para hacer que los enlaces "siguiente" y "anterior" sean más pronunciados e iguales a la altura de los números de página. Sin embargo, agregar el estilo de fuente subrayado puede ser un poco redundante considerando que los enlaces ya están en un menú de navegación.

Espaciado de letras de paginación

El espaciado entre letras es una excelente manera de agregar un poco más de espacio horizontal a su paginación. Esto puede agregar un elemento de diseño agradable y hacer que la navegación se destaque.

Alineación de texto de paginación

En Divi puede alinear fácilmente su paginación a la izquierda, centro o derecha de la página. Así que no se olvide de esto cuando esté diseñando su página web.

Espacio en el que se puede hacer clic

Es importante tener suficiente espacio en el que se pueda hacer clic para los enlaces de paginación. De forma predeterminada, será bastante pequeño. Puede aumentar el espacio en el que se puede hacer clic utilizando texto más grande o aumentando la altura de la línea. Pero también puede agregar algo de relleno alrededor de esos enlaces con algo de CSS.

Tamaño del texto de paginación

El tamaño del texto de paginación normalmente es bastante pequeño. Probablemente esto sea para evitar que distraiga a los usuarios del contenido de la página. Sin embargo, tener un tamaño de texto más grande puede aumentar el espacio en el que se puede hacer clic del enlace de paginación y hacer que sea más notorio para los usuarios. Me gusta usar una unidad de longitud de vw para texto de paginación más grande para que se adapte bien al navegador y al contenido.

Altura de la línea de paginación

Dado que la paginación normalmente permanece en una línea, puede salirse con la suya agregando un poco más de altura de línea a los enlaces para agregar espacio adicional en el que se puede hacer clic.

Sombra de texto de paginación

Text Shadow puede distraer si se usa mal. Es mejor omitirlo a menos que planee mantenerlo sutil. También se puede usar para agregar un brillo creativo alrededor de su texto si desea ese tipo de cosas.

Página activa de paginación

Este aspecto de la paginación es importante para que los usuarios sepan en qué página se encuentran actualmente cuando navegan. Debe haber un claro contraste entre el estilo del enlace de la página activa y los enlaces de la página no activa. De forma predeterminada, Divi utilizará el color de acento principal establecido en el Personalizador de temas como el color del enlace de la página activa en Divi. Sin embargo, puede anular esto con una línea de CSS.

Para los módulos que tienen paginación, Divi tiene opciones de diseño integradas para diseñar diferentes elementos de la paginación. Además, puede agregar fácilmente algunos fragmentos de CSS en la pestaña avanzada para tener aún más control sobre el diseño en un lugar conveniente.

Pero para la paginación a nivel de tema, puede obtener una solución compleja utilizando el complemento WP-PageNavi con CSS personalizado (más sobre esto más adelante).

Por ahora, comencemos con cómo diseñar la paginación en los módulos Divi.

Módulo de galería de estilo Divi y paginación del módulo de cartera filtrable

Con Divi Builder activo en una página nueva, cree una nueva sección regular con una fila de una columna. Luego agregue un módulo de cartera filtrable a la fila. Como se mencionó anteriormente, asegúrese de tener entre 12 y 16 proyectos creados para que pueda ver la paginación.

En la configuración de cartera filtrable, actualice lo siguiente:

Número de publicaciones: 4 (para que pueda ver más enlaces de página en la paginación)

Mostrar título: NO
Mostrar categorías: No

De forma predeterminada, Divi mostrará la paginación, así que deje esa opción configurada en SÍ.

Debería ver la paginación en la parte inferior derecha de la cartera.

Para diseñar la paginación, vaya a la pestaña de diseño y abra la palanca de texto de paginación para ver todas las opciones disponibles. Actualice lo siguiente:

Diseño: cuadrícula
Fuente de paginación: Source Sans Pro
Estilo de fuente de paginación: TT
Alineación del texto de paginación: centro
Color del texto de paginación: #cccccc
Tamaño del texto de paginación: 4vw (escritorio), 38px (tableta y teléfono)
Espaciado de letras de paginación: 1vw
Altura de la línea de paginación: 2em

Luego haga clic en la pestaña avanzada y agregue el siguiente fragmento de CSS en la página activa de paginación :

color: #0096eb !important;

Al hacer que el texto sea más grande con una altura de línea más grande, hay más espacio para hacer clic para los usuarios. Cambiar la alineación al centro y agregar un poco de espacio entre letras ayuda a que la paginación sea más notoria. Y el color del texto de paginación personalizado con el color de la página activa en contraste ayuda al usuario a saber en qué página se encuentra.

Otros fragmentos de CSS rápidos

Aquí hay algunos fragmentos de CSS rápidos y fáciles para cambiar el diseño de paginación.

Para eliminar la línea de borde predeterminada que se encuentra directamente encima de la paginación, puede ingresar el siguiente CSS en Paginación de la cartera:

border: none;

Para darle a su paginación un borde completo, puede ingresar el siguiente CSS en Paginación de la cartera:

border: 2px solid #dddddd;

Para darle a la paginación un color de fondo, puede ingresar el siguiente CSS en Paginación de la cartera:

background: #333333;

Funciona también para el módulo de galería

Esta misma configuración de diseño también funcionará para el Módulo Galería. De hecho, puede copiar los estilos de texto de paginación del módulo de cartera filtrable y pegarlos en un módulo de galería. Solo asegúrese de transferir también cualquier fragmento de CSS.

Estilos de paginación avanzados para el módulo de galería y el módulo de cartera filtrable

Si desea obtener un diseño más avanzado para la paginación de sus módulos Filterable Portfolio y Gallery, puede usar CSS personalizado más avanzado. Lo que me gusta de este ejemplo en particular es que el CSS personalizado funciona en conjunto con la configuración incorporada del módulo.

Para demostrarlo, usemos el Portafolio filtrable nuevamente. Esta vez, actualice las opciones de diseño con lo siguiente:

Diseño: cuadrícula
Tamaño del texto de paginación: 16px
Altura de la línea de paginación: 2.5em

En la pestaña avanzada, agregue la siguiente clase CSS:

Clase CSS: pagi-space

Esto permitirá que nuestro CSS se aplique solo a este módulo.

Ahora guarde su configuración y abra el modo emergente Configuración de página. En la pestaña avanzada, agregue el siguiente código CSS dentro del cuadro CSS personalizado.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Con el código en su lugar, puede ver que la paginación ahora tiene más espacio en el que se puede hacer clic para cada uno de los enlaces de la página. Y los enlaces también tienen colores de fondo agregados para que se parezcan más a botones en los que se puede hacer clic. También se agrega un borde sutil a cada uno de los enlaces al pasar el mouse. El enlace de la página activa se destaca con un fondo oscuro contrastante con un color de texto más claro.

Este código aplicará estilo a la paginación tanto para el módulo de cartera filtrable como para el módulo de galería. Solo asegúrese de agregar la clase CSS "pagi-space" al módulo para que surta efecto.

Aquí está el resultado en el módulo de cartera filtrable.

Módulo de blog de estilo y paginación del módulo de cartera

El módulo de blog y el módulo de cartera heredan la paginación predeterminada de WordPress que le permite navegar a través de su archivo de publicaciones con un enlace a "Entradas más antiguas" y un enlace a "Entradas siguientes".

Así es como se ve la paginación predeterminada en la página de archivo del blog en Divi Theme:

Esta misma paginación es utilizada por el módulo de blog y el módulo de cartera.

Si está utilizando el módulo de blog (o módulo de cartera), puede diseñar el texto de paginación utilizando la configuración incorporada.

Esta es una solución simple y elegante para la mayoría de los casos. Sin embargo, si está buscando una paginación más compleja para reemplazar la paginación predeterminada de Divi / WordPress, existe una solución que es tan fácil que puede sorprenderlo.

Agregar paginación compleja a Divi usando el complemento WP-PageNavi

Si desea una paginación más avanzada para todo su tema Divi, incluido el módulo de blog y el módulo de cartera, puede reemplazar la paginación predeterminada de WordPress con una diferente utilizando el popular complemento llamado WP-PageNavi. Este complemento funciona bien con Divi. El diseño es básico pero se puede personalizar fácilmente con CSS.

Agregar el complemento a Divi

Si aún no lo ha hecho, siga adelante e instale el complemento como se describe en la sección "Comenzando" en la parte superior de la publicación. Una vez que el complemento está instalado y activo, la nueva forma de paginación se mostrará automáticamente en todo su tema.

También afectará al módulo de blog y al módulo de cartera.

Configuración del complemento

Puede ubicar la configuración del complemento desde su panel de WordPress navegando a Configuración> WP-PageNavi.

La configuración es principalmente para personalizar la funcionalidad y el contenido de texto que se muestra. Sin embargo, si desea modificar el estilo de la paginación, deberá utilizar CSS personalizado.

Diseñar la paginación de WP-PageNavi con CSS personalizado

Dado que probablemente querrá diseñar la paginación para todo el tema, tiene más sentido agregar el CSS al Personalizador de temas o al archivo style.css de su tema secundario. Continúe y coloque el siguiente CSS en el cuadro CSS adicional del Personalizador de temas:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Aquí esta el resultado final.

Aplicar estilo a WP-PageNavi en el módulo de blog y en el módulo de cartera

Como se mencionó anteriormente, el módulo de blog y el módulo de cartera heredan la navegación de página predeterminada de WordPress. Dado que esto ha sido reemplazado por la nueva paginación compleja de WP-PageNavi, los módulos también mostrarán esta nueva paginación.

Puede usar las opciones de diseño de texto de paginación integradas para agregar más estilo a la paginación.

Solo tenga en cuenta que es posible que algunas de las opciones no funcionen como se esperaba con CSS personalizado externo implementado.

Pensamientos finales

La paginación no tiene que seguir siendo una ocurrencia tardía al construir un sitio web en Divi. Hay algunas opciones integradas útiles para ayudar con los módulos que usan la paginación. Y con CSS personalizado puedes crear cualquier estilo que desees. El complemento WP-PageNavi es una solución elegante para agregar una paginación compleja en todo el tema Divi. No solo funciona a la perfección con Divi, sino que le brinda opciones adicionales que puede personalizar fácilmente. Diseñar la paginación de WP-PageNavi requiere algo de CSS, pero es de esperar que la plantilla utilizada en este artículo lo ponga en el camino correcto.

Los diseños de ejemplo en esta publicación fueron deliberadamente simples.

Espero tener noticias tuyas en los comentarios.

¡Salud!