Desea mostrar contenido dinámico como publicaciones de blog, productos o tipos de publicaciones personalizadas en diseños totalmente personalizados, ¿sin tocar una línea de código? El módulo de bucle en Beaver Builder lo hace posible.

Introducido en Beaver Themer 1.5 y Beaver Builder 2.9, el módulo de bucle es una herramienta poderosa que le permite diseñar diseños repetibles utilizando módulos estándar de Beaver Builder. Ya sea que esté construyendo un blog, cartera, listado de eventos o tienda de WooCommerce, este módulo le brinda un control de diseño completo con contenido dinámico en su núcleo.

En esta guía, desglosaremos cómo usar el módulo de bucle para construir diseños modernos y dinámicos que mejoren el diseño, el rendimiento y la flexibilidad de su sitio.

¿Cuál es el módulo de bucle?

El módulo de bucle es un contenedor flexible que se dispara a través del contenido consultado y lo muestra utilizando un diseño que crea. En lugar de confiar en las plantillas predeterminadas de WordPress, puede construir sus propios diseños personalizados: completas con módulos, conexiones de campo y lógica condicional.

El módulo de bucle no se limita a publicaciones de blog o tipos de publicaciones personalizadas: puede manejar una amplia gama de contenido dinámico. Aquí hay algunas formas potentes en que puede usarlo para crear diseños personalizados y mejorar su sitio:

• Categorías o etiquetas de WooCommerce : muestre categorías de productos relacionadas o etiquetas en páginas de productos individuales mediante el uso de la fuente de consulta de taxonomías.
• Grid de contenido personalizado : muestre contenido dinámico como miembros del equipo o testimonios utilizando la fuente de consulta de repetidor ACF en páginas como "conocer al equipo" o listados de servicios.
• Publicaciones relacionadas : presente contenido de blog relevante en páginas de publicaciones individuales con la fuente de consulta de relaciones ACF, ayudando a aumentar el compromiso y reducir las tasas de rebote.

Cada elemento en el bucle utiliza su diseño personalizado y extrae datos dinámicos, como el título de la publicación, la imagen destacada, el extracto y más.

Características clave del módulo de bucle

El módulo de bucle está lleno de capacidades que lo hacen ideal para construir páginas flexibles y ricas en contenido:

• Consulta contenido dinámico de cualquier tipo de publicación (estándar o personalizado)
• Use cualquier módulo de Beaver Builder dentro del diseño del bucle
• Connect Fields dinámicamente (por ejemplo, título, imagen destacada, post meta)
• Elija entre múltiples tipos de diseño como cuadrícula, lista o carrusel
• Agregue filtros y paginación para mejorar la experiencia del usuario

Esta combinación de personalización y automatización le permite crear diseños avanzados sin escribir HTML, PHP o CSS.

Cómo construir un bucle personalizado

Crear un diseño de contenido personalizado con el módulo de bucle es simple, flexible y no requiere código. Ya sea que desee comenzar con un diseño listo o construir el suyo desde cero, el módulo de bucle le brinda control total sobre cómo se muestra su contenido dinámico.

Opciones de diseño preestablecidos del módulo de bucle

Cuando primero arrastre el módulo de bucle a su página, se le pedirá que elija entre los siguientes diseños preestablecidos: lista, columnas, categorías y categorías de productos.

Los diseños preestablecidos le brindan una ventaja al ofrecer módulos preestablecidos que puede personalizar completamente. Ajuste la configuración de bucle para que se ajuste, reorganizar o eliminar los módulos existentes, y agregue otros nuevos para ajustar su diseño. Estos diseños preparados lo ayudan a crear contenido pulido y receptivo pantallas más rápido.

Construir desde cero con un diseño en blanco

¿Prefiere crear algo totalmente personalizado? Elija la opción de diseño en blanco y siga estos pasos:

1. Agregue el módulo de bucle a su página o publique en el editor Beaver Builder.
   
2. Seleccione el diseño en blanco para comenzar con un contenedor de bucle vacío.
   
3. Configure la configuración de bucle para definir qué contenido desea mostrar, como publicaciones de blog, productos de WooCommerce, campos de repetidor ACF o tipos de publicaciones personalizadas.
   
4. Arrastre los módulos en el contenedor de bucle para construir su diseño desde cero. Agregue los módulos de Beaver Builder que necesite, como encabezados, fotos, iconos, botones y más.
   
5. Use conexiones de campo para extraer contenido dinámico como títulos, imágenes, precios o campos personalizados para cada elemento de bucle.
   
6. Organice y diseñe sus módulos con las herramientas de arrastrar y soltar de Beaver Builder.

Esta configuración funciona muy bien para usuarios o diseñadores avanzados que desean un control total.
Úselo para crear diseños de blog personalizados, cuadrículas de productos o directorios de equipo, no se requiere código.

Use el módulo de caja para el control de diseño

El módulo de caja es un compañero esencial para el módulo de bucle cuando se trata de precisión de diseño y flexibilidad de estilo.

• Envuelva el módulo de bucle dentro de un módulo de caja para administrar el ancho del contenedor externo, el relleno, el margen y el estilo de fondo. Esto le brinda control total sobre cómo se encuentra su contenido en bucle dentro del diseño general de la página.
• Nida un módulo de caja dentro del bucle para agrupar el contenido interno de cada elemento de bucle. Esta configuración le permite aprovechar técnicas de diseño avanzadas como CSS Grid o Flexbox . Por ejemplo, puede crear un diseño de dos columnas dentro de cada elemento de bucle. Coloque una imagen a la izquierda y texto a la derecha, con un control completo sobre el espacio y la alineación.

