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 Divi’s Theme Builder 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 también. El diseño de la plantilla que creamos 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

plantilla de proyecto

Móvil

plantilla de proyecto

Descargue la plantilla de proyecto The Dynamic Portfolio 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 el generador de temas.

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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" 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.

plantilla de proyecto

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.

plantilla de proyecto

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

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

plantilla de 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 persona de contacto
    • Tipo de campo: imagen
  • Persona de contacto Cargo
    • Etiqueta de campo: Persona de contacto Cargo
    • 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
    • Añadir: 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.

plantilla de proyecto

2. Crear nuevo proyecto

Agregar Portafolio Título y Descripción del Proyecto

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.

plantilla de proyecto

Subir imagen destacada

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

plantilla de proyecto

Rellene todos los campos personalizados

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

plantilla de proyecto

plantilla de proyecto

3. Crear nueva plantilla

Vaya a Divi Theme Builder y cree una nueva plantilla

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

plantilla de proyecto

Usar en

Aplica la plantilla a todos tus proyectos.

  • Uso en: todos los proyectos

plantilla de proyecto

4. Comience a construir el cuerpo de la plantilla

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

plantilla de proyecto

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

plantilla de proyecto

Espaciado

Agregue algunos rellenos superiores e inferiores personalizados a continuación.

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

plantilla de proyecto

Frontera

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

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

plantilla de proyecto

Agregar fila # 1

Estructura de columna

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

plantilla de proyecto

Agregar 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:

plantilla de proyecto

Configuraciones de texto

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

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

plantilla de proyecto

Agregue 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 la duración del proyecto.

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

plantilla de proyecto

plantilla de proyecto

Configuraciones de texto

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

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

plantilla de proyecto

Agregue 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 publicación / archivo.

  • Contenido dinámico: Título de publicación / archivo
  • Antes de:

  • Después:

plantilla de proyecto

plantilla de proyecto

Configuraciones de texto H1

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

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

plantilla de proyecto

Espaciado

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

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

plantilla de proyecto

Agregar módulo de contenido de publicación

Configuraciones 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

plantilla de proyecto

Agregar fila # 2

Estructura de columna

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

plantilla de proyecto

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

plantilla de proyecto

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.

plantilla de proyecto

Enlace de contenido dinámico

Enlace 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

plantilla de proyecto

Configuraciones de texto

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

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

plantilla de proyecto

Espaciado

Agregue también un relleno inferior personalizado.

  • Relleno inferior: 50px

plantilla de proyecto

Frontera

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

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

plantilla de proyecto

Agregar Sección # 2

Espaciado

¡A la siguiente sección! Elimine todos los rellenos superiores e inferiores predeterminados.

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

plantilla de proyecto

Añadir fila

Estructura de columna

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

plantilla de proyecto

Espaciado

Abra la configuración de la fila y elimine todos los rellenos superiores e inferiores predeterminados.

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

plantilla de proyecto

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

plantilla de proyecto

Frontera

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

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

plantilla de proyecto

Agregar Sección # 3

Espaciado

Agregue otra sección regular con algo de relleno superior e inferior personalizados.

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

plantilla de proyecto

Agregar fila # 1

Estructura de columna

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

plantilla de proyecto

Agregar módulo de texto a la columna 1

Añadir contenido H2

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

plantilla de proyecto

Configuraciones de texto H2

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

  • Título 2 Fuente: Montserrat
  • Título 2 Peso de la fuente: negrita
  • Encabezado 2 Tamaño del texto: 2rem

plantilla de proyecto

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

plantilla de proyecto

Configuraciones 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

plantilla de proyecto

Fila clon

Una vez que hayas completado la fila, continúa y clonala por completo.

plantilla de proyecto

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

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

plantilla de proyecto

Cambiar 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

plantilla de proyecto

Agregar módulo de botón 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.

plantilla de proyecto

Configuraciones 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.5rem
  • Color del texto del botón: # 000000
  • Radio del borde del botón: 0px

plantilla de proyecto

  • Fuente del botón: Montserrat

plantilla de proyecto

Espaciado

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

  • Margen superior: 100 px

plantilla de proyecto

Agregar Sección # 4

Color de fondo

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

  • Color de fondo: # 000000

plantilla de proyecto

Frontera

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

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

plantilla de proyecto

Añadir fila

Estructura de columna

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

plantilla de proyecto

Agregar módulo de testimonio a la columna

Contenido dinámico

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

  • Autor: Persona de contacto
  • Título del trabajo: Persona de contacto Título del trabajo
  • Cuerpo: testimonio
  • Imagen: Imagen de la persona de contacto

plantilla de proyecto

plantilla de proyecto

Elementos

Desactive el icono de cotización siguiente.

  • Mostrar icono de cotización: No

plantilla de proyecto

Color de fondo

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

  • Color de fondo: # 000000

plantilla de proyecto

Configuraciones de texto

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

  • Color del texto: claro

plantilla de proyecto

Configuración de texto del cuerpo

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

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

plantilla de proyecto

Configuración de texto de autor

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

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

plantilla de proyecto

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:

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

plantilla de proyecto

4. Guardar los cambios del generador de temas y ver el resultado

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

plantilla de proyecto

plantilla de proyecto

Avance

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

Escritorio

plantilla de proyecto

Móvil

plantilla de proyecto

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 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 Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.