Cara Membuat Template Kartu Resep dengan Divi Theme Builder

Diterbitkan: 2019-11-26

Blogger makanan dan pembuat resep tahu betapa pentingnya memiliki tampilan yang konsisten pada resep yang mereka terbitkan. Solusi umum adalah dengan menggunakan plugin kartu resep tetapi itu datang dengan batasan desain. Sekarang, dengan Divi Theme Builder, Anda dapat membuat template kartu resep Anda sendiri untuk digunakan di seluruh situs dan blog Anda. Dengan bantuan plugin Advanced Custom Fields (ACF), mendesain kartu resep yang unik dan dapat digunakan kembali menjadi lebih mudah dari sebelumnya.

Dalam posting ini, kami akan menunjukkan cara membuat template kartu resep dengan konten dinamis. Dengan menggunakan pengaturan Divi Theme Builder, desain dapat diterapkan ke posting blog yang menyertakan resep dengan memilih kategori tertentu. Kami berharap tutorial ini akan menginspirasi Anda untuk membuat gaya kartu resep Anda sendiri dengan bidang khusus Anda sendiri.

Mari kita lihat bagaimana desain terlihat di berbagai ukuran layar.

Pratinjau Template Kartu Resep

Mari kita lihat bagaimana desain terlihat di berbagai ukuran layar.

Desktop

Tablet

Seluler

1. Unduh dan Instal Plugin Bidang Kustom Tingkat Lanjut

Cari dan Instal

Temukan plugin ACF dengan mencari 'Bidang Kustom Lanjutan' di bilah pencarian plugin, instal dan aktifkan.

Tambahkan Grup Bidang Baru

Klik pada tab ACF dan pilih 'tambah baru'. Beri nama grup 'Kartu Resep'. Tambahkan bidang khusus satu per satu melalui tombol 'tambah bidang'.

Tambahkan Bidang Kustom

Untuk setiap bidang khusus, klik tombol 'tambah bidang'. Masing-masing dapat disesuaikan untuk jenis konten yang berbeda. Daftar di bawah ini menentukan label dan jenis untuk setiap bidang. Tambahkan kata 'resep' di awal setiap label bidang agar mudah ditemukan saat membuat modul. Nama bidang akan terisi otomatis setelah Anda menambahkan label.

Judul Resep

Mulailah dengan judul resep.

  • Label Bidang: Judul Resep
  • Jenis Bidang: Teks
  • Diperlukan?: Ya
  • Teks Placeholder: Judul Resep
  • Batas Karakter: 30

Penulis Resep

Kemudian, buat bidang untuk penulis.

  • Label Bidang: Penulis Resep
  • Jenis Bidang: Teks
  • Diperlukan?: Ya
  • Teks Placeholder: Penulis

Waktu Persiapan Resep

Ikuti itu dengan waktu persiapan.

  • Label Bidang: Waktu Persiapan Resep
  • Jenis Bidang: Nomor
  • Diperlukan?: Ya
  • Teks Placeholder: ##
  • Awal: Waktu Persiapan:
  • Tambahkan: min.

Porsi Resep

Kemudian, porsinya.

  • Label Bidang: Sajian Resep
  • Jenis Bidang: Nomor
  • Diperlukan?: Ya
  • Teks Placeholder: ##
  • Tambahkan: Porsi:

Tip Rasa Resep

Tambahkan bidang tip rasa.

  • Label Bidang: Tip Rasa Resep
  • Jenis Bidang: Teks
  • Diperlukan?: Ya
  • Tambahkan: Tip Rasa:
  • Batas Karakter: 40

Gambar Resep

Sekarang, tambahkan bidang gambar.

  • Label Bidang: Gambar Resep
  • Jenis Bidang: Gambar
  • Diperlukan?: Ya

Judul Bahan Resep

Kemudian, judul bahan.

  • Label Bidang: Judul Bahan Resep
  • Jenis Bidang: Teks
  • Petunjuk: Tulis saja sama dengan teks placeholder.
  • Diperlukan?: Ya
  • Teks Placeholder: Bahan

