Cara Menggunakan Fitur Konten Dinamis Divi untuk Mendesain Tata Letak Postingan Dinamis

Fitur Konten Dinamis baru Divi memberi kita kemampuan untuk membangun tata letak dinamis untuk posting blog (dan banyak lagi). Dan ada alasan bagus yang dapat Anda pertimbangkan untuk melakukan ini. Salah satu alasannya adalah desain. Anda dapat mendesain beberapa tata letak posting yang luar biasa dengan Divi menggunakan pembuat visual, terutama ketika Anda menggunakan tata letak siap pakai yang tersedia sebagai titik awal. Alasan lainnya adalah kenyamanan. Setelah tata letak posting dirancang dengan semua elemen konten dinamis di tempatnya (seperti kategori, gambar unggulan, tag posting, bidang khusus, dll.), proses membuat dan memperbarui posting blog menjadi sangat disederhanakan. Selain konten posting yang sebenarnya, semua data posting lainnya dapat diperbarui tanpa harus menggunakan pembuat visual.

Dalam tutorial ini, saya akan menunjukkan cara membangun tata letak posting dinamis di Divi. Dengan memulai dengan tata letak yang sudah jadi, saya akan memandu Anda melalui proses menambahkan konten dinamis di seluruh tata letak dan kemudian mendesain konten tersebut agar sesuai. Saya bahkan akan memperkenalkan cara sederhana untuk menggunakan bidang khusus sebagai konten dinamis.

Mari kita mulai.

Sneak Peek

Apa yang Anda Butuhkan untuk Memulai

Untuk tutorial ini, Anda memerlukan yang berikut:

• Tema Divi
• Paket Tata Letak Pelatih Pribadi. Paket tata letak ini dapat diakses dari Divi Builder. Kami akan menggunakan Tata Letak Halaman Layanan Pelatih Pribadi untuk memulai desain tata letak pos kami.

Saya juga akan menunjukkan kepada Anda bagaimana memanfaatkan bidang khusus untuk membangun bagian latihan unggulan menggunakan fungsionalitas jenis pos khusus. Bidang khusus dibangun di WordPress dan tidak memerlukan plugin tambahan atau apa pun. Jadi Anda sudah memiliki apa yang Anda butuhkan.

Bagian 1: Menambahkan Tata Letak Premade ke Postingan

Untuk memulai, lanjutkan dan buat posting baru (bukan halaman), beri judul posting Anda, lalu klik tombol Gunakan Divi Builder. Jangan gunakan pembuat visual karena pertama-tama kita harus menyesuaikan pengaturan posting kita dari layar editor WordPress default.

Karena kami ingin menambahkan tata letak premade kami untuk menarik gambar kami dari tata letak (kami membutuhkannya untuk gambar unggulan kami). Klik tombol Load Layout yang terletak di menu Divi Builder.

Dari popup Muat Dari Perpustakaan, pilih Tata Letak Halaman Layanan Pelatih Pribadi dan terapkan ke pos Anda dengan mengeklik tombol "Gunakan Tata Letak Ini".

Kemudian publikasikan posting Anda untuk menyimpan pengaturan Anda.

Bagian 2: Memperbarui Pengaturan Halaman Divi, Posting Meta Data, dan Gambar Unggulan

Pengaturan Halaman Divi

Penting bagi kami untuk memperbarui pengaturan halaman Divi sehingga tata letak baru kami sesuai dengan desain. Kita juga perlu menyembunyikan tampilan judul posting default karena kita akan menggunakan modul judul posting sebagai gantinya.

Di kanan atas halaman, temukan kotak Pengaturan Halaman Divi dan perbarui yang berikut ini:

Tata Letak Halaman: Lebar Penuh
Tampilkan Judul Posting: Sembunyikan

Jika Anda tidak melihat Pengaturan Halaman Divi, Anda mungkin belum mengaktifkan Divi Builder, jadi pastikan Anda melakukannya terlebih dahulu.

Tambahkan Kategori

Di bawah kotak kategori, tambahkan kategori baru yang disebut "Latihan Kekuatan" dan pastikan itu adalah satu-satunya kategori yang dipilih.

Tambahkan tanda

