Cómo usar el módulo de bucle y paginación de Divi 5

Las listas estáticas de contenido de publicaciones están bien si muestra un conjunto seleccionado y limitado de esas publicaciones. Pero a menudo, desea que los usuarios accedan a más contenido que el de su bucle original. Desea decidir cuánta carga de contenido inicialmente y dar a los lectores una forma clara de moverse entre lotes. Ahí es donde el buque de bucle de Divi 5 y el módulo de paginación son un par perfecto.

Esta publicación lo guiará a través de cómo funciona cada uno y luego le mostrará cómo conectarlos. Al final, sabrá cómo construir diseños en bucle con una paginación adecuada.

Conoce al bucle de bucle de Divi 5

The Loop Builder es una de las mayores actualizaciones de Divi 5. Te da libertad que el antiguo módulo de blog nunca podría. Cualquier elemento puede convertirse en un contenedor "en bucle". Eso significa que Divi lo repetirá automáticamente para cada publicación, producto o tipo de publicación personalizado que coincida con su consulta.

En lugar de estar atascado con una lista prediseñada de publicaciones, diseña un elemento de "plantilla" como bucle. Divi usa eso para cada resultado, intercambiando contenido dinámico desde la consulta del bucle. Esto podría ser:

• Títulos extraídos de los datos posteriores
• Imágenes destacadas
• Campos personalizados
• Enlaces a publicaciones o productos completos

Puede usar cualquier módulo para mostrar estos datos, no solo uno específico del blog. ¿Quieres un módulo de propaganda elegante que muestra tus últimos listados de cursos? Hecho. ¿Necesita un diseño de tarjeta de producto personalizado para artículos de WooCommerce? También hecho.

Es flexible porque estás construyendo el diseño y la estructura de contenido tú mismo. Divi maneja la repetición.

Cambiar del módulo de blog al bucle de bucle significa pasar de una plantilla estándar a un sistema de diseño totalmente personalizable. Realmente disfruté construyendo con él, ¡y sé que tú también lo harás!

Cumplir con el módulo de paginación

La paginación es una forma elegante de decir "divide los resultados en páginas". En lugar de descargar todos los elementos en una sola página, los divide en conjuntos más pequeños. Eso ayuda con:

• Tiempos de carga de la página
• Legibilidad
• Escaneo

El módulo de paginación en Divi 5 hace exactamente eso, pero con cierta integración inteligente. No está vinculado solo a publicaciones de blog. En su lugar, puede conectarse a cualquier bucle que haya construido en la página.

Funciona agregando dos elementos de navegación, los enlaces previos y próximos, cuyas etiquetas puede personalizar. Si hay elementos más antiguos más allá del conjunto actual, "más antiguo" (o su texto elegido) estará activo. Si hay elementos más nuevos, "más nuevo" estará activo.

Construir un diseño de bucle + paginación

Ejecutemos la configuración completa. Este ejemplo supone que desea un bucle personalizado con paginación debajo. Aquí está el diseño flexible que creé que mostrará nuestro bucle. Puede descargar el diseño completamente construido a continuación.

Tenga en cuenta que la tarjeta se establece en ~ 50% de ancho y crecimiento flexible, por lo que cuando una tarjeta en bucle está en una fila flexible por sí misma, se volverá a ancho completo dentro de su contenedor.

Paso 1: crea el contenedor de bucle

Agregue una sección a su página. Dentro de él, agregue los módulos que desea repetir. Esto podría ser un solo módulo (como una propaganda) o un diseño más complejo de módulos múltiples en una columna o grupo.

Con su contenedor seleccionado, abra su configuración y habilite la opción de bucle .

Elija su fuente de datos. Esta es la "consulta" que se ejecutará.

Primero, elija el tipo de consulta. Dependiendo de la configuración de su sitio web, puede ver estas opciones:

• Tipo de publicación (como las publicaciones de su blog o tipos de publicaciones personalizadas como 'proyectos')
• Términos (categorías y taxonomías)
• Usuarios (devuelva una lista de usuarios del sitio, como autores)
• Campo de repetición (un campo personalizado creado por un complemento para crear un bucle dentro de un bucle)

A continuación, dependiendo del tipo de consulta que elija anteriormente, tendrá la oportunidad de ser más específico. Seleccionar "Tipo de publicación" podría permitirle usar tipos de publicación como:

• Publicaciones de blog
• Proyectos
• Productos
• Cualquiera que sea el CPT que se haya construido a medida para usted

