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

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: deberá agregar manualmente contenido dinámico a cada módulo después de configurar los campos ACF y cargar el archivo JSON de la plantilla en Theme Builder.

Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

1. Instalar ACF y configurar los campos del proyecto

Instalar y activar ACF

Comience instalando 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 campo.

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 mencionados 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 tablero 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.

Rellene todos los campos personalizados

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

3. Crear nueva plantilla

Vaya a Divi Theme Builder y cree una nueva plantilla

¡Es hora de comenzar 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. Comience a construir 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ás una sección. Abra esa sección y agregue un color de fondo negro.

• Color de fondo: #000000

Espaciado

Agregue un poco de relleno superior e inferior personalizado a continuación.

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

Borde

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

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

Añadir Fila #1

Estructura de la columna

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

Agregue 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: Proyecto Duración:

Configuración de texto

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

• Fuente del texto: Montserrat
• Color del texto: #a0a0a0
• Tamaño del texto: 1,2 rem

Agregue el Módulo de Texto #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

Cambie la configuración de texto del módulo a continuación.

• Fuente del texto: Lora
• Color del texto: #ffffff
• Tamaño del texto: 1,5 rem

Agregue el Módulo de Texto #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 publicación/archivo
• Antes: <H1>
• Después: </H1>

Configuración de texto H1

Aplica estilo a la configuración de texto H1 del módulo.

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

Espaciado

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

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

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 publicación de contenido. Esto mostrará la descripción de su proyecto. Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente del texto: Lora
• Color del texto: #ffffff
• Tamaño del texto: 1,5 rem (escritorio), 0,9 rem
• Altura de línea de texto: 2em

Añadir Fila #2

Estructura de la columna

Agregue otra fila a la sección utilizando 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

Cambie la configuración de texto del módulo a continuación.

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

Espaciado

Agregue un poco de relleno inferior personalizado también.

• Relleno inferior: 50px

Borde

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

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

Añadir Sección #2

Espaciado

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

• Relleno superior: 0px
• Relleno 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 inferior superior predeterminado.

• Relleno superior: 0px
• Relleno 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. Conecta la imagen a la imagen destacada del proyecto.

• Contenido dinámico: imagen destacada

Borde

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

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

Agregar Sección #3

Espaciado

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

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

Añadir Fila #1

Estructura de la columna

Agregue una nueva fila a la sección utilizando 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 de texto H2 de la siguiente manera:

• Título 2 Fuente: Montserrat
• Encabezado 2 Peso de fuente: 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 del texto: Lora
• Tamaño del texto: 1,5 rem (escritorio), 0,9 vw (tableta y teléfono)
• Altura de línea de texto: 2em

Clonar Fila

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

Agregue el 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 alguna copia de su elección.

Configuración de botones

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

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1,5 rem
• 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: 100px

Añadir Sección #4

Color de fondo

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

• Color de fondo: #000000

Borde

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 utilizando 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 algún contenido dinámico para los diferentes elementos dentro del módulo.

• Autor: Persona de contacto
• Título del puesto: Título del puesto de la persona de contacto
• Cuerpo: Testimonio
• Imagen: Imagen de la persona de contacto

Elementos

Deshabilite el ícono 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

Muévete en la pestaña de diseño del módulo y cambia el color del texto.

• Color del texto: Claro

Configuración del texto del cuerpo

Modifique la configuración del texto del cuerpo a continuación.

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

Configuración del texto del autor

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

• Autor Fuente: Lora
• Tamaño del texto del autor: 1,4 rem (escritorio), 0,9 rem (tableta y teléfono)

Ajustes 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 de texto de posición: #a8a8a8
• Tamaño del texto de posición: 1,4 rem (escritorio), 0,9 rem (tableta y teléfono)

4. Guarde los cambios del generador 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 en 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 futuros elementos de cartera 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.