Cara Menata Modul Komentar Divi di dalam Template Posting Blog
Diterbitkan: 2020-01-11Merancang template posting blog cukup mudah dengan pembuat tema Divi. Namun ada satu hal yang cenderung terlewatkan saat mendesain template blog, yaitu kolom komentar. Untungnya, Divi memiliki modul komentar yang dapat disesuaikan yang dapat dengan mudah ditambahkan ke template posting blog. Dalam posting ini, kami akan menunjukkan kepada Anda cara membuat dua desain bagian komentar khusus yang dapat Anda sertakan dalam template blog apa pun. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita lakukan.
Pratinjau
Mari kita lihat bagaimana desain tata letak komentar terlihat pada ukuran layar yang berbeda. Desain pertama adalah gaya minimal hitam dan putih dan yang kedua lebih berwarna.
Desktop

Tablet

Telepon

Desktop

Tablet

Seluler

Unduh Template Modul Komentar GRATIS
Untuk mendapatkan template modul komentar gratis, 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 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Mari Membuat Ulang Desain Modul Komentar #1

Buat Desain Latar Belakang
Langkah pertama untuk membuat ulang template tata letak komentar hitam putih adalah mendesain latar belakang titik-titik. Satu untuk tampilan desktop dan satu lagi untuk layar responsif. Jika Anda ingin membuatnya sendiri, Anda memerlukan alat pembuat pola Adobe Illustrator. Jika tidak, Anda dapat mengambil pola serupa dari internet atau menggunakan pola yang disertakan dalam file .zip yang dapat diunduh di atas.
- Di Adobe Illustrator, buat artboard kosong dengan tinggi sekitar 1920px + lebar 670px.
- Buat lingkaran hitam di dalam kotak putih dengan margin sekitar setengah ukuran lingkaran.
- Pilih kedua bentuk dan buat pola dengan mengklik objek > pola > buat.
- Di pembuat pola, pilih 'bata demi kolom' dan simpan sebagai contoh pola.
- Buat bentuk seukuran artboard dan terapkan polanya.
- Untuk ukuran layar responsif, kecilkan bentuknya menjadi setengah ukurannya. Tekan shift untuk menjaga rasio lingkaran.
- Salin dan tempel bentuk berpola di sebelah yang pertama dan sekarang Anda memiliki pola yang sama dengan lingkaran yang lebih kecil.
- Unduh keduanya secara terpisah.

Buka Pembuat Tema dan Tambahkan Template Baru
Sekarang saatnya membuka pembuat tema. Tambahkan templat baru.

Pilih Template untuk Semua Posting
Gunakan template baru di semua posting.

Tambahkan Tubuh Kustom dan Bangun Dari Awal
Last but not least, mulailah membangun badan kustom template.


Tambahkan Bagian Baru
Latar belakang
Sekarang, kita dapat mulai membangun desain untuk tata letak komentar. Di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturan bagian dan unggah gambar latar belakang pola. Tambahkan overlay gradien juga.
- Latar Belakang: Gradien
- Warna 1: rgba Putih Semi-Transparan (255.255.255.0.96)
- Warna 2: Putih #ffffff
- Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya
- Gambar:
- Desktop: Gambar Pola Titik 1
- Tablet dan Telepon: Gambar Pola Titik 2


Tambahkan Baris Baru
Struktur Kolom
Sekarang, tambahkan baris baru dengan dua kolom.

Perekat
Kemudian, sesuaikan ukuran baris.
- Lebar Talang Kustom: 2
- Lebar: 80%
- Lebar Maks: 100%

Pengaturan Kolom 2
Berbatasan
Di pengaturan kolom, tambahkan batas atas ke kolom kedua.
- Gaya: Hanya atas
- Lebar: 3px
- Warna: Hitam #ffffff

Tambahkan Modul Teks ke Kolom 1
Isi
Tambahkan modul teks pertama ke kolom 1 dengan beberapa konten H3 pilihan Anda.
- Teks: Paragraf