A partir de ahí, puede obtener aún más específico con lo que debería aparecer en su bucle. Puede:

• Incluya elementos con una categoría o etiqueta específica
• Excluir elementos con una categoría o etiqueta específica
• Incluir elementos específicos (por identificación posterior)
• Excluir elementos específicos (por identificación posterior)
• Cree su propia consulta meta (útil para crear inclusiones/exclusiones basadas en datos de campo personalizados)
• Establezca el orden de consultas coincidentes (como alfabética y descendente)
• El valor de los elementos por página controla cuántos aparecen en el bucle
• Post Offset, en caso de que desee comenzar su bucle más adelante en el ciclo
• Ignorar publicaciones pegajosas

Así es como nuestro ejemplo mira este punto. Creamos el bucle y lo asignamos a nuestro tipo de publicación de blog. Establecí el límite de visualización en 3.

Ahora, debemos asignar los diversos campos de texto y elementos que queremos hipervínculo con contenido de bucle dinámico.

Paso 2: Agregar contenido dinámico dentro del bucle

Nuestra siguiente tarea es hacer clic en cada uno de los módulos del bucle y reemplazar texto o imágenes estáticas con campos de contenido dinámico. Por ejemplo:

• En un módulo de texto, elija "Publicar título" del selector de contenido dinámico
• En un módulo de imagen, puede elegir "Imagen destacada"
• En un módulo de botón, configure el enlace a "Publicar URL"
• En todo el contenedor en bucle, también configure el enlace a "Post URL"

Esto le dice a Divi que extraiga el contenido correcto para cada elemento en bucle.

Recuerde, cualquier cosa dentro del bucle se repite para cada resultado. Mantenga el contenido sin bucle (como encabezados, anuncios o CTA) fuera de él. Si tiene un contenido en el bucle que no está conectado con datos dinámicos, cada elemento en el bucle mostrará que AS-IS (como el texto "Leer →" en la parte inferior derecha de la tarjeta de ejemplo).

Paso 3: Agregue el módulo de paginación

Debajo de su sección de bucle, agregue una nueva fila. Inserte el módulo de paginación . En la configuración del módulo, ubique el campo de destino . Úselo para seleccionar su bucle en una lista desplegable de bucles en la página. Esto vincula los controles de paginación a ese bucle específico. Consejo profesional: si usa etiquetas de administración, es más fácil seleccionar el objetivo correcto. Esto también se aplica a las interacciones.

Personaliza las etiquetas para "anterior" y "siguiente". Puede usar "publicaciones más antiguas / publicaciones más recientes", "retroceder / avanzar", o incluso "← / →" para un estilo mínimo.

La clave es que el módulo de paginación debe sentarse fuera del bucle que controla. Eso y asegurarse de que esté asignado al objetivo correcto (si tiene múltiples bucles en la misma página/plantilla).

Paso 4: prueba la interacción

Guarde su página y visitela. Haga clic en "Mayor" para ir al siguiente conjunto de elementos de bucle.

Tenga en cuenta cómo cambia la URL con un parámetro de consulta que identifica la página del bucle. También tenga en cuenta que solo el contenido de bucle baraja/cambia: los cabezas, los pies y las barras laterales deben permanecer igual.

Obtenga este diseño de bucle

¿Quieres diseccionar este diseño y ver cómo se construyen las cosas para ti? ¡Descárguelo aquí!

Una vez que descomprima su carpeta, navegue a su biblioteca Divi para cargar el archivo. Una vez cargado, podrá agregar la sección a cualquier página en la que esté trabajando.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

Disfruta de un divi más dinámico

El módulo de bucle y el módulo de paginación de Divi 5 son un gran salto hacia adelante en flexibilidad. The Loop Builder lo libera de los diseños rígidos de los módulos más antiguos, lo que le permite construir sus propios diseños repetidos con contenido dinámico. El módulo de paginación mantiene esos diseños rápidos y manejables al romperlos en fragmentos fáciles de usar.

El buque de bucle y el módulo de paginación, junto con otras nuevas características de Divi 5 (Flexbox, Interacciones, controles de color HSL), es tan potente como siempre. Puedes hacer algunos diseños de página increíbles con todo esto.

Una vez que haya creado su primer bucle paginado, verá lo fácil que es reutilizar el enfoque en blogs, cuadrículas de productos, carteras o cualquier tipo de contenido que necesite organizar.