Come creare un modello di progetto di portfolio dinamico con Divi e ACF

Cerchi un modo per semplificare il modo in cui crei gli elementi del portfolio sul tuo sito web? Se è così, adorerai questo post. In questo tutorial, ti mostreremo come creare un modello di progetto portfolio dinamico con Divi's Theme Builder e il plug-in ACF. La creazione di un modello di progetto portfolio ti consentirà di progettare il corpo del modello una volta e di applicarlo a tutti gli elementi del portfolio che aggiungerai anche in futuro. Il design del modello che abbiamo creato corrisponde a tutti i tipi di professioni creative, ma è solo la punta dell'iceberg. Puoi aggiungere tutti i campi che desideri e utilizzare quelli all'interno del tuo modello. Potrai anche scaricare gratuitamente il file JSON del design che ricreeremo!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di progetto del portfolio dinamico

Importante: dovrai aggiungere manualmente contenuto dinamico a ciascun modulo dopo aver impostato i campi ACF e aver caricato il file JSON del modello nel Theme Builder.

Per mettere le mani sul modello di progetto portfolio dinamico gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

1. Installa ACF e imposta i campi del progetto

Installa e attiva ACF

Inizia installando il plug-in Advanced Custom Fields gratuito sul tuo sito Web WordPress. Dopo averlo installato, assicurati di attivarlo anche tu.

Imposta gruppo di campi

Una volta installato e attivato il plugin, è il momento di iniziare a creare i campi personalizzati. Vai alle impostazioni del tuo plugin e aggiungi un nuovo gruppo di campi.

Modifica la posizione del tuo gruppo di campi. Vogliamo che venga visualizzato solo sui nostri progetti.

• Tipo di post – è uguale a – Progetto

Aggiungi campi

Continua aggiungendo un nuovo campo per ciascuno degli elementi menzionati di seguito:

• Problema
  • Etichetta del campo: Problema
  • Tipo di campo: area di testo
• Soluzione
  • Etichetta del campo: Soluzione
  • Tipo di campo: area di testo
• Testimonianza
  • Etichetta del campo: Testimonial
  • Tipo di campo: testo
• Referente
  • Etichetta del campo: Persona di contatto
  • Tipo di campo: testo
• Immagine della persona di contatto
  • Etichetta del campo: Immagine della persona di contatto
  • Tipo di campo: Immagine
• Persona di contatto Titolo di lavoro
  • Etichetta del campo: Persona di contatto Qualifica
  • Tipo di campo: testo
• Logo del cliente
  • Etichetta del campo: Logo del cliente
  • Tipo di campo: Immagine
• Sito Web del cliente
  • Etichetta del campo: Sito Web del cliente
  • Tipo di campo: URL
• Durata del progetto
  • Etichetta del campo: Durata del progetto
  • Tipo di campo: intervallo
  • Aggiungi: settimane

Sappi che sei libero di aggiungere tutti i campi che desideri, a seconda del modello di progetto che desideri creare. Per ricreare il design esatto che è stato mostrato nell'anteprima di questo post, avrai bisogno di tutti i campi sopra menzionati.

2. Crea nuovo progetto

Aggiungi il titolo e la descrizione del progetto al portfolio

Dopo aver impostato il gruppo di campi e tutti i suoi campi, è il momento di creare un progetto di esempio. Vai alla dashboard di WordPress, aggiungi un nuovo progetto e inserisci un titolo e una descrizione.

Carica immagine in primo piano

Quindi, carica un'immagine in primo piano a tua scelta.

Compila tutti i campi personalizzati

Continua compilando tutti i diversi campi personalizzati che hai aggiunto nella prima parte del tutorial.

3. Crea nuovo modello

Vai a Divi Theme Builder e crea un nuovo modello

È ora di iniziare a costruire il modello! Vai al Divi Theme Builder e aggiungi un nuovo modello.

Usa acceso

Applica il modello a tutti i tuoi progetti.

• Utilizzare su: tutti i progetti

4. Inizia a costruire il corpo del modello

Continua iniziando a costruire il corpo personalizzato del modello.

Sezione 1

