Cara Menyembunyikan Header Anda Sebelum Menggulir dengan Opsi Lengket Divi

Bagian pahlawan adalah eyecatcher situs web Anda. Biasanya mengatur nada untuk sisa situs web dan menunjukkan kepada pengunjung apa yang dapat mereka harapkan. Itulah mengapa akan sangat membantu untuk memastikan semua fokus ada pada beberapa elemen yang Anda bagikan di bagian pahlawan Anda, seperti salinan dan ajakan bertindak. Tetapi hanya karena Anda ingin menyorot bagian pahlawan, bukan berarti Anda tidak memerlukan bilah navigasi juga. Jika Anda mencari cara yang mudah digunakan untuk mengungkapkan tajuk Anda setelah orang mulai menggulir, Anda akan menyukai posting ini. Hari ini, kami menunjukkan kepada Anda cara menyembunyikan header Anda sebelum menggulir menggunakan opsi tempel bawaan Divi. Efek yang kami capai sepenuhnya responsif dan tampak hebat di semua ukuran layar. Anda juga dapat mengunduh file template 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 GRATIS

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

Saat mengunggah template ke Divi Theme Builder Anda dan memasukkan template, Anda akan melihat bahwa bagian tersebut tidak terlihat. Itu karena efeknya sudah diterapkan padanya. Untuk memodifikasi elemen yang berbeda, Anda dapat beralih ke mode gambar rangka dan mengakses elemen di sana, atau menghapus sementara bagian transform translate & pengaturan elemen utama dan mengembalikannya saat Anda selesai memodifikasi desain header.

1. Membangun Struktur Elemen Header Di Dalam Template Header Baru

Buat Template Header Global Baru

Mulailah dengan membuka Divi Theme Builder. Di sana, mulailah membuat header global atau kustom baru.

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #001b34

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default berikutnya.

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul, buka pengaturan baris dan terapkan warna latar belakang pilihan Anda.

• Warna Latar Belakang: #001b34

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran yang sesuai:

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

Jarak

Lanjutkan dengan mengubah nilai padding yang sesuai:

• Padding Atas: 0px
• Padding Bawah: 0
• Bantalan Kiri:
  • Desktop: /
  • Tablet & Telepon: 5%
• Bantalan Kanan:
  • Desktop: /
  • Tablet & Telepon: 5%

Pengaturan Kolom 1

Warna latar belakang

Setelah Anda selesai dengan pengaturan baris umum, buka pengaturan kolom 1 dan terapkan warna latar belakang.

• Warna Latar Belakang: #f4d5b8

Tambahkan Modul Menu ke Kolom 1

Pilih Menu

Saatnya menambah modul, dimulai dengan Modul Menu di kolom 1. Pilih menu pilihan Anda.

Unggah Logo

Unggah logo berikutnya.

Warna latar belakang

Kemudian, ubah warna latar belakang.

• Warna Latar Belakang: #063765

Gambar latar belakang

Dan unggah gambar latar belakang ilustrasi pilihan Anda. Anda dapat menemukan dan menggunakan yang di bawah ini dengan mengunduh freebie di awal posting ini.

• Ukuran Gambar Latar Belakang: Sesuai
• Posisi Gambar Latar Belakang: Tengah

Pengaturan Teks Menu

Pindah ke tab desain modul dan ubah ukuran teks menu.

• Ukuran Teks Menu: 18px

Pengaturan Menu Dropdown

Kemudian, ubah pengaturan menu dropdown yang sesuai:

• Warna Garis Menu Dropdown: rgba(0,0,0,0)
• Warna Latar Menu Seluler: #ddc1a7
• Warna Teks Menu Seluler: #063765

Pengaturan Ikon

Ubah warna ikon di pengaturan ikon menjadi putih juga.

• Warna Ikon Keranjang Belanja: #ffffff
• Warna Ikon Pencarian: #ffffff
• Warna Ikon Menu Hamburger: #ffffff

Perekat

Kemudian, ubah lebar maksimum logo di pengaturan ukuran.

• Logo Lebar Maks: 70px

Jarak

Terapkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 1%
• Padding Bawah: 1%
• Padding Kiri: 5%
• Padding Kanan: 5%

