Cara Membuat Template Proyek Portofolio Dinamis dengan Divi & ACF

Mencari cara untuk merampingkan cara Anda membuat item portofolio di situs web Anda? Jika demikian, Anda akan menyukai posting ini. Dalam tutorial ini, kami akan menunjukkan cara membuat template proyek portofolio dinamis dengan Divi's Theme Builder dan plugin ACF. Membangun templat proyek portofolio akan memungkinkan Anda mendesain badan templat sekali dan menerapkannya ke semua item portofolio yang Anda tambahkan di masa mendatang juga. Desain template yang kami buat cocok dengan semua jenis profesi kreatif, tetapi itu hanya puncak gunung es. Anda dapat menambahkan bidang sebanyak yang Anda inginkan dan menggunakannya di dalam template Anda. Anda akan dapat mengunduh file JSON dari desain yang akan kami buat ulang secara gratis juga!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Proyek Portofolio Dinamis secara GRATIS

Penting: Anda harus menambahkan konten dinamis secara manual ke setiap modul setelah Anda menyiapkan bidang ACF dan mengunggah file JSON template ke Pembuat Tema.

Untuk mendapatkan template proyek portofolio dinamis gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Instal Bidang Proyek ACF & Setup

Instal & Aktifkan ACF

Mulailah dengan menginstal plugin Bidang Kustom Tingkat Lanjut gratis di situs web WordPress Anda. Setelah menginstalnya, pastikan Anda mengaktifkannya juga.

Siapkan Grup Bidang

Setelah Anda menginstal dan mengaktifkan plugin, saatnya untuk mulai membuat bidang khusus. Buka pengaturan plugin Anda dan tambahkan grup bidang baru.

Ubah lokasi grup bidang Anda. Kami ingin itu muncul di proyek kami saja.

• Jenis Posting – sama dengan – Proyek

Tambahkan Bidang

Lanjutkan dengan menambahkan bidang baru untuk setiap item yang disebutkan di bawah ini:

• Masalah
  • Label Bidang: Masalah
  • Jenis Bidang: Area Teks
• Larutan
  • Label Bidang: Solusi
  • Jenis Bidang: Area Teks
• Kesaksian
  • Label Bidang: Kesaksian
  • Jenis Bidang: Teks
• Kontak person
  • Label Bidang: Kontak Person
  • Jenis Bidang: Teks
• Gambar Kontak Person
  • Label Bidang: Gambar Kontak Person
  • Jenis Bidang: Gambar
• Judul Pekerjaan Kontak Person
  • Label Bidang: Judul Pekerjaan Kontak Person
  • Jenis Bidang: Teks
• Logo Klien
  • Label Bidang: Logo Klien
  • Jenis Bidang: Gambar
• Situs Web Klien
  • Label Bidang: Situs Web Klien
  • Jenis Bidang: Url
• Durasi proyek
  • Label Bidang: Durasi Proyek
  • Tipe Bidang: Rentang
  • Tambahkan: minggu

Ketahuilah bahwa Anda bebas menambahkan bidang sebanyak yang Anda inginkan, tergantung pada templat proyek yang ingin Anda buat. Untuk membuat ulang desain persis seperti yang ditampilkan di pratinjau postingan ini, Anda memerlukan semua bidang yang disebutkan di atas.

2. Buat Proyek Baru

Tambahkan Judul & Deskripsi Proyek Portofolio

Setelah Anda menyiapkan grup bidang dan semua bidangnya, saatnya membuat proyek sampel. Buka dasbor WordPress Anda, tambahkan proyek baru dan masukkan judul dan deskripsi.

Unggah Gambar Unggulan

Kemudian, unggah gambar unggulan pilihan Anda.

Isi Semua Bidang Kustom

Lanjutkan dengan mengisi semua bidang khusus yang berbeda yang telah Anda tambahkan di bagian pertama tutorial.

3. Buat Template Baru

Buka Divi Theme Builder & Buat Template Baru

Saatnya mulai membuat template! Buka Divi Theme Builder dan tambahkan template baru.

