Cara Membagi Layar Templat Postingan Blog Anda dengan Pembuat Tema Divi

Saat membuat situs web, kemungkinan besar Anda akan menyertakan halaman blog dan posting blog di dalamnya. Tentu saja, bagian terpenting dari strategi blog adalah membuat konten posting blog berkualitas tinggi, tetapi bagian desain dari semuanya juga memainkan peran besar dalam kesuksesan strategi Anda. Saat membuat situs web dengan Divi, Anda dapat merampingkan tampilan postingan blog Anda di dalam Divi Theme Builder dengan membuat template postingan dengan konten dinamis. Kami telah secara konsisten membagikan templat posting blog di blog kami yang membantu Anda mempercepat prosesnya, tetapi jika Anda secara khusus ingin membuat posting blog layar terpisah, Anda akan menyukai posting ini. Kami akan menunjukkan kepada Anda langkah demi langkah bagaimana melakukannya dan Anda juga dapat mengunduh file template JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Templat Postingan Blog Layar Terpisah GRATIS

Untuk mendapatkan template posting blog layar terpisah 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

Jarak

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturannya, pindah ke tab desain dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru 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
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%
• Tinggi Min: 100vh (Desktop), Otomatis (Tablet & Ponsel)
• Tinggi Maks: 100vh (Desktop), Tidak Ada (Tablet & Ponsel)

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Dan atur overflow baris menjadi tersembunyi.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Pengaturan Kolom 1

Latar Belakang Gradien

Kemudian, buka pengaturan kolom 1 dan tambahkan latar belakang gradien.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #000000
• Tipe Gradien: Linier
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Gambar latar belakang

Kami menggunakan gambar unggulan dinamis sebagai gambar latar belakang untuk kolom berikutnya.

• Gambar Latar Belakang: Gambar Unggulan

Pengaturan Kolom 2

Jarak

Kemudian, kita akan membuka pengaturan kolom 2 dan menambahkan beberapa nilai padding kustom ke pengaturan spasi.

• Padding Atas: 8%
• Padding Bawah: 8%
• Padding Kiri: 8%
• Padding Kanan: 8%

Meluap

Untuk memungkinkan orang menggulir kolom kedua, di mana konten posting dan kotak komentar akan muncul, kita akan mengubah luapan vertikal di pengaturan visibilitas.

• Overflow Vertikal: Gulir (Desktop), Terlihat (Tablet & Ponsel)

Tambahkan Modul Judul Posting ke Kolom 1

Elemen

Saatnya menambahkan modul, dimulai dengan Modul Judul Postingan di kolom 1. Nonaktifkan opsi gambar unggulan di pengaturan elemen.

• Tampilkan Gambar Unggulan: Tidak

Pengaturan Teks Judul

Pindah ke tab desain dan ubah pengaturan teks H1 yang sesuai:

• Judul Judul Level: H1
• Judul Font: Work Sans
• Judul Font Berat: Tebal
• Warna Teks Judul: #ffffff
• Judul Teks Ukuran: 60px (Desktop), 45px (Tablet), 35px (Telepon)
• Spasi Huruf Judul: -1px
• Tinggi Baris Judul: 1.2em

Pengaturan Teks Meta

Ubah pengaturan teks meta selanjutnya.

• Meta Font: Work Sans
• Gaya Font Meta: Huruf Besar
• Warna Teks Meta: #eaeaea
• Spasi Huruf Meta: 2px

Perekat

Kemudian, ubah lebar di berbagai ukuran layar.

• Lebar: 81% (Desktop), 100% (Tablet & Ponsel)

Jarak

Tambahkan beberapa nilai padding responsif berikutnya.

• Padding Atas: 8% (Hanya Tablet & Ponsel)
• Padding Bawah: 8% (Hanya Tablet & Ponsel)
• Padding Kiri: 7% (Tablet), 8% (Ponsel)
• Padding Kanan: 7% (Tablet), 8% (Ponsel)

Posisi

Dan selesaikan pengaturan modul dengan mengubah pengaturan posisi sebagai berikut:

• Posisi: Absolute (Desktop), Default (Tablet & Phone)
• Lokasi: Bawah Tengah
• Offset Vertikal: 10%