Usar el módulo de caja estratégicamente ayuda a mantener diseños limpios y receptivos al tiempo que mejora la estructura visual de su contenido dinámico.

Configuración de consulta: ¿Qué contenido mostrará?

La pestaña de contenido en el módulo de bucle le permite controlar cómo se consulta y se muestra el contenido de bucle, como:

• Elija el tipo de publicación (publicaciones, páginas, CPT, productos, etc.)
• Filtrar por taxonomía, categoría, etiquetas o autor
• Mostrar contenido basado en el estado o la fecha de la publicación
• Establecer compensaciones, ordenar orden y publicar límites

Esto incluye fuente de consulta, número de elementos para mostrar, pedidos y opciones de filtro avanzado.

Paginación

La pestaña Pagination le permite controlar cómo se divide y se muestra el contenido en varias páginas: ideal para mejorar la navegación y la experiencia del usuario.

• Números : Muestra enlaces numerados debajo de sus publicaciones. Al hacer clic en un número, carga una nueva página con el conjunto correspondiente de publicaciones.
• Descripción : carga automáticamente publicaciones adicionales a medida que el usuario se desplaza, manteniendo el contenido en una sola página.
• Ninguno : deshabilita la paginación. Use esta opción para mostrar un número limitado de publicaciones, como las últimas tres, sin controles de navegación.
• Publicaciones por página : Establece cuántos elementos aparecen por página. El valor predeterminado es 10.

Estas opciones ayudan a adaptar la entrega de contenido a su diseño y objetivos de interacción del usuario.

Datos dinámicos con conexiones de campo

Dentro de su diseño de bucle, puede usar conexiones de campo para extraer dinámicamente datos de publicación como:

• Post título
• Imagen destacada
• Extracto o contenido completo
• Campos personalizados
• Autor, fecha, categoría, etiquetas

Cualquier módulo que admita el contenido dinámico (como encabezado, foto, botón, HTML, etc.) se puede conectar a los datos posteriores.

Estilo avanzado y lógica condicional

¿Desea peinar diferentes tipos de publicaciones de manera diferente o mostrar/ocultar elementos basados ​​en condiciones? El módulo de bucle admite la lógica condicional y las clases CSS personalizadas .

Por ejemplo, podrías:

• Ocultar botones si un campo personalizado está vacío
• Agregar insignias para publicaciones destacadas
• Aplicar diferentes colores o estilos basados ​​en la categoría posterior

Esto le permite ajustar la experiencia del usuario y mantener una marca constante en todo su contenido.

Casos de uso del módulo de bucle del mundo real

El módulo de bucle en Beaver Builder es increíblemente versátil, lo que le permite mostrar contenido dinámico en diseños que coinciden con sus necesidades de diseño. Aquí hay algunas formas poderosas de usarlo:

• Archivos de blog: cree una cuadrícula o lista visualmente atractiva de sus últimas publicaciones de blog con imágenes y extractos destacados.
• Productos de WooCommerce: exhibir productos de WooCommerce en una cuadrícula personalizable con precios dinámicos, imágenes y botones de suma a carto.
• Showcase de cartera: resalte sus proyectos o estudios de casos con diseños flexibles que reflejen el estilo de su marca.
• Testimonios: Muestre testimonios de clientes desde un tipo de publicación personalizado y los diseñe para que coincidan con el diseño de su sitio web.
• Listados de eventos: enumere los próximos eventos o seminarios web cronológicamente, con fechas, ubicaciones y descripciones de eventos.
• Miembros del equipo: presente a su equipo con fotos, nombres, títulos y BIOS; enlace cada elemento a una página de perfil detallada.
• Listados de bienes raíces: presentes listados de bienes raíces con imágenes de propiedades, precios y detalles clave utilizando un tipo de publicación personalizado.
• Catálogo de cursos: muestre un catálogo de cursos o talleres en línea, completos con títulos, descripciones y enlaces de inscripción.
• Listados de trabajo: Cree un tablero de trabajo personalizado con listados dinámicos que incluyan títulos, ubicaciones y breves resúmenes de roles.
• Índice de recetas: presenta una colección de recetas con imágenes, títulos y descripciones: ideal para bloggers de alimentos.

Estos casos de uso demuestran la versatilidad del módulo de bucle en Beaver Builder. Se puede utilizar en varias industrias y sitios web, ayudándole a crear diseños de contenido dinámicos, atractivos y personalizados.

Pensamientos finales: ¿Por qué usar el módulo de bucle?

El módulo de bucle en Beaver Builder le brinda el poder de crear diseños dinámicos completamente personalizados con facilidad. Ya sea que esté construyendo un blog, una tienda o un directorio de contenido complejo, este módulo le permite controlar cómo se muestran sus datos, mientras mantiene su flujo de trabajo visual y sin código.

Si te tomas en serio la construcción de sitios modernos de WordPress personalizados con Beaver Builder, el módulo de bucle es imprescindible en tu juego de herramientas. Explore la documentación del módulo de bucle completo aquí.