Digunakan pada

Terapkan template ke semua proyek Anda.

• Gunakan Pada: Semua Proyek

4. Mulai Membangun Tubuh Template

Lanjutkan dengan mulai membuat badan kustom template.

Bagian 1

Warna latar belakang

Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan warna latar belakang hitam.

• Warna Latar Belakang: #000000

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 250px
• Padding Bawah: 250px

Berbatasan

Tambahkan beberapa radius batas kiri dan kanan bawah juga.

• Kiri Bawah: 8vw
• Kanan Bawah: 8vw

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Teks #1 ke Kolom

Tambah isi

Kemudian, tambahkan Modul Teks dan tempatkan beberapa konten di kotak konten.

• Isi: Durasi Proyek:

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Montserrat
• Warna Teks: #a0a0a0
• Ukuran Teks: 1.2rem

Tambahkan Modul Teks #2 ke Kolom

Konten Dinamis

Tambahkan Modul Teks lain ke kolom dan pilih konten dinamis durasi proyek.

• Konten Dinamis: Durasi Proyek
• Setelah: minggu

Pengaturan Teks

Ubah pengaturan teks modul berikutnya.

• Font Teks: Lora
• Warna Teks: #ffffff
• Ukuran Teks: 1.5rem

Tambahkan Modul Teks #3 ke Kolom

Konten Dinamis

Tambahkan Modul Teks lain dan pilih konten dinamis judul posting/arsip.

• Konten Dinamis: Judul Postingan/Arsip
• Sebelum: <H1>
• Setelah: </H1>

Pengaturan Teks H1

Gaya pengaturan teks H1 modul.

• Font Judul: Montserrat
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 6rem (Desktop), 3rem (Tablet & Ponsel)

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin atas dan bawah.

• Margin Atas: 100px
• Margin Bawah: 100px

Tambahkan Modul Konten Posting

Pengaturan Teks

Modul selanjutnya dan terakhir yang kita butuhkan di kolom adalah Post Content Module. Ini akan menampilkan deskripsi proyek Anda. Ubah pengaturan teks modul sebagai berikut:

• Font Teks: Lora
• Warna Teks: #ffffff
• Ukuran Teks: 1.5rem (Desktop), 0.9rem
• Tinggi Baris Teks: 2em

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Gambar ke Kolom 1

Konten Dinamis

Tambahkan Modul Gambar ke kolom 1 dan pilih konten dinamis logo klien.

• Konten Dinamis: Logo Klien

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Kemudian, tambahkan Modul Teks ke kolom 2 dan masukkan beberapa salinan pilihan Anda.

Tautkan Konten Dinamis

Tautkan modul ke situs web klien dengan memilih konten dinamis situs web klien di pengaturan tautan.

• Konten Dinamis: Situs Web Klien

Pengaturan Teks

Ubah pengaturan teks modul berikutnya.

• Font Teks: Montserrat
• Warna Teks: #ffffff
• Ukuran Teks: 1.5rem
• Tinggi Baris Teks: 1em

Jarak

Tambahkan beberapa bantalan bawah kustom juga.

• Padding Bawah: 50px

Berbatasan

Dan selesaikan pengaturan modul dengan menambahkan batas bawah.

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #ffc300

Tambahkan Bagian #2

Jarak

Ke bagian berikutnya! Hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Jarak

Buka pengaturan baris dan hapus semua bantalan atas bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Gambar ke Kolom

Konten Dinamis

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Gambar. Hubungkan gambar ke gambar unggulan proyek.

• Konten Dinamis: Gambar Unggulan

Berbatasan

Tambahkan beberapa radius batas kiri dan kanan bawah juga.

• Kiri Bawah: 8vw
• Kanan Bawah: 8vw

Tambahkan Bagian #3

Jarak

Tambahkan bagian reguler lainnya dengan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 250px
• Padding Bawah: 250px

Tambahkan Baris #1

Struktur Kolom

Tambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom 1

Tambahkan Konten H2

