Cara Menyertakan Bilah Sisi Tetap Tinggi Penuh di Template Posting Blog Anda

Memilih untuk menambahkan bilah sisi ke posting blog Anda sepenuhnya terserah Anda. Beberapa blogger memilih untuk tidak menggunakan sidebar sama sekali. Tutorial ini untuk Anda yang lebih suka menggunakan sidebar tetapi ingin membuatnya terlihat sedikit berbeda. Biasanya, sidebar diposisikan secara statis, tetapi jika konten posting panjang, itu berarti pembaca harus menggulir kembali ke atas untuk melihat sidebar.

Dalam desain template posting blog ini, kami telah membuat sidebar tetap tinggi penuh yang tetap di tempatnya saat menggulir konten posting ke bawah. Saat membuat ulang tutorial, biarkan dua tab tetap terbuka di dalam browser Anda: satu untuk pembuat tema dan satu lagi untuk pratinjau posting blog. Dengan cara ini Anda dapat melihat perubahan saat Anda pergi.

Mari kita mulai!

Pratinjau

Sebelum kita mulai, mari kita lihat bilah sisi tetap dengan ketinggian penuh.

Desktop

Seluler

Unduh Template Bilah Sisi Tetap Tinggi Penuh GRATIS

Untuk meletakkan tangan Anda pada templat bilah sisi tetap tinggi penuh 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!

Buat Widget Bilah Sisi

Sebelum memulai dengan templat bilah sisi tetap tinggi penuh, buat widget bilah sisi khusus. Kami akan, nanti, menyertakan ini di sidebar kami di dalam template.

Buka Pembuat Widget

Klik 'Tampilan' dan pilih 'Widget'.

Tambahkan Elemen Ke Widget Bilah Sisi

Seret elemen 'Postingan Terbaru' dan 'Kategori' ke dalam widget bilah sisi.

Sesuaikan Pengaturan Elemen Di Widget

Pilih untuk hanya menampilkan 3 posting terbaru dan menambahkan judul. Tambahkan judul ke widget kategori juga dan jangan lupa klik 'Simpan' di kedua kotak setelah selesai.

• Judul Postingan Terbaru: Baca Selengkapnya:
• Kategori Judul: Jelajahi

2. Memulai Dengan Pembuat Tema

Buka Pembuat Tema / Tambahkan Template Baru

Saatnya untuk mulai membuat ulang templat bilah samping dengan ketinggian penuh yang telah diperbaiki! Pertama, buka pembuat tema Anda dan tambahkan template baru.

Setel Pengaturan Template

Di pengaturan template, pilih 'Semua Postingan Blog'. Jika Anda ingin menggunakan template untuk kategori atau tag tertentu, ubah pengaturan template yang sesuai.

Tambahkan Tubuh Kustom

Kemudian, klik 'Tambahkan Badan Kustom'.

Pilih Bangun Badan Khusus

Kami akan membuat ulang template ini dari awal, jadi lanjutkan dan pilih 'Build Custom Body'.

Bangun Dari Awal

Setelah berada di dalam pembuat visual, pilih opsi untuk membangun dari awal sekali lagi.

Buat Ulang Template Dengan Bilah Sisi Tetap Tinggi Penuh

Pengaturan Bagian

Latar belakang

Buka bagian yang ada di dalam editor template Anda dan tambahkan latar belakang gradien.

• Gradien Latar Belakang
  • Warna 1: Putih #ffffff
  • Warna 2: Abu-abu Muda #eaeaea

Jarak

Tambahkan beberapa bantalan juga.

• Padding Atas: 55px

Tambahkan Baris Baru

Struktur Kolom

Sekarang tambahkan baris dengan struktur kolom 3/4 – 1/4.

Perekat

Sesuaikan ukuran baris sebagai berikut.

• Lebar Talang Kustom: 2
• Lebar:
  • Desktop dan Tablet: 90%
  • Telepon: 100%
• Lebar Maks:
  • Desktop: 1920px
• Tinggi Min: 100vh

Pengaturan Kolom 1

Jarak

Sebelum menambahkan modul, sesuaikan pengaturan kolom. Kolom 1 terlebih dahulu.

• Padding Kiri dan Kanan
  • Tablet: 2%
  • Telepon: 8%

