¿Busca una forma de simplificar cómo crea elementos de cartera en su sitio web? Si es así, le gustará esta publicación. En este tutorial, le mostraremos cómo crear un proyecto de cartera dinámico con el creador de temas de Divin y el complemento ACF. La construcción de una plantilla de proyecto de cartera le permitirá diseñar el cuerpo de la plantilla una vez y aplicarla a todos los artículos de cartera que agregue en el futuro. El diseño de la plantilla que creé coincide con todo tipo de profesiones creativas, pero es solo la punta del iceberg. Puede agregar cualquier campo que desee y puede usarlos en su plantilla. ¡Podrá descargar el archivo JSON que recrearemos gratis!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la plantilla de proyecto de cartera dinámica dinámica gratuita: deberá agregar contenido dinámico manualmente después de configurar los campos ACF y cargar el archivo JSON en el constructor de temas. Para poner su mano en la plantilla del proyecto en la cartera dinámica gratuita, primero debe descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Instale los campos de proyectos ACF y configuración Instale y active ACF Inicio instalando un complemento de campos avanzados gratuitos en su sitio web de WordPress. Después de la instalación, asegúrese de activarlo y.
Configure el grupo de campo Después de haber instalado y activado el complemento, es hora de comenzar a crear campos personalizados. Vaya a la configuración del complemento y agregue un nuevo grupo de campo.

Cambie la ubicación de su grupo de campo. Queremos aparecer solo en nuestros proyectos.

Tipo de publicación – Equales – 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
Testigo
Etiqueta de campo: testimonio
Tipo de campo: texto
Persona de contacto
Etiqueta de campo: persona de contacto
Tipo de campo: texto
Persona de contacto de imagen
Etiqueta de campo: imagen de la persona de contacto
Tipo de campo: imagen
Persona de contacto El título de la publicación
Etiqueta de campo: Nombre de la persona de contacto de la publicación
Tipo de campo: texto
Logotipo Campo del cliente del cliente: logotipo del cliente
Tipo de campo: imagen
El sitio 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: Gama
Adjunto: semanas
Sabes que eres libre de agregar cuántos campos desea, dependiendo de la plantilla del proyecto que desee crear. Para recrear el diseño exacto que se ha mostrado en la vista previa de esta publicación, necesitará todos los campos mencionados anteriormente.
2. Cree un nuevo proyecto Agregue el título y la descripción del proyecto de cartera después de haber configurado el grupo de campo y todos sus campos, es hora de crear un ejemplo de un proyecto. Vaya al tablero de WordPress, agregue un nuevo proyecto e ingrese un título y una descripción.
Cargue la imagen recomendada y luego cargue una imagen recomendada de su elección.

Complete todos los campos personalizados continúan completando todos los diferentes campos personalizados que agregó en la primera parte del tutorial.

3. Cree una nueva plantilla Acceda al constructor de temas de división y cree una nueva plantilla es hora de comenzar a construir la plantilla. Vaya al temas Builder Divin y agregue una nueva plantilla.

Use la plantilla de aplicación activada para todos sus proyectos.


Uso activado: todos los proyectos

4. Comience a construir el cuerpo de la plantilla, continúe comenzando a crear el cuerpo personalizado de la plantilla.
Sección 1 Color de construcción En el editor de negocios, notará una sección. Abra esa sección y agregue un color de fondo negro.

Color de fondo: # 000000

Espacio agregue algunos forros personalizados en la parte superior e inferior.
Revestimiento superior: 250 PX

Finamiento inferior: 250 PX
Borde agregue un rayo de borde hacia la izquierda y la derecha. Jos izquierda: 8VW
Abajo a la derecha: 8VW

Agregue la estructura de la columna de la fila # 1 Continuar agregando una primera fila a la sección utilizando la siguiente estructura de columna:
Agregue el módulo de texto no. 1 En la columna Agregar contenido luego, agregue un módulo de texto y coloque un contenido en el cuadro de contenido.
Cuerpo: duración del proyecto:

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

Texto de fuente: Montserrat
Color de texto: # A0A0A0

Tamaño del texto: 1.2rem
Agregue el módulo de texto no. 2 En la columna de contenido dinámico, agregue otro módulo de texto en la columna y seleccione la duración del contenido dinámico 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.
Texto de fuente: Lora
Color de texto: #ffffff


Tamaño del texto: 1.5rem
Agregue el módulo de texto no. 3 En la columna de 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:

Después de:

Configuración de texto H1 Afirará la configuración de texto H1 del módulo.
Título de la fuente: Montserrat
Encabezado de texto en color: #ffffff


Tamaño de texto Cabezal: 6rem (escritorio), 3rem (tableta y teléfono)
El espacio completa la configuración del módulo agregando algunos bordes superior e inferior.
Margen superior: 100 PX
Margen inferior: 100 px

Agregue un módulo de contenido para publicar la configuración de texto El siguiente y último módulo que necesitamos en la columna es un módulo de contenido posterior. Esto mostrará la descripción de su proyecto. Cambie la configuración de texto del módulo de la siguiente manera:
Texto de fuente: Lora
Color de texto: #ffffffdimension Texto: 1.5rem (escritorio), 0.9rem

Altura de la línea de texto: 2em
Agregue la estructura de la columna de la fila # 2 Agregar otra fila a la sección utilizando la siguiente estructura de columnas:
Agregue el módulo de imagen al contenido dinámico de la columna 1 Agregue un módulo de imagen en la columna 1 y seleccione el contenido dinámico del logotipo del cliente.
Contenido dinámico: logotipo de los clientes
Agregue un módulo de texto a la columna 2 Agregar contenido y luego, agregue un módulo de texto en la columna 2 e ingrese una copia de su elección.