Teks Judul
Kemudian, di tab desain, beri gaya pada teks judul.
- Tingkat Pos: H3
- Font: GFS Didot
- Warna: Hitam #000000
- Ukuran:
- Desktop: 5vw
- Tablet: 9vw
- Telepon: 13vw

Jarak
Juga, sesuaikan jaraknya.
- Lapisan Bawah
- Desktop: 3vw
- Tablet dan Telepon: 7vw

Tambahkan Modul Kesaksian ke Kolom 1
Isi
Sekarang, tambahkan modul testimonial ke kolom 1 dengan beberapa konten pilihan Anda. Unggah gambar juga.
- Penulis: Pembaca Setia
- Judul Pekerjaan: Petugas Pemasaran Konten
- Perusahaan: Perusahaan Media Harimau
- Isi: Teks paragraf
- Gambar: Foto Potret


Latar belakang
Pastikan latar belakangnya transparan
- Warna Latar Belakang: Transparan

Elemen
Di tab elemen, pilih untuk menampilkan ikon kutipan.
- Tampilkan Ikon Kutipan: Ya

Ikon Kutipan
Kemudian, gaya ikon kutipan sebagai berikut.
- Warna: Hitam #000000
- Latar belakang: Putih #ffffff
- Ukuran Font Ikon:
- Desktop: 2vw
- Tablet: 5vw
- Telepon: 9vw

Gambar
Ubah pengaturan gambar selanjutnya.
- Lebar dan tinggi:
- Desktop: 110px
- Tablet dan Ponsel: 90px
- Sudut Bulat: 90px
- Warna Perbatasan: Transparan

Teks
Ubah perataan teks juga.
- Penjajaran: Pusat

Teks Tubuh
Kemudian, gaya teks isi.
- Font: Verdana
- Warna hitam
- Ukuran:
- Desktop: 0.7vw
- Tablet: 2vw
- Telepon: 3vw

Teks Penulis
Lanjutkan dengan menata teks penulis.
- Font: GFS Didot
- Berat: Tebal
- Warna: Hitam #ffffff
- Ukuran:
- Desktop: 1.2vw
- Tablet: 2.5vw
- Telepon: 4vw
- Spasi Huruf: 1px

Teks Posisi
Kemudian, teks posisi.
- Font: GFS Didot
- Warna: Hitam #ffffff
- Ukuran:
- Desktop: 0.9vw
- Tablet: 2vw
- Telepon: 3vw
- Tinggi Garis: 2em

Teks Perusahaan
Juga, teks perusahaan.
- Font: GFS Didot
- Warna: Hitam #ffffff
- Ukuran:
- Desktop: 0.7vw
- Tablet: 2vw
- Telepon: 3vw
- Tinggi Garis: 2em

Perekat
Lanjutkan dengan menyesuaikan ukuran modul.
- Lebar:
- Desktop: 60%
- Tablet: 65%
- Telepon: 75%
- Penyelarasan Modul: Pusat

Jarak
Juga, sesuaikan jaraknya.
- Bantalan Atas:
- Desktop: 1.5vw
- Tablet: 5vw
- Telepon: 6vw

Berbatasan
Terakhir, tambahkan batas atas ke modul.
- Gaya Perbatasan: Hanya atas
- Lebar: 2px
- Warna: Hitam #ffffff

Tambahkan Modul Komentar ke Kolom 2
Elemen
Pindah ke kolom 2, tambahkan modul komentar. Ubah pengaturan elemen sebagai berikut.
- Tampilkan Avatar Penulis: Tidak
- Tampilkan Tombol Balas: Ya
- Tampilkan Jumlah Komentar: Tidak