Daftar Bahan Resep

Ikuti itu dengan daftar bahan.

  • Label Bidang: Daftar Bahan Resep
  • Jenis Bidang: Area Teks
  • Petunjuk: Tambahkan spasi setelah setiap item
  • Diperlukan?: Ya
  • Baris: 8
  • Baris Baru: Secara otomatis menambahkan <br>

Judul Persiapan Resep

Di samping yang terakhir, judul persiapan.

  • Label Bidang: Judul Persiapan Resep
  • Jenis Bidang: Teks
  • Petunjuk: Tulis saja sama dengan teks placeholder.
  • Diperlukan?: Ya
  • Teks Placeholder: Persiapan

Daftar Persiapan Resep

Terakhir, daftar persiapan.

  • Label Bidang: Daftar Persiapan Resep
  • Jenis Bidang: Area Teks
  • Petunjuk: Tambahkan spasi setelah setiap item
  • Diperlukan?: Ya
  • Baris: 10
  • Baris Baru: Secara otomatis menambahkan <br>

Publikasikan Grup Bidang

Publikasikan grup bidang. Jendela grup bidang Anda akan terlihat seperti tangkapan layar di bawah ini.

Cara Mengakses Konten Plugin ACF untuk Template Kartu Resep di Divi Builder

Bidang khusus lanjutan dapat ditambahkan ke modul Divi dengan mengklik ikon konten dinamis. Ikon ini berada di pojok kanan atas kotak konten. Ini adalah apa yang terlihat seperti:

2. Buat Template Kartu Resep Baru Dengan Divi Builder

Langkah Pembuat Tema Divi

1. Buat Kategori Resep

Anda memerlukan kategori bernama 'resep' sehingga Anda dapat menetapkan template untuk itu. Tambahkan di tab kategori melalui dasbor.

2. Buka Divi Theme Builder dan Tambahkan Template Baru

Buka pembuat tema Divi dan tambahkan templat baru.

3. Tambahkan Badan Global

Klik 'tambahkan badan global' dan tetapkan template untuk posting dalam kategori tertentu > resep. Kemudian, klik tombol 'buat template'.

4. Bangun Tubuh Kustom

Klik 'tambahkan badan global' dan pilih 'tambah badan khusus'.

3. Buat Ulang Desain Kartu Resep Menggunakan Konten Dinamis

Tambahkan Bagian Baru

Sekarang, kita bisa mulai mendesain template kartu resep. Saat pembuat Divi terbuka, pilih 'bangun dari awal'. Mulailah dengan menambahkan bagian baru.

Latar belakang

Di bagian pengaturan, tambahkan warna latar belakang.

  • Warna Latar Belakang: Abu-abu Muda #ededed

Perekat

Juga, sesuaikan ukuran di tab desain.

  • Lebar: 100%
  • Lebar Maks: 100%

Tambahkan Baris Pertama

Struktur Kolom

Tambahkan baris baru dengan satu kolom.

Perekat

Sebelum menambahkan modul, sesuaikan pengaturan ukuran baris.

  • Lebar Maks: 90%

Pengaturan Kolom

Latar belakang

Sesuaikan pengaturan kolom di dalam baris. Pertama, tambahkan warna latar belakang.

  • Warna Latar Belakang: Putih #ffffff

Berbatasan

Kemudian, ubah gaya perbatasan.

  • Sudut Bulat: 1vw keempat sudut
  • Gaya Perbatasan: Keempat sisi
  • Lebar: 5px
  • Warna: Abu-abu Sangat Gelap #333333

Tambahkan Modul Teks dengan Konten Dinamis

Isi

Setelah Anda menyelesaikan pengaturan baris dan kolom, saatnya untuk menambahkan modul. Mulailah dengan menambahkan modul teks. Di jendela konten, pilih konten dinamis untuk judul resep. Setelah dipilih, klik ikon roda gigi dan masukkan cuplikan H1.

  • Isi: Judul Resep
  • Pengaturan Tubuh:
    • Sebelum: <H1>
    • Setelah:</H1>