Tambahkan Modul Konten Posting ke Kolom 2

Ke kolom berikutnya. Di sana, modul pertama yang kita butuhkan adalah Post Content Module. Modul ini akan menampilkan konten posting Anda secara dinamis.

Pengaturan Teks Judul

Buat beberapa perubahan pada pengaturan teks judul modul.

• Font Judul: Work Sans
• Berat Huruf Judul: Semi Tebal
• Ukuran Teks Judul:
  • H2: 40px
  • H3: 30px
  • H4: 25px
  • H5: 16px
  • H6: 14px
• Spasi Huruf Judul: -1px (H2, H3 & H4)

Kelas CSS

Dan tambahkan Kelas CSS. Pada langkah selanjutnya dari tutorial ini, kita akan menggunakan kelas CSS ini untuk menghasilkan beberapa ruang antara heading dan paragraf.

• Kelas CSS: konten posting blog

Tambahkan Modul Kode ke Kolom 2

Tambahkan Kode CSS untuk Spasi Antara Paragraf & Judul

Tambahkan Modul Kode tepat di bawah Modul Konten Posting dan tambahkan baris kode CSS berikut untuk menghasilkan ruang antara judul dan paragraf:

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Tambahkan Modul Komentar ke Kolom 2

Pengaturan Bidang

Modul berikutnya dan terakhir yang kita butuhkan di kolom 2 untuk menyelesaikan tutorial ini adalah Modul Komentar. Ubah pengaturan bidang modul yang sesuai:

• Warna Latar Belakang Bidang: #ffffff
• Warna Teks Bidang: #000000
• Bidang Atas Padding: 30px
• Bidang Bawah Padding: 30px
• Bidang Kiri Padding: 30px
• Bidang Kanan Padding: 30px
• Font Bidang: Work Sans

• Gaya Font Bidang: Huruf Besar
• Ukuran Teks Bidang: 15px
• Spasi Huruf Bidang: 3px
• Bidang Sudut Bulat: 10px (Semua Sudut)

• Kekuatan Buram Bayangan Kotak Bidang: 30px
• Warna Bayangan Kotak Bidang: rgba (0,0,0,0.06)

Pengaturan Teks Hitung Komentar

Kemudian, ubah pengaturan teks jumlah komentar.

• Font Hitungan Komentar: Work Sans
• Jumlah Komentar Berat Font: Tebal

Pengaturan Teks Judul Formulir

Ubah juga pengaturan teks judul formulir.

• Judul Formulir Tingkat Judul: H3
• Font Judul Formulir: Work Sans
• Judul Formulir Berat Font: Semi Tebal

Pengaturan Teks Meta

Selanjutnya, kita akan membuat beberapa perubahan pada pengaturan teks meta.

• Meta Font: Work Sans
• Berat Font Meta: Semi Tebal
• Warna Teks Meta: #000000

Pengaturan Tombol

Kemudian, kami akan mengatur gaya tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 16px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px

• Jarak Huruf Tombol: 2px
• Font Tombol: Work Sans
• Gaya Font Tombol: Huruf Besar

• Tombol Atas Padding: 2%
• Tombol Bawah Padding: 2%
• Padding Kiri Bawah: 5%
• Tombol Padding Kanan: 5%

Jarak

Kami akan menambahkan beberapa margin atas juga.

• Margin Atas: 15%

CSS Badan Komentar

Dan kita akan menyelesaikan pengaturan modul dengan menambahkan satu baris kode CSS ke badan komentar modul di tab lanjutan.

margin-top: 50px

3. Simpan Perubahan Pembuat Tema & Lihat Hasil

Sekarang setelah kita menyelesaikan template posting blog, satu-satunya yang tersisa untuk dilakukan adalah menyimpan semua perubahan Divi Theme Builder dan melihat hasilnya di posting blog kita!

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 pendekatan berbeda dalam membuat template posting blog untuk situs web Divi Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara membuat desain templat posting blog layar terpisah menggunakan Pembuat Tema dan konten dinamis Divi. Kami telah memandu Anda langkah demi langkah melalui proses dan menambahkan file JSON yang juga dapat Anda unduh 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.