Unduh Template Posting Blog Bilah Sisi Dua Sisi GRATIS dengan Divi

Meskipun bilah sisi telah ada sejak lama, bilah sisi masih sering digunakan di seluruh web. Mereka membantu menunjukkan elemen berbeda yang terhubung ke postingan, seperti postingan yang direkomendasikan dan formulir optin email, tanpa mengabaikan fokus utama, yaitu konten postingan yang sebenarnya. Sekarang, dengan Divi's Theme Builder di luar sana, ada banyak cara untuk membuat template posting blog Anda. Dalam tutorial ini, kami akan menunjukkan cara menambahkan sidebar dua sisi ke template postingan Anda. 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

Berlangganan Saluran Youtube Kami

Unduh Template Posting Blog GRATIS

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

Buka Divi Theme Builder & Tambahkan Template Baru

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

Gunakan Template di Semua Posting

Kami menggunakan template baru ini di semua posting.

• Gunakan Pada: Semua Posting

Mulai Membangun Tubuh Template

Nah, kalau begitu, mulailah membangun badan template.

2. Mulai Membangun Badan Posting Blog

Tambahkan Bagian Baru

Warna latar belakang

Begitu berada di dalam Divi Theme Builder, Anda akan melihat sebuah bagian. Buka bagian itu dan ubah warna latar belakang.

• Warna Latar Belakang: #f4f4f4

Jarak

Ubah juga nilai spasi bagian di berbagai ukuran layar.

• Padding Atas: 50px (Desktop), 20px (Tablet), 10px (Ponsel)
• Padding Bawah: 50px (Desktop), 20px (Tablet), 10px (Ponsel)

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 yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar: 100%
• Lebar Maks: 95%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Kolom 2

Warna latar belakang

Kemudian, buka pengaturan kolom 2 dan ubah warna latar belakang menjadi putih.

• Warna Latar Belakang: #ffffff

Bayangan Kotak

Tambahkan bayangan kotak ke kolom juga.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -21px
• Warna Bayangan: rgba (0,0,0,0.08)

Tambahkan Modul Gambar ke Kolom 2

Konten Dinamis

Saatnya mulai menambahkan modul! Di kolom kedua, kami akan menempatkan semua modul yang relevan dengan posting blog itu sendiri, dimulai dengan Modul Gambar. Gunakan konten dinamis gambar unggulan.

• Gambar: Gambar Unggulan

Perekat

Kemudian, pindah ke tab desain modul dan paksakan lebar penuh pada Modul Gambar.

• Paksa Lebar Penuh: Ya

Tambahkan Modul Judul Posting ke Kolom 2

Elemen

Ke modul kedua, yaitu Modul Judul Postingan. Nonaktifkan gambar unggulan dalam pengaturan elemen.

• Tampilkan Gambar Unggulan: Tidak

Pengaturan Teks Judul

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

• Judul Font: Oksigen
• Judul Teks Ukuran: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Tinggi Baris Judul: 1.2em

Pengaturan Teks Meta

Buat beberapa perubahan pada pengaturan teks meta selanjutnya.

• Meta Font: Buka Sans
• Warna Teks Meta: #ffc023
• Ukuran Teks Meta: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)

Jarak

Ubah juga nilai spasi.

• Margin Atas: 100px
• Margin Kiri: 4vw
• Margin Kanan: 4vw

Judul CSS

Dan selesaikan pengaturan modul dengan menambahkan beberapa margin bawah ke elemen CSS judul di tab lanjutan.

margin-bottom: 20px;

Tambahkan Modul Konten Posting ke Kolom 2

Pengaturan Teks

Ke modul berikutnya, yaitu Modul Konten Postingan yang berisi semua konten postingan blog dinamis Anda. Ubah pengaturan teks modul yang sesuai:

• Font Teks: Buka Sans
• Ukuran Teks: 0.9vw (Desktop), 1.8vw (Tablet), 3vw (Telepon)
• Tinggi Baris Teks: 2.2em

Pengaturan Teks Judul

Kemudian, buat beberapa perubahan pada pengaturan teks heading juga.

• Font Judul: Oksigen
• Ukuran Teks H2: 1.5vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• H3, H4, H5 & H6 Ukuran Teks: 1.3vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)

Jarak

Kami juga menggunakan beberapa margin kustom dan nilai padding.

• Margin Kiri: 4vw
• Margin Kanan: 4vw
• Padding Atas: 50px
• Padding Bawah: 100px

Kelas CSS

Selesaikan pengaturan modul dengan menambahkan kelas CSS. Di bagian selanjutnya dari tutorial ini, kita akan menggunakan kelas CSS ini untuk menambahkan beberapa spasi pada judul dan paragraf.

• spasi pasca-konten

Tambahkan Modul Kode ke Kolom 2

Masukkan Kode CSS

Seperti yang disebutkan pada langkah sebelumnya dari posting ini, kami akan menggunakan beberapa CSS khusus untuk menambahkan ruang antara heading dan paragraf. Untuk ini, kita akan menggunakan Modul Kode di kolom 2. Masukkan baris kode CSS berikut:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

Tambahkan Modul Optin Email ke Kolom 3

Tambah isi

