La paginación es una excelente manera de mejorar la navegación de su sitio web mientras mantiene el contenido de su página simple. En lugar de mostrar docenas de publicaciones de blog en una página, puede mostrar algunas y proporcionar un enlace para que el usuario pueda ver más si así lo desea. La paginación es fácil de agregar con Divi . En este artículo, veremos cómo agregar paginación a su módulo Divi Blog. También veremos cómo diseñarlo para que se ajuste a su diseño.
Empecemos.
La paginación divide el contenido, como el feed del blog, en páginas. En lugar de mostrar todo el contenido a la vez, el usuario puede navegar entre las páginas utilizando los enlaces de paginación.
En el módulo Divi Blog, este es un conjunto de enlaces que aparecen debajo de la fuente del Blog que permite al usuario navegar al conjunto anterior o siguiente de publicaciones del blog. Esto le permite proporcionar una manera fácil para que los usuarios vean sus publicaciones sin tener que colocarlas todas en la pantalla a la vez.
La paginación funciona en ambas direcciones, por lo que los usuarios pueden ver las publicaciones anteriores y la publicación siguiente. La paginación está disponible en el módulo Blog. Este módulo puede mostrar publicaciones de diferentes maneras, como una publicación destacada. La paginación solo debe usarse en el módulo Blog cuando muestra un feed, ya sean publicaciones, proyectos, etc. Podemos ver por qué si miramos una página con múltiples módulos Blog.
Paginación con Múltiples Módulos
El ejemplo anterior es la página de blog del Paquete de diseño de pisos . Este diseño incluye cuatro elementos de blog. El primero es un módulo Blog Slider. Los siguientes tres son módulos de Blog. Los dos primeros crean una sección de héroe. Estos no muestran un enlace de paginación. El cuarto módulo Blog muestra un enlace de paginación. Este enlace solo funciona para este módulo de Blog.
La paginación solo cambia las publicaciones para el módulo de Blog específico. Si está utilizando varios módulos de Blog en la página, los demás seguirán siendo los mismos.
Algunos usuarios pueden sentirse confundidos por esto al principio. Podrían esperar que toda la página cambie. Si esos módulos se ven lo suficientemente diferentes entre sí, se darán cuenta de lo que está sucediendo y tendrá sentido para ellos. En otras palabras, será obvio que la sección principal no se ve afectada cuando cambian las publicaciones en la sección de noticias del blog. Están en diferentes secciones del diseño.
En este ejemplo, he agregado paginación a cada uno de los módulos Blog. La página ahora es más confusa y la UX del diseño es terrible. Cada módulo mostraría las mismas publicaciones de todos modos, por lo que es mejor limitar la paginación al feed principal del blog. La única vez que la paginación funcionaría con varios módulos de Blog es si cada uno mostrara una categoría diferente, como el diseño de una revista.
La paginación dentro del módulo Blog es diferente del módulo Navegación de publicaciones. Realizan funciones similares pero diferentes y no son intercambiables.
La paginación está disponible desde el módulo Blog y tiene algunas configuraciones simples. El módulo Navegación de publicaciones navega de una publicación de blog a otra. Si bien tiene algunas opciones interesantes, está destinado a ser utilizado en publicaciones de blog o plantillas de publicaciones de blog en lugar de la página del blog.
Para obtener más información sobre el módulo de navegación de publicaciones, consulte el artículo Cómo y dónde incluir la navegación de publicaciones en su plantilla de publicación de blog Divi .
Ahora, veamos cómo habilitar y deshabilitar la paginación dentro del módulo Divi Blog.
Cómo habilitar la paginación
Suscríbete a nuestro canal de Youtube
Para habilitar la paginación, vaya a la página con su módulo Blog y habilite Visual Builder en la parte superior de la pantalla. Desplácese hasta el módulo de su blog y seleccione el engranaje para abrir su configuración .
En la pestaña Contenido y desplácese hacia abajo hasta Elementos . Aquí, verá varias cosas que puede habilitar o deshabilitar. Vaya al último de la lista, Mostrar paginación , y haga clic en Sí .
- Mostrar paginación: Sí
A continuación, deberá diseñarlo. Para nuestros ejemplos, lo diseñaremos para que coincida con el paquete de diseño de pisos.
Cómo dar estilo al texto de paginación
En la configuración del módulo Blog, seleccione la pestaña Diseño y desplácese hacia abajo hasta Paginación . Para este ejemplo, dejaremos la fuente en la configuración predeterminada. Seleccione Negrita para el Grosor y Subrayado para el Estilo. Cambie el color del texto a #7c8b56 . No necesitaremos ajustar el Color de subrayado porque seguirá el Color de fuente.
- Fuente: Predeterminada
- Peso: Negrita
- Estilo: Subrayado
- Color: #7c8b56
Cambiaremos el tamaño de fuente para cada tipo de pantalla por separado. Primero, coloque el cursor sobre el título Tamaño del texto de paginación y haga clic en el icono Pantalla. Esto abre las opciones de la pantalla. Seleccione Escritorio y configúrelo en 20px .
- Tamaño de texto de paginación de escritorio: 20px
A continuación, seleccione el icono de la tableta y establezca el tamaño en 18 px .
- Tamaño del texto de paginación de la tableta: 18 px
Ahora, seleccione el icono del teléfono y cambie el tamaño de fuente a 16 px .
- Tamaño del texto de paginación del teléfono: 16px
Por último, cambie la Altura de la línea a 1,4 em . Ahora, cierre el módulo, guarde la página y haga clic en Salir de Visual Builder en la parte superior de la pantalla.
- Altura de la línea: 1,4 em
Esto es todo lo que tenemos que hacer para diseñar la paginación para que coincida con nuestro diseño. Hay muchas formas de diseñar el texto de paginación, por lo que veremos algunos ejemplos más. Usaremos el mismo diseño y elementos de estilo, pero haremos algunos cambios.
Alternativas de estilo de texto de paginación
Para este, solo he hecho algunos cambios menores. El estilo de fuente es cursiva. Cambié el Color de subrayado a #2f5349 para que coincida con el fondo en el pie de página de la página. Esto hace que se destaque del texto. El tamaño del texto ahora es de 22 px y he agregado 2 px de espacio entre letras . Todo lo demás es igual que el ejemplo de estilo anterior.
- Estilo: cursiva, subrayado
- Color de subrayado: #2f5349
- Tamaño de texto de escritorio: 22px
- Espaciado entre letras: 2px
Para este, configuré el Grosor en Semi negrita, el Estilo en TT, el Color de fuente en #2f5349, el Tamaño en 22 px, el Espaciado entre letras en 1 px y la Altura de línea en 1,7 em. Esto le da a la paginación una sensación diferente a la de los ejemplos anteriores.
- Peso: semi negrita
- Estilo: TT
- Color de fuente: #2f5349
- Tamaño de texto de escritorio: 22px
- Espaciado entre letras: 1px
- Altura de la línea: 1,7 em
Para este ejemplo, he cambiado el Grosor de fuente a Negrita. El estilo ahora es de mayúsculas grandes y pequeñas. He usado el gris oscuro, #28292d, de la CTA en el pie de página como Color de fuente . También cambié el Tamaño a 20 px, el Espaciado entre letras a 2 px y la Altura de línea a 2 em. Peso: Negrita
- Estilo: Gorras grandes y pequeñas
- Color de fuente: #28292d
- Tamaño de texto de escritorio: 20px
- Espaciado entre letras: 2px
- Altura de línea: 2em
Estos pequeños cambios pueden tener un gran impacto en el diseño. Es una buena idea probar diferentes diseños y ver cuál funciona mejor para usted.
pensamientos finales
Ese es nuestro vistazo a cómo agregar paginación a su módulo Divi Blog. La paginación es una excelente manera de mantener la página limpia. Puede mostrar una pequeña parte de las publicaciones de su blog y los usuarios tienen fácil acceso a más contenido si así lo desean. Aunque los enlaces son simples, puede diseñarlos para que coincidan con el resto de su diseño.
Queremos escuchar de ti. ¿Ha habilitado la paginación en su módulo Divi Blog? Cuéntanoslo en los comentarios.