Cara Mengecilkan Ukuran Header Global Anda Saat Menggulir dengan Pembuat Tema Divi

Saat Anda mendesain tajuk global tetap, Anda mungkin ingin mengecilkan tinggi tajuk saat pengunjung Anda menggulir. Ini membantu mengurangi ruang yang digunakan tajuk global di ketinggian area pandang pengunjung Anda. Dalam tutorial ini, kami akan memandu Anda melalui proses itu. Kita akan mulai dengan membangun menu, dan kemudian kita akan menambahkan beberapa kode JQuery dan CSS untuk memicu efeknya. 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!

Berlangganan Saluran Youtube Kami

1. Buka Divi Theme Builder & Tambahkan Template Baru

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder.

Mulai Membangun Header Global

Kemudian, klik 'Build Global Header' dan pilih 'Build Global Header'.

2. Mulai Membangun Header Global

Pengaturan Bagian

Warna latar belakang

Setelah Anda berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian tersebut dan ubah warna background menjadi putih.

• Warna Latar Belakang: #FFFFFF

Perekat

Pindah ke tab desain modul dan ubah lebarnya.

• Lebar: 100%

Jarak

Ubah juga padding atas dan bawah bagian.

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

Bayangan Kotak

Dan pisahkan konten halaman dari header global dengan menambahkan bayangan kotak halus ke bagian berikutnya.

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

ID CSS

Kemudian, tambahkan ID CSS ke bagian tersebut. Nanti di tutorial, kita akan menggunakan ID CSS ini untuk membuat efek header global yang menyusut pada scroll.

• ID CSS: bagian-padding

Elemen Utama

Pindah ke tab lanjutan, buka pengaturan CSS Kustom dan perbaiki bagian dengan menambahkan dua baris kode CSS ke elemen utama bagian.

position: fixed;
top: 0;

Indeks Z

Untuk memastikan bagian tetap berada di atas semua halaman dan konten posting, kami juga akan meningkatkan indeks z bagian.

• Indeks Z: 99999

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah ukurannya sesuai:

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

Jarak

Hapus padding atas dan bawah default baris berikutnya.

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

ID CSS

Lalu, buka tab lanjutan dan tambahkan ID CSS ke baris. Kita akan membutuhkan ID CSS ini nanti di tutorial untuk membuat efek menyusut bekerja.

• ID CSS: lebar baris

Elemen Utama

Last but not least, untuk memastikan semua kolom tetap bersebelahan pada ukuran layar yang lebih kecil, dan untuk memusatkan semua konten kolom, kita akan menambahkan dua baris kode CSS ke elemen utama baris.

display: flex;
align-items: center;

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo dengan latar belakang transparan.

Perekat

Ubah lebar modul berikutnya.

• Lebar: 5vw (Desktop), 9vw (Tablet), 13vw (Telepon)

Tambahkan Modul Menu ke Kolom 2

Pilih Menu

Pindah ke kolom kedua dan masukkan Modul Menu. Pilih menu pilihan Anda.

Hapus Warna Latar Belakang

Hapus warna latar belakang modul berikutnya.

Tata Letak

Pindah ke tab desain modul dan ubah tata letaknya juga.

• Gaya: Terpusat
• Arah Menu Dropdown: Ke Bawah

Teks Menu

Kemudian, buka pengaturan teks menu dan buat beberapa perubahan.

• Font Menu: Rubik
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 0.9vw (Desktop), 2vw (Tablet), 3vw (Telepon)

Menu drop down

Ubah juga pengaturan menu dropdown.

• Warna Latar Menu Dropdown: #ffffff
• Warna Garis Menu Dropdown: #2970fa

Ikon

Dan selesaikan pengaturan modul dengan mengubah warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #2970fa

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Ke kolom berikutnya dan terakhir. Tambahkan Modul Tombol dengan beberapa salinan pilihan Anda.

Penyelarasan

Ubah perataan modul berikutnya.

• Penjajaran Tombol: Kanan

Pengaturan Tombol

Gaya tombol sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 1.5vw (Tablet), 2vw (Ponsel)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #2970fa
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 1px
• Font Tombol: Rubik
• Gaya Font Tombol: Huruf Besar

Jarak

Dan tambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 0.8vw (Desktop), 1.8vw (Tablet), 2.5vw (Telepon)
• Padding Bawah: 0.8vw (Desktop), 1.8vw (Tablet), 2.5vw (Telepon)
• Padding Kiri: 1.5vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Padding Kanan: 1.5vw (Desktop), 3vw (Tablet), 4vw (Telepon)

Bayangan Kotak

Selesaikan pengaturan modul dengan menambahkan bayangan kotak halus.

• Posisi Vertikal Bayangan Kotak: 20px
• Kekuatan Buram Bayangan Kotak: 30px
• Warna Bayangan: rgba (41.112.250,0.2)

Tambahkan Modul Kode ke Kolom 2

Masukkan JQuery & Kode CSS

Bagian berikutnya dan terakhir dari tutorial ini menangani efek menyusut, menggunakan dua ID CSS yang telah kita tetapkan ke bagian dan baris kita. Tambahkan Modul Kode ke kolom 2 dengan baris kode JQuery dan CSS berikut. Pastikan Anda meletakkan kode JQuery di antara tag skrip dan kode CSS di antara tag gaya.

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

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

3. Simpan Perubahan Builder & Lihat Hasil

Setelah Anda menambahkan kode, Anda dapat menyimpan semua perubahan yang Anda buat pada tajuk global dan melihat 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 yang menyusut menggunakan Pembuat Tema Divi. Mengecilkan header adalah cara yang bagus untuk menghemat ruang pada ketinggian viewport pengunjung Anda. Kami telah membuat ulang desain dari awal dan menambahkan beberapa kode kustom khusus untuk memicu efek menyusut. 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.