Conecte el contenido dinámico Conecte el módulo al sitio web del cliente seleccionando el contenido dinámico del sitio del cliente en la configuración de conexión.


Contenido dinámico: sitio web del cliente
Configuración de texto Cambie la configuración de texto del módulo a continuación.

Texto de fuente: Montserrat

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

La altura de la línea de texto: 1em
Espacio agregue un relleno de fondo personalizado.
Revestimiento inferior: 50 PX
Borde y complete la configuración del módulo agregando un borde inferior.
Ancho de borde inferior: 1 PX

Color de borde inferior: # FFC300
¡Agregue el espacio de la Sección 2, vaya a la siguiente sección! Elimine todo el revestimiento predeterminado e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue la fila La estructura de la columna Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

Espacio Abra la configuración de la fila y elimine todos los rellenos predeterminados en la parte superior e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue el módulo de imagen a la columna dinámica La única forma que necesitamos en esta fila es un módulo de imagen. Conecte la imagen a la imagen presentada del proyecto. Dinámicamente sostenido: Imagen presentada

Border agregue un rayo de borde hacia la izquierda y la derecha.
Abajo a la izquierda: 8VW
Abajo a la derecha: 8VW

Agregue la sección no. 3 Espacio Agregue otra sección ordinaria, con algunos rellenos personalizados de arriba e inferior.
Revestimiento superior: 250 PX

Finamiento inferior: 250 PX
Agregue la estructura de columna de la fila # 1 Agregar una nueva fila a la sección utilizando la siguiente estructura de columnas:
Agregue un módulo de texto a la columna 1 Agregar contenido H2 Agregue un módulo de texto en la columna 1 e ingrese un contenido H2.

Configuración de texto H2 Cambie la configuración de texto H2 de la siguiente manera:
2 Sección de fuentes: Montserrat
Título 2 Fuente de peso: Bold

Rúbrica 2 Dimensión de texto: 2rem

Agregue un módulo de texto en la columna 2 contenido dinámico a la segunda columna, agregue un módulo de texto y use el contenido dinámico con problemas.

Contenido dinámico: problema
Configuración de texto Entonces, cambie la configuración de texto del módulo:
Texto de fuente: Lora
Tamaño de texto: 1.5REM (escritorio), 0.9VW (tableta y teléfono)

Altura de la línea de texto: 2em
Clone Row Después de que haya terminado el giro, continúe y clono por completo.

Cambie la copia del módulo de texto en la columna 1 Cambiar la columna Copiar 1 El módulo de texto de la fila duplicada.
Cambie el contenido dinámico del módulo de texto en la modificación de la columna 2 y el contenido dinámico del módulo de texto en la columna 2 de la fila duplicada.
Contenido dinámico: solución
Agregue un módulo de botón a la columna 2 de la fila duplicada Agregue una copia Continuar agregando un botón en la columna 2 de la fila duplicada. Agregue una copia de su elección. Botones Vaya a la pestaña Diseño del módulo y cambie la configuración del botón de la siguiente manera:

Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1.5rem

El color del texto del botón: # 000000
El rasgo de botón de botón: 0 px

Botón de fuente: Montserrat

El espacio completa la configuración del módulo agregando un margen más alto.
Margen superior: 100 PX
Agregue la sección # 4 Color de fondo ¡Vaya a la siguiente y última sección! Agregue un color de fondo negro.
Color de fondo: # 000000
El borde agregue algunos rayos de la parte superior, izquierda y derecha a la sección.

A la parte superior izquierda: 8VW

A la esquina superior derecha: 8VW
Agregue la fila La estructura de la columna Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Agregue un módulo testimonial a la columna dinámica Agregue un módulo testimonial en una fila y seleccione un contenido dinámico para los diferentes elementos dentro del módulo.
Autor: Persona de contacto

Nombre de la publicación: Persona de contacto Nombre de la publicación
Cuerpo: testimonio
Imagen: Persona de contacto de imagen

Los elementos deshabilitan el icono de cotización aún más.

Muestra el icono de oferta: no
Color de fondo Entonces, cambie el color de fondo del módulo a negro.
Color de fondo: # 000000
Configuración de texto Pase a la pestaña Diseño del módulo y cambie el color del texto.
Color de texto: Abierto


Configuración de texto del cuerpo y luego cambie la configuración de texto de su cuerpo.
Font Corp: Montserrat

Tamaño de texto del cuerpo: 2REM (escritorio), 1.5rem (tableta y teléfono)
Configuración de texto Autor Modificar y configuración de texto del autor. Fuente del autor: Lora

Tamaño de texto del autor: 1.4REM (escritorio), 0.9rem (tableta y teléfono)
Configuración de texto Posición y complete la configuración del módulo cambiando la configuración de texto de posición según:

Posición de fuente: Lora
Posición de texto en color: # A8A8A8
Posición del tamaño de texto: 1.4REM (escritorio), 0.9rem (tableta y teléfono)

4. Guarde los cambios de constructor de temas y vea el resultado después de haber completado la plantilla, guarde todo el creador de temas Div Div y vea el resultado de su proyecto.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré cómo crear una hermosa plantilla de plantilla de cartera utilizando el creador de temas y el complemento ACF. Esta es una excelente manera de hacer la forma en que muestra proyectos en su sitio web. Una vez que haya asignado la plantilla de todos sus proyectos, se aplicará automáticamente a futuros elementos de cartera que agregue. ¡Pudiste descargar la plantilla JSON para 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.