Cara Mendesain Kotak Penulis Dinamis untuk Template Posting Blog Anda dengan Divi

Menyebutkan penulis posting dalam posting blog Anda sangat penting. Sekarang, dengan Divi's Theme Builder Anda dapat menambahkan kotak penulis dinamis di seluruh situs ke posting Anda. Anda juga dapat menata kotak penulis menggunakan opsi bawaan Divi, ini dapat menghasilkan desain web yang indah. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana merancang kotak penulis dinamis yang indah di dalam template posting Anda. Anda juga dapat mengunduh file JSON templat posting secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Template Posting GRATIS

Untuk mendapatkan template posting 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. Buka Divi Theme Builder & Tambahkan Template Posting Baru

Buka Divi Theme Builder & Tambahkan Template Baru

Mulailah dengan membuka Divi Theme Builder. Sesampai di sana, tambahkan template baru.

Gunakan Template di Semua Posting

Gunakan template baru di semua posting Anda.

• Gunakan Pada: Semua Posting

Mulai Membangun Tubuh Template

Dan mulailah membangun badan template.

2. Bangun Badan Template Postingan Blog

Pengaturan Bagian

Warna latar belakang

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

• Warna Latar Belakang: #270ffff

Gambar latar belakang

Unggah gambar latar belakang yang dapat Anda temukan di folder zip yang dapat Anda unduh di awal posting ini.

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Buka pengaturan baris dan ubah lebar maksimal dalam pengaturan ukuran.

• Lebar Maks: 1380px

Tambahkan Modul Judul Posting ke Kolom

Elemen

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Judul Postingan. Kami menonaktifkan gambar unggulan kiriman di pengaturan elemen.

• Tampilkan Gambar Unggulan: Tidak

Pengaturan Teks

Pindah ke tab desain modul dan ubah warna teks di pengaturan teks umum.

• Warna Teks: Cahaya

Pengaturan Teks Judul

Ubah pengaturan teks judul berikutnya.

• Judul Font: Work Sans
• Judul Teks Ukuran: 7rem (Desktop), 4rem (Tablet), 2rem (Telepon)
• Spasi Huruf Judul: -2px

Pengaturan Teks Meta

Seiring dengan pengaturan teks meta.

• Meta Font: Work Sans
• Ukuran Teks Meta: 1rem

Tambahkan Bagian Baru

Jarak

Tambahkan bagian reguler baru ke badan template Anda, buka pengaturan bagian dan hapus semua bantalan atas default.

• Padding Atas: 0px

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar Maks: 1380px

Jarak

Hapus semua padding atas default juga.

• Padding Atas: 0px

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan tambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 200px (Desktop), 50px (Tablet), 20px (Ponsel)
• Padding Bawah: 200px (Desktop), 50px (Tablet), 20px (Ponsel)
• Padding Kiri: 100px (Desktop), 50px (Tablet), 20px (Ponsel)
• Padding Kanan: 100px (Desktop), 50px (Tablet), 20px (Ponsel)

Bayangan Kotak

Tambahkan bayangan kotak ke kolom pertama juga.

• Kekuatan Buram Bayangan Kotak: 60px
• Warna Bayangan: rgba (0,0,0,0.09)

Tambahkan Modul Konten Posting ke Kolom 1

Pengaturan Teks

Saatnya mulai menambahkan modul! Tempatkan Modul Konten Postingan di kolom 1 dan ubah pengaturan teks yang sesuai:

• Font Teks: Work Sans
• Ukuran Teks: 1rem (Desktop), 0.9rem (Tablet & Ponsel)
• Tinggi Baris Teks: 2.3em

Pengaturan Teks Judul

Ubah juga pengaturan teks judul yang berbeda.

• Font Judul: Work Sans
• Judul 2 Ukuran Teks: 1.6rem (H2), 1.5rem (H3), 1.4rem (H4), 1.3rem (H5), 1.2rem (H6)
• Tinggi Garis Pos: 1.3em

ID CSS

Selesaikan pengaturan modul dengan menambahkan ID CSS.

• ID CSS: konten postingan blog

Tambahkan Modul Kode ke Kolom 1

Masukkan Judul Kode CSS

Untuk menambahkan beberapa ruang di antara elemen konten posting yang berbeda, kami akan menambahkan Modul Kode ke kolom 1 dan menyisipkan baris kode CSS berikut:

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Tambahkan Modul Orang ke Kolom 2

Konten Dinamis

Di kolom kedua, satu-satunya modul yang kita butuhkan adalah Modul Person. Kami akan memilih konten dinamis berikut:

• Nama: Penulis Pos
• Posisi: Penulis
• Isi: Bio Penulis

Konten Dinamis Gambar

Tambahkan juga gambar profil dinamis penulis ke modul.

• Gambar: Gambar Profil Penulis

Arahkan Warna Latar Belakang

Kemudian, tambahkan warna latar belakang putih pada hover.

• Warna Latar Belakang: #ffffff

