Cómo crear una plantilla de proyecto de cartera dinámica con Divi y ACF

¿Busca una manera de optimizar la forma en que crea elementos de cartera en su sitio web? Si es así, te encantará esta publicación. En este tutorial, le mostraremos cómo crear una plantilla de proyecto de cartera dinámica con el Generador de temas de Divi y el complemento ACF. La creación de una plantilla de proyecto de cartera le permitirá diseñar el cuerpo de la plantilla una vez y hacer que se aplique a todos los elementos de la cartera que agregue en el futuro. El diseño de la plantilla que hemos creado coincide con todo tipo de profesiones creativas, pero es solo la punta del iceberg. Puede agregar tantos campos como desee y usarlos dentro de su plantilla. ¡También podrás descargar el archivo JSON del diseño que recrearemos gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de proyecto de cartera dinámica GRATIS

Importante: tendrá que agregar manualmente contenido dinámico a cada módulo después de configurar los campos ACF y cargar el archivo JSON de plantilla en Theme Builder.

Para tener en sus manos la plantilla de proyecto de cartera dinámica gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi 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 suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Instale ACF y configure los campos del proyecto

Instalar y activar ACF

Empiece por instalar el complemento gratuito Advanced Custom Fields en su sitio web de WordPress. Después de instalarlo, asegúrese de activarlo también.

Configurar grupo de campos

Una vez que haya instalado y activado el complemento, es hora de comenzar a crear los campos personalizados. Vaya a la configuración de su complemento y agregue un nuevo grupo de campos.

Modifique la ubicación de su grupo de campo. Queremos que aparezca solo en nuestros proyectos.

• Tipo de publicación - es igual a - Proyecto

Agregar campos

Continúe agregando un nuevo campo para cada uno de los elementos que se mencionan a continuación:

• Problema
  • Etiqueta de campo: Problema
  • Tipo de campo: Área de texto
• Solución
  • Etiqueta de campo: Solución
  • Tipo de campo: Área de texto
• Testimonial
  • Etiqueta de campo: Testimonio
  • Tipo de campo: Texto
• Persona de contacto
  • Etiqueta de campo: Persona de contacto
  • Tipo de campo: Texto
• Imagen de la persona de contacto
  • Etiqueta de campo: Imagen de la persona de contacto
  • Tipo de campo: Imagen
• Cargo de la persona de contacto
  • Etiqueta de campo: Cargo de la persona de contacto
  • Tipo de campo: Texto
• Logotipo del cliente
  • Etiqueta de campo: Logotipo del cliente
  • Tipo de campo: Imagen
• Sitio web del cliente
  • Etiqueta de campo: sitio web del cliente
  • Tipo de campo: URL
• Duración del proyecto
  • Etiqueta de campo: Duración del proyecto
  • Tipo de campo: rango
  • Agregar: semanas

Sepa que puede agregar tantos campos como desee, según la plantilla de proyecto que desee crear. Para recrear el diseño exacto que se mostró en la vista previa de esta publicación, necesitará todos los campos mencionados anteriormente.

2. Crear nuevo proyecto

Agregar título y descripción del proyecto de cartera

Una vez que haya configurado el grupo de campos y todos sus campos, es hora de crear un proyecto de muestra. Vaya a su panel de WordPress, agregue un nuevo proyecto e ingrese un título y una descripción.

Subir imagen destacada

Luego, cargue una imagen destacada de su elección.

Complete todos los campos personalizados

Continúe completando todos los diferentes campos personalizados que ha agregado en la primera parte del tutorial.

3. Crear nueva plantilla

Vaya a Divi Theme Builder y cree una nueva plantilla

¡Es hora de empezar a construir la plantilla! Vaya a Divi Theme Builder y agregue una nueva plantilla.

Usar en

Aplica la plantilla a todos tus proyectos.

• Usar en: todos los proyectos

4. Empiece a crear el cuerpo de la plantilla

Continúe comenzando a construir el cuerpo personalizado de la plantilla.

Sección 1

Color de fondo