Di kotak tag, tambahkan tiga tag berikut: Kecepatan, Pelatihan, dan Latihan.

Gambar Unggulan

Selanjutnya, tambahkan gambar unggulan yang cocok dengan gambar latar belakang yang digunakan di header tata letak seperti yang ditunjukkan pada gambar di bawah.

Bagian 3: Menambahkan Bidang Kustom untuk Konten Latihan Dinamis

Bidang Kustom dibangun di WordPress. Mereka memungkinkan penulis posting untuk menambahkan informasi tambahan (disebut meta-data) ke posting selain meta-data default seperti kategori, penulis posting, tanggal posting, dll. Pada tingkat dasar, bidang khusus dapat digunakan untuk menampilkan cuaca atau suasana hati penulis saat menulis postingan. Tetapi ada banyak cara berbeda untuk menggunakan bidang khusus untuk membuat konten dinamis untuk situs web Anda. Jangan ragu untuk membaca lebih lanjut tentang cara menambahkan bidang khusus ke situs web Anda. Tetapi untuk kasus penggunaan ini, saya pikir Anda akan memahami konsep dasar bidang khusus dengan membangun beberapa untuk Anda sendiri.

Untuk contoh ini, saya akan menunjukkan cara menambahkan beberapa bidang khusus yang dapat digunakan untuk menambahkan konten dinamis ke postingan Anda. Konten dinamis untuk contoh ini adalah latihan unggulan. Setelah bidang khusus ditempatkan, yang perlu dilakukan oleh penulis pos adalah mengisi nilai bidang khusus dan konten akan diperbarui (secara dinamis) ke pos tanpa harus memuat Visual Builder.

Untuk melakukan ini, gulir ke bawah ke bagian bawah pos dan temukan kotak Bidang Kustom. Jika karena alasan tertentu tidak ditampilkan, pastikan Anda memilihnya dari opsi layar di bagian atas halaman.

Kemudian klik dropdown kotak Custom Fields (jika diciutkan) untuk menambahkan custom field baru dan masukkan berikut ini:

Nama: judul latihan
Nilai: Latihan Unggulan

Kemudian klik tombol Tambahkan Bidang Kustom.

Nama adalah cara Anda mengidentifikasi bidang khusus di Divi. Nilai adalah konten yang akan ditambahkan secara dinamis ke halaman menggunakan fitur konten dinamis Divi (lebih lanjut tentang ini nanti).

Lanjutkan proses ini untuk menambahkan bidang khusus berikut ke situs web Anda.

Nama: pemanasan
Nilai: lari 800m

Nama: durasi
Nilai: 30 menit

Nama: angkat berat
Nilai:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Nama: dinginkan
Nilai: lari 400m

Catatan: Bidang khusus ini akan ditambahkan ke Tema Divi dan akan tersedia di setiap pos baru yang Anda buat di masa mendatang. Dengan kata lain, itu tidak terbatas pada satu posting ini.

Jangan lupa untuk memperbarui posting Anda!

Bagian 4: Menambahkan Konten Dinamis ke Tata Letak Posting Menggunakan Visual Builder

Sekarang setelah kita memiliki pengaturan posting dan data meta, saatnya untuk mulai menambahkan konten dinamis ke posting kita. Untuk melakukannya, gunakan Visual Builder.

Untuk mempermudah mencari dan mengedit desain tata letak tingkat lanjut ini, buka menu pengaturan dan atur Mode Interaksi Default Builder ke Mode Klik.

Di bagian header, hapus modul tombol (kami tidak membutuhkannya).

Mengganti Gambar Latar Belakang dengan Konten Dinamis Gambar Unggulan

Untuk bagian pertama dari konten dinamis kami, kami akan mengganti gambar latar belakang yang digunakan di kolom 1 baris bagian tajuk atas kami dengan gambar unggulan yang digunakan untuk posting. Untuk melakukan ini, buka pengaturan baris dan temukan pengaturan latar belakang untuk kolom 1 dan klik tab gambar latar belakang. Kemudian hapus gambar yang saat ini ada dan arahkan kursor ke kotak pratinjau gambar latar belakang. Anda akan melihat ikon konten dinamis di kanan atas kotak. Klik untuk membuka opsi konten dinamis. Kemudian pilih opsi konten dinamis Gambar Unggulan dari daftar.