Pengaturan Teks Judul

Pindah ke tab desain modul dan ubah pengaturan teks H3 yang sesuai:

• Judul Judul Level: H3
• Judul Font: Work Sans
• Judul Teks Ukuran: 1.1rem

Pengaturan Teks Tubuh

Ubah juga pengaturan teks isi.

• Font Tubuh: Work Sans
• Ukuran Teks Tubuh: 0.9rem
• Tinggi Garis Tubuh: 2em

Pengaturan Teks Posisi

Kemudian, ubah pengaturan teks font posisi.

• Font Posisi: Work Sans
• Posisi Teks Ukuran: 0.9rem

Ukuran Default

Ubah ketinggian dalam pengaturan ukuran.

• Tinggi: 160px (Desktop), otomatis (Tablet & Ponsel)

Arahkan Ukuran

Dan kembalikan ketinggian ke otomatis saat mengarahkan kursor.

• Tinggi: otomatis

Jarak

Selanjutnya, kami menambahkan beberapa ruang di sekitar modul menggunakan bantalan khusus.

• Padding Atas: 50px
• Padding Bawah: 50px
• Padding Kiri: 50px
• Padding Kanan: 50px

Perbatasan Default

Dan kami akan menggunakan perbatasan juga.

• Lebar Batas Kiri: 0px (Desktop), 4px (Tablet & Ponsel)
• Warna Batas Kiri: #270ffff

Arahkan Perbatasan

Ubah lebar perbatasan saat mengarahkan kursor.

• Lebar Batas Kiri: 4px

Bayangan Kotak Default

Kemudian, tambahkan bayangan kotak.

• Kekuatan Buram Bayangan Kotak: 60px
• Warna Bayangan: rgba(0,0,0,0) (Desktop), rgba(0,0,0,0.11) (Tablet & Ponsel)

Arahkan Bayangan Kotak

Ubah warna bayangan saat melayang.

• Warna Bayangan: rgba (0,0,0,0.11)

Filter Bawaan

Selanjutnya, kita akan mengubah opacity.

• Opasitas: 41% (Desktop), 100% (Tablet & Ponsel)

Arahkan Filter

Kembalikan opacity ke 100% saat mengarahkan kursor.

• Opasitas: 100%

Elemen Utama CSS

Untuk menambahkan efek lengket yang dapat Anda lihat di pratinjau posting ini, kami akan menambahkan beberapa baris CSS khusus ke elemen utama modul.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

CSS Gambar Anggota

Kami memastikan gambar profil penulis rata kiri dengan menambahkan satu baris kode CSS ke gambar anggota modul.

text-align: left;

Visibilitas Default

Untuk menyembunyikan konten modul di desktop, kami akan mengubah overflow di tab lanjutan.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Arahkan Visibilitas

Kami akan membuat konten muncul di hover dengan mengubah overflow menjadi terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Tambahkan Bagian Baru

Tambahkan bagian lain ke desain Anda.

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar Maks: 1380px

Tambahkan Modul Komentar ke Kolom

Pengaturan Bidang

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Komentar. Ubah pengaturan bidang sebagai berikut:

• Warna Latar Belakang Bidang: #ffffff
• Bidang Atas Padding: 20px
• Bidang Bawah Padding: 20px
• Font Bidang: Work Sans
• Ukuran Teks Bidang: 1rem

Pengaturan Teks Hitung Komentar

Ubah juga pengaturan teks jumlah komentar.

• Jumlah Komentar Tingkat Judul: H2
• Font Hitungan Komentar: Work Sans
• Ukuran Teks Hitungan Komentar: 1.5rem

Pengaturan Teks Judul Formulir

Kemudian, ubah pengaturan teks judul formulir.

• Judul Formulir Tingkat Judul: H3
• Font Judul Formulir: Work Sans
• Bentuk Judul Teks Ukuran: 1.2rem

Pengaturan Teks Meta

Ubah juga pengaturan teks meta.

• Meta Font: Work Sans
• Ukuran Teks Meta: 1rem

Pengaturan Teks Komentar

Kami juga mengubah pengaturan teks komentar.

• Font Komentar: Work Sans
• Ukuran Teks Komentar: 1rem
• Tinggi Baris Komentar: 2.3em

Pengaturan Tombol

Selesaikan pengaturan modul dengan menata tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1rem
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #270ffff
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px

• Font Tombol: Work Sans

3. Simpan Perubahan Pembuat Tema & Lihat Hasil

Setelah Anda menyelesaikan template, pastikan Anda menyimpan semua perubahan, keluar dari Pembuat Tema dan lihat hasilnya di postingan 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 mendesain kotak penulis dinamis yang indah menggunakan opsi bawaan Divi, fitur dinamis, dan Pembuat Tema. Dengan gabungan ketiga hal ini, kini lebih mudah untuk menyesuaikan template posting blog Anda dan memberi kredit kepada penulis posting dengan cara yang kreatif. Anda juga dapat mengunduh file JSON 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.