bidang
Pindah ke tab desain modul dan ubah pengaturan bidang.
- Warna Teks: Hitam #oooooo
- Warna Latar Belakang: Abu-abu Pucat #f7f7f7
- Warna Teks Fokus: Hitam #oooooooo
- Fokus Warna Latar Belakang: Abu-abu Pucat #f7f7f7
- Font: GFS Didot
- Ukuran teks:
- Desktop: 0.9vw
- Tablet: 1.5vw
- Telepon: 2.5vw
- Spasi Huruf: 1px

Teks Judul Formulir
Ubah pengaturan teks judul formulir berikutnya.
- Font: GFS Didot
- Warna: Hitam #ffffff
- Ukuran:
- Desktop: 0.9vw
- Tablet: 2.5vw
- Jenis huruf: 3.5vw

Teks Meta
Lanjutkan dengan menata teks meta.
- Font: GFS Didot
- Warna: Hitam #ffffff
- Ukuran:
- Desktop: 1.3vw
- Tablet: 3vw
- Telepon: 4vw

Teks Komentar
Juga, teks komentar.
- Font: Verdana
- Warna: Hitam #ffffff
- Ukuran:
- Desktop: 0.7vw
- Tablet: 1.7vw
- Telepon: 2.7vw
- Spasi Huruf: 1px
- Tinggi Garis: 1.8em

Tombol
Pindah, gaya tombol.
- Ukuran teks:
- Desktop: 0.9vw
- Tablet: 2.5vw
- Telepon: 3.5vw
- Warna Teks: Putih #000000
- Latar belakang: Hitam #ffffff
- Spasi Huruf: 1px
- Font: GFS Didot

Perekat
Kemudian, sesuaikan pengaturan ukuran modul.
- Lebar: 90%
- Penyelarasan Modul: Pusat

Jarak
Akhirnya, jarak juga.
- Bantalan Atas:
- Desktop: 4vw
- Tablet dan Telepon: 8vw
- Padding Kiri dan Kanan: 3vw

Mari Membuat Ulang Desain Modul Komentar #2

Buat Desain Latar Belakang
Langkah pertama untuk membuat ulang tata letak modul komentar lingkaran warna-warni adalah menyiapkan desain latar belakang. Anda dapat membuat desain lingkaran sederhana di dalam editor grafis favorit Anda. Ini adalah langkah-langkah yang perlu Anda ambil untuk membuat gambar latar belakang:
- Buat kanvas dengan lebar 1800px dan tinggi sekitar 1800px.
- Tambahkan dua lingkaran, satu lebih besar dari yang lain.
- Warnai lingkaran dan tambahkan beberapa transparansi.
- Tempatkan dua lingkaran sedikit tumpang tindih di kiri atas kanvas.
- Kelompokkan lingkaran sebagai satu objek dan duplikat mereka.
- Balikkan lingkaran dan letakkan secara diagonal ke bawah dan ke kanan dari dua lingkaran pertama.
- Pastikan untuk meninggalkan ruang di bagian atas dan bawah. Ketika ada banyak komentar, gambar akan berulang dan bertumpuk secara vertikal.
Desain latar belakang yang kami buat untuk template tata letak komentar ini juga tersedia di folder zip yang dapat Anda unduh di awal tutorial.

Buka Pembuat Tema dan Tambahkan Template Baru
Sekarang saatnya membuka pembuat tema. Tambahkan templat baru.

Pilih Template untuk Semua Posting
Terapkan template ke semua posting.

Tambahkan Tubuh Kustom dan Bangun Dari Awal
Dan mulailah membangun badan kustom template.



Tambahkan Bagian Baru
Setelah berada di editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan unggah gambar latar belakang. Sertakan overlay warna gradien juga.
Latar belakang
- Latar Belakang: Gradien
- Warna Gradien 1: RGB Putih Transparan (255.255.255.0.55)
- Warna Gradien 2: RGB Putih Transparan (255.255.255.0.55)
- Gambar: Latar Belakang Lingkaran


Jarak
Juga, sesuaikan jarak bagian sebelum menambahkan baris.
- Padding Atas dan Bawah: 200px