Saatnya mulai menambahkan elemen bilah sisi! Anda dapat menambahkan modul apa pun yang Anda inginkan. Kita akan mulai dengan Modul Email Optin di kolom 3. Gunakan beberapa salinan pilihan Anda.

Akun email

Lanjutkan dengan menautkan akun email ke modul.

bidang

Kemudian, nonaktifkan bidang nama belakang di pengaturan bidang.

• Tampilkan Bidang Nama Belakang: Tidak

Warna latar belakang

Ubah warna latar belakang sesuai:

• Warna Latar Belakang: #ffc023

Pengaturan Bidang

Pindah ke tab desain modul dan ubah pengaturan bidang sebagai berikut:

• Font Bidang: Buka Sans
• Ukuran Teks Bidang: 0.8vw (Desktop), 1.8vw (Tablet), 3vw (Telepon)

Pengaturan Teks Judul

Buat beberapa perubahan pada pengaturan teks judul juga.

• Judul Font: Oksigen
• Judul Font Berat: Tebal
• Judul Teks Ukuran: 1vw (Desktop), 3vw (Tablet), 5vw (Telepon)
• Judul Baris Tinggi: 1.5em

Pengaturan Tombol

Lanjutkan dengan menata tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw (Desktop), 1.8vw (Tablet), 3vw (Ponsel)
• Warna Teks Tombol: #ffc023
• Warna Latar Tombol: #f4f4f4
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 0px
• Font Tombol: Oksigen

• Tombol Padding Atas: 15px
• Tombol Bawah Padding: 15px

Bayangan Kotak

Dan selesaikan pengaturan modul dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -21px
• Warna Bayangan: rgba (0,0,0,0.08)

Tambahkan Modul Ikuti Media Sosial ke Kolom 3

Tambahkan Jejaring Sosial Pilihan

Modul selanjutnya yang kita butuhkan di kolom 3 adalah Modul Follow Media Sosial. Tambahkan beberapa jejaring sosial pilihan Anda.

Setel Ulang Gaya Jejaring Sosial Satu per satu

Lanjutkan dengan mengatur ulang gaya item untuk setiap jejaring sosial satu per satu.

Pengaturan Ikon

Kemudian, kembali ke pengaturan modul umum dan ubah warna ikon.

• Warna Ikon: #ffc023

Tambahkan Modul Blog ke Kolom 1

Elemen

Di kolom 1, satu-satunya modul yang kami tambahkan adalah Modul Blog. Nonaktifkan penulis di pengaturan elemen.

• Tampilkan Penulis: Tidak

Tata Letak

Kemudian, pindah ke tab desain modul dan ubah tata letaknya.

• Tata Letak: Kotak

Pengaturan Teks Judul

Ubah pengaturan teks judul berikutnya.

• Judul Font: Oksigen
• Judul Font Berat: Tebal
• Judul Teks Ukuran: 1vw (Desktop), 3vw (Tablet), 5vw (Telepon)
• Judul Baris Tinggi: 1.5em

Pengaturan Teks Tubuh

Buat beberapa perubahan pada pengaturan teks isi juga.

• Font Tubuh: Buka Sans
• Ukuran Teks Tubuh: 0,7vw (Desktop), 1,8vw (Tablet), 3vw (Telepon)
• Tinggi Garis Tubuh: 2.2em

Pengaturan Teks Meta

Selanjutnya, atur pengaturan teks meta yang sesuai:

• Meta Font: Buka Sans
• Warna Teks Meta: #ffc023
• Ukuran Teks Meta: 0.8vw (Desktop), 1.8vw (Tablet), 3vw (Telepon)

Berbatasan

Hapus juga batas default modul.

• Lebar Batas Tata Letak Kotak: 0px

Bayangan Kotak

Dan gunakan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -21px
• Warna Bayangan: rgba (0,0,0,0.08)

Visibilitas

Sekarang, kami ingin Modul Blog muncul saat di kolom 1 saat seseorang melihat postingan di desktop. Namun, pada ukuran layar yang lebih kecil, kami ingin konten postingan didahulukan. Itu sebabnya kami akan menyembunyikan seluruh modul di tablet dan ponsel.

Modul Blog Klon & Tempatkan Duplikat di Kolom 3

Kami kemudian akan mengkloning Modul Blog dan menempatkan duplikatnya di kolom ketiga.

Ubah Visibilitas

Kami ingin modul ini muncul di kolom 3 hanya pada perangkat yang lebih kecil, itu sebabnya kami akan menyembunyikan seluruh modul di desktop.

3. Simpan Semua Perubahan Pembuat Tema & Hasil Pratinjau

Setelah Anda menyelesaikan template posting blog (pastikan Anda menambahkan Modul Komentar juga!), Anda dapat menyimpan semua perubahan Pembuat Tema dan melihat hasilnya di situs web 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 menambahkan sidebar dua sisi ke template posting blog Anda menggunakan Divi's Theme Builder. Lebih dari itu, kami telah membagikan file JSON tata letak secara gratis sehingga Anda dapat menyimpannya di dekat jika Anda membutuhkannya untuk proyek mendatang! Jika Anda memiliki pertanyaan, 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.