Colore di sfondo

All'interno dell'editor del modello, noterai una sezione. Apri quella sezione e aggiungi un colore di sfondo nero.

• Colore di sfondo: #000000

Spaziatura

Aggiungi successivamente un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 250 px
• Imbottitura inferiore: 250 px

Frontiera

Aggiungi anche un raggio del bordo inferiore sinistro e destro.

• In basso a sinistra: 8vw
• In basso a destra: 8vw

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una prima riga alla sezione utilizzando la seguente struttura a colonne:

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto

Quindi, aggiungi un modulo di testo e inserisci del contenuto nella casella del contenuto.

• Corpo: Durata del progetto:

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: Montserrat
• Colore del testo: #a0a0a0
• Dimensione del testo: 1.2rem

Aggiungi il modulo di testo n. 2 alla colonna

Contenuto dinamico

Aggiungi un altro modulo di testo alla colonna e seleziona il contenuto dinamico della durata del progetto.

• Contenuto dinamico: durata del progetto
• Dopo: settimane

Impostazioni testo

Successivamente, modifica le impostazioni del testo del modulo.

• Carattere del testo: Lora
• Colore del testo: #ffffff
• Dimensione del testo: 1,5 rem

Aggiungi il modulo di testo n. 3 alla colonna

Contenuto dinamico

Aggiungi un altro modulo di testo e seleziona il contenuto dinamico del titolo del post/archivio.

• Contenuto dinamico: titolo post/archivio
• Prima: <H1>
• Dopo: </H1>

Impostazioni testo H1

Stile le impostazioni del testo H1 del modulo.

• Carattere dell'intestazione: Montserrat
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione: 6rem (desktop), 3rem (tablet e telefono)

Spaziatura

Completa le impostazioni del modulo aggiungendo un margine superiore e inferiore.

• Margine superiore: 100 px
• Margine inferiore: 100 px

Modulo Aggiungi contenuto post

Impostazioni testo

Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna è un modulo di contenuto dei post. Questo mostrerà la descrizione del tuo progetto. Modificare le impostazioni del testo del modulo come segue:

• Carattere del testo: Lora
• Colore del testo: #ffffff
• Dimensione del testo: 1,5 rem (desktop), 0,9 rem
• Altezza riga di testo: 2em

Aggiungi riga #2

Struttura della colonna

Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:

Aggiungi modulo immagine alla colonna 1

Contenuto dinamico

Aggiungi un modulo immagine alla colonna 1 e seleziona il contenuto dinamico del logo del cliente.

• Contenuto dinamico: logo del cliente

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Quindi, aggiungi un modulo di testo alla colonna 2 e inserisci una copia a tua scelta.

Collega contenuto dinamico

Collegare il modulo al sito Web del cliente selezionando il contenuto dinamico del sito Web del cliente nelle impostazioni del collegamento.

• Contenuto dinamico: sito web del cliente

Impostazioni testo

Successivamente, modifica le impostazioni del testo del modulo.

• Carattere del testo: Montserrat
• Colore del testo: #ffffff
• Dimensione del testo: 1,5 rem
• Altezza riga di testo: 1em

Spaziatura

Aggiungi anche un'imbottitura inferiore personalizzata.

• Imbottitura inferiore: 50 px

Frontiera

E completa le impostazioni del modulo aggiungendo un bordo inferiore.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #ffc300

Aggiungi sezione #2

Spaziatura

Alla prossima sezione! Rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Spaziatura

Apri le impostazioni della riga e rimuovi tutto il riempimento superiore inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo immagine alla colonna

Contenuto dinamico

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo immagine. Collega l'immagine all'immagine in evidenza del progetto.

• Contenuto dinamico: immagine in primo piano

Frontiera

Aggiungi anche un raggio del bordo inferiore sinistro e destro.

• In basso a sinistra: 8vw
• In basso a destra: 8vw

Aggiungi sezione #3

Spaziatura

Aggiungi un'altra sezione normale con un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 250 px
• Imbottitura inferiore: 250 px

Aggiungi riga n. 1

Struttura della colonna

Aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto H2

