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 varias 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 múltiples módulos que incluyen paginación (como el módulo de la galería) que se pueden diseñar usando configuraciones integradas. Algunos de estos módulos (como blog y portafolio) 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 una más compleja. Luego puede diseñarlo con CSS como lo necesite.
En este tutorial, te mostraré cómo diseñar la paginación en Divi. Esto es lo que vamos a repasar:
- Cosas a tener en cuenta al diseñar la paginación en Divi
- Diseño del módulo de galería 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
- Paginación del módulo de blog de estilo y del módulo de cartera
- Agregar paginación compleja a Divi usando el complemento WP-PageNavi
- Dar estilo a la paginación de WP-PageNavi con CSS personalizado
Empecemos.
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 le 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 de cartera (o cartera 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 desea utilizar el complemento WP-PageNavi , deberá instalar y activar el complemento. Este es un complemento gratuito que se puede descargar desde el Directorio de WordPress desde el Tablero de WordPress de su sitio. Simplemente vaya a Complemento > Agregar nuevo y busque WP-PageNavi.
Una vez que tenga algún contenido simulado en su lugar, estará listo para crear una nueva página. Desde su tablero de WordPress, vaya a Páginas > Agregar nuevo. Dale un título a tu página e implementa Divi Builder. Seleccione la opción de «Construir desde cero». Luego haga clic en Build on the Front End.
Ahora está listo para comenzar a probar algunos diseños de paginación.
Cosas a tener en cuenta al diseñar la paginación en Divi
En términos generales, probablemente no quieras volverte 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 podría considerar al diseñar la paginación en Divi.
Fuente de paginación
La paginación es un excelente lugar para separarse de 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, debe asegurarse de que la fuente muestre todos los números con la misma altura y anchura (lo que los expertos en tipografía llaman forrado 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 con 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 entre 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 buen elemento de diseño 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, al centro o a la 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. Por defecto, esto será bastante pequeño. Puede aumentar el espacio en el que se puede hacer clic utilizando un 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 en el enlace de paginación y hacer que los usuarios lo noten más. Me gusta usar una unidad de longitud vw para texto de paginación más grande para que se adapte bien al navegador y al contenido.
Altura de 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 pueda 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.
Diseño del módulo de galería Divi y paginación del módulo de cartera filtrable
Con Divi Builder activo en una nueva página, 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 12-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 deja esa opción configurada en SÍ.
Debería ver la paginación en la parte inferior derecha del portafolio.
Para aplicar estilo a la paginación, vaya a la pestaña de diseño y abra la opción Texto de paginación para ver todas las opciones disponibles. Actualice lo siguiente:
Diseño:
Fuente de paginación de cuadrícula: Fuente Sans Pro
Estilo de fuente de paginación: TT
Alineación de texto de paginación: Color de texto de paginación central
: #cccccc
Tamaño de texto de paginación: 4vw (escritorio), 38px (tableta y teléfono)
Espaciado entre letras de paginación: 1vw
Altura de línea de paginación: 2em
Luego haga clic en la pestaña avanzada y agregue el siguiente fragmento de CSS en Página activa de paginación :
|
01
|
color: #0096eb !important; |
Al agrandar el texto con una altura de línea más grande, hay más espacio en el que los usuarios pueden hacer clic. Cambiar la alineación al centro y agregar un pequeño 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 rápidos de CSS
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 cartera:
|
01
|
border: none; |
Para darle a su paginación un borde completo, puede ingresar el siguiente CSS en Paginación de cartera:
|
01
|
border: 2px solid #dddddd; |
Para darle un color de fondo a la paginación, puede ingresar el siguiente CSS en Paginación de la cartera:
|
01
|
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 algunos CSS personalizados más avanzados. Lo que me gusta de este ejemplo en particular es que el CSS personalizado funciona junto con la configuración integrada 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
Paginación Tamaño del texto: 16px
Altura de la línea de paginación: 2.5em
En la pestaña avanzada, agregue la siguiente clase CSS:
Clase CSS: pagi-espacio
Esto permitirá que nuestro CSS se aplique solo a este módulo.
Ahora guarde su configuración y abra el modal emergente Configuración de página. En la pestaña avanzada, agregue el siguiente código CSS dentro del cuadro CSS personalizado.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
.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 vean más como 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 que contrasta con un color de texto más claro.
Este código diseñará 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.
Paginación del módulo de blog de estilo y 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 anteriores» y un enlace a «Entradas siguientes».
Así es como se ve la paginación predeterminada en la página de archivo del blog en el tema Divi:
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 el módulo de cartera), puede diseñar el texto de paginación utilizando la configuración integrada.
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.
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 complemento popular llamado WP-PageNavi. Este complemento funciona bien con Divi. El diseño es básico pero se puede personalizar fácilmente usando CSS.
Agregar el complemento a Divi
Si aún no lo ha hecho, continúe e instale el complemento como se describe en la sección «Primeros pasos» en la parte superior de la publicación. Una vez que el complemento esté instalado y activo, la nueva forma de paginación aparecerá 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 diseñar la paginación, deberá usar algún CSS personalizado.
Dado que probablemente querrá diseñar la paginación de 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
|
/*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.
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 se reemplazó con 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 incorporadas para agregar más estilo a la paginación.
Solo tenga en cuenta que algunas de las opciones pueden no funcionar como se espera con CSS personalizado externo en su lugar.
Pensamientos finales
La paginación no tiene que seguir siendo una idea de último momento al crear un sitio web en Divi. Hay algunas opciones integradas útiles para ayudar con los módulos que usan paginación. Y con algo de CSS personalizado puedes crear cualquier estilo que quieras. 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 también le brinda opciones adicionales que puede personalizar fácilmente. Estilizar la paginación de WP-PageNavi requiere algo de CSS, pero con suerte la plantilla utilizada en este artículo lo pondrá en el camino correcto.
Los diseños de ejemplo en esta publicación fueron deliberadamente simples.
Espero escuchar de usted en los comentarios.
¡Salud!