Bayangan Kotak

Bersama dengan beberapa bayangan kotak khusus.

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

Ubah Terjemahan

Dan selesaikan pengaturan modul dengan mengubah pengaturan transform translate sebagai berikut:

• Benar:
  • Desktop: 20px
  • Tablet & Ponsel: 0px

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Di kolom 2, satu-satunya modul yang kita butuhkan adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penjajaran Tombol

Pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Kanan

Pengaturan Tombol

Kemudian, gaya tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 16px
• Warna Teks Tombol: #2a2a2a
• Warna Latar Tombol: #ffffff
• Lebar Batas Tombol: 0px
• Warna Batas Tombol: rgba(0,0,0,0)

• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Berikan beberapa bentuk pada tombol Anda menggunakan bantalan khusus juga.

• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 40px
• Padding Kanan: 40px

Bayangan Kotak

Selanjutnya, terapkan bayangan kotak.

• Kekuatan Buram Bayangan Kotak: 30px
• Warna Bayangan: rgba (0,0,0,0.18)

Ubah Terjemahan

Dan selesaikan pengaturan modul dengan memodifikasi nilai transformasi translasi yang sesuai:

• Benar:
  • Desktop: 50px
  • Tablet & Ponsel: 0px

2. Terapkan Efek Lengket Kustom untuk Mencapai Sembunyikan Sebelum Efek Gulir

Jadikan Baris Absolut Diposisikan

Sekarang kita telah mengatur dasar header kita, kita dapat menerapkan header hide sebelum efek scroll. Anda dapat menerapkan efek ini ke header apa pun yang Anda buat, selama Anda mengikuti langkah-langkah di bawah ini. Langkah pertama adalah membuka pengaturan baris dan mengubah baris menjadi absolut. Ini akan membantu kami mencegah ruang diambil oleh tajuk di bagian atas halaman kami.

• Posisi: Absolut
• Lokasi: Kiri Atas

Jadikan Bagian Lengket

Selanjutnya, kita akan membuka pengaturan bagian dan membiarkannya menempel di atas.

• Posisi Lengket: Menempel ke Atas
• Batas Lengket Bawah: Tidak Ada
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Bagian Animasi

Kami akan menambahkan animasi ke bagian kami juga. Animasi ini akan membantu mencegah tajuk ditampilkan saat halaman Anda dimuat.

• Gaya Animasi: Memudar

Durasi Transisi Bagian

Anda dapat memutuskan sendiri seberapa lambat atau cepat tajuk meluncur ke bawah setelah Anda mulai menggulir dengan mengubah durasi transisi di tab lanjutan bagian. Semakin tinggi durasinya, semakin lambat header meluncur ke bawah.

• Durasi Transisi: 800ms

Bagian Transform Terjemahkan

Sekarang, dalam keadaan default, kami tidak ingin header terlihat. Langkah pertama untuk mencapainya adalah pergi ke pengaturan transformasi bagian dan menggunakan nilai negatif untuk sumbu Y.

• Kanan: -300px

Kami akan mengembalikan nilai ini ke nol dalam status lengket. Ini berarti bahwa segera setelah Anda mulai menggulir, tajuk menjadi terlihat lagi.

• Kanan Lengket: 0px

Bagian Visibilitas CSS Properti

Langkah selanjutnya dan terakhir dari tutorial ini secara teoritis tidak diperlukan untuk mencapai efeknya, tetapi ini adalah praktik yang baik untuk menyembunyikan elemen yang tidak digunakan. Itu sebabnya kita akan pergi ke tab lanjutan bagian dan menambahkan baris kode CSS berikut di kotak elemen utama:

• Elemen Utama:

  visibility: hidden

Kami akan mengubah kembali konten kami menjadi terlihat dalam keadaan lengket. Itu dia!

• Elemen Utama Lengket:

  visibility: visible;

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 bagaimana memastikan bagian pahlawan Anda menjadi fokus halaman Anda segera setelah orang memasuki halaman Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menyembunyikan tajuk sebelum menggulir. Ini memungkinkan pengunjung Anda untuk memproses informasi bagian pahlawan terlebih dahulu sebelum mereka disajikan dengan kemampuan untuk menavigasi. 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.