Cómo crear un bucle de publicación de blog personalizado con bucle de bucle de Divi 5

Su marca no debe estar limitada por un diseño estático, por lo que nuestro objetivo es proporcionarle una flexibilidad completa a medida que Divi 5 continúa desarrollándose. El nuevo bucle de bucle de Divi 5 es un gran paso en esa dirección; Le permite diseñar un elemento una vez y colocarlo en cuadrículas o listas dinámicas.

En este tutorial, le mostraremos cómo configurar un bucle de publicación de blog personalizado. Diseñaremos el listado, conectaremos los campos dinámicos, estableceremos la consulta y refinaremos el diseño para una cuadrícula o lista limpia. ¡Vamos a hacerlo!

¿Qué es el bucle de bucle de Divi 5?

Con el bucle de bucle de Divi 5, diseña un único diseño de "tarjeta" en el Visual Builder utilizando tantos módulos Divi como desee, luego Divi lo tiene para cada elemento que elija mostrar.

Suscríbete a nuestro canal de YouTube

Habilite el elemento de bucle en una columna, establezca una consulta (publicaciones, tipos de publicaciones personalizados como proyectos, términos o usuarios) y mapee campos dinámicos como títulos, imágenes destacadas, categorías, campos personalizados y botones. Puede reordenar elementos, controlar el espacio y dejar que todo herede sus estilos globales.

El resultado es un listado receptivo y reutilizable que coincide con su sistema sin la necesidad de complementos adicionales o código personalizado.

Cómo funciona el bucle de bucle

Puede activar el modo de bucle en cualquier sección, fila, columna o módulo abriendo su pestaña de contenido y habilitando el bucle.

Desde ese punto, Divi repite automáticamente el elemento para cada publicación que coincida con su configuración.

Aquí es donde entra el control real. En la configuración del bucle, puede:

• Tipo de consulta: elija entre una consulta de publicación básica o una consulta meta, filtrado por categorías, etiquetas, campos personalizados u otros metadatos.
• Tipo de publicación: elija el tipo de contenido para mostrar, desde publicaciones de blog hasta productos y cualquier tipo de publicación personalizado.
• Solo incluya publicaciones con términos específicos: muestre solo publicaciones que coincidan con ciertas categorías, etiquetas u otros términos de taxonomía.
• Excluir publicaciones con términos específicos: eliminar publicaciones que coincidan con categorías, etiquetas o términos seleccionados.
• Solo incluya publicaciones específicas: seleccione publicaciones individuales para incluir.
• Excluya publicaciones específicas: oculte publicaciones individuales que no desea en el bucle.
• Meta consulta: agregue condiciones de campo personalizadas para controlar lo que aparece.
• Pedido por: Elija si los resultados se ordenan por fecha, título, pedido de menú o un valor de campo personalizado.
• Orden: Mostrar resultados en orden ascendente o descendente.
• Publicaciones por página: Decide cuántas publicaciones se muestran antes de la paginación.
• Post Offset: omita un cierto número de publicaciones desde el principio, a mano para evitar duplicados con secciones destacadas.
• Ignore las publicaciones adhesivas: elija si las publicaciones adhesivas tienen prioridad o se tratan como publicaciones normales.

Una vez que haya definido su consulta, Divi llena automáticamente cada tarjeta de publicación con el contenido correcto mientras mantiene el diseño y el estilo idéntico. Te enfocas completamente en cómo se ve la tarjeta, y Divi maneja la población y la repetición. Con todo controlado desde un solo panel, algunas configuraciones son todo lo que se necesita para mantener la lista de su blog actualizada sin ediciones manuales.

Aprenda todo sobre el bucle de bucle de Divi 5

Creación de un bucle de publicación de blog personalizado con Divi 5

La construcción de una publicación de blog personalizada con builder tiene dos partes. Primero, diseña el diseño de la tarjeta de publicación, eligiendo exactamente qué contenido aparece y cómo se ve. Luego, coloca ese diseño dentro de un bucle, por lo que Divi lo repite automáticamente para cada publicación que desee mostrar.

Lo revisaremos paso a paso, comenzando con el diseño de la tarjeta y luego configurar el bucle.

Antes de comenzar

Si se está moviendo del módulo de blog al building y ya tiene una página de listado de blog, puede omitir a la creación de su diseño de bucle. Si no, aquí está la configuración rápida:

1. Agregue una página de blog

Desde su tablero de WordPress, vaya a páginas> Agregue nuevo , asígnele "Blog" y publíquelo.

Esta página será el centro principal para sus publicaciones.

2. Establezca la página de su blog en la configuración de WordPress

En Configuración> Lectura , elija una página estática . Asigne su página de inicio a casa y su nueva página de blog a la página de publicaciones.