Teks Judul

Kemudian, gaya pengaturan teks H1 sesuai:

  • Tingkat Pos: H1
  • Font: Orienta
  • Berat: Tebal
  • Penjajaran: Pusat
  • Warna: Abu-abu Sangat Gelap #3d3d3d
  • Ukuran:
    • Desktop: 3vw
    • Tablet: 4vw
    • Telepon: 5vw
  • Spasi Huruf: 3px
  • Tinggi Garis: 1.5em

Jarak

Ubah juga nilai spasi.

  • Margin Bawah:
    • Desktop: -1vw
    • Tablet: -2vw
    • Telepon: -5vw
  • Bantalan Atas:
    • Desktop + Tablet: 1vw
    • Telepon: 2vw
  • Padding Bawah: 0vw
  • Bantalan Kiri + Kanan:
    • Desktop + Tablet: 3vw
    • Telepon: 4vw

Tambahkan Modul Teks ke-2 dengan Konten Dinamis

Isi

Tambahkan modul teks kedua dan pilih konten dinamis untuk penulis resep.

  • Tubuh: Penulis Resep

Teks

Kemudian, gaya teks.

  • Font: Encode Sans
  • Warna: Abu-abu Sangat Gelap #3d3d3d
  • Ukuran:
    • Desktop: 1.4vw
    • Tablet: 2.4vw
    • Telepon: 3vw
  • Penjajaran: Pusat

Jarak

Setelah itu, sesuaikan jarak.

  • Margin Atas: 1.5vw
  • Bantalan Atas:
    • Desktop + Tablet: 0vw
    • Telepon: 2vw
  • Padding Bawah: 2vw
  • Bantalan Kiri + Kanan:
    • Desktop: 2vw
    • Tablet + Telepon: 3vw

Tambahkan Baris ke-2

Struktur Kolom

Sekarang, tambahkan baris kedua menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan sesuaikan pengaturan ukuran yang sesuai:

  • Lebar Talang: 2
  • Lebar: 90%
  • Lebar Maks: 100%
  • Penjajaran Baris: Kiri

Jarak

Kemudian, jarak.

  • Padding Atas + Bawah: 0.5vw
  • Padding Kiri: 10vw

Visibilitas

Terakhir, di tab lanjutan, sesuaikan visibilitas.

  • Luapan Horisontal: Terlihat
  • Luapan Vertikal: Terlihat

Kolom 1 + 2 + 3 Pengaturan

Berbatasan

Gaya ketiga kolom dengan cara yang sama. Pertama, buka pengaturan perbatasan dan buat beberapa perubahan. Ulangi untuk ketiga kolom.

  • Sudut Bulat: 1vw keempat sudut
  • Gaya Perbatasan: Keempat sisi
  • Lebar: 5px
  • Warna: Abu-abu Sangat Gelap #333333

Mengubah

Untuk memberi desain efek melayang, sesuaikan pengaturan transformasi sebagai berikut. Ulangi untuk ketiga kolom.

  • Transform Scale On Hover: 105% x 105%

Tambahkan Modul Teks ke Kolom 1

Isi

Tambahkan modul teks dan biarkan jendela konten kosong untuk saat ini. Kami akan menambahkannya nanti.

Latar belakang

Tambahkan warna latar belakang ke modul.

  • Warna Latar Belakang: Hijau Jeruk #b1e88d

Teks Judul

Gaya pengaturan teks H5 berikutnya.

  • Tingkat Pos: H5
  • Huruf H5: Orienta
  • Warna H5: Abu-abu Sangat Gelap #3d3d3d
  • Ukuran H5:
    • Desktop: 1vw
    • Tablet: 2.3vw
    • Telepon: 3.3vw
  • Penjajaran: Pusat

Jarak