Pengaturan Kolom 2

Latar belakang

Kemudian, tambahkan warna latar belakang ke kolom 2.

• Warna Latar Belakang: Putih #ffffff

Jarak

Sertakan beberapa spasi juga.

• Padding Kiri dan Kanan
  • Desktop: 3%
  • Tablet dan Telepon: 14%

Berbatasan

Beri kolom sudut membulat berikutnya.

• Sudut Bulat
  • Tablet dan Desktop: 15px

CSS khusus

Pindah ke tab lanjutan dan tambahkan beberapa baris kode CSS ke elemen utama. Ini akan membantu kami membuat bilah sisi tinggi penuh di desktop.

• Elemen Utama
  • tinggi minimum: 100%

min-height: 100%;

Posisi

Last but not least, untuk membuat efek sidebar tetap, tambahkan posisi tetap ke kolom.

• Posisi
  • Desktop: Tetap
  • Tablet dan Telepon: Bawaan
• Lokasi: Kanan Atas

Tambahkan Modul Judul Postingan #1

Elemen

Saatnya menambahkan modul! Mulailah dengan modul judul posting pertama di kolom 1 dan aktifkan judulnya saja.

• Judul Acara: Ya

Gambar Latar Belakang Dinamis

Kemudian, buka pengaturan latar belakang dan gunakan gambar unggulan sebagai gambar latar dinamis.

Teks Judul

Gaya pengaturan teks judul.

• Judul Font: Bai Jamjuree
• Judul Font Style: Huruf Besar
• Warna Teks Judul: #e98074
• Ukuran Teks Judul:
  • Desktop: 45px
  • Tablet: 35px
  • Telepon: 25px
• Spasi Huruf Judul: 3px
• Tinggi Baris Judul: 1.3em

Jarak

Kemudian, tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 20%
• Padding Bawah: 20%

Berbatasan

Sertakan beberapa sudut membulat juga.

• Semua Sudut: 15px

Judul CSS

Dan selesaikan pengaturan modul dengan menambahkan tiga baris kode CSS ke elemen judul modul di tab lanjutan.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Tambahkan Modul Judul Postingan #2

Elemen

Sekarang tambahkan modul judul posting lainnya. Pilih elemen berikut.

• Meta
• Pengarang
• Kategori Posting

Teks Meta

Buka tab desain dan gaya teks meta.

• Font: Bai Jamjuree
• Berat: Sedang
• Warna: Abu-abu #8e8d8a
• Ukuran
  • Desktop: 20px
  • Tablet dan Telepon: 15px
• Spasi Huruf: 2px

Perekat

Sesuaikan juga ukurannya.

• Lebar: 90%
• Penyelarasan Modul: Pusat

Jarak

Lengkapi pengaturan modul ini dengan beberapa spasi.

• Padding Atas: 15px

Tambahkan Modul Konten Posting

Latar belakang

Tambahkan modul konten posting dengan latar belakang putih berikutnya.

• Warna Latar Belakang: Putih #ffffff

Teks

Sekarang, gaya teks isi.

• Font: Lato
• Warna: Abu-abu #8e8d8a
• Ukuran: 16px

Teks Judul

Lanjutkan dengan menata semua gaya teks heading.

• H1
  • Font: Bai Jamjuree
  • Berat: Sedang
  • Warna: Karang #e98074
  • Ukuran
    • Desktop: 45px
    • Tablet: 33px
    • Telepon: 30px
  • Spasi Huruf: 1px
• H2
  • Font: Bai Jamjuree
  • Berat: Sedang
  • Warna: Karang #e98074
  • Ukuran
    • Desktop: 35px
    • Tablet dan Ponsel: 25px
  • Spasi Huruf: 1px
• H3
  • Font: Bai Jamjuree
  • Berat: Reguler
  • Warna: Abu-abu Gelap #606060
  • Ukuran
    • Desktop: 25px
    • Tablet dan Ponsel: 22px
  • Spasi Huruf: 1px
• H4
  • Font: Bai Jamjuree
  • Berat: Reguler
  • Warna: Abu-abu Gelap #606060
  • Ukuran
    • Desktop: 22px
    • Tablet: 20 piksel
    • Telepon: 18px
  • Spasi Huruf: 1px
