Cara Membuat Bilah Sisi Dorong Geser di Divi

Sidebars bisa bagus, tetapi juga bisa membuang-buang ruang. Itulah mengapa membuat sidebar dorong geser bisa menjadi pilihan sempurna bagi mereka yang ingin memiliki sidebar yang tidak mengalihkan perhatian pengguna dari konten utama halaman. Selain itu, bilah sisi semacam ini memberi pengguna opsi untuk melihat atau menyembunyikan bilah sisi kapan pun mereka mau.

Efek dorong geser memang unik karena bilah sisi meluncur masuk dari sisi kiri halaman sambil mendorong (atau meremas) konten utama halaman secara bersamaan agar sesuai dengan bilah sisi di area pandang. Singkatnya, itu menggeser bilah sisi dan mendorong halaman.

Setelah bilah sisi dibuat, bilah sisi menjadi alat serbaguna untuk semua jenis aplikasi, termasuk menu dan formulir.

Mari kita lakukan!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk meletakkan tangan Anda pada tata letak bilah sisi dorong geser dari tutorial ini, 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!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Untuk menambahkannya ke halaman atau templat, Anda perlu menambahkan bagian baru dan memilih tata letak bagian dari pustaka.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi “Choose a Premade Layout”.
   
4. Pilih Paket Tata Letak Acara dan klik untuk menggunakan tata letak Halaman Beranda Acara.
   

Cara Membuat Bilah Sisi Dorong Geser di Divi

Untuk membuat Bilah Samping Dorong Geser, kita perlu menggunakan bagian reguler baru. Kami akan mengukur dan memposisikan bagian menjadi bilah sisi tetap yang terbuka saat mengklik tombol, mendorong (dan meremas) area konten utama di sebelah kanan untuk memberi ruang bagi bilah sisi.

Membangun Bagian

Pertama, mari tambahkan bagian reguler baru ke halaman.

Kemudian pindahkan bagian di bagian atas halaman.

Pengaturan Bagian

Buka bagian pengaturan dan perbarui posisi yang akan diperbaiki sebagai berikut:

• Posisi: Tetap
• Indeks Z: 9999

Di bawah tab desain, perbarui ukuran dan spasi sebagai berikut:

• Lebar: 350px (desktop dan tablet), 100% (ponsel)
• Tinggi: 100%
• Padding: 100px atas, 0px bawah

Padding adalah untuk memberi ruang bagi header di bagian atas halaman.

Selanjutnya, di bawah tab lanjutan, berikan bagian itu Kelas CSS:

• Kelas CSS: et-push-sidebar

Setelah kelas css berada di tempatnya, beri bagian warna latar belakang:

• Warna Latar Belakang: #1a1e36

Untuk membuat pemisahan yang lebih terlihat, kembali ke tab desain, dan tambahkan batas kanan.

• Lebar Batas Kanan: 2px
• Warna Tepi Kanan: #eeeeee

Itu menangani bagian yang berfungsi sebagai wadah utama untuk bilah sisi kami. Sekarang saatnya untuk mulai membangun dua tombol yang akan kita gunakan untuk mengaktifkan sidebar terbuka dan kemudian ditutup.

Membuat Tombol Toggle Sidebar

Akan ada dua tombol yang digunakan untuk mengaktifkan sidebar. Tombol pertama adalah ikon “X” yang akan menutup sidebar versi seluler setelah dibuka. "X" akan dibangun menggunakan modul uraian. Yang kedua adalah tombol toggle utama yang akan kita buat menggunakan modul blurb yang diputar dengan teks vertikal dan diposisikan benar-benar berdekatan dengan sidebar/bagian.

Mari kita lakukan.

Membuat Baris untuk Tombol

Buat baris satu kolom baru di dalam bagian/bilah sisi.

Buka pengaturan baris dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 100%
• Padding: 0px atas, 0px bawah

Di bawah tab Lanjutan, perbarui opsi posisi sebagai berikut:

• Posisi: Absolut
• Indeks Z: 1

Membuat Ikon Tutup “X”

Untuk membuat Ikon Tutup “X”, tambahkan modul uraian ke baris. Mungkin lebih mudah untuk menambahkan modul baru menggunakan modal Layers karena akan sedikit sulit untuk diklik.

Isi

Kemudian buka pengaturan blurb. Di bawah tab konten, keluarkan judul dan isi isi dan tambahkan ikon X ke uraian.

• Gunakan Ikon: YA
• Ikon: x (lihat tangkapan layar)

Desain

Di bawah tab desain, perbarui yang berikut ini:

• Warna Ikon: #eeeeee
• Penempatan Gambar-Ikon: Kiri
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 40px
• Lebar: 50px

Selanjutnya, turunkan ikon sedikit dengan menambahkan properti translate translate berikut:

• Transformasikan Terjemahan X : 100px
• Ubah Terjemahkan Y : -10px

Canggih

Di bawah tab Advanced, nonaktifkan uraian di tablet dan desktop sehingga kita hanya melihatnya di layar ponsel.

• Nonaktifkan Aktif: tablet dan desktop

Kemudian tambahkan Kelas CSS ke uraian dan berikan posisi tetap agar tetap terlihat saat menggulir konten bilah sisi di layar ponsel.

• Kelas CSS: et-slide-push-close
• Posisi: Tetap
• Lokasi: Kanan Atas

Itu menangani tombol Tutup Ikon "X".

Membuat Tombol Pengalih Bilah Sisi Utama

Untuk membuat Tombol Toggle Bilah Sisi Utama, tambahkan modul uraian di bawah uraian ikon "X" yang ada.

Isi

Perbarui Judul dan klik untuk menggunakan ikon panah bawah.

• Judul: Info Acara
• Gunakan Ikon: YA
• Ikon: panah bawah (lihat tangkapan layar)

Selanjutnya, tambahkan warna latar belakang ke uraian.

• warna latar belakang: #eeeeee

Desain

Di bawah tab desain, perbarui yang berikut ini:

• Warna Ikon: #1a1e36
• Penempatan Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 25px
• Judul Font: Overpass
• Judul Font Berat: Tebal
• Judul Font Gaya: TT
• Warna Teks Judul: #1a1e36
• Spasi Huruf Judul: 2px
• Tinggi Baris Judul: 1.2em
• Padding: 0.6em atas, 1em kiri, 1em kanan
• Sudut Bulat: 5px di dua sudut bawah

Untuk memposisikan dan memutar uraian di luar bagian, gunakan opsi transformasi sebagai berikut:

• Ubah Terjemahkan Y : 100px
• Transform Putar Z: -90deg
• Transform Origin: kanan atas

Canggih

Di bawah tab Lanjutan, perbarui yang berikut ini:

• Kelas CSS: et-slide-push-toggle
• Posisi: Absolut
• Lokasi: Kanan Tengah

Menambahkan Kode Kustom dengan Modul Kode

Setelah kedua tombol selesai, kami siap menambahkan kode khusus yang akan menyediakan fungsionalitas geser geser yang kami butuhkan untuk bilah sisi.

Untuk menambahkan kode, pertama, tambahkan modul kode ke kolom yang sama.

Kemudian paste kode berikut ke dalam modul kode.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Membuat Baris Konten Bilah Sisi

Baris pertama yang kita buat adalah untuk tombol dan kode yang membuat sidebar berfungsi. Baris berikutnya ini untuk konten bilah sisi.

Untuk membuat baris konten bilah sisi, tambahkan baris satu kolom baru di bawah baris pertama di bilah sisi/bagian.

Pengaturan Baris

Buka pengaturan baris baru dan perbarui yang berikut ini:

• Lebar: 100%
• Tinggi: 100%
• Padding: 5% atas, 5% bawah, 5% kiri, 5% kanan

Di bawah tab Lanjutan, perbarui opsi luapan sebagai berikut:

• Horizontal Overflow: gulir (desktop dan tablet), otomatis (ponsel)
• Overflow Vertikal: gulir (desktop dan tablet), otomatis (ponsel)

Mengisi Sidebar dengan Konten/Modul

Sekarang bilah sisi Anda sudah siap, yang perlu Anda lakukan hanyalah menambahkan modul apa pun ke baris kedua di bilah sisi sesuai kebutuhan. Untuk contoh ini, saya hanya menyalin modul dari tata letak halaman beranda acara dan menempelkannya di kolom baris.

Hasil Akhir

Lihat hasil akhirnya di halaman langsung.

Menambahkan Bilah Sisi Dorong Geser ke Templat Halaman

Jika Anda ingin menggunakan bilah sisi ini di semua halaman Anda secara default, Anda perlu menambahkan bilah sisi/bagian ke templat halaman menggunakan Divi Theme Builder.

Simpan Tata Letak Bagian ke Perpustakaan Divi

Untuk melakukan ini, pertama, simpan bagian yang digunakan untuk membuat bilah sisi ke Perpustakaan Divi. Anda dapat melakukan ini dengan mengklik tiga titik pada bilah sisi di modal lapisan, menambahkan nama tata letak, dan menyimpannya ke perpustakaan.

Buat Template Halaman Baru

Selanjutnya, buka pembuat tema dan buat templat baru dan tetapkan templat itu ke semua halaman.

Menambahkan Bilah Sisi Geser ke Templat Halaman

Selanjutnya, klik untuk mengedit template halaman.

Di dalam editor tata letak template, tambahkan bagian lebar penuh baru.

Kemudian masukkan modul Fullwidth Post Content ke bagian tersebut.

Selanjutnya klik ke. buat bagian baru di atas bagian lebar penuh. Kemudian klik tab Add from Library dan pilih layout bagian Sliding Push Sidebar dari library.

Setelah selesai, Anda dapat mengedit bilah sisi sesuai kebutuhan Anda menggunakan editor tata letak tubuh.

Simpan Pengaturan Pembuat Tema

Pastikan untuk menyimpan perubahan ke pembuat tema.

Sekarang semua halaman Anda akan memiliki sidebar.

Pikiran Akhir

Bilah sisi dorong geser adalah pilihan sempurna bagi Anda yang mencari yang terbaik dari kedua dunia – bilah sisi yang tetap terdepan tanpa menghilangkan (atau mengganggu) konten utama halaman. Jangan ragu untuk menggunakannya untuk semua hal seperti formulir pendaftaran, keikutsertaan email, menu, dan banyak lagi.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!