Aggiungi un modulo di testo alla colonna 1 e inserisci del contenuto H2 a tua scelta.

Impostazioni testo H2

Modificare le impostazioni del testo H2 come segue:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Peso del carattere: grassetto
• Intestazione 2 Dimensione testo: 2rem

Aggiungi modulo di testo alla colonna 2

Contenuto dinamico

Passa alla seconda colonna, aggiungi un modulo di testo e usa il contenuto dinamico del problema.

• Contenuto dinamico: problema

Impostazioni testo

Quindi, modifica le impostazioni del testo del modulo:

• Carattere del testo: Lora
• Dimensione del testo: 1.5rem (desktop), 0.9vw (tablet e telefono)
• Altezza riga di testo: 2em

Clona riga

Una volta completata la riga, vai avanti e clonala completamente.

Modifica la copia del modulo di testo nella colonna 1

Modificare la copia della colonna 1 Modulo di testo della riga duplicata.

Modifica il contenuto dinamico del modulo di testo nella colonna 2

Modifica anche il contenuto dinamico del modulo di testo nella colonna 2 della riga duplicata.

• Contenuto dinamico: soluzione

Aggiungi modulo pulsante alla colonna 2 della riga duplicata

Aggiungi copia

Continua aggiungendo un modulo pulsante alla colonna 2 della riga duplicata. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1,5 rem
• Colore del testo del pulsante: #000000
• Raggio bordo pulsante: 0px

• Carattere pulsante: Montserrat

Spaziatura

Completa le impostazioni del modulo aggiungendo un margine superiore.

• Margine superiore: 100 px

Aggiungi sezione #4

Colore di sfondo

Alla prossima e ultima sezione! Aggiungi un colore di sfondo nero.

• Colore di sfondo: #000000

Frontiera

Aggiungi anche un raggio del bordo superiore sinistro e destro alla sezione.

• In alto a sinistra: 8vw
• In alto a destra: 8vw

Aggiungi riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Aggiungi il modulo della testimonianza alla colonna

Contenuto dinamico

Aggiungi un modulo di testimonianza alla riga e seleziona del contenuto dinamico per i diversi elementi all'interno del modulo.

• Autore: Persona di contatto
• Titolo di lavoro: Persona di contatto Titolo di lavoro
• Corpo: Testimonianza
• Immagine: immagine della persona di contatto

Elementi

Disattiva l'icona della citazione successiva.

• Mostra icona preventivo: No

Colore di sfondo

Quindi, cambia il colore di sfondo del modulo in nero.

• Colore di sfondo: #000000

Impostazioni testo

Spostati sulla scheda di progettazione del modulo e cambia il colore del testo.

• Colore del testo: chiaro

Impostazioni del corpo del testo

Modifica successivamente le impostazioni del testo del corpo.

• Carattere del corpo: Montserrat
• Dimensioni del corpo del testo: 2 rem (desktop), 1,5 rem (tablet e telefono)

Impostazioni del testo dell'autore

Modifica anche le impostazioni del testo dell'autore.

• Font dell'autore: Lora
• Dimensione del testo dell'autore: 1.4rem (desktop), 0.9rem (tablet e telefono)

Impostazioni testo posizione

E completa le impostazioni del modulo modificando le impostazioni del testo di posizione di conseguenza:

• Carattere posizione: Lora
• Posizione del colore del testo: #a8a8a8
• Dimensione testo posizione: 1.4rem (desktop), 0.9rem (tablet e telefono)

4. Salva le modifiche del generatore di temi e visualizza il risultato

Una volta completato il modello, salva tutte le modifiche di Divi Theme Builder e visualizza il risultato sul tuo progetto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un bellissimo modello di progetto portfolio utilizzando Divi Theme Builder e il plug-in ACF. Questo è un ottimo modo per semplificare il modo in cui visualizzi i progetti sul tuo sito web. Una volta assegnato il modello a tutti i tuoi progetti, verrà automaticamente applicato ai futuri elementi del portfolio che aggiungerai. Sei stato anche in grado di scaricare gratuitamente il file JSON modello di questo design! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.