Saat membuat tajuk global Anda, ada banyak hal yang perlu Anda pertimbangkan. Elemen yang Anda masukkan ke dalam header Anda akan membantu Anda pengunjung untuk menavigasi dengan mudah. Untuk mengurangi waktu yang dihabiskan orang untuk menjelajah, banyak perancang web memilih tajuk atas tetap, memungkinkan pengunjung untuk segera mengakses halaman atau publikasi lain. Ini sangat berguna, tetapi saat membuat header tetap, tinggi area pandang Anda akan jauh lebih tinggi pengunjung sedang sibuk, yang memungkinkan kurang dari isi untuk ditampilkan sekaligus. Jika Anda belum siap melakukan pengorbanan ini, ketahuilah bahwa Anda tidak perlu melakukannya. Anda dapat memperoleh manfaat dari tajuk tetap dengan membiarkan keseluruhan tajuk Anda terlihat ketika pengunjung Anda menggulir ke atas dan menyembunyikannya ketika mereka menggulir ke bawah. Hari ini kami akan memandu Anda menyembunyikan dan menampilkan header global Anda menggunakan Pembuat Tema Divi.

penelitian

Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.

1. Buka Divi Theme Builder dan tambahkan templat baru

Mulailah dengan membuka Divi Theme Builder.

Mulai buat tajuk global

Di sana, klik "Tambahkan tajuk global" dan pilih "Buat tajuk global".

2. Mulai membuat header global

Pengaturan bagian

Warna latar belakang

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

• Warna Latar Belakang: #ffffff

perekat

Pergi ke tab desain dan tetapkan lebar 100% ke bagian berikutnya.

• Lebar: 100%

jarak

Tambahkan juga padding khusus atas dan bawah.

• Lapisan atas: 2vw
• Lapisan bawah: 2vw

Kotak bayangan

Kami juga akan menerapkan naungan halus untuk bagian kami.

• Kekuatan Box Shadow Blur: 50px
• Warna bayangan: rgba (0,0,0,0,08)

ID CSS

Nanti di tutorial ini, kita memerlukan beberapa kode khusus agar efek pengguliran terjadi. Untuk mempersiapkan ini, kami menambahkan ID CSS ke bagian tersebut.

• ID CSS: bagian header global

Elemen utama

Kami juga akan menjadikan bagian tersebut sebagai tajuk tetap dengan menambahkan dua baris kode CSS ke elemen bagian utama.

position: fixed;top: 0;

Indeks Z

Sekarang untuk memastikan bagian kita muncul di bagian atas halaman atau isi dari postingan tersebut, kami juga akan meningkatkan indeks-z di pengaturan visibilitas.

• Indeks Z: 99999

Tambahkan baris baru

Struktur kolom

Setelah Anda selesai semua parameter bagian, lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

perekat

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

• Gunakan lebar selokan khusus: Ya
• Lebar selokan: 1
• Menyamakan ketinggian kolom: Ya
• Lebar: 100%
• Lebar maks: 100%

jarak

Hapus juga semua padding standar atas dan bawah.

• Lapisan atas: 0px
• Lapisan bawah: 0px

Elemen utama

pusatkan isi kolom dan biarkan kolom tetap berdampingan pada ukuran layar yang lebih kecil dengan menambahkan dua baris kode CSS ke elemen utama baris.

display: flex;align-items: center;

Tambahkan modul pelacakan media sosial ke kolom 2

Tambahkan jejaring sosial

Saatnya menambah modul, dimulai dengan modul pelacakan media sosial di kolom 1. Tambahkan jejaring sosial yang ingin Anda tampilkan.

Setel ulang masing-masing gaya media sosial

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

Tambahkan ruang jaringan sosial individu

Anda juga perlu membuka pengaturan untuk setiap jejaring sosial satu per satu dan menambahkan bantalan bawah di pengaturan jarak.

• Lapisan bawah: 0.5vw

penjajaran

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

• Penyelarasan modul: pusat

Pengaturan ikon default

Ubah juga warna ikon di pengaturan ikon.

• Warna Ikon: # 000000

Arahkan pengaturan ikon

Dan ubah warna ikon hover.

• Warna Ikon: # c2ab92

Batas

Lengkapi parameter modul dengan menambahkan batas bawah pada parameter batas.

• Lebar batas bawah: 1px
• Warna batas bawah: # 000000

Tambahkan modul menu ke kolom 2

Pilih menu

Mari lanjutkan ke kolom berikutnya! Tambahkan modul menu dan pilih menu pilihan Anda.

Unduh logo

Kemudian unggah logo di modul.

Hapus warna latar belakang

Dan hapus warna latar belakang.

ketentuan

Kemudian alihkan ke tab Desain dan pastikan pengaturan berikut berlaku untuk tata letak:

• Gaya: Berpusat
• Arah menu tarik-turun: turun

Teks menu default

Lanjutkan dengan mengubah pengaturan teks menu sebagai berikut:

• Warna tautan aktif: # c2ab92
• Fon 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 tarik-turun

Kemudian ubah warna garis menu drop-down di pengaturan menu drop-down.

• Warna garis menu drop-down: # 000000

ikon

Kami juga mengubah warna ikon menu hamburger di pengaturan ikon.

• Warna ikon menu Hamburger: # 000000

perekat

Lanjutkan dengan mengubah lebar logo maksimum pada ukuran layar yang berbeda di pengaturan ukuran.

• Lebar logo maksimum: 5vw (meja), 10vw (tablet), 13vw (telepon)

Menu Tautan CSS

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

Mari lanjutkan ke modul terakhir! Di sana satu-satunya modul yang kita butuhkan adalah modul teks.

Menambahkan link

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

• URL tautan modul: #

Pengaturan teks default

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

• Jenis 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 parameter ukuran modul pada berbagai ukuran layar.

• Lebar: 12vw (desktop), 18vw (tablet), 22vw (telepon)
• Penyelarasan modul: pusat

jarak

Dan tambahkan beberapa padding bawah di pengaturan jarak.

• Lapisan bawah: 0.5vw

Batas

Lengkapi parameter modul dengan menambahkan batas bawah.

• Lebar batas bawah: 1px
• Warna batas bawah: # 000000

Tambahkan modul kode ke kolom 2

Masukkan kode JQuery dan CSS

Setelah Anda memberi gaya pada semua mod dalam baris, inilah waktunya untuk membuat efek buka / sembunyikan terjadi. Untuk melakukan ini, kita perlu menambahkan kode kustom ke modul kode yang akan kita tempatkan di kolom 2. Kode ini akan berfungsi di bagian mana pun yang Anda tambahkan, tidak peduli bagaimana Anda mendesain header atau modul. yang Anda gunakan, pastikan Anda telah menambahkan ID CSS ke bagian Anda. Tempatkan kode JQuery antara tag skrip dan kode CSS di antara tag gaya seperti yang ditunjukkan pada layar cetak di bawah ini.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

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

3. Simpan modifikasi generator dan tampilkan hasilnya

Setelah Anda menyelesaikan tajuk global, simpan semua perubahan dan lihat hasilnya di situs jaringan!

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

final pikiran

Di artikel ini, kami telah menunjukkan kepada Anda cara membuat Header Global Anda muncul saat menggulir ke atas dan menyembunyikannya saat menggulir ke bawah. Ini adalah cara yang populer dan efektif untuk membantu pengunjung Anda menavigasi dengan mudah tanpa mengambil sebagian dari tinggi jendela mereka. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.