Cómo construir una cuadrícula de cartera con el bucle de bucle de Divi 5

Una cuadrícula de cartera es una forma simple y efectiva de mostrar su trabajo. Con el bucle de bucle de Divi 5, puede diseñar un diseño de tarjeta reutilizable y dejar que se ponga automáticamente desde su contenido directamente en el Visual Builder.

A diferencia de los módulos de un solo propósito, Loop Builder le permite usar cualquier elemento Divi, establecer una consulta para publicaciones o tipos de publicaciones personalizadas y generar una cuadrícula receptiva que hereda sus estilos globales. En este tutorial, construiremos una cuadrícula de cartera paso a paso utilizando el tipo de publicación personalizado de proyectos.

Comprender el bucle de bucle de Divi 5

Loop Builder de Divi 5 es una nueva característica que le permite crear fácilmente diseños dinámicos de contenido en bucle. A diferencia de los módulos de blog o cartera, Loop Builder le permite colocar fácilmente cualquier elemento Divi para mostrar publicaciones, términos o usuarios. Esto significa que puede construir una sola plantilla que se complete automáticamente con el contenido de su sitio de WordPress.

Loop Builder admite varios tipos de contenido, incluidos los tipos de publicación personalizados (CPTS), los productos de WooCommerce y los campos personalizados avanzados (ACF), lo que le permite mostrar su cartera exactamente cómo desea.

Beneficios clave del bucle Builder

Gracias a sus robustas opciones de personalización, Loop Builder es perfecto para crear cuadrículas de cartera. Aquí están sus características destacadas:

• Flexibilidad para diseñar plantillas de bucle personalizadas: con Loop Builder, no está limitado a diseños predefinidos. Puede usar cualquier módulo Divi para diseñar una plantilla única para cada elemento de cartera.
• Consultas personalizables: Loop Builder le permite ajustar qué contenido aparece en su cuadrícula. Filtrar por categoría, tipo de publicación o campos personalizados para mostrar solo los elementos deseados en su pedido preferido.
• Integración de contenido dinámico: extraiga a la perfección datos de contenido dinámico como títulos de proyectos, imágenes destacadas, descripciones o metadatos personalizados para hacer que cada elemento de cartera sea atractivo.

Estas características hacen de Divi 5's Loop Builder una herramienta ideal para crear una cartera pulida y profesional que sea totalmente personalizable y fácil de navegar.

Construir una cartera con bucle builder

Usaremos los proyectos incorporados de Divi Tipo de publicación personalizado (CPT) para crear una cartera con el bucle de bucle. El Proyecto CPT está diseñado para mostrar contenido de estilo de cartera, lo que lo convierte en una opción ideal para nuestro diseño. Si bien Divi ofrece un módulo de cartera, usaremos el bucle de bucle porque nos ofrece opciones ilimitadas para crear una cartera única.

Comience agregando una nueva fila a su página. Para esto, usaremos un diseño de 3 columnas .

Agregaremos un módulo de encabezado a la primera columna .

Ingrese un título o use divi ai para generar uno para usted.

Navegue a la pestaña de diseño , elija Inter para la fuente de encabezado , ligera para el peso de la fuente de encabezado , configure el tamaño del texto de encabezado en 2EM y asigne una altura de línea de encabezado de 1.3EM .

Ahora, construamos nuestro bucle. Navegue a la segunda columna de nuestra fila.

Localice la pestaña de bucle , expanda y habilite el elemento de bucle alternar.

A continuación, elija el tipo de consulta . Para este tutorial, utilizaremos los proyectos CPT incorporados de Divi. Bajo el tipo de publicación , seleccione proyectos . Queremos mostrar todos los proyectos, por lo que dejaremos todo como está.

Puede elegir el pedido por configuración, publicaciones por página y compensación posterior . Dado que nuestra primera columna contiene un módulo de encabezado , estableceremos las publicaciones por página en 8 . De esa manera, la salida estará incluso en nuestra fila de tres columnas .