Tata letak Anda akan terlihat persis sama karena kami menggunakan gambar yang sama. Satu-satunya perbedaan adalah sekarang gambar latar belakang ditarik dari gambar apa pun yang ditetapkan sebagai gambar unggulan Anda dari pos. Inilah keindahan konten dinamis!

Ayo lanjutkan.

Menambahkan Judul Postingan dengan Modul Judul Posting

Di bawah modul teks yang saat ini memegang judul halaman, tambahkan modul Judul Postingan. Ada juga opsi untuk menggunakan tambahkan judul posting ke modul menggunakan konten dinamis, tetapi karena Modul Judul Posting sudah berfungsi seperti konten dinamis dan mempertahankan tag heading h1 untuk SEO, itu sempurna karena menggunakannya untuk tata letak posting kustom Anda .

Kemudian perbarui pengaturan modul judul posting sebagai berikut:

Tampilkan Meta: TIDAK
Tampilkan Gambar Unggulan: TIDAK

Sekarang buka modul teks di atas dan salin gaya heading h2 dengan mengklik kanan pada tab h2 dan memilih opsi dari daftar ini.

Kemudian rekatkan gaya heading h2 ke modul judul posting dengan mengklik kanan pada modul dan memilih opsi dari daftar.

Setelah itu, kembali lagi ke modul teks di atas dan salin gaya spasi dan tempel ke modul judul posting. Kemudian ubah warna teks judul posting menjadi terang untuk mendapatkan warna putih.

Sekarang judul posting Anda harus sesuai dengan desain judul tata letak aslinya.

Sekarang Anda dapat menghapus modul teks yang berisi judul asli.

Menggunakan Konten Dinamis untuk Membuat Baris Meta-Data

Pindah ke bagian kedua dari tata letak. Kemudian keluarkan padding atas bagian dengan menyeretnya di pembuat visual atau mengaturnya ke 0px di pengaturan bagian.

Di baris pertama dari bagian kedua tata letak, Anda akan melihat modul teks (memiliki konten "Tentang Pelatihan Pribadi") dengan pembagi di bawahnya. Di sinilah kita akan membangun baris meta-data kustom kita menggunakan konten dinamis.

Kami ingin ukuran baris ini cocok dengan ukuran baris di bagian atas. Untuk melakukan ini, buka pengaturan baris dari baris di bagian atas dan salin gaya ukuran. Kemudian tempelkan ke baris pertama dari bagian kedua. Kemudian perbarui talang baris ke 2. Ukuran baru akan terlihat seperti tangkapan layar berikut.

Anda juga perlu menambahkan spasi khusus sebagai berikut:

Padding Kustom: 1% kiri, 1% Kanan

Kemudian simpan pengaturan baris.

Sekarang perbarui struktur kolom baris ke tata letak empat kolom.

Sekarang kita siap untuk menambahkan konten dinamis kita. Untuk melakukan ini, buka pengaturan modul teks sekarang di kolom paling kiri dan arahkan kursor ke kotak konten. Anda akan melihat ikon konten dinamis di kanan atas kotak. Klik untuk membuka opsi konten dinamis.

Kemudian pilih opsi: Post Publish Date.

Kemudian ubah format tanggal yang sesuai.

Ini akan menambahkan tanggal publikasi posting sebagai konten dinamis.

Untuk menata modul teks dengan konten tanggal dinamis, salin gaya modul modul teks di kolom kiri baris tepat di bawah.

Kemudian tempel gaya modul ke modul teks dengan konten tanggal dinamis dan ubah warna teks teks menjadi putih.

Selanjutnya, salin modul teks dan pembatas di bawahnya dan tempel ke kolom 2. Kemudian ubah konten dinamis menjadi Kategori Posting.

Anda perlu memperbarui warna teks tautan menjadi putih agar sesuai dengan desain tata letak.

Sekarang salin modul teks kategori posting dengan pembagi ke kolom 3. Kemudian ubah konten dinamis menjadi Post Comment Count. Di popup Jumlah Komentar Posting, masukkan yang berikut ini di kotak input Sebelum:

