¿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 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. 

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

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

Tenga en cuenta 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 todos los diferentes campos personalizados que ha agregado 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: <H1>
  • Después: </H1>

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 algunos márgenes 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 haya completado la fila, continúe y clonela 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

Muévase en 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

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

5 consejos para organizar el contenido del blog en Divi

5 consejos para organizar el contenido del blog en Divi

El contenido de tu página de blog se puede organizar de muchas maneras. Como se trata de una página de blog, la mayor parte del contenido consistirá en una fuente de publicaciones de blog recientes. Saber cómo organizar este contenido puede ser una excelente manera de...

leer más

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!