Cum să creați un șablon de proiect de portofoliu dinamic cu Divi și ACF

Căutați o modalitate de a simplifica modul în care creați articole de portofoliu pe site-ul dvs. web? Dacă da, îți va plăcea această postare. În acest tutorial, vă vom arăta cum să creați un șablon de proiect de portofoliu dinamic cu Divi's Theme Builder și pluginul ACF. Construirea unui șablon de proiect de portofoliu vă va permite să proiectați corpul șablonului o singură dată și să îl aplicați la toate articolele de portofoliu pe care le adăugați și în viitor. Designul șablonului pe care l-am creat se potrivește cu tot felul de profesii creative, dar este doar vârful aisbergului. Puteți adăuga oricâte câmpuri doriți și puteți utiliza cele din șablonul dvs. Veți putea descărca fișierul JSON al designului pe care îl vom recrea gratuit, de asemenea!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați gratuit șablonul de proiect din portofoliu dinamic

Important: va trebui să adăugați manual conținut dinamic la fiecare modul după ce configurați câmpurile ACF și încărcați șablonul fișier JSON în Theme Builder.

Pentru a pune mâna pe șablonul de proiect din portofoliu dinamic gratuit, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Instalați câmpurile ACF & Setup Project

Instalați și activați ACF

Începeți prin instalarea pluginului gratuit Advanced Custom Fields pe site-ul dvs. WordPress. După instalare, asigurați-vă că îl activați și.

Configurați grupul de câmpuri

După ce ați instalat și activat pluginul, este timpul să începeți crearea câmpurilor personalizate. Accesați setările pluginului și adăugați un nou grup de câmpuri.

Modificați locația grupului dvs. de câmp. Vrem să apară numai în proiectele noastre.

• Tipul postării - este egal cu - Proiect

Adăugați câmpuri

Continuați adăugând un câmp nou pentru fiecare dintre elementele menționate mai jos:

• Problemă
  • Etichetă de câmp: Problemă
  • Tipul câmpului: zonă de text
• Soluţie
  • Etichetă de câmp: Soluție
  • Tipul câmpului: zonă de text
• Mărturie
  • Etichetă de câmp: mărturie
  • Tipul câmpului: Text
• Persoana de contact
  • Etichetă câmp: persoană de contact
  • Tipul câmpului: Text
• Imagine persoană de contact
  • Etichetă câmp: Imagine persoană de contact
  • Tipul câmpului: Imagine
• Persoana de contact Titlul postului
  • Etichetă câmp: Persoană de contact Denumirea postului
  • Tipul câmpului: Text
• Logo-ul clientului
  • Etichetă de câmp: sigla clientului
  • Tipul câmpului: Imagine
• Site-ul clientului
  • Etichetă de câmp: Site-ul clientului
  • Tipul câmpului: URL
• Durata proiectului
  • Etichetă de câmp: Durata proiectului
  • Tipul câmpului: Gama
  • Atașați: săptămâni

Știți că sunteți liber să adăugați câte câmpuri doriți, în funcție de șablonul de proiect pe care doriți să îl creați. Pentru a recrea designul exact care a fost afișat în previzualizarea acestui post, veți avea nevoie de toate câmpurile menționate mai sus.

2. Creați un proiect nou

Adăugați titlul și descrierea proiectului de portofoliu

După ce ați configurat grupul de câmpuri și toate câmpurile sale, este timpul să creați un exemplu de proiect. Accesați tabloul de bord WordPress, adăugați un proiect nou și introduceți un titlu și o descriere.

Încărcați imaginea recomandată

Apoi, încărcați o imagine recomandată la alegere.

Completați toate câmpurile personalizate

Continuați completând toate diferitele câmpuri personalizate pe care le-ați adăugat în prima parte a tutorialului.

3. Creați un șablon nou

Accesați Divi Theme Builder și creați un șablon nou

E timpul să începeți construirea șablonului! Accesați Divi Theme Builder și adăugați un șablon nou.

Utilizați Activat

Aplicați șablonul la toate proiectele dvs.

• Utilizare activată: Toate proiectele

4. Începeți construirea corpului șablonului