Notará que nuestro bucle está intentando apilar todas las columnas. Para solucionar esto, necesitamos ir a la configuración de la fila. Navegue a la fila de 3 columnas , haga clic en la pestaña Diseño y ubique la configuración de diseño .

Expanda la pestaña Configuración de diseño . Localice la configuración de envoltura de diseño y seleccione Wrap . Esto volverá a envolver nuestro bucle en 3 columnas.

Estilizar la columna de bucle

Ahora que la configuración del bucle está en su lugar, es hora de diseñar nuestras columnas. La configuración de estilo que elegimos aquí afectará las columnas restantes en el bucle. En la fila de 3 columnas , haga clic en la segunda columna y haga clic en la pestaña Diseño . Navegue al menú desplegable del borde y asigne un radio de borde de 15 px a la columna. Bajo estilos de borde , agregue un ancho de borde de 1 px y use #000000 como color del borde .

Agregar contenido al bucle

Podemos comenzar a agregar contenido al bucle con los estilos de la columna asignados. Haga clic para agregar un módulo de imagen a la segunda columna . Una vez agregado, cada columna dentro del bucle mostrará un marcador de posición de imagen.

Usaremos el poder de contenido dinámico de Divi 5 para atraer la imagen destacada de nuestro proyecto. Pase la imagen sobre la imagen para revelar los íconos. Haga clic en el icono de contenido dinámico para continuar.

Elija la imagen destacada de bucle cuando aparezcan las opciones.

Nuestro bucle colocará la imagen destacada de cada proyecto directamente en nuestro bucle de cartera.

A continuación, agregue un módulo de encabezado a la segunda columna debajo de la imagen destacada . Esto se utilizará para el título del proyecto . Repita los pasos anteriores para agregar el título . Sin embargo, elija el título de la publicación de Loop esta vez.

En la pestaña Diseño , seleccione H3 para el nivel de encabezado , Inter para la fuente de encabezado , el centro para la alineación del texto del encabezado y 20px para el tamaño del texto del encabezado.

Finalmente, agregaremos un botón que vincule a cada proyecto . Agregue un módulo de botón a la segunda columna debajo del título de publicación . Haga clic en el icono de contenido dinámico en la URL del enlace del botón y seleccione el enlace de bucle .

Cambie a la pestaña de diseño y establezca la alineación en el centro .

Expanda la configuración desplegable del botón y habilite Usar estilos personalizados para el botón . Ingrese la siguiente configuración de diseño:

• Antecedentes del botón: #000000
• Botón Radio de borde: 15px
• Ancho de borde del botón: 0px
• Fuente del botón: Inter
• Color de texto del botón: #ffffff
• Botón Tamaño del texto: 16px
• Margen: Bottom 15px
• Relleno: 15px superior e inferior, 35px izquierda y derecha

¡Eso es todo! Como puede ver, crear un bucle con Divi 5 es un proceso sencillo.

Cambiar estilos con bucle builder

Editar los estilos de su bucle es tan simple como crear el bucle en sí. Supongamos que quieres cambiar de una luz a un tema oscuro para tu bucle. Hacer cambios de diseño solo lleva un par de segundos. Puede cambiar el color de fondo de la sección y luego realizar cambios en elementos de bucle individuales con un par de clics.

No hay necesidad de editar elementos de bucle individualmente. Como todos están conectados, solo debe editar módulos una vez, y Divi 5 aplicará los estilos actualizados automáticamente en cada módulo en el bucle.

Puede agregar más módulos al bucle, como el extracto del proyecto , la fecha de publicación, el recuento de comentarios , el biografía del autor , los campos personalizados y más.

Si desea apretar el espacio alrededor de los elementos dentro de su bucle, puede ajustar el espacio vertical en la configuración de la fila y la columna . Esto controla la cantidad de espacio entre cada fila y los módulos individuales utilizando el sistema de diseño FlexBox de Divi 5, lo que le permite perfeccionar cómo se ve su bucle.

Prueba y refinación del bucle de cartera