Esto solo es necesario si usa una página de inicio separada y una página de listado de blogs.

3. Cree una plantilla de constructor de temas

A continuación, creará una nueva plantilla para la página de listado de su blog. Si ya tiene uno, puede personalizar eso. Asegúrese de usar la última versión de Divi 5 para acceder a Loop Builder.

En Divi> Temor Builder , haga clic en Agregar nueva plantilla> Crear nueva plantilla.

Asignarlo a la página de su blog y hacer clic en Crear plantilla.

Para diseñar la página de listado de publicaciones de su blog, haga clic en Agregar cuerpo personalizado> Crear cuerpo personalizado.

Ahora ingresará al Divi Builder, donde comenzaremos a construir el diseño del bucle.

1. Importar un diseño

Comenzar con un diseño puede ahorrarle mucho tiempo y ayudarlo a mantener un diseño consistente desde el principio. Para este tutorial, estoy usando el diseño de la página de blog de la agencia de marketing para la marca.

Puede elegir lo mismo o importar cualquier diseño que le brinde una buena base para trabajar. Una vez que esté en su plantilla, tendrá una estructura preparada que puede adaptar a sus necesidades en lugar de construir todo desde cero.

2. Diseñe una tarjeta de publicación de blog

Aquí es donde realmente aparece la flexibilidad de Loop Builder. En lugar de estar encerrado en el diseño fijo del módulo de blog, usted decide exactamente qué pasa en su tarjeta postal y cómo está organizado.

Agregue una nueva sección a su plantilla. Puede elegir entre las estructuras prediseñadas o crear las suyas propias utilizando la opción de una columna.

Para este ejemplo, eligamos una sección de estructura de fila de tres columnas .

En la primera columna, crearemos nuestra tarjeta postal. Usaremos un grupo de módulos para contener todos los elementos.

Luego agregue un módulo de imagen para la imagen destacada, un módulo de encabezado para el título de publicación y un módulo de texto para el extracto. También agregaremos meta información y un botón Leer más para que los visitantes puedan hacer clic en la publicación completa.

Una vez que la estructura básica esté allí, personalice el diseño de la tarjeta para que se ajuste a su marca. Ajuste los colores, las fuentes, el espacio y cualquier detalle visual único que lo haga tuyo.

3. Habilitar envoltura de fila

Para asegurarse de que sus tarjetas se muestren perfectamente en filas a través de diferentes tamaños de pantalla, querrá habilitar el envoltorio flexible. Seleccione la fila principal y abra la pestaña de diseño .

Ir al diseño. Asegúrese de que el estilo de diseño esté configurado para flexionarse.

Habilite el envoltorio de diseño para que las tarjetas puedan moverse a una nueva línea cuando sea necesario, luego elija la alineación de envoltura que mejor se adapte a su diseño.

4. Enciende el bucle

Ahora viene el paso que lo hace todo automático. Seleccione la columna de la tarjeta.

Luego, encienda la opción de bucle en la pestaña Contenido . Una vez que el bucle esté habilitado, Divi repetirá el diseño de su tarjeta para cada publicación que cumpla con la configuración de su consulta.

Para este diseño, he establecido:

• Tipo de publicación: publicaciones
• Publicaciones por página: 10
• Pedido por: fecha
• Pedido: descendente (el más nuevo primero)
• Post Offset: 0 (Mostrar todo a partir de lo último)
• Ignorar publicaciones pegajosas: si

Estos pequeños ajustes se aseguran de que la cuadrícula muestre exactamente las publicaciones que desea, en el orden que desee. Puede cambiar estos valores en cualquier momento para adaptar el diseño a diferentes necesidades.

5. Agregar contenido dinámico

El paso final para dar vida al ciclo es conectar cada módulo en su tarjeta a datos en vivo. Esto es lo que convierte una tarjeta estática en una lista automatizada y siempre actualizada. Por ejemplo:

• Enlace el módulo de imagen a la imagen destacada de la publicación.
• Enlace el módulo de encabezado al título de publicación.
• Enlace el módulo de texto al extracto de publicación.
• Conecte el botón Leer más a la URL de publicación.

Cuando está en bucle, Divi reemplazará el contenido del marcador de posición con los datos correctos para cada publicación en el bucle.

Para establecer la imagen destacada, abra el módulo de imagen, pasee la opción de imagen y haga clic en el icono de contenido dinámico . Seleccione la imagen destacada de bucle y todas las imágenes relevantes poblarán instantáneamente.

Repita esto para el título de la publicación, la fecha publicada, el extracto y cualquier otro campo que desee mostrar.