Tambahkan Modul Teks ke kolom 1 dan masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Ubah pengaturan teks H2 sebagai berikut:

• Judul 2 Font: Montserrat
• Judul 2 Berat Font: Tebal
• Judul 2 Ukuran Teks: 2rem

Tambahkan Modul Teks ke Kolom 2

Konten Dinamis

Pindah ke kolom kedua, tambahkan Modul Teks dan gunakan konten dinamis masalah.

• Konten Dinamis: Masalah

Pengaturan Teks

Kemudian, ubah pengaturan teks modul:

• Font Teks: Lora
• Ukuran Teks: 1.5rem (Desktop), 0.9vw (Tablet & Telepon)
• Tinggi Baris Teks: 2em

Baris Klon

Setelah Anda menyelesaikan baris, lanjutkan dan klon sepenuhnya.

Ubah Salinan Modul Teks di Kolom 1

Ubah salinan kolom 1 Modul Teks dari baris duplikat.

Ubah Konten Dinamis Modul Teks di Kolom 2

Ubah konten dinamis Modul Teks di kolom 2 dari baris duplikat juga.

• Konten Dinamis: Solusi

Tambahkan Modul Tombol ke Kolom 2 Baris Duplikat

Tambahkan Salinan

Lanjutkan dengan menambahkan Modul Tombol ke kolom 2 dari baris duplikat. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain modul dan ubah pengaturan tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1.5rem
• Warna Teks Tombol: #000000
• Radius Perbatasan Tombol: 0px

• Font Tombol: Montserrat

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin atas.

• Margin Atas: 100px

Tambahkan Bagian #4

Warna latar belakang

Ke bagian berikutnya dan terakhir! Tambahkan warna latar belakang hitam.

• Warna Latar Belakang: #000000

Berbatasan

Tambahkan beberapa radius batas kiri dan kanan atas ke bagian juga.

• Kiri Atas: 8vw
• Kanan Atas: 8vw

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Testimonial ke Kolom

Konten Dinamis

Tambahkan Modul Testimonial ke baris dan pilih beberapa konten dinamis untuk berbagai elemen di dalam modul.

• Penulis: Kontak Person
• Judul Pekerjaan: Judul Pekerjaan Kontak Person
• Isi: Kesaksian
• Gambar: Gambar Kontak Person

Elemen

Nonaktifkan ikon kutipan berikutnya.

• Tampilkan Ikon Kutipan: Tidak

Warna latar belakang

Kemudian, ubah warna latar belakang modul menjadi hitam.

• Warna Latar Belakang: #000000

Pengaturan Teks

Pindah pada tab desain modul dan ubah warna teks.

• Warna Teks: Cahaya

Pengaturan Teks Tubuh

Ubah pengaturan teks isi selanjutnya.

• Font Tubuh: Montserrat
• Ukuran Teks Tubuh: 2rem (Desktop), 1,5rem (Tablet & Ponsel)

Pengaturan Teks Penulis

Ubah juga pengaturan teks penulis.

• Font Penulis: Lora
• Ukuran Teks Penulis: 1.4rem (Desktop), 0.9rem (Tablet & Telepon)

Pengaturan Teks Posisi

Dan selesaikan pengaturan modul dengan mengubah pengaturan teks posisi yang sesuai:

• Font Posisi: Lora
• Warna Teks Posisi: #a8a8a8
• Posisi Ukuran Teks: 1.4rem (Desktop), 0.9rem (Tablet & Telepon)

4. Simpan Perubahan Pembuat Tema & Lihat Hasil

Setelah Anda menyelesaikan template, simpan semua perubahan Divi Theme Builder dan lihat hasilnya di proyek Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat template proyek portofolio yang indah menggunakan Divi Theme Builder dan plugin ACF. Ini adalah cara yang bagus untuk merampingkan cara Anda menampilkan proyek di situs web Anda. Setelah Anda menetapkan template untuk semua proyek Anda, itu akan secara otomatis berlaku untuk item portofolio masa depan yang Anda tambahkan. Anda juga dapat mengunduh file template JSON dari desain ini secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.