Una vez que haya construido una cartera, es hora de probarlo para asegurarse de que todo funcione según lo previsto. Comience por obtener una vista previa de la cuadrícula en la parte delantera utilizando el enlace de vista previa en la barra superior del Visual Builder.

Verifique que el título de cada proyecto, la imagen destacada , el extracto y el enlace de bucle estén extrayendo correctamente del CPT de Projects . Asegúrese de que no aparezcan elementos rotos.

De vuelta en Visual Builder, verifique para asegurarse de que el diseño se adapte correctamente utilizando los puntos de interrupción receptivos personalizables de Divi 5. Por defecto, Divi 5 ofrece 3 puntos de interrupción , uno para escritorio , tableta y teléfono , pero puede habilitar hasta 7 haciendo clic en el menú de elipsis en el medio de la barra superior del Visual Builder.

Navegue a través de cada punto de interrupción , verifique el diseño y realice ajustes según sea necesario.

Para que el diseño sea más amigable para el móvil, puede usar la configuración de la estructura de columna de cambio de Divi 5 para cambiar el número de columnas que se muestran en dispositivos más pequeños.

Mejores prácticas y consejos

Para asegurarse de que está aprovechando al máximo Divi 5 y Loop Builder, aquí hay algunas mejores prácticas a seguir al construir su cartera.

1. Asegúrese de la consistencia del diseño con variables de diseño

La característica de variables de diseño de Divi 5 le permite definir una tipografía, colores y espacios consistentes en la página de su cartera. En Visual Builder, establezca variables globales para fuentes, colores y acolchado/márgenes para garantizar que cada artículo de cartera se vea uniforme. Para crear variables , haga clic en el icono del administrador de variables en el menú lateral izquierdo en el Visual Builder.

A partir de ahí, puede asignar fuentes globales , colores y más, garantizar que sus diseños sean consistentes en todo su sitio web, no solo en su página de cartera.

2. Considere la accesibilidad

La accesibilidad garantiza que todos los usuarios, incluidos aquellos con discapacidades, puedan navegar y disfrutar de su trabajo. Asegúrese de agregar texto alternativo para las imágenes mientras las sube a la galería de medios. Esto ayuda a los lectores de pantalla a transmitir el contenido a usuarios con discapacidad visual.

También es bueno seleccionar colores con relaciones de contraste suficientes para garantizar la legibilidad para los usuarios con impedimentos visuales.

3. Guardar y reutilizar plantillas

Después de perfeccionar la plantilla de su constructor de bucle, guárdela en la biblioteca Divi haciendo clic derecho en la sección de la cartera y seleccionando Guardar en la biblioteca . Déle un nombre descriptivo para una referencia fácil. Esto le permite reutilizar la plantilla en otras páginas sin reconstruir desde cero.

Para usar la plantilla en otros sitios web, puede guardarla en Divi Cloud e importarla a otros proyectos web con un solo clic.

El ahorro de plantillas optimiza su flujo de trabajo y garantiza que pueda implementar rápidamente las redes de cartera profesionales para futuros proyectos.

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!

Prueba el bucle de bucle en Divi 5 hoy

Loop Builder de Divi 5 facilita la creación de redes de cartera dinámicas, lo que le permite mostrar su trabajo con estilo y eficiencia. Al aprovechar los proyectos incorporados CPT y las potentes características del Loop Builder, puede crear cuadrículas flexibles y totalmente personalizables que atraen dinámicamente el contenido de su proyecto. Su flexibilidad le permite diseñar diseños únicos utilizando cualquier módulo Divi, configurar consultas para mostrar proyectos específicos y crear cuadrículas receptivas que brillen en cualquier dispositivo.

¿Estás listo para dar vida a tu cartera? Sumérgete en el último lanzamiento de Alpha Public Alpha de Divi 5 y experimente con el diseño de tu cartera. Ya sea que sea un freelancer que exhiba proyectos o un negocio que destaca el trabajo del cliente, Loop Builder le permite crear fácilmente una pantalla profesional y dinámica.