Cara Membuat Template Postingan Blog Ramah-UX Sederhana dengan Divi

Saat membagikan posting blog baru di situs web Anda, penting untuk membuat pengalaman membaca semudah mungkin bagi pengunjung Anda. Itu berarti menyingkirkan gangguan sebanyak mungkin, sambil tetap mencocokkan branding di situs web Anda. Penting juga untuk mengizinkan pengunjung mengontrol ukuran teks melalui browser mereka, di situlah unit font rem relatif berguna. Ini memungkinkan orang untuk menyesuaikan ukuran font yang ditampilkan di dalam browser mereka. Dalam tutorial ini, kita akan membuat template posting blog yang cantik dan sederhana yang sangat mempertimbangkan pengalaman pengguna. Anda juga dapat mengunduh file JSON 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 Blog Ramah-UX Sederhana GRATIS

Untuk mendapatkan templat posting blog ramah UX sederhana yang 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!

Berlangganan Saluran Youtube Kami

1. Buka Divi Theme Builder & Buat Template Baru

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder.

Buat Template Baru

Buat template baru dan gunakan di semua posting Anda.

• Gunakan Pada: Semua Posting

2. Mulai Membangun Badan Postingan Blog

Kemudian, mulailah membuat badan kustom dari templat posting Anda.

Tambahkan Baris #1 ke Bagian yang Ada

Struktur Kolom

Di dalam editor template, tambahkan baris baru ke bagian yang sudah ada menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Batas Kolom 1 & 2

Tambahkan batas kanan ke kolom pertama dan kedua berikutnya.

• Lebar Batas Kanan: 1px (Desktop), 0px (Tablet & Ponsel)
• Warna Batas Kanan: #333333

Tambahkan Modul Teks ke Setiap Kolom

Konten Dinamis

Lanjutkan dengan menambahkan Modul Teks ke setiap kolom dan pilih beberapa konten dinamis untuk setiap modul satu per satu.

• Modul Teks di Kolom 1: Kategori Posting

• Modul Teks di Kolom 2: Tanggal Penerbitan Posting

• Modul Teks di Kolom 3: Jumlah Komentar Posting
• Setelah: Komentar

Pengaturan Teks

Pindah ke tab desain setiap modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Lato
• Ukuran Teks: 1.1rem
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 2em

Tambahkan Baris #2

Struktur Kolom

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

Tambahkan Modul Teks #1 ke Kolom

Konten Dinamis

Tambahkan Modul Teks dan pilih konten dinamis judul posting.

• Konten Dinamis: Judul Posting

• Sebelum: <H1>
• Setelah: </H1>

Pengaturan Teks H1

Pindah ke tab desain modul dan ubah pengaturan teks H1 sebagai berikut:

• Font Judul: Tampilan Playfair
• Perataan Teks Judul: Tengah
• Ukuran Teks Judul: 6.2rem (Desktop), 3.2rem (Tablet), 2.3rem (Telepon)

Jarak

Tambahkan beberapa margin atas dan bawah kustom berikutnya.

• Margin Atas: 50px
• Margin Bawah: 100px

Tambahkan Modul Teks #2 ke Kolom

Konten Dinamis

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dan pilih konten dinamis kutipan posting.

• Konten Dinamis: Posting Kutipan

Pengaturan Teks

Ubah pengaturan teks modul sebagai berikut:

• Font Teks: Lato
• Ukuran Teks: 1.1rem
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 2em
• Perataan Teks: Tengah

Tambahkan Baris #3

Struktur Kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Menampilkan

Pastikan kolom tetap bersebelahan dengan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Gambar ke Kolom 1

Konten Dinamis

Lanjutkan dengan menambahkan Modul Gambar ke kolom 1 dan pilih konten dinamis gambar profil penulis.

• Konten Dinamis: Gambar Profil Penulis

Penyelarasan

Pindah ke tab desain modul dan ubah perataan gambar.

• Penjajaran Gambar: Kanan

Perekat

Ubah lebar berikutnya.

• Lebar: 50px

Jarak

Tambahkan beberapa margin kanan pada tablet dan ponsel.

• Margin Kanan: 20px (Tablet & Ponsel)

Berbatasan

Dan selesaikan pengaturan modul dengan menambahkan beberapa radius perbatasan ke pengaturan perbatasan.

• Semua Sudut: 100px

Tambahkan Modul Teks ke Kolom 2

Konten Dinamis

Di kolom kedua, kita membutuhkan Modul Teks. Pilih konten dinamis penulis postingan.

• Konten Dinamis: Penulis Pos

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Lato
• Ukuran Teks: 1.1rem
• Spasi Huruf Teks: 1px

Jarak

Tambahkan beberapa nilai margin kustom berikutnya.

• Margin Atas: 15px
• Margin Kiri: 20px (Tablet & Ponsel)

Tambahkan Baris #4

Struktur Kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Biarkan Kotak Konten Kosong

Tambahkan Modul Teks ke kolom dan pastikan Anda membiarkan kotak konten kosong.

Gambar Latar Belakang Dinamis

Tambahkan konten dinamis gambar unggulan ke gambar latar belakang modul berikutnya.

• Konten Dinamis: Gambar Unggulan

Perekat

Lanjutkan dengan memodifikasi pengaturan ukuran modul di berbagai ukuran layar.

• Lebar: 800px (Desktop), 500px (Tablet), 300px (Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus di berbagai ukuran layar juga.

• Padding Atas: 400px (Desktop), 250px (Tablet), 150px (Ponsel)
• Padding Bawah: 400px (Desktop), 250px (Tablet), 150px (Ponsel)

Berbatasan

Dan tambahkan beberapa radius perbatasan ke pengaturan perbatasan untuk mengubah modul menjadi lingkaran.

• Semua Sudut: 500px

Tambahkan Bagian Baru

Ke bagian reguler berikutnya.

Tambahkan Baris #1

Struktur Kolom

Tambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Konten Posting ke Kolom

Pengaturan Teks

Tambahkan Modul Konten Posting ke kolom, pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Lato
• Ukuran Teks: 1.1rem
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 2.3em

Pengaturan Teks Judul

Ubah juga pengaturan teks heading.

• Font Judul: Tampilan Playfair
• Ukuran Teks H2: 3.5rem (Desktop), 2rem (Tablet & Ponsel)
• Ukuran Teks H3: 2.5rem (Desktop), 1.5rem (Tablet & Telepon)
• Ukuran Teks H4: 2.3rem (Desktop), 1.3rem (Tablet & Ponsel)
• Ukuran Teks H5 & H6: 2rem (Desktop), 1rem (Tablet & Ponsel)

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Jarak

Tambahkan beberapa margin atas kustom ke baris.

• Margin Atas: 100px

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
• Font Bidang: Lato
• Ukuran Teks Bidang: 1.1rem

• Semua Sudut: 0px
• Lebar Perbatasan Bidang: 1px
• Warna Batas Bidang: #000000

Pengaturan Gambar

Ubah juga pengaturan gambar.

• Semua Sudut: 100px

Pengaturan Teks Judul

Kemudian, ubah pengaturan teks judul.

• Judul Judul Tingkat: H2
• Judul Font: Tampilan Playfair
• Judul Teks Ukuran: 3rem (Desktop), 2rem (Tablet & Telepon)
• Tinggi Baris Judul: 1.4em

Pengaturan Teks Meta

Gaya teks meta juga.

• Meta Font: Tampilan Playfair
• Ukuran Teks Meta: 1.4rem

Pengaturan Teks Komentar

Kami menggunakan pengaturan berikut untuk pengaturan teks komentar:

• Font Komentar: Lato
• Ukuran Teks Komentar: 1.1rem
• Spasi Surat Komentar: 1px
• Tinggi Baris Komentar: 2em

Pengaturan Teks Tombol

Dan selesaikan pengaturan modul dengan menata tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1.1rem
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 1px
• Font Tombol: Lato

• Padding Atas: 20px
• Padding Bawah: 20px

3. Simpan Perubahan Template & Pembuat Tema

Setelah Anda menyelesaikan desain template, simpan semua perubahan Divi Theme Builder dan pratinjau 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 membuat template posting blog yang indah dan sederhana yang berfokus pada pengalaman pengguna yang dimiliki pengunjung Anda saat membaca. Ubah template posting ini menggunakan opsi bawaan Divi untuk mencocokkannya dengan branding situs web Anda. Anda juga dapat mengunduh file template 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.