Cara Mengungkapkan Header Global Anda Saat Menggulir Ke Atas & Menyembunyikan Saat Menggulir Ke Bawah dengan Divi

Saat Anda membuat tajuk global, ada banyak hal yang perlu Anda perhitungkan. Elemen yang Anda tempatkan di header Anda perlu membantu pengunjung Anda menavigasi dengan mudah. Untuk mengurangi waktu yang dihabiskan orang untuk bernavigasi, banyak perancang web memilih tajuk atas tetap, yang memungkinkan pengunjung untuk langsung membuka halaman atau posting lain. Itu benar-benar nyaman, tetapi saat membuat tajuk tetap, sebagian besar ketinggian area pandang pengunjung Anda diambil, memungkinkan lebih sedikit konten yang muncul sekaligus. Jika Anda tidak bersedia melakukan pengorbanan itu, ketahuilah bahwa Anda tidak harus melakukannya. Anda dapat memperoleh manfaat dari tajuk tetap dengan mengizinkan tajuk global Anda untuk mengungkapkan saat pengunjung Anda menggulir ke atas, dan menyembunyikannya saat mereka menggulir ke bawah. Hari ini, kami akan memandu Anda menyembunyikan dan mengungkapkan tajuk global Anda menggunakan Pembuat Tema Divi. 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

Unduh Template Header Global GRATIS

Untuk mendapatkan template tajuk global 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

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder.

Mulai Membangun Header Global

Di sana, klik 'Add Global Header' dan pilih 'Build Global Header'.

2. Mulai Membangun Header Global

Pengaturan Bagian

Warna latar belakang

Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan ubah warna latar belakangnya.

• Warna Latar Belakang: #ffffff

Perekat

Pindah ke tab desain dan tetapkan lebar 100% ke bagian Anda selanjutnya.

• Lebar: 100%

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 2vw
• Padding Bawah: 2vw

Bayangan Kotak

Kami akan menerapkan bayangan kotak halus ke bagian kami juga.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.08)

ID CSS

Nanti di tutorial ini, kita akan membutuhkan beberapa kode kustom untuk membuat efek scrolling terjadi. Untuk mempersiapkannya, kami menambahkan ID CSS ke bagian tersebut.

• ID CSS: bagian-tajuk global

Elemen Utama

Kami juga akan mengubah bagian menjadi kepala tetap dengan menambahkan dua baris kode CSS ke elemen utama bagian.

position: fixed;
top: 0;

Indeks Z

Sekarang, untuk memastikan bagian kami muncul di atas semua halaman atau konten posting, kami juga akan meningkatkan indeks z dalam pengaturan visibilitas.

• Indeks Z: 99999

Tambahkan Baris Baru

Struktur Kolom

Setelah Anda menyelesaikan semua pengaturan bagian, lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default juga.

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

Elemen Utama

Pusatkan konten kolom dan biarkan kolom tetap bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan dua baris kode CSS ke elemen utama baris.

display: flex;
align-items: center;

Tambahkan Modul Ikuti Media Sosial ke Kolom 2

Tambahkan Jejaring Sosial

Saatnya menambahkan modul, dimulai dengan Modul Ikuti Media Sosial di kolom 1. Tambahkan jejaring sosial yang ingin Anda tampilkan.

Setel Ulang Gaya Jaringan Sosial Individu

Lanjutkan dengan mengatur ulang gaya setiap jejaring sosial pada tingkat individu.

Tambahkan Spasi Jaringan Sosial Individu

Anda juga harus membuka pengaturan setiap jejaring sosial satu per satu dan menambahkan padding bawah dalam pengaturan spasi.

• Padding Bawah: 0.5vw

Penyelarasan

Setelah Anda menambahkan padding bawah ke setiap jejaring sosial satu per satu, kembali ke pengaturan modul umum Anda. Pindah ke tab desain dan ubah perataan modul.

• Penyelarasan Modul: Pusat

Pengaturan Ikon Default

Ubah warna ikon di pengaturan ikon juga.

• Warna Ikon: #000000

Arahkan ke Pengaturan Ikon

Dan ubah warna ikon di hover.

• Warna Ikon: #c2ab92

Berbatasan

Selesaikan pengaturan modul dengan menambahkan batas bawah di pengaturan batas.

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #000000

Tambahkan Modul Menu ke Kolom 2

Pilih Menu

Ke kolom berikutnya! Tambahkan Modul Menu dan pilih menu pilihan Anda.

Unggah Logo

Unggah logo ke modul berikutnya.

Hapus Warna Latar Belakang

Dan hapus warna latar belakang.

Tata Letak

Kemudian, lanjutkan ke tab desain dan pastikan pengaturan berikut berlaku untuk tata letak:

• Gaya: Terpusat
• Arah Menu Dropdown: Ke Bawah

Teks Menu Default

Lanjutkan dengan mengubah pengaturan teks menu sebagai berikut:

• Warna Tautan Aktif: #c2ab92
• Font Menu: Cormorant Garamond
• Warna Teks: #000000
• Ukuran Teks Menu: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)

Arahkan Teks Menu

Ubah teks menu saat mengarahkan kursor.

• Warna Teks Menu: #c2ab92

Menu drop down

Selanjutnya, ubah warna garis menu dropdown di pengaturan menu dropdown.

• Warna Garis Menu Dropdown: #000000

Ikon

Kami juga mengubah warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #000000

Perekat

Lanjutkan dengan mengubah lebar maksimum logo di berbagai ukuran layar dalam pengaturan ukuran.

• Logo Lebar Maks: 5vw (Desktop), 10vw (Tablet), 13vw (Telepon)

CSS Tautan Menu

Dan selesaikan pengaturan modul dengan menambahkan dua baris kode CSS ke tautan menu modul di tab lanjutan.

padding-bottom: 1vw;
border-bottom: 1px solid #000;

Tambahkan Modul Teks ke Kolom 3

Tambahkan Salinan

Ke modul terakhir! Di sana, satu-satunya modul yang kita butuhkan adalah Modul Teks.

Tambahkan Tautan

Modul ini akan berfungsi sebagai CTA. Tambahkan tautan pilihan Anda.

• URL Tautan Modul: #

Pengaturan Teks Default

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

• Font Teks: Cormorant Garamond
• Warna Teks: #000000
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)

Arahkan Pengaturan Teks

Ubah warna teks saat mengarahkan kursor.

• Warna Teks: #c2ab92

Perekat

Lanjutkan dengan mengubah pengaturan ukuran modul di berbagai ukuran layar.

• Lebar: 12vw (Desktop), 18vw (Tablet), 22vw (Telepon)
• Penyelarasan Modul: Pusat

Jarak

Dan tambahkan beberapa padding bawah dalam pengaturan spasi.

• Padding Bawah: 0.5vw

Berbatasan

Selesaikan pengaturan modul dengan menambahkan batas bawah.

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #000000

Tambahkan Modul Kode ke Kolom 2

Masukkan JQuery & Kode CSS

Setelah Anda menata semua modul di baris, saatnya untuk membuat efek ungkap/sembunyikan terjadi. Untuk melakukannya, kita perlu menambahkan beberapa kode khusus ke Modul Kode yang akan kita tempatkan di kolom 2. Kode ini akan berfungsi pada bagian mana pun yang Anda tambahkan, tidak peduli bagaimana Anda mendesain header atau modul apa yang Anda gunakan, cukup pastikan Anda telah menambahkan ID CSS ke bagian Anda. Tempatkan kode JQuery di antara tag skrip dan kode CSS di antara tag gaya seperti yang ditunjukkan pada layar cetak di bawah ini.

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Simpan Perubahan Builder & Lihat Hasil

Setelah Anda menyelesaikan tajuk global, simpan semua perubahan dan lihat 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 membuat tajuk global Anda muncul saat menggulir ke atas dan bersembunyi saat menggulir ke bawah. Ini adalah cara yang populer dan efektif untuk membantu pengunjung Anda menavigasi dengan mudah tanpa mengambil bagian dari ketinggian viewport mereka. Anda juga dapat mengunduh file JSON 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.