Cara "Mengambil" Divi Sticky Header Anda Saat Melewati Bagian Pahlawan Halaman Anda

Sejak pembaruan opsi lengket Divi dirilis, kami telah membagikan kiat dan trik tentang cara menggunakannya di seluruh pembuatan situs web Anda dengan Divi, dan hari ini, kami menambahkan satu lagi untuk Anda tandai! Tutorial ini akan membahas tentang interaksi. Kami akan secara otomatis menempatkan tajuk khusus di bawah bagian pahlawan setiap halaman dan mengubah tajuk itu menjadi lengket segera setelah pengunjung menggulir melewatinya, yang menghasilkan pengalaman menggulir yang indah. 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 Templatenya GRATIS

Untuk mendapatkan template halaman 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. Buat Halaman Baru Menggunakan Divi's Upholstery Layout Pack Landing Page

Untuk tutorial ini, kita akan menggunakan Paket Tata Letak Pelapis dan template header dan footer gratis yang dapat Anda unduh di blog. Meskipun kami menggunakan paket tata letak khusus ini, Anda dapat menerapkan metode ini ke semua jenis situs web yang Anda buat. Untuk melihat pratinjau hasil saat mengikuti tutorial di bawah ini, kami sarankan Anda menyiapkan halaman yang tetap terbuka di tab terpisah. Untuk mencocokkan header dan footer yang akan kami gunakan, kami menyiapkan halaman baru menggunakan tata letak pilihan yang disertakan dengan Paket Tata Letak Pelapis Divi.

2. Unduh & Instal Header & Footer Gratis untuk Paket Tata Letak Pelapis Divi

Unduh Header & Footer Gratis di Blog Kami

Selanjutnya, kita akan mengunduh template header dan footer gratis untuk Paket Tata Letak Pelapis Divi. Mengunduh dan menginstal freebie ini akan membantu kita fokus pada bagian penting dari tutorial ini, yaitu mendapatkan teknik yang benar. Setelah Anda pergi ke posting blog, navigasikan ke formulir optin email dan isi alamat email Anda. Kemudian, tombol unduh akan muncul. Tombol unduh ini akan memungkinkan Anda mengunduh folder zip. Setelah membuka ritsleting folder, Anda dapat menemukan file JSON yang berisi templat situs web default dengan header dan footer global.

Navigasikan ke Pembuat Tema Divi

Untuk menggunakan file JSON yang baru saja Anda unduh, navigasikan ke Divi Theme Builder Anda.

Unggah Template Situs Web Default dengan Desain Header & Footer

Di sana, klik tombol impor & ekspor di sudut kanan atas dan unggah file JSON yang dapat Anda temukan di folder unduhan Anda.

Buat Template Halaman Baru

Segera setelah Anda mengunggah template, Anda akan melihat header dan footer global muncul di dalam template situs web default Anda. Untuk menghindari penempatan header yang aneh, kami hanya akan menerapkan efek "pick up sticky header" ke halaman kami, tetapi jika Anda memiliki bagian pahlawan yang dibuat Divi pada jenis posting kustom lainnya juga, jangan ragu untuk menggunakan header di sana juga. Tambahkan template baru dan gunakan di semua halaman.

• Gunakan Di: Semua Halaman

Hapus Template Header & Footer dari Template Situs Web Default

Segera setelah Anda menambahkan templat halaman, header dan footer global akan secara otomatis ditambahkan ke templat itu. Kami mengubah header global ini menjadi header kustom dengan menghapus header dan footer global di template situs web default kami. Dengan cara ini, perubahan yang kita buat pada header kita hanya akan berlaku untuk halaman.

3. Tempatkan Bagian Tajuk Di Bawah Bagian Pahlawan

Buka Template Header Global

Sekarang kita telah menyiapkan lingkungan pembuat tema untuk header kita, saatnya untuk beralih ke template header kita dengan mengklik ikon pensil.

Tetapkan ID CSS Khusus ke Bagian Di Dalam Header Global

Setelah berada di dalam editor template, Anda akan melihat desain header yang berisi bagian, baris, dan beberapa modul. Untuk secara otomatis menempatkan tajuk di bawah bagian pahlawan pertama setiap halaman, kita perlu menetapkan ID khusus ke bagian kita. Teknik yang kami gunakan didasarkan pada tutorial sebelumnya. Perbedaan antara posting ini dan yang disebutkan di kalimat sebelumnya adalah bahwa begitu pengunjung melewati header, itu akan menjadi lengket. Ketika orang menggulir kembali, itu akan mengambil kembali tempatnya di bawah bagian pahlawan.

• ID CSS: tajuk khusus

Tambahkan Modul Kode Di Bawah Modul Menu di Kolom 1

Lanjutkan dengan menambahkan Modul Kode baru ke kolom pertama baris.

Tambahkan Kode JQuery untuk Menempatkan Bagian Di Bawah Setiap Bagian Pertama Halaman

Di sana, kami akan memasukkan beberapa kode JQuery yang secara otomatis akan menempatkan bagian header di bawah bagian pahlawan pertama setiap halaman.

jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});

Tambahkan Kode CSS ke Modul Kode yang Sama

Kami juga akan menyertakan kelas CSS di antara tag gaya untuk mencegah header muncul di pembuat saat membuat halaman.

#et_pb_root #custom-header {
display: none;
}

4. Terapkan Posisi & Gaya Lengket ke Header

Tambahkan Posisi Lengket ke Bagian

Sekarang bagian kita ditempatkan di bawah bagian pahlawan pertama setiap halaman, saatnya untuk menerapkan efek lengket juga. Untuk melakukan itu, kami akan menggunakan pengaturan lengket bawaan Divi di tab lanjutan.

• Posisi Lengket: Menempel ke Atas

Tambahkan Bayangan Kotak Lengket ke Bagian

Sekarang setelah posisi sticky telah diterapkan, kita dapat mulai membuat perubahan sticky pada bagian kita dan semua elemen anak yang dikandungnya. Kami akan mulai dengan menambahkan bayangan kotak lengket ke wadah bagian kami.

• Kekuatan Buram Bayangan Kotak: 30px
• Warna Bayangan
  • Bawaan: rgba(0,0,0,0)
  • Lengket: rgba (0,0,0,0.13)

Ubah Latar Belakang Gradien Baris Lengket

Kemudian, kita akan menerapkan latar belakang gradien lengket ke baris kita.

• Warna 1: #ffffff
• Warna 2: #e8e8e8

Ubah Warna Teks Modul Menu Lengket

Kemudian, kita akan membuka Menu Module dan mengubah warna teks menu menjadi sticky state.

• Warna Teks Menu: #2d2e34

Ubah Warna Ikon Hamburger Menu Lengket

Kami juga akan mengubah warna ikon hamburger menu lengket.

• Warna Ikon Menu Hamburger: #2d2e34

Tambahkan Filter Pembalikan Logo Lengket

Dan kita akan menyelesaikan tutorial dengan menambahkan filter pembalik gambar. Itu dia! Setelah Anda menerapkan semua perubahan ini ke header Anda, pastikan Anda menyimpan template dan perubahan Divi Theme Builder sebelum melihat hasilnya pada halaman yang Anda buat di bagian pertama tutorial.

• Pembalikan Gambar: 80%

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 membagikan tip dan trik lain yang dapat Anda terapkan dengan opsi lengket bawaan Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara "mengambil" tajuk Anda setelah Anda menggulir melewatinya. Header akan secara otomatis ditempatkan di bawah bagian pertama setiap halaman. 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.