Continuați începând să creați corpul personalizat al șablonului.

Sectiunea 1

Culoare de fundal

În editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și adăugați o culoare de fundal neagră.

• Culoare fundal: # 000000

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

• Căptușeală superioară: 250 px
• Căptușeală inferioară: 250 px

Frontieră

Adăugați și o rază de margine în stânga și în dreapta.

• Jos stânga: 8vw
• Jos dreapta: 8vw

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un prim rând la secțiune folosind următoarea structură de coloane:

Adăugați modulul de text nr. 1 în coloană

Adauga continut

Apoi, adăugați un modul de text și plasați un conținut în caseta de conținut.

• Corp: Durata proiectului:

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Montserrat
• Culoarea textului: # a0a0a0
• Dimensiune text: 1.2rem

Adăugați modulul de text nr. 2 în coloană

Conținut dinamic

Adăugați un alt modul de text în coloană și selectați durata conținutului dinamic al proiectului.

• Conținut dinamic: durata proiectului
• După: săptămâni

Setări text

Modificați setările de text ale modulului în continuare.

• Font text: Lora
• Culoarea textului: #ffffff
• Dimensiune text: 1,5rem

Adăugați modulul de text nr. 3 în coloană

Conținut dinamic

Adăugați un alt modul de text și selectați conținutul dinamic al titlului postării / arhivei.

• Conținut dinamic: titlu de postare / arhivă
• Înainte: <H1>
• După: </H1>

Setări text H1

Stilizați setările de text H1 ale modulului.

• Titlu Font: Montserrat
• Culoare text antet: #ffffff
• Dimensiune text antet: 6rem (Desktop), 3rem (Tabletă și telefon)

Spațiere

Completați setările modulului adăugând câteva margini de sus și de jos.

• Marja superioară: 100 px
• Marja inferioară: 100 px

Adăugați un modul de conținut pentru postare

Setări text

Următorul și ultimul modul de care avem nevoie în coloană este un modul Post Content. Aceasta va afișa descrierea proiectului dvs. Modificați setările de text ale modulului după cum urmează:

• Font text: Lora
• Culoarea textului: #ffffff
• Dimensiune text: 1.5rem (Desktop), 0.9rem
• Înălțimea liniei de text: 2em

Adăugați rândul # 2

Structura coloanei

Adăugați un alt rând la secțiune folosind următoarea structură de coloane:

Adăugați modulul de imagine în coloana 1

Conținut dinamic

Adăugați un modul de imagine în coloana 1 și selectați conținutul dinamic al siglei clientului.

• Conținut dinamic: sigla clientului

Adăugați un modul de text în coloana 2

Adauga continut

Apoi, adăugați un modul de text în coloana 2 și introduceți o copie la alegere.

Conectați conținut dinamic

Conectați modulul la site-ul clientului selectând conținutul dinamic al site-ului clientului în setările de legătură.

• Conținut dinamic: site-ul clientului

Setări text

Modificați setările de text ale modulului în continuare.

• Font text: Montserrat
• Culoarea textului: #ffffff
• Dimensiune text: 1,5rem
• Înălțimea liniei de text: 1em

Spațiere

Adăugați și o umplutură personalizată de fund.

• Căptușeală inferioară: 50 px

Frontieră

Și completați setările modulului adăugând o margine de jos.

• Lățimea marginii inferioare: 1 px
• Culoare margine inferioară: # ffc300

Adăugați secțiunea 2

Spațiere

Treci la următoarea secțiune! Eliminați toate căptușelile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați rând

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Spațiere

Deschideți setările rândului și eliminați toate umpluturile implicite în partea de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați modulul de imagine în coloană

Conținut dinamic

Singurul modul de care avem nevoie în acest rând este un modul de imagine. Conectați imaginea la imaginea prezentată a proiectului.

• Conținut dinamic: imagine prezentată

Frontieră

Adăugați și o rază de margine în stânga și în dreapta.

• Jos stânga: 8vw
• Jos dreapta: 8vw

Adăugați secțiunea nr. 3

Spațiere

Adăugați o altă secțiune obișnuită, cu niște umpluturi personalizate de sus și de jos.