Tambahkan Baris Baru
Struktur Kolom
Sekarang tambahkan baris dengan tiga kolom.

Perekat
Sebelum menambahkan modul, sesuaikan ukuran baris.
- Lebar Talang Kustom: 2
- Lebar: 80%
- Lebar Maks: 100%

Pengaturan Kolom 2
Latar belakang
Sekarang, gaya kolom kedua dengan menambahkan latar belakang biru.
- Warna Latar Belakang: Biru #51a2ff

Berbatasan
Lanjutkan dengan membulatkan batas.
- Sudut Bulat: 1vw keempat sudut

Bayangan Kotak
Terakhir, tambahkan juga bayangan kotak.
- Bayangan: Opsi Ketiga
- Kekuatan Kabur: 80px
- Warna: rgba (0,0,0,0.13)

Tambahkan Modul Orang ke Kolom 1
Isi
Saatnya untuk menambahkan modul. Mulailah dengan modul orang di kolom 1 dan tambahkan konten.
- Nama: Jenny McAbee
- Posisi: Kontributor Reguler
- Isi: Teks Paragraf
- Gambar: Foto Potret


Latar belakang
Tambahkan latar belakang putih ke modul.
- Warna Latar Belakang: Putih #000000

Gambar
Di tab desain, gaya batas gambar sebagai berikut.
- Sudut Bulat: 0.5vw di kiri atas dan kanan atas
- Gaya Perbatasan: Batas Bawah
- Lebar: 5px
- Warna: Biru #51a2ff

Teks Judul
Lanjutkan dengan menata teks judul.
- Tingkat Pos: H4
- Font: Alegreya Sans SC
- Gaya: TT
- Warna: #021859
- Ukuran:
- Desktop: 1vw
- Tablet: 3vw
- Telepon: 5vw
- Spasi Huruf: 1px
- Tinggi Garis: 1.6em

Teks Tubuh
Kemudian juga, teks isi.
- Font: Lato
- Warna: Biru #1a1f73
- Ukuran:
- Desktop: 0.7vw
- Tablet: 2vw
- Telepon: 3vw
- Tinggi Garis: 2em

Teks Posisi
Lanjutkan dengan teks posisi.
- Font: Lato
- Gaya: Miring
- Warna: #021859
- Ukuran:
- Desktop: 0.8vw
- Tablet: 3vw
- Telepon: 3.5vw

Perekat
Kemudian, sesuaikan ukurannya.
- Lebar:
- Desktop: 100%
- Tablet: 50%
- Telepon: 70%
- Penyelarasan Modul: Pusat

Jarak
Juga, jarak.
- Padding Atas dan Bawah: 4vw

Berbatasan
Kemudian, tambahkan beberapa sudut membulat.
- Sudut Bulat: o.5vw di keempat sudut
- Gaya Perbatasan: 24 px keempat sisinya
- Warna: Putih #ffffff

Bayangan Kotak
Terakhir, tambahkan bayangan kotak.
- Bayangan: Opsi Ketiga
- Kekuatan Kabur: 80px
- Warna: rgba (0,0,0,0.13)

Tambahkan Modul Ikuti Media Sosial ke Kolom 1
Jaringan
Di bawah modul orang, tambahkan modul ikuti media sosial dengan tiga jejaring sosial.
- Indonesia

Pengaturan jaringan
Terapkan warna latar belakang transparan ke setiap jejaring sosial. Anda perlu melakukan ini satu per satu.
- Latar Belakang: Transparan

Penyelarasan
Dalam pengaturan desain utama, pusatkan perataan modul.
- Penyelarasan Modul: Pusat

ikon
Terakhir, warnai ikon dengan warna biru.
- Warna: Biru #51a2ff
- Ukuran:
- Desktop: 1vw
- Tablet dan Telepon: 4vw