• H5
  • Font: Bai Jamjuree
  • Berat: Sedang
  • Warna: Abu-abu Gelap #606060
  • Ukuran: 16px
  • Spasi Huruf: 1px
• H6
  • Font: Bai Jamjuree
  • Berat: Reguler
  • Warna: Abu-abu Gelap #606060
  • Ukuran: 16px
  • Spasi Huruf: 1px

Jarak

Tambahkan beberapa pengaturan spasi juga.

• Margin Atas: 40px
• Padding Atas: 10%
• Padding Bawah: 10%
• Padding Kiri: 10%
• Padding Kanan: 10%

Berbatasan

Last but not least, tambahkan beberapa sudut membulat.

• Perbatasan Bulat: 15px

Tambahkan Modul Komentar

Elemen

Untuk melengkapi kolom pertama, tambahkan modul komentar. Aktifkan elemen berikut:

• Tombol Balas
• Jumlah Komentar

bidang

Di tab desain, beri gaya pada bidang.

• Warna Latar Belakang: Abu-abu Muda #f7f7f7
• Warna Teks: Abu-abu #8e8d8a
• Font: Bai Jamjuree
• Ukuran Teks: 17px
• Sudut Bulat: 15px

Teks Hitung Komentar

Gaya teks hitungan komentar juga.

• Tingkat Pos: H3
• Font: Bai Jamjuree
• Warna: Karang #e98074
• Ukuran: 22px
• Spasi Huruf: 1px

Teks Judul Formulir

Kemudian judul formulir.

• Tingkat Pos: H3
• Font: Bai Jamjuree
• Warna: Karang #e98074
• Ukuran: 18px
• Spasi Huruf: 1px

Teks Meta

Gaya teks meta juga.

• Font: Bai Jamjuree
• Warna: #606060
• Ukuran: 14px
• Spasi Huruf: 1px

Teks Komentar

Jangan lupa teks komentarnya.

• Font: Bai Jamjuree
• Ukuran: 1 piksel

Tombol

Sekarang gaya tombol.

• Gaya Kustom
• Ukuran Teks: 18px
• Warna Teks: Putih #ffffff
• Warna Latar Belakang: Karang #e98074
• Radius Perbatasan Tombol: 15px
• Font Tombol: Bai Jamjuree

Perekat

Sesuaikan ukuran baris juga.

• Lebar: 90%

Jarak

Begitu juga dengan pengaturan spasi.

• Padding Atas: 8%
• Padding Kiri dan Kanan: 4%

Tambahkan Modul Orang

Teks

Pindah ke kolom sidebar tetap dan tambahkan modul orang.

• Nama: Penulis Pos Dinamis
• Sebelum: Ditulis Oleh:

Teks Judul

Di tab desain, gaya teks judul sebagai berikut:

• Tingkat Pos: H4
• Font: Bai Jamjuree
• Warna: Karang #e98074
• Ukuran: 2vh
• Spasi Huruf: 2px

Perekat

Sesuaikan ukuran selanjutnya.

• Tinggi Min:
  • Desktop: 3vh
  • Tablet dan Telepon: otomatis
• Tinggi maksimal:
  • Desktop: 3vh
  • Tablet dan Telepon: otomatis

Jarak

Tambahkan beberapa spasi khusus juga.

• Batas atas
  • Desktop: 6vh
  • Tablet dan Telepon: 10vh

Tambahkan Modul Gambar

Gambar

Sekarang, tambahkan modul gambar. Pilih konten dinamis untuk gambar penulis.

• Gambar: Gambar Profil Penulis Dinamis

Penyelarasan

Pindah ke tab desain dan pilih perataan berikut:

• Perataan Gambar: Kiri

Perekat

Sesuaikan ukuran modul selanjutnya.

• Lebar Maks: 15vh
• Penyelarasan Modul: Kiri
• Tinggi maksimal
  • Desktop: 15vh

Berbatasan

Terakhir, tambahkan beberapa sudut membulat ke pengaturan perbatasan.

• Sudut Bulat: 15px

Tambahkan Modul Bilah Sisi

Isi

Sekarang saatnya menambahkan widget sidebar menggunakan modul sidebar.

• Area Widget: Bilah Sisi

Tata Letak

Sesuaikan tata letak terlebih dahulu.

• Tampilkan Pemisah Batas: Tidak

Teks Judul

Ubah pengaturan teks judul berikutnya.

• Font: Bai Jamjuree
• Berat: Sedang
• Warna: Karang #e98074
• Ukuran: 2vh
• Spasi Huruf: 2px

Teks Tubuh

Lanjutkan dengan teks isi.

• Font: Bai Jamjuree
• Berat: Ringan
• Warna: Abu-abu Gelap #7f7f7f
• Arahkan Warna: Karang #e98074
• Ukuran: 1.5vh
• Spasi Huruf: 1px
• Tinggi Garis: 1.8em

Perekat

Sesuaikan ukuran modul juga.

• Tinggi Min
  • Desktop: 12vh
  • Tablet dan Telepon: otomatis
• Tinggi maksimal
  • Desktop: 12vh
  • Tablet dan Telepon: otomatis

Jarak

Jangan lupa untuk menambahkan beberapa spasi.

• Lapisan Atas
  • Desktop: 1vh
  • Tablet dan Telepon: 3vh

CSS khusus

Last but not least, sertakan beberapa baris kode CSS di tab lanjutan.

• Widget: padding-bottom: 0vh;

padding-bottom: 0vh;

• Judul: padding-bottom: 2vh;

padding-bottom: 2vh;

Tambahkan Opsi Email

Teks

Modul selanjutnya yang kita butuhkan di sidebar kita adalah modul optin email. Tambahkan beberapa konten pilihan Anda.

• Judul: Pembaruan
• Tombol: Berlangganan

Akun email

Hubungkan email Anda ke formulir berikutnya.

• Penyedia Layanan: Penyedia Email Anda
• Daftar: Daftar pilihan Anda

bidang

Kami hanya menggunakan bidang nama depan di pengaturan bidang.

• Tampilkan Bidang Nama Depan

Latar belakang

Kemudian, matikan latar belakang default.

• Gunakan Warna Latar Belakang: Tidak

Tata Letak

Pindah ke tab desain dan ubah pengaturan tata letak.

• Tata Letak: Tubuh Di Atas, Bentuk di Bawah
• Nama Depan Fullwidth: Tidak
• Lebar Penuh Email: Tidak

bidang

Kemudian, gaya bidang sebagai berikut:

• Warna Latar Belakang: Gre Muda #f7f7f7
• Warna Teks: #606060
• Padding Atas dan Bawah: 1vh
• Padding Kiri: 1vh
• Font: Bai Jamjuree
• Ukuran Teks: 1.5vh
• Spasi Huruf: 1px
• Sudut Bulat: 15px

Teks Judul

Gaya teks judul juga.

• Tingkat Pos: H4
• Font: Bai Jamjuree
• Warna: Karang #e98074
• Ukuran: 2vh
• Spasi Huruf: 2px
• Tinggi Garis: 1em

Tombol

Kemudian, tombol.

• Gaya Kustom
• Ukuran Teks: 1.5vh
• Warna Teks: Putih #ffffff
• Warna Latar Belakang: Karang #e98074
• Radius Batas: 15px
• Spasi Huruf: 2px
• Font: Bai Jamjuree
• Padding Atas dan Bawah: 1vh

Jarak

Dan selesaikan pengaturan modul dan tutorial dengan menambahkan beberapa nilai spasi khusus ke modul. Itu dia! Pastikan Anda menyimpan semua perubahan pembuat tema setelah Anda selesai membuat badan template.

• Lapisan Atas
  • Desktop dan Tablet: 0vh
• Lapisan Bawah
  • Desktop: 2vh
  • Tablet dan Telepon: 6vh
• Padding Kiri dan Kanan
  • Desktop dan Tablet: 0vh

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Itu Bungkus!

Kami telah selesai membuat ulang bilah sisi tetap tinggi penuh untuk templat posting blog Anda. Jika Anda mendownload template dari link di atas, jangan lupa untuk mengatur widget sidebar Anda seperti yang ditunjukkan pada bagian pertama dari tutorial ini.

Apakah Anda tipe orang yang sidebar atau bukan sidebar? Beri tahu kami di komentar jika Anda memiliki pemikiran atau pertanyaan!