Sebelum: Komentar:

Kotak input sebelum dan sesudah yang tersedia di popup konten dinamis adalah pilihan yang nyaman untuk menambahkan teks sebelum dan/atau setelah konten dinamis. Ini berguna untuk menambahkan label, simbol harga, dan elemen lain bila diperlukan.

Sekarang mari kita lanjutkan menambahkan konten dinamis kita. Salin modul teks dan pembagi di kolom 3 dan rekatkan ke kolom 4. Kolom terakhir ini akan menampung thumbnail penulis posting dan nama penulis. Jadi, ubah konten dinamis modul teks menjadi Post Author. Di popup Post Author, perbarui yang berikut ini:

Sebelum: oleh:
Format Nama: Nama Depan & Belakang

Di atas modul teks dengan konten penulis posting, tambahkan modul gambar baru. Buka pengaturan modul gambar dan hapus gambar default. Seperti yang telah kita lakukan, klik ikon konten dinamis di kotak pratinjau gambar dan tambahkan Gambar Profil Penulis Posting sebagai konten dinamis.

Kemudian sesuaikan pengaturan desain untuk menarik gambar ke atas dan berikan lebar khusus sebagai berikut:

Lebar: 80px
Margin Kustom (desktop): -82px Atas
Margin Kustom (tablet): 0px Atas

Catatan: Nama penulis posting akan menunjukkan penulis yang telah ditugaskan ke posting saat ini. Dan gambar profil penulis posting adalah apa pun yang telah ditetapkan untuk profil pengguna di Dasbor WordPress di bawah Pengguna > Profil Anda.

Bagian 5: Menambahkan Bidang Kustom sebagai Konten Dinamis untuk Menambahkan Latihan Unggulan ke Postingan

Ingat bagaimana kami menambahkan bidang khusus itu sebelumnya di tutorial? Sekarang kita akan menggunakan bidang khusus tersebut sebagai konten untuk latihan unggulan di pos kita.

Untuk menambahkan konten dinamis latihan unggulan kami, pertama duplikat baris dua kolom langsung di bawah baris empat kolom dengan semua meta-data dinamis kami. Kemudian hapus modul di kedua kolom dan tambahkan modul uraian di kolom kiri.

Kami akan menggunakan modul uraian untuk menambahkan konten dinamis untuk bagian latihan. Untuk memulai, tambahkan modul uraian baru ke kolom kiri.

Untuk Judul, tambahkan bidang khusus bernama "Judul Latihan" sebagai konten dinamis. Kemudian untuk konten uraian, tambahkan bidang khusus bernama "Durasi" sebagai konten dinamis.

Agar semuanya tetap berjalan, saya tidak akan membahas gaya untuk modul-modul ini secara mendetail. Namun, Anda perlu menambahkan ikon uraian yang ditempatkan di sebelah kiri judul dan memperbarui desain agar sesuai dengan tata letak.

Selanjutnya, tambahkan modul uraian kedua di bawah ini. Masukkan teks "Pemanasan" sebagai judul. Dan kemudian tambahkan bidang khusus bernama "Pemanasan" sebagai konten dinamis.

Tambahkan modul uraian ketiga di bawahnya, dengan "Angkat Berat" sebagai judul dan bidang khusus "Angkat Berat" sebagai konten dinamis. Karena kami menggunakan html untuk nilai bidang khusus ini, Anda harus mengaktifkan html mentah di popup angkat berat.

Tambahkan modul uraian akhir dengan "Cool Down" sebagai judul dan bidang khusus "Cool Down" sebagai konten dinamis.

Sekarang Anda memiliki bagian dinamis untuk menambahkan latihan ke postingan Anda!

Yang perlu Anda lakukan adalah memperbarui nilai bidang khusus dari editor halaman default di WordPress dan konten itu akan ditambahkan ke tata letak posting Anda secara otomatis tanpa harus masuk ke pembuat Divi.

Bagian 6: Mendesain Bagian “Topik Terkait” Menggunakan Konten Dinamis Tag Posting

