Cara Membuat Bilah Info Posting Dinamis untuk Template Posting Blog Divi Anda

Menambahkan konten dinamis ke template posting blog Anda sangat penting untuk menyediakan hal-hal seperti judul posting, metadata, gambar unggulan, dll. Biasanya, elemen dinamis ini ditempatkan sebagai elemen statis normal dalam desain tata letak. Namun, mungkin akan membantu untuk menjaga beberapa elemen dinamis ini di garis depan untuk pembaca Anda. Di sinilah bilah info pos dinamis berguna. Bilah info posting dinamis tetap berada di bagian atas browser (seperti header tetap) dan menyertakan konten dinamis yang bermanfaat dan CTA lainnya. Misalnya, Anda dapat menggunakan bilah ini untuk mengingatkan pembaca tentang pos yang sedang mereka baca, tautan untuk meninggalkan komentar, atau tautan ke kategori terkait.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat bilah info posting dinamis dan menambahkannya ke template posting blog Anda menggunakan Divi Theme Builder. Setelah selesai, bilah ini akan berfungsi dengan mulus untuk semua posting blog di seluruh situs.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini. Perhatikan bagaimana tautan jangkar ("Tinggalkan komentar" dan "Berlangganan") mengirim pengguna ke area yang sesuai di pos.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

Untuk mengimpor tata letak bagian ke Divi Theme Builder Anda, navigasikan ke Divi Theme Builder.

Klik ikon portabilitas.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, template bagian akan muncul di Divi Theme Builder.

Langsung saja ke tutorialnya ya?

Bagian 1: Mengimpor Template Premade

Untuk tutorial ini, kita akan menggunakan beberapa template premade dari paket pembuat tema keenam kita. Kami akan mengimpor templat situs web default yang akan memberi kami tajuk global yang berfungsi di mana kami akan menambahkan bilah info posting. Dan kami akan mengimpor template posting blog untuk menguji hasil kami pada posting langsung.

PENTING: Akan lebih baik untuk mengimpor template ini di situs uji sehingga Anda tidak akan mengacaukan situs langsung.

Impor Template Situs Web Default

Pertama, Anda perlu mengunduh Paket Pembuat Tema GRATIS Keenam untuk Divi. Kemudian unzip file tersebut.

Dari Dasbor WordPress, navigasikan ke Divi > Pembuat Tema. Kemudian klik ikon portabilitas di kanan atas. Di popup portabilitas, pilih tab impor. Kemudian pilih file json templat situs web default dari folder yang diunduh dan klik tombol impor. Ini akan mengimpor templat situs web default baru dengan header dan footer global.

Impor Template Posting

Ulangi proses ini untuk mengimpor templat posting dari folder unduhan yang sama. Buka popup portabilitas, pilih file json templat posting, dan klik tombol impor. Ini akan memberi Anda templat posting yang ditetapkan untuk semua posting di seluruh situs Anda, bersama dengan header default dan footer.

Nonaktifkan Global pada Header Template Posting

Kami akan menambahkan bilah info posting dinamis kami ke header template posting. Namun, karena kami ingin bilah info kiriman hanya pada templat kiriman, kami perlu menonaktifkan global pada tajuk agar bilah kami tidak ditambahkan ke semua tajuk di seluruh situs. Untuk menonaktifkan global pada header global, buka menu pengaturan pada header global dan pilih "Nonaktifkan Global".

Sekarang header harus berwarna abu-abu dengan label “Custom Header”. Setelah siap, klik ikon edit untuk mengedit template tata letak header.

Membangun Bilah Info Postingan Dinamis

Menambahkan Bagian dan Baris

Di dalam editor tata letak header, buat bagian reguler baru di bawah bagian saat ini yang memegang header.

Kemudian tambahkan satu-setengah seperempat seperempat baris kolom ke bagian tersebut.

Pengaturan Bagian

Buka pengaturan bagian dan perbarui yang berikut ini:

• Warna Latar Belakang: #eceffe
• Padding: 10px atas, 10px bawah

Pengaturan Baris

Setelah pengaturan bagian ditambahkan, buka pengaturan untuk baris dan perbarui yang berikut:

• Lebar Talang: 1
• Padding: 0px atas, 0px bawah

Di bawah tab lanjutan, tambahkan CSS khusus berikut ke Elemen Utama:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Ini akan memastikan kolom ditumpuk di ponsel.

Tambahkan Konten Dinamis Judul Posting

Bagian pertama dari konten dinamis yang akan kita tambahkan ke bilah adalah judul posting. Ini akan berfungsi sebagai pengingat yang bermanfaat bagi pembaca tentang judul posting apa yang sedang mereka baca.

Tambahkan Modul Teks

Untuk membuat judul posting sebagai konten dinamis, buat modul teks baru di dalam kolom paling kiri.

Tambahkan Judul Postingan/Arsip sebagai Konten Dinamis

Selanjutnya, klik ikon "Gunakan Konten Dinamis" sambil mengarahkan kursor ke area tubuh pengaturan teks. Pilih “Judul Postingan/Arsip” dari daftar.

Buka pengaturan konten dinamis untuk judul posting/arsip dan tambahkan berikut ini di kotak input sebelumnya:

You're Reading: 

Kemudian simpan perubahan.

Pengaturan Desain

Di bawah tab desain, sesuaikan gaya judul dinamis sebagai berikut:

• Font Teks: Ubuntu
• Berat Font Teks: Sedang
• Warna Teks Teks: #121212
• Ukuran Teks Teks: 14px (desktop), 12px (tablet), 11px (ponsel)

Tambahkan Info Kategori Posting Dinamis

Untuk membuat info kategori posting, duplikat modul teks yang memegang judul posting.

Kemudian buka pengaturan modul teks duplikat dan tambahkan kategori posting sebagai konten dinamis ke isi.

Buka Pengaturan Konten Dinamis Kategori Postingan dan perbarui yang berikut ini:

• Sebelum: Dalam
• Pemisah Kategori: &

Perbarui warna tautan

Di bawah tab desain, perbarui warna tautan sebagai berikut:

• Warna Teks Tautan: #4160fd

Menambahkan Info Hitungan Komentar Dinamis

Info bermanfaat lainnya yang akan kami tambahkan ke bilah info posting adalah jumlah komentar yang mengingatkan pengguna untuk terlibat dengan komentar mereka sendiri jika mereka mau. Jumlah komentar akan menyertakan tautan ke komentar pos juga.

Untuk membuat info hitungan komentar dinamis, duplikat modul teks dengan kategori dan seret ke kolom tengah.

Kemudian tambahkan jumlah komentar posting sebagai konten dinamis ke badan teks.

Buka Pengaturan Hitungan Posting Komentar dan tambahkan yang berikut ini:

• Setelah: komentar

Menambahkan Ajakan Bertindak “Tinggalkan Komentar”

Selain jumlah komentar, kami akan menambahkan ajakan bertindak sederhana untuk meninggalkan komentar. Tautan tersebut akan menjadi tautan jangkar yang menggulir ke bagian komentar di bagian bawah posting.

Untuk membuat CTA, duplikat modul Teks di kolom 2 dengan menahan jumlah komentar.

Kemudian buka pengaturan teks untuk duplikat dan tambahkan html tautan berikut ke badan:

<a href="#respond">Leave a Comment</a>

Menambahkan Tombol Berlangganan

Hal terakhir yang akan kita tambahkan ke bilah info posting adalah tombol berlangganan. Ini juga akan menjadi tautan jangkar yang membawa pengguna ke bagian templat posting yang menyertakan formulir keikutsertaan email.

Untuk melakukan ini, tambahkan modul tombol di kolom paling kanan.

Di bawah tab desain, perbarui gaya tombol sebagai berikut:

• Ukuran Teks Tombol: 14px (desktop), 12px (tablet), 11px (ponsel)
• Tombol Warna teks: #ffffff
• Tombol Latar Belakang Gradien Warna Kiri: #7e5ce6
• Warna Kanan Gradien Latar Belakang Tombol: #25b8ee
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px
• Jarak Huruf Tombol : 2px
• Font Tombol: Ubuntu
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: TT
• Padding (desktop): 10px atas, 10px bawah, 20px kiri, 20px kanan
• Padding (tablet): 6px atas, 6px bawah, 14px kiri, 14px kanan

Untuk menambahkan tautan jangkar ke tombol, buka tab konten dan tambahkan URL Tautan Tombol berikut:

• URL Tautan Tombol: #berlangganan

Tautan ini tidak akan berfungsi sampai kami menambahkan ID CSS yang sesuai ke bagian yang menyimpan formulir keikutsertaan email di badan template postingan.

Nonaktifkan Kolom 1 di Seluler

Hanya ada begitu banyak ruang di ponsel untuk bilah tetap. Itu sebabnya kita perlu membuat keputusan tentang info apa yang akan disertakan. Untuk contoh ini, kita akan meninggalkan dua kolom dengan CTA di ponsel dan menonaktifkan kolom dengan judul dan kategori posting.

Untuk melakukan ini, buka pengaturan untuk kolom 1. Di bawah tab lanjutan, nonaktifkan visibilitas di ponsel dan tablet.

Memberikan Bagian Posisi Tetap dan Indeks Z Tinggi

Setelah desain selesai, kita sekarang dapat memberikan posisi tetap pada bagian tersebut. Idenya adalah untuk menyembunyikan bilah di belakang bagian dengan header pada awalnya. Kemudian saat pengguna menggulir, bilah info posting tetap akan terungkap dari bawah tajuk.

Buka pengaturan bagian dan perbarui yang berikut ini:

• Posisi: Tetap
• Indeks Z: 998

Perhatikan indeks z adalah 998 karena saya ingin bilah tetap berada di atas sisa konten pada pos.

Perbarui Bagian Header Z Indeks

Karena bagian bilah info pos memiliki indeks z yang lebih tinggi, itu akan ditampilkan di atas bagian dengan tajuk. Untuk memperbaikinya, buka pengaturan bagian untuk bagian dengan tajuk dan tambahkan yang berikut ini:

• Indeks Z: 999 (satu lebih dari bagian dengan bilah)

Simpan perubahan di editor tata letak.

Tambahkan ID CSS ke Baris Keikutsertaan Email pada Kerangka Tubuh

Tombol berlangganan CTA yang kami tambahkan ke bilah masih membutuhkan jangkar, atau tempat untuk "melompat", pada templat posting. Karena CTA adalah untuk "berlangganan", kami membutuhkannya untuk melompat ke formulir opi-in email.

Untuk melakukan ini, buka area "tubuh khusus" dari templat posting di pembuat tema.

Temukan baris dengan formulir keikutsertaan email di bagian bawah tata letak dan tambahkan ID CSS berikut:

• ID CSS: berlangganan

Ini akan memungkinkan tautan jangkar tombol berlangganan untuk menggulir ke area spesifik dari templat ini.

Setelah selesai, simpan perubahan pada tata letak dan ke pembuat tema.

Hasil Akhir

Untuk melihat hasil akhir, cukup buka dan lihat kiriman langsung di situs. Perhatikan bagaimana tautan jangkar ("Tinggalkan komentar" dan "Berlangganan") mengirim pengguna ke area yang sesuai di pos.

Pikiran Akhir

Mudah-mudahan, bilah info posting dinamis ini berguna untuk meningkatkan UX posting blog Divi Anda. Jangan ragu untuk bereksperimen dengan informasi lain juga. Saya yakin ada cara untuk menampilkan posting terkait di sana dengan modul blog.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!