Cuando haga clic en el icono de contenido dinámico para obtener un módulo, verá la gama completa de opciones específicas de bucle. No te limitas a títulos e imágenes; También puede mostrar fechas de publicación, fechas modificadas, nombres de autores, recuentos de comentarios, categorías, etiquetas e incluso campos personalizados.

Esto significa que su tarjeta postal puede ser tan mínima o detallada como desee. Construya una cuadrícula limpia y centrada en la imagen, un diseño rico en contenido o incluso resalte los campos de tipos de publicaciones personalizados de nicho. Diseñelo una vez, y Divi lo mantiene preciso y consistente en todo el bucle.

6. Guarde su plantilla y vista previa

Una vez que todo se ve bien, haga cualquier ajuste final y guarde cambios tanto en Divi Builder como en el constructor de temas.

Vista previa de su página para ver el bucle en acción. Aquí está la página de listado de blog terminada:

El módulo de blog tenía límites, Loop Builder no

El módulo de blog funcionaba bien, entonces, ¿por qué estamos presionando para el bucle de bucle? Porque "bien" significaba fijo. El módulo de blog te encerró en su plantilla, pero el bucle de bucle te ofrece un lienzo en blanco. Usted elige el diseño, el orden, el estilo y el divi lo que lo boquió automáticamente.

Ese es el cambio real: no estás ajustando la plantilla de otra persona, estás diseñando la tuya. Vamos a poner eso en práctica una vez más y diseñar un diseño diferente de una estructura de módulo de blog típica.

Primero, agregue una fila y una sección de una columna. Ajuste el tamaño y asegúrese de que la envoltura flexible y flexible esté habilitado para la fila.

Esta fila contendrá tus tarjetas de blog. Ahora, agregue otra fila anidada dentro de la columna para crear la estructura de su tarjeta, con la imagen a la izquierda y los metadatos de la publicación a la derecha.

Diseñe su estructura exactamente como lo desea, no es necesario seguir la secuencia del módulo de blog. Deje la columna izquierda vacía por ahora. Agregaremos la imagen destacada como la imagen de fondo de la columna.

Personaliza la tarjeta de listado de tu blog.

También puede modificar el espacio vertical de su grupo de módulos en la columna derecha en diseño> Diseño> Opción de brecha vertical .

A continuación, habilitamos la opción de bucle . Seleccione la primera columna de la fila principal.

Nuevamente, buceamos el contenido dinámico. Comenzando con la imagen, vaya a la opción de fondo de la columna izquierda, y el resto será el mismo.

Este es su bucle de blog de estilo List. Ahora, si desea convertir esto en una cuadrícula, simplemente cambie el ancho de la columna. Debido a que tenemos el envoltorio flexible habilitado en la fila, las tarjetas se envolverán por su cuenta a medida que cambiemos de tamaño.

Si esto hace que sus imágenes sean demasiado grandes, puede eliminar el extracto, cambiar la estructura de la columna de la fila e incluso ajustar la brecha horizontal a cero.

Y así, tu cuadrícula también está lista.

Este ejemplo es solo una idea de lo que hace posible Loop Builder. La verdadera conclusión es que ya no te limitas a un puñado de diseños preestablecidos. Cada parte de la tarjeta postal es suya para organizar, estilo y reinventar, y Divi se encarga de repetirla automáticamente. Esa flexibilidad es lo que convierte una lista simple de blog en algo que se siente diseñado para su sitio.

Use el módulo de paginación

Si limita las publicaciones por página en su consulta de bucle, es probable que desee una forma para que los lectores vean el resto. Agregue el módulo de paginación debajo de su cuadrícula y establezca su bucle de destino en el elemento donde habilitó el bucle. Para obtener un tutorial completo, consulte cómo usar el módulo de bucle y paginación de Divi 5: Lea el tutorial.

Descargue las plantillas de blog

Si desea experimentar con cuadrículas dentro de una plantilla de blog, descargue las plantillas que se usaron en este tutorial a continuación. Para importarlos, navegue a su constructor de temas Divi. Podrá importarlos utilizando el icono de importación/exportación en la esquina derecha.

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!

Cree su bucle de publicación de blog personalizado en Divi 5 hoy

Antes del buque de bucle de Divi 5, crear un bucle de publicación de blog verdaderamente personalizado a menudo significaba luchar con plantillas rígidas o escribir código personalizado para cada pequeño cambio. Ahora, es un proceso visual de principio a fin. Usted diseña una tarjeta una vez, vincula sus módulos para publicar datos y deja que Divi maneje el resto.

Si ha estado trabajando en los límites del módulo de blog, Loop Builder es la actualización que ha estado esperando. Pruébelo en su próximo proyecto y vea cuánto más fácil es crear un blog (o producto, evento o listado) que se vea exactamente como desee.