Terakhir, sesuaikan nilai spasi sebagai berikut.

  • Bantalan Atas:
    • Desktop: 1vw
    • Tablet: 1.5vw
    • Telepon: 3.5vw
  • Bantalan Bawah:
    • Desktop: 0.5vw
    • Tablet + Telepon: 1.5vw
  • Bantalan Kiri + Kanan:
    • Desktop: 2vw
    • Tablet + Telepon: 3vw

Duplikat Modul Teks Dari Kolom 1 Dua Kali dan Pindah ke Kolom 2 dan 3

Pada tampilan wireframe, duplikat modul teks di kolom pertama. Kemudian, pindahkan duplikat ke kolom 2 dan 3.

Tambahkan Konten Dinamis ke Modul Teks di Kolom 1

Tambahkan konten dinamis untuk waktu persiapan dan sesuaikan pengaturan.

  • Isi: Waktu Persiapan Resep
  • Pengaturan Tubuh:
    • Sebelum: <H5>Waktu Persiapan:
    • Setelah: mnt.</H5>

Tambahkan Konten Dinamis ke Modul Teks di Kolom 2

Tambahkan konten dinamis untuk penyajian resep dan sesuaikan pengaturannya.

  • Isi: Sajian Resep
  • Pengaturan Tubuh:
    • Sebelum: <H5>Penayangan:
    • Setelah: </H5>

Tambahkan Konten Dinamis ke Modul Teks di Kolom 3

Tambahkan konten dinamis untuk tip rasa dan sesuaikan pengaturannya.

  • Tubuh: Tip Rasa Resep
  • Pengaturan Tubuh:
    • Sebelum: <H5>Tips Rasa:
    • Setelah: </H5>

Tambahkan Baris ke-3

Struktur Kolom

Sekarang tambahkan baris ketiga menggunakan struktur kolom berikut:

Perekat

Sebelum menambahkan modul apa pun, sesuaikan ukuran baris.

  • Lebar Talang Kustom: 2
  • Lebar: 80%
  • Lebar Maks: 100%

Jarak

Juga, hapus margin atas default.

  • Margin Atas: 0vw

Visibilitas

Terakhir, sesuaikan visibilitas di tab lanjutan.

  • Luapan Horisontal: Terlihat
  • Luapan Vertikal: Terlihat

Kolom 1 + 2 + 3 Pengaturan

Berbatasan

Gaya ketiga kolom dengan cara yang sama, dimulai dengan pengaturan batas. Ulangi untuk kolom 2 dan 3.

  • Sudut Bulat: 1vw keempat sudut
  • Gaya Perbatasan: Keempat sisi
  • Lebar: 5px
  • Warna: Abu-abu Sangat Gelap #333333

Mengubah

Lanjutkan dengan menambahkan transformasi hover di tab desain. Ulangi untuk kolom 2 dan 3.

  • Transform Scale On Hover: 105% x 105%

Tambahkan Modul Gambar dengan Konten Dinamis ke Kolom 1

Isi

Tambahkan modul gambar dengan konten dinamis untuk gambar resep.

  • Gambar: Gambar Resep

Tambahkan Modul Teks dengan Konten Dinamis ke Kolom 2

Isi

Sekarang, tambahkan modul teks dengan konten dinamis untuk judul bahan. Klik ikon roda gigi dan masukkan cuplikan H3 sebagai berikut.

  • Isi Teks: Judul Bahan Resep
  • Pengaturan Tubuh:
    • Sebelumnya: <H3>
    • Setelah: </H3>

Teks Judul

Kemudian, gaya teks judul.

  • Tingkat Pos: H3
  • H3Font: Orienta
  • Warna H3: Abu-abu Sangat Gelap #3d3d3d
  • Ukuran H3:
    • Desktop: 1.6vw
    • Tablet: 2vw
    • Telepon: 5.5vw
  • Penjajaran: Pusat

Jarak

Lengkapi modul dengan mengatur jarak.

  • Margin Bawah: 0vw
  • Bantalan Atas:
    • Desktop: 2vw
    • Tablet: 3vw
    • Telepon: 4vw
  • Bantalan Kiri + Kanan:
    • Desktop: 2vw
    • Tablet + Telepon: 3vw