Anda dapat menggunakan konten dinamis untuk menampilkan tag postingan dan membuat bagian “topik terkait” yang terlihat keren untuk postingan Anda. Untuk melakukan ini, buat satu baris kolom baru dan tambahkan modul teks ke baris.

Kemudian untuk kotak konten, tambahkan Tag Posting sebagai konten dinamis. Kemudian perbarui opsi Tag Posting berikut:

Sebelum: Topik Terkait:
Pemisah Tag: //

Catatan: Anda dapat menggunakan hampir semua rangkaian karakter yang Anda inginkan untuk pemisah tag, jadi jangan ragu untuk bereksperimen dengan yang berbeda untuk desain kreatif.

Untuk menata konten, perbarui pengaturan desain berikut:

Font Teks: Oswald
Berat Font Teks: Semi tebal
Warna Teks Teks: #ff4c00
Ukuran Teks Teks: 30px
Font Tautan: Oswald
Berat Font Tautan: Semi tebal
Warna Teks Tautan: #262d3f
Ukuran Teks Tautan: 50px
Jarak Huruf Tautan: 2px
Tinggi Garis Tautan: 1.6em

Berikut adalah desain akhir.

Bagian 7: Menambahkan Bio Penulis dan Bagian Komentar

Pada titik ini Anda diperlengkapi dengan baik untuk menambahkan konten dinamis dan menyesuaikan desain tata letak posting Anda dengan cukup mudah sehingga saya tidak akan membahas banyak detail tentang dua elemen terakhir ini.

Menambahkan Bagian Bio Penulis Menggunakan Konten Dinamis

Untuk menambahkan bagian bio penulis di bagian bawah konten posting Anda, Anda dapat menggunakan Penulis Postingan, Gambar Profil Penulis Postingan, dan konten dinamis Bio Penulis. Seperti yang Anda lihat pada tangkapan layar di bawah, saya membuat baris kolom 1/4 3/4. Kemudian saya menambahkan gambar profil penulis posting ke kolom kiri. Di kolom kanan, saya menambahkan penulis posting dengan bio penulis di bawahnya. Saya juga menambahkan konten dinamis gambar unggulan sebagai gambar latar belakang untuk bagian tersebut (dan hamparan gradien). Berikut adalah contoh dari apa yang akan terlihat seperti.

Menambahkan Bagian Komentar Menggunakan Modul Komentar

Karena kami menggunakan tata letak posting khusus, maka sejak itu menggunakan modul komentar sehingga kami dapat mencocokkan desain bagian komentar dengan tata letak. Cukup tambahkan modul komentar ke baris bagian baru yang cocok dengan gaya tombol dan font dengan tata letak saat ini. Berikut adalah contoh tampilannya.

Desain Akhir

Berikut adalah desain akhir dari seluruh posting setelah semua desain telah disesuaikan.

Memperbarui Konten Postingan dan Menyimpan Tata Letak untuk Postingan Selanjutnya

Karena kami menggunakan Divi Builder untuk membuat tata letak posting, Anda masih perlu memperbarui konten posting yang sebenarnya untuk posting Anda menggunakan modul Divi. Tetapi dengan segala sesuatu yang lain sekarang dinamis, ini membuat prosesnya jauh lebih mudah ke depan. Anda perlu menyimpan tata letak posting ke perpustakaan Anda sehingga saat membuat posting baru, yang perlu Anda lakukan hanyalah menambahkan tata letak yang disimpan ke posting Anda dan memperbarui konten posting.

Pikiran Akhir

Konten Dinamis Divi adalah fitur canggih yang membuat penambahan dan pembaruan data postingan menjadi jauh lebih mudah. Jadi jika Anda ingin mendesain tata letak khusus untuk posting blog Anda (atau jenis posting khusus lainnya seperti Proyek) menggunakan Divi Builder, konten dinamis adalah cara yang harus dilakukan. Tentu saja, konten dinamis tidak terbatas pada posting. Anda dapat memanfaatkan konten dinamis dan bidang khusus di seluruh situs web Anda. Saya harap posting ini membantu Anda memahami beberapa kemungkinan dan menginspirasi Anda untuk menggunakan konten dinamis dengan cara baru yang mengagumkan.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!