Dentro del editor de plantillas, verá una sección. Abra esa sección y agregue un color de fondo negro.

• Color de fondo: # 000000

Espaciado

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

• Relleno superior: 250 px
• Acolchado inferior: 250px

Frontera

Agregue un poco de radio de borde inferior izquierdo y derecho también.

• Abajo a la izquierda: 8vw
• Abajo a la derecha: 8vw

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una primera fila a la sección usando la siguiente estructura de columnas:

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido

Luego, agregue un módulo de texto y coloque algo de contenido en el cuadro de contenido.

• Cuerpo: Duración del proyecto:

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Montserrat
• Color del texto: # a0a0a0
• Tamaño del texto: 1.2rem

Agregar el módulo de texto n. ° 2 a la columna

Contenido dinámico

Agregue otro módulo de texto a la columna y seleccione el contenido dinámico de duración del proyecto.

• Contenido dinámico: duración del proyecto
• Después: semanas

Configuración de texto

A continuación, cambie la configuración de texto del módulo.

• Fuente de texto: Lora
• Color del texto: #ffffff
• Tamaño del texto: 1.5rem

Agregar el módulo de texto n. ° 3 a la columna

Contenido dinámico

Agregue otro módulo de texto y seleccione el contenido dinámico del título de la publicación / archivo.

• Contenido dinámico: título de la publicación / archivo
• Antes: <H1>
• Después: </H1>

Configuración de texto H1

Diseñe la configuración de texto H1 del módulo.

• Fuente de encabezado: Montserrat
• Color del texto del encabezado: #ffffff
• Tamaño del texto del encabezado: 6rem (escritorio), 3rem (tableta y teléfono)

Espaciado

Complete la configuración del módulo agregando algunos márgenes superior e inferior.

• Margen superior: 100 px
• Margen inferior: 100 px

Agregar módulo de contenido de publicación

Configuración de texto

El siguiente y último módulo que necesitamos en la columna es un módulo de contenido de publicación. Esto mostrará la descripción de su proyecto. Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Lora
• Color del texto: #ffffff
• Tamaño del texto: 1.5rem (escritorio), 0.9rem
• Altura de la línea de texto: 2em

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de imagen a la columna 1

Contenido dinámico

Agregue un módulo de imagen a la columna 1 y seleccione el contenido dinámico del logotipo del cliente.

• Contenido dinámico: logotipo del cliente

Agregar módulo de texto a la columna 2

Agregar contenido

Luego, agregue un Módulo de texto a la columna 2 e ingrese alguna copia de su elección.

Vincular contenido dinámico

Vincule el módulo al sitio web del cliente seleccionando el contenido dinámico del sitio web del cliente en la configuración del enlace.

• Contenido dinámico: sitio web del cliente

Configuración de texto

A continuación, cambie la configuración de texto del módulo.

• Fuente de texto: Montserrat
• Color del texto: #ffffff
• Tamaño del texto: 1.5rem
• Altura de la línea de texto: 1em

Espaciado

Agregue un poco de acolchado inferior personalizado también.

• Acolchado inferior: 50px

Frontera

Y complete la configuración del módulo agregando un borde inferior.

• Ancho del borde inferior: 1 px
• Color del borde inferior: # ffc300

Agregar sección n. ° 2

Espaciado

¡A la siguiente sección! Elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Añadir fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Espaciado

Abra la configuración de la fila y elimine todo el relleno superior inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de imagen a la columna

Contenido dinámico

El único módulo que necesitamos en esta fila es un módulo de imagen. Conecte la imagen a la imagen destacada del proyecto.

• Contenido dinámico: imagen destacada

Frontera

Agregue un poco de radio de borde inferior izquierdo y derecho también.

• Abajo a la izquierda: 8vw
• Abajo a la derecha: 8vw

Agregar la sección # 3

Espaciado

Agregue otra sección regular con un acolchado superior e inferior personalizado.

• Relleno superior: 250 px
• Acolchado inferior: 250px

Agregar fila n. ° 1

Estructura de la columna

Agregue una nueva fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de texto a la columna 1

Agregar contenido H2

Agregue un módulo de texto a la columna 1 e inserte algún contenido H2 de su elección.

Configuración de texto H2

Cambie la configuración del texto H2 de la siguiente manera:

• Fuente del encabezado 2: Montserrat
• Peso de fuente del encabezado 2: Negrita
• Encabezado 2 Tamaño del texto: 2rem

Agregar módulo de texto a la columna 2

Contenido dinámico

Pase a la segunda columna, agregue un módulo de texto y use el contenido dinámico del problema.

• Contenido dinámico: problema

Configuración de texto

Luego, cambie la configuración de texto del módulo:

• Fuente de texto: Lora
• Tamaño del texto: 1.5rem (escritorio), 0.9vw (tableta y teléfono)
• Altura de la línea de texto: 2em

Fila de clonación

Una vez que haya completado la fila, continúe y clónela por completo.

Cambiar copia del módulo de texto en la columna 1

Cambie la copia del módulo de texto de la columna 1 de la fila duplicada.

Cambiar el contenido dinámico del módulo de texto en la columna 2

Modifique también el contenido dinámico del Módulo de texto en la columna 2 de la fila duplicada.

• Contenido dinámico: solución

Agregar módulo de botones a la columna 2 de la fila duplicada

Agregar copia

Continúe agregando un módulo de botones a la columna 2 de la fila duplicada. Agregue una copia de su elección.

Configuración de botones

Vaya a la pestaña de diseño del módulo y cambie la configuración de los botones de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1.5rem
• Color del texto del botón: # 000000
• Radio del borde del botón: 0px

• Fuente del botón: Montserrat

Espaciado

Complete la configuración del módulo agregando un margen superior.

• Margen superior: 100 px

Agregar la sección # 4

Color de fondo

¡A la siguiente y última sección! Agrega un color de fondo negro.

• Color de fondo: # 000000

Frontera

Agregue un poco de radio de borde superior izquierdo y derecho a la sección también.

• Arriba a la izquierda: 8vw
• Arriba a la derecha: 8vw

Añadir fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de testimonios a la columna

Contenido dinámico

Agregue un módulo de testimonios a la fila y seleccione contenido dinámico para los diferentes elementos dentro del módulo.

• Autor: Persona de contacto
• Cargo: Cargo de la persona de contacto
• Cuerpo: Testimonio
• Imagen: Imagen de la persona de contacto

Elementos

Desactive el icono de cotización a continuación.

• Mostrar icono de cotización: No

Color de fondo

Luego, cambie el color de fondo del módulo a negro.

• Color de fondo: # 000000

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie el color del texto.

• Color del texto: claro

Configuración del texto del cuerpo

A continuación, modifique la configuración del texto del cuerpo.

• Fuente del cuerpo: Montserrat
• Tamaño del texto del cuerpo: 2rem (escritorio), 1.5rem (tableta y teléfono)

Configuración del texto del autor

Cambie también la configuración del texto del autor.

• Fuente del autor: Lora
• Tamaño del texto del autor: 1.4rem (escritorio), 0.9rem (tableta y teléfono)

Configuración de texto de posición

Y complete la configuración del módulo cambiando la configuración del texto de posición en consecuencia:

• Fuente de posición: Lora
• Color del texto de posición: # a8a8a8
• Tamaño del texto de posición: 1.4rem (escritorio), 0.9rem (tableta y teléfono)

4. Guarde los cambios del Creador de temas y vea el resultado

Una vez que haya completado la plantilla, guarde todos los cambios de Divi Theme Builder y vea el resultado de su proyecto.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear una hermosa plantilla de proyecto de cartera utilizando Divi Theme Builder y el complemento ACF. Esta es una excelente manera de optimizar la forma en que muestra los proyectos en su sitio web. Una vez que asigne la plantilla a todos sus proyectos, se aplicará automáticamente a los elementos de cartera futuros que agregue. ¡También pudo descargar el archivo JSON de plantilla de este diseño de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.