Tambahkan Modul Pembagi ke Kolom 2

Garis

Tambahkan modul pembagi dan gaya sebagai berikut.

  • Warna: Hijau Jeruk #b1e88d

Perekat

Kemudian sesuaikan nilai ukuran.

  • Berat: 5px
  • Lebar: 40%
  • Perataan: Kiri

Jarak

Terakhir, sesuaikan jarak.

  • Margin Atas: 0vw

Tambahkan Modul Teks dengan Konten Dinamis ke Kolom 2

Isi

Tambahkan modul teks dengan konten dinamis untuk daftar bahan. Klik ikon roda gigi di tab konten dinamis dan aktifkan HTML mentah.

  • Isi Teks: Daftar Bahan Resep
  • Pengaturan Tubuh: Aktifkan HTML Mentah

Teks

Kemudian, gaya teks sebagai berikut.

  • Font: Encode Sans
  • Warna: Abu-abu Sangat Gelap #333333
  • Ukuran:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Telepon: 3vw

Jarak

Juga, sesuaikan jaraknya.

  • Batas atas:
    • Desktop: -1vw
    • Tablet: -3vw
    • Telepon: -5vw
  • Bantalan Atas:
    • Desktop + Tablet: 0vw
  • Bantalan Bawah:
    • Desktop: 3vw
    • Tablet + Telepon: 4vw
  • Bantalan Kiri + Kanan:
    • Desktop: 3vw
    • Tablet: 4vw
    • Telepon: 5vw

Duplikat semua Modul di Kolom 2 dan Pindah ke Kolom 3

Pada tampilan wireframe, duplikat semua modul di kolom dua. Pindahkan modul yang digandakan ke kolom tiga dalam urutan yang sama.

Tambahkan Konten Dinamis di Modul Teks 1 di Kolom 3

Tambahkan konten dinamis untuk judul persiapan.

  • Isi: Judul Persiapan Resep

Tambahkan Konten Dinamis di Modul Teks ke-2 di Kolom 3

Juga, tambahkan konten dinamis untuk daftar persiapan ke modul teks terakhir kolom.

  • Isi: Daftar Persiapan Resep

Tambahkan Baris ke-4

Struktur Kolom

Untuk melengkapi template, kita membutuhkan modul konten posting. Tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Sebelum menambahkan modul, sesuaikan ukuran baris.

  • Lebar selokan khusus: 2
  • Lebar: 100%
  • Lebar Maks: 80%

Jarak

Ubah pengaturan spasi berikutnya.
  • Padding Kiri + Kanan: 0vw

Pengaturan Kolom 1

Latar belakang

Gaya kolom agar sesuai dengan kartu resep di atas. Pertama, tambahkan latar belakang.

  • Warna Latar Belakang: Putih #ffffff

Jarak

Juga, sesuaikan jaraknya.

  • Padding Kiri: 0vw

Berbatasan

Last but not least, ubah pengaturan perbatasan.

  • Sudut Bulat: 1vw keempat sudut
  • Gaya Perbatasan: keempat sisinya
  • Lebar: 5px
  • Warna: Abu-abu Sangat Gelap #333333

Biarkan Kolom 2 Kosong.

Tambahkan Modul Konten Posting ke Kolom 1

Teks

Tambahkan modul konten posting ke kolom satu dan gaya teks agar sesuai dengan template kartu resep.

  • Font: Encode Sans
  • Warna: Abu-abu Sangat Gelap #333333
  • Ukuran:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Telepon: 3vw
  • Tinggi Garis: 2em

Judul 1 Teks

  • Font: Orienta
  • Warna: Abu-abu Sangat Gelap #333333
  • Ukuran:
    • Desktop: 2vw
    • Tablet: 5vw
    • Telepon: 6vw

Judul 2 Teks

  • Font: Orienta
  • Warna: Abu-abu Sangat Gelap #333333
  • Ukuran:
    • Desktop: 1.8vw
    • Tablet: 4.5vw
    • Telepon: 5.5vw