Tambahkan Modul Teks ke Kolom 2
Isi
Pindah ke kolom 2. Tambahkan modul teks dengan beberapa konten h3 pilihan Anda.
- Teks: Beri kami komentar

Latar belakang
Tambahkan latar belakang putih.
- Warna Latar Belakang: Putih #ffffff

Teks Judul
Kemudian lanjutkan ke tab desain dan gaya teks judul.
- Tingkat Pos: H3
- Font: Alegreya Sans SC
- Berat: Tebal
- Gaya Huruf: TT
- Warna: Biru #021859
- Ukuran:
- Desktop: 2vw
- Tablet dan Telepon: 5.5vw

Jarak
Terakhir, sesuaikan jarak.
- Bantalan Atas:
- Desktop: 3vw
- Tablet: 2vw
- Telepon: 6vw
- Lapisan Bawah
- Desktop dan Tablet: 3vw
- Bantalan Kiri dan Kanan:
- Desktop dan Tablet: 1vw

Tambahkan Modul Komentar ke Kolom 2
Elemen
Sekarang tambahkan modul komentar ke kolom 2. Aktifkan semua elemen.
- Tampilkan Avatar Penulis: Ya
- Tampilkan Tombol Balas: Ya
- Tampilkan Jumlah Komentar: Ya

Latar belakang
Tambahkan latar belakang putih ke modul komentar.
- Warna Latar Belakang: Putih #ffffff

bidang
Kemudian, mulailah menata modul dengan menyesuaikan pengaturan bidang sebagai berikut
- Warna Latar Belakang: Putih #ffffff
- Warna Teks: Biru #1a1f73
- Fokus Warna Latar Belakang: Putih #ffffff
- Warna Teks Fokus: Biru #1a1f73
- Font: Alegreya Sans SC
- Gaya: TT
- Ukuran:
- Desktop: 1vw
- Tablet: 3vw
- Telepon: 4vw
- Sudut Bulat: 5px semua sudut


Gambar
Ubah juga pengaturan gambar.
- Sudut Bulat: 5px
- Gaya Perbatasan: semua sisi
- Lebar: 3px
- Warna: Biru #1a1f73

Teks Hitung Komentar
Kemudian, komentar menghitung teks.
- Tingkat Pos: H3
- Font: Alegreya Sans SC
- Gaya Huruf: TT
- Warna: Biru #021859
- Ukuran:
- Desktop: 1.3vw
- Tablet: 3vw
- Telepon: 5vw
- Tinggi Garis: 2 em

Teks Judul Formulir
Juga, gaya teks judul formulir.
- Tingkat Pos: H3
- Font: Alegreya Sans SC
- Gaya Huruf: TT
- Warna: Biru #021859
- Ukuran:
- Desktop: 1vw
- Tablet: 3vw
- Telepon: 5vw
- Tinggi Garis: 2 em

Teks Meta
Pindah ke teks meta dan gaya sebagai berikut.
- Font: Lato
- Warna: #021859
- Ukuran:
- Desktop: 1vw
- Tablet: 2.7vw
- Telepon: 3.5vw

Teks Komentar
Kemudian teks komentar.
- Font: Lato
- Warna: #021859
- Ukuran:
- Desktop: 0.9vw
- Tablet: 1.8vw
- Telepon: 2.5vw

Tombol
Jangan lupa untuk menata tombol juga.
- Ukuran teks:
- Desktop: 0.9vw
- Tablet: 2.5vw
- Telepon: 3.5vw
- Warna Teks: Putih #ffffff
- Radius Batas: 5px
- Font: Lato

Jarak
Juga, jarak modul komentar.
- Batas atas:
- Desktop: -1vw
- Tablet dan Telepon: -3.3vw
- Bantalan Atas:
- Desktop dan Tablet: 3vw
- Telepon: 4vw
- Bantalan Bawah:
- Desktop: 3vw
- Ponsel dan Tablet: 0vw
- Bantalan Kiri dan Kanan:
- Desktop: 2vw
- Tablet: 4vw
- Telepon: 7vw

Berbatasan
Terakhir, tambahkan beberapa sudut membulat ke modul komentar.
- Gaya Perbatasan: 2px keempat sisinya
- Warna: Biru #1a1f73

Tambahkan Modul Optin Email ke Kolom 3
Isi
Pindah ke kolom 3 dan modul optin email. Beri judul modul.
- Teks: Dapatkan Pembaruan Reguler
- Isi: Teks Paragraf

Akun email
Siapkan penyedia email Anda di tab akun email. Pilih daftar dan tambahkan kunci API Anda.
- Penyedia Email
- Daftar
- kunci API

bidang
Kemudian, pilih untuk hanya menggunakan satu bidang nama.
- Gunakan Bidang Nama Tunggal: Ya

Latar belakang
Tambahkan latar belakang putih ke modul.
- Warna Latar Belakang: Putih

Tata Letak
Pindah ke desain ta dan ubah pengaturan tata letak sebagai berikut.
- Tata Letak: Tubuh di Kiri, Formulir di Kanan
- Nama Fullwidth: Ya
- Nama Depan Fullwidth: Ya
- Nama Belakang Fullwidth: Ya
- Lebar Penuh Email: Ya

bidang
Kemudian, gaya pengaturan bidang.
- Warna Teks: Biru #1a1f73
- Warna Latar Belakang: Putih #ffff
- Warna Teks Fokus: Biru #1a1f73
- Fokus Warna Latar Belakang: Putih #ffff
- Font: Lato
- Ukuran teks:
- Desktop: 0.7vw
- Tablet: 2.2vw
- Telepon: 3.2vw
- Spasi Huruf: 1px
- Sudut Bulat: 0.2vw di semua sudut
- Gaya Perbatasan: Keempat sisi
- Lebar: 2px
- Warna: Biru #1a1f73

Teks Judul
Diikuti dengan teks judul.
- Tingkat Pos: H4
- Font: Alegreya Sans SC
- Berat: Sedang
- Gaya Huruf: TT
- Warna: Biru #1a1f73
- Ukuran:
- Desktop: 1vw
- Tablet: 4vw
- Telepon: 5vw
- Spasi Huruf: 1px

Teks Tubuh
Juga, teks tubuh.
- Font: Lato
- Warna: Biru #1a1f73
- Ukuran:
- Desktop: 0.7vw
- Tablet: 2.3vw
- Telepon: 3vw

Teks Pesan Hasil
Jangan lupa teks pesan hasil.
- Font: Lato
- Warna: Biru #1a1f73
- Ukuran:
- Desktop: 0.7vw
- Tablet: 2.3vw
- Telepon: 3vw

Tombol
Juga, gaya tombol.
- Ukuran teks:
- Desktop: 0.7vw
- Tablet: 2.3vw
- Telepon: 3vw
- Warna Teks: Putih #ffffff
- Warna Latar Belakang: Biru #51a2ff
- Font: Lato

Jarak
Sesuaikan jarak.
- Padding Atas dan Bawah: 4vw

Berbatasan
Kemudian, tambahkan beberapa sudut membulat.
- Sudut Bulat: o.5vw di keempat sudut

Bayangan Kotak
Terakhir, tambahkan bayangan kotak.
- Bayangan: Opsi Ketiga
- Kekuatan Kabur: 80px
- Warna: rgba (0,0,0,0.13)

Pratinjau
Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir dari tutorial ini.
Desktop

Tablet

Telepon

Desktop

Tablet

Seluler

Ini adalah Bungkus Modul Komentar!
Itu dia! Anda baru saja menambahkan bagian komentar yang disesuaikan ke template posting blog Anda. Kami berharap desain ini akan menginspirasi kreasi pembuat tema Divi Anda sendiri. Anda dapat mengunduh file JSON dari kedua desain di awal tutorial ini. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!
