Penjualan Ulang Tahun Elemen

Nikmati diskon 60% untuk pembelian baru, pembaruan dan peningkatan.

00 Hari -hari
:
00 Jam
:
00 Menit
:
00 Detik

Beli sekarang

Cara Mendesain Tab Toggle Header Lengket yang Menarik Di Divi

Rifat Divi Tutorials Oct 16, 2021

Ketika datang untuk memberikan output singkat dari apa yang berisi situs web, header memainkan peran besar. Ini memegang kekuatan yang diperlukan untuk menavigasi orang ke berbagai bagian sesuai dengan kebutuhan mereka. Selain itu, tajuk lengket cukup keren karena memberi peluang untuk berpindah ke mana saja di situs web, bahkan jika Anda tidak berada di bagian atas halaman tempat bagian tajuk berada.

Divi adalah tema WordPress serbaguna yang memungkinkan Anda untuk melakukan desain yang berbeda, dan ini benar-benar menarik perhatian besar dari pemirsa Anda. Jadi, hari ini kita akan melihat cara membuat tab toggle untuk sticky header. Ini adalah ide bagus untuk meletakkan sakelar di tajuk jika situs web Anda memiliki bagian galeri atau bagian blog karena terkadang tajuk lengket entah bagaimana menghalangi tampilan. Jadi, tutorial hari ini akan sangat luar biasa dan bermanfaat bagi orang-orang yang berjuang dengan masalah bagian header.

Kencangkan dan mari kita mulai dengan desain hari ini.

Pratinjau Desain

Kami akan membuat desain ini hari ini. Jika Anda perhatikan di sini, Anda dapat melihat bahwa menu lengket tajuk menu selalu terlihat. Ketika kita mengklik opsi sakelar, itu akan pindah ke atas.

Penawaran luar biasa

Ulang tahun ke -6 Elementor dengan diskon hingga 60%

Mulai sekarang

Bagian Satu: Impor Dan Siapkan Template

Kami akan mengerjakan template premade ini hari ini. Anda dapat mengunduh file template dengan mengklik di sini .

Impor Template

Kami harap Anda telah berhasil mengunduh file JSON dari tautan yang diberikan di atas. Sekarang unzip dan dapatkan file JSON. Lalu buka dasbor WordPress Anda dan dari opsi pembuat tema, klik ikon portabilitas.

Pindah ke opsi impor dan hapus centang pada opsi yang ditandai dan klik "Impor Template Pembuat Tema Divi".

Sekarang klik Impor sebagai tata letak statis dan lanjutkan.

Sekarang tata letak kami diimpor. Hapus bagian footer, klik simpan perubahan dan buka pengaturan edit.

Hapus Modul Kode yang Ada

Sekarang desain kita terbuka untuk diedit, dan mari kita hapus modul kode yang ada dari lapisan.

Bagian Kedua: Buat Tab Toggle Dengan Sticky Header

Pengaturan Bagian

Kami akan menerapkan efek lengket ke seluruh bagian, dan untuk itu, kami harus menempatkan Kelas CSS di seluruh bagian sehingga kami dapat bekerja dengannya nanti.

Buka pengaturan bagian dan perbarui yang berikut ini:

  • Kelas CSS: et-divi-sticky-header
  • Posisi Lengket: Menempel ke Atas

Beralih Pembuatan Tab Dari Modul Blurb

Kami akan menambahkan modul uraian di bawah modul menu.

Pengaturan Konten Kabur

Kemudian buka pengaturan untuk modul blurb dan perbarui konten sebagai berikut:

  • Hapus konten Judul
  • Hapus konten Tubuh
  • Gunakan Ikon: YA
  • Ikon: panah atas (lihat tangkapan layar)
  • Warna Latar Belakang: #ffffff

Pengaturan Desain Blurb

Di bawah tab desain, perbarui yang berikut ini:

  • Warna Ikon: #1a3066
  • Gunakan Ukuran Font Ikon: YA
  • Ukuran Font Ikon: 40px

Buka pengaturan ukuran dan lakukan penyesuaian berikut.

  • Lebar: 45px
  • Tinggi: 45px
  • Margin: 0px Bawah
  • Sudut Bulat: kiri bawah 12px, kanan bawah 12px
  • Transformasi Terjemahkan Sumbu Y: 100%
  • Gambar/Ikon Animasi: Tanpa Animasi

Mengaburkan Pengaturan Lanjut

Dari tab Lanjutan, perbarui yang berikut ini:

  • Kelas CSS: et-divi-sticky-toggle
  • Posisi: Absolut
  • Lokasi: kanan bawah
  • Offset Horisontal: 20px
  • Indeks Z: -1

Kami telah berhasil menyelesaikan semua pengaturan modul Blurb. Menurut desain kami, modul uraian yang akan kami gunakan sebagai tombol sakelar berada di sudut kiri bawah modul menu.

Bagian Ketiga: Tambahkan Kode

Sekarang untuk menambahkan fungsionalitas lebih lanjut ke desain kita, tambahkan modul kode di bawah modul uraian.

Tambahkan Kode CSS

Tambahkan kode CSS berikut ke modul kode. Pastikan untuk meletakkannya di dalam tag Style .

.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}
 
.et-divi-sticky-toggle:hover {
  cursor: pointer;
}
 
.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}
 
.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}
 
.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}
 
.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

Tambahkan Kode JQuery

Tambahkan kode JQuery ke modul kode dan letakkan di dalam tag Script .

jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");
 
  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop  headerHeight AndAnd
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });
 
  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

Bagian Empat: Pengaturan Akhir

Sekarang simpan desain dari kanan bawah dan klik silang di kanan atas. Anda akan kembali ke pembuat tema dari dasbor dan di sana, klik ikon roda gigi dan pilih Semua halaman. Dan kita selesai.

Desain Akhir

Ini adalah hasil dari apa yang telah kita lakukan selama ini. Kami berharap Anda puas dengan ini.

Kesimpulan

Dalam desain hari ini, kami mencoba menunjukkan kepada Anda bahwa Anda dapat mendesain tab sakelar header lengket yang menarik di Divi . Ini akan memberi pengguna Anda pengalaman yang lebih menyenangkan saat mereka berada di situs web Anda. Mungkin Anda bisa menggunakan trik ini untuk pekerjaan pengembangan web Anda selanjutnya, dan tentunya akan mendatangkan feedback positif dari klien. Saya harap Anda menyukai ini, dan jika demikian, satu bagian akan menjadi Hebat!