Judul 3 Teks

  • Font: Orienta
  • Warna: Abu-abu Sangat Gelap #333333
  • Ukuran:
    • Desktop: 1.6vw
    • Tablet: 4.5vw
    • Telepon: 5vw

Jarak

Untuk mencocokkan gaya kartu resep, sesuaikan nilai spasi.

  • Padding Atas + Bawah: 2vw
  • Bantalan Kiri + Kanan:
    • Desktop: 4vw
    • Tablet + Telepon: 6vw

Jika Anda ingin mengubah warna garis blockquote atau warna tautan, Anda dapat melakukannya di penyesuai tema di bawah warna aksen.

4. Edit / Buat Posting Menggunakan Pengaturan Plugin ACF dan Template Kartu Resep

Masukkan Bidang Kustom

Buka atau tambahkan postingan. Di bawah area konten, Anda akan menemukan semua bidang khusus untuk templat kartu resep. Untuk membuat ulang desain roti panggang alpukat ini, isi kolom sebagai berikut.

Judul Resep:

  • Toast Alpukat Vegan Supergreen

Penulis Resep:

  • Magdalena Swifter – www.veganchef.com

Waktu Persiapan Resep:

  • 15

Porsi Resep:

  • 3

Tip Rasa Resep:

  • Gunakan serpihan garam laut dan minyak extra virgin

Gambar Resep:

  • Gambar Roti Alpukat

Judul Bahan Resep:

  • Bahan-bahan

Daftar Bahan Resep:

  • 3 Irisan Roti Gandum Utuh
  • 1 buah alpukat matang
  • 100 gram. Kacang Lebar yang Dimasak
  • 10g. kecambah hijau
  • 1 daun bawang cincang
  • 30g. Keju Feta Hancur
  • 1 Lemon Dipotong Setengah
  • Secukupnya Minyak Zaitun
  • Taburkan Garam Laut

Judul Persiapan Resep:

  • Persiapan

Daftar Persiapan Resep:

  • 1. Panggang irisan roti sesuai dengan keinginan Anda.
  • 2. Buka alpukat, buang ampasnya, haluskan dengan garpu.
  • 3. Peras jus lemon di atas alpukat, bumbui dengan garam.
  • 4. Oleskan tumbukan alpukat di atas roti panggang.
  • 5. Taburkan kacang panjang, taoge dan daun bawang cincang.
  • 6. Bumbui dengan garam.
  • 7. Tambahkan keju feta yang sudah dihancurkan.
  • 8. Akhiri dengan minyak zaitun.

Beri Judul Postingan

Judul

Jangan lupa untuk menambahkan judul ke posting Anda.

  • Resep Roti Bakar Alpukat

Tambahkan Konten, Pilih Kategori, dan Tambahkan Gambar Unggulan

Tulis atau masukkan konten posting blog ke editor biasa. Pilih kategori resep dan tambahkan gambar unggulan.

Pratinjau Template Kartu Resep

Sekali lagi, mari kita lihat lagi seperti apa postingan yang sudah selesai dengan template kartu resep di layar yang berbeda.

Desktop

Tablet

Seluler

Ini adalah Bungkus!

Mari kita tinjau kembali langkah-langkah yang kita ambil untuk mencapai desain template kartu resep ini.

  1. Instal plugin ACF.
  2. Siapkan grup bidang kartu resep.
  3. Tambahkan bidang khusus.
  4. Buat template baru dan tetapkan ke posting blog di bawah kategori 'resep'.
  5. Gunakan konten dinamis dari bidang ACF dalam modul.
  6. Buat atau edit postingan blog dengan mengisi kolom.
  7. Tambahkan konten posting blog.

Karena desain ini dibuat sebagai template dengan konten dinamis, desain ini akan tetap konsisten di semua posting blog resep yang menggunakan bidang kustom plugin ACF. Kami berharap desain template kartu resep ini menginspirasi semua jenis template resep baru dan inovatif untuk blog Anda yang berhubungan dengan makanan. Beri tahu kami pendapat Anda di komentar.