• Căptușeală superioară: 250 px
• Căptușeală inferioară: 250 px

Adăugați rândul # 1

Structura coloanei

Adăugați un rând nou la secțiune folosind următoarea structură de coloane:

Adăugați un modul de text în coloana 1

Adăugați conținut H2

Adăugați un modul de text în coloana 1 și introduceți un conținut H2 la alegere.

Setări text H2

Modificați setările de text H2 după cum urmează:

• Rubrica 2 Font: Montserrat
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Dimensiune text: 2rem

Adăugați un modul de text în coloana 2

Conținut dinamic

Treceți la a doua coloană, adăugați un modul de text și utilizați conținutul dinamic cu probleme.

• Conținut dinamic: problemă

Setări text

Apoi, modificați setările de text ale modulului:

• Font text: Lora
• Dimensiune text: 1,5rem (desktop), 0,9vw (tabletă și telefon)
• Înălțimea liniei de text: 2em

Clone Row

După ce ați terminat rândul, continuați și clonați-l complet.

Modificați copia modulului de text din coloana 1

Schimbați copia coloanei 1 Modulul text al rândului duplicat.

Modificați conținutul dinamic al modulului de text din coloana 2

Modificați și conținutul dinamic al modulului de text din coloana 2 a rândului duplicat.

• Conținut dinamic: soluție

Adăugați un modul buton la coloana 2 a rândului duplicat

Adăugați o copie

Continuați adăugând un modul buton în coloana 2 a rândului duplicat. Adăugați o copie la alegere.

Setări buton

Treceți la fila de proiectare a modulului și modificați setările butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1.5rem
• Culoarea textului butonului: # 000000
• Raza chenarului butonului: 0 px

• Buton Font: Montserrat

Spațiere

Completați setările modulului adăugând o marjă superioară.

• Marja superioară: 100 px

Adăugați secțiunea # 4

Culoare de fundal

Treci la următoarea și ultima secțiune! Adăugați o culoare de fundal neagră.

• Culoare fundal: # 000000

Frontieră

Adăugați niște raze de margine sus, stânga și dreapta la secțiune.

• În stânga sus: 8vw
• În dreapta sus: 8vw

Adăugați rând

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Adăugați un modul Testimonial în coloană

Conținut dinamic

Adăugați un modul Testimonial la rând și selectați un conținut dinamic pentru diferitele elemente din interiorul modulului.

• Autor: persoană de contact
• Denumirea postului: Persoana de contact Denumirea postului
• Corp: mărturie
• Imagine: Imagine persoană de contact

Elemente

Dezactivați pictograma citatului în continuare.

• Afișează pictograma ofertă: Nu

Culoare de fundal

Apoi, schimbați culoarea de fundal a modulului în negru.

• Culoare fundal: # 000000

Setări text

Mutați pe fila de proiectare a modulului și schimbați culoarea textului.

• Culoarea textului: deschis

Setări text corp

Modificați apoi setările pentru textul corpului.

• Font corp: Montserrat
• Dimensiune text corp: 2rem (desktop), 1,5rem (tabletă și telefon)

Setări text autor

Modificați și setările textului autorului.

• Autor Font: Lora
• Dimensiunea textului autorului: 1.4rem (Desktop), 0.9rem (Tabletă și telefon)

Setări text poziție

Și completați setările modulului modificând setările textului de poziție în consecință:

• Poziția Font: Lora
• Culoare text poziție: # a8a8a8
• Poziție Dimensiune text: 1.4rem (Desktop), 0.9rem (Tabletă și telefon)

4. Salvați modificările constructorului de teme și vedeți rezultatul

După ce ați completat șablonul, salvați toate modificările Divi Theme Builder și vizualizați rezultatul proiectului dvs.!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un șablon de proiect de portofoliu frumos folosind Divi Theme Builder și pluginul ACF. Acesta este un mod excelent de a eficientiza modul în care afișați proiecte pe site-ul dvs. web. Odată ce ați atribuit șablonul tuturor proiectelor dvs., acesta se va aplica automat viitoarelor articole de portofoliu pe care le adăugați. Ați putut descărca gratuit și șablonul JSON al acestui design! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.