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.
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
- Lebar: 100%
- Padding Atas: 2vw
- Padding Bawah: 2vw
- 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
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
- Gunakan Lebar Talang Kustom: Ya
- Lebar Talang: 1
- Samakan Tinggi Kolom: Ya
- Lebar: 100%
- Lebar Maks: 100%
- Padding Atas: 0px
- Padding Bawah: 0px
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 Modul: Pusat
- Warna Ikon: #000000
Arahkan ke Pengaturan Ikon Dan ubah warna ikon di hover.
- Warna Ikon: #c2ab92
- Lebar Batas Bawah: 1px
- Warna Batas Bawah: #000000
- Gaya: Terpusat
- Arah Menu Dropdown: Ke Bawah
- Warna Tautan Aktif: #c2ab92
- Font Menu: Cormorant Garamond
- Warna Teks: #000000
- Ukuran Teks Menu: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
- Warna Teks Menu: #c2ab92
- Warna Garis Menu Dropdown: #000000
- Warna Ikon Menu Hamburger: #000000
- 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;
- URL Tautan Modul: #
- 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
- Lebar: 12vw (Desktop), 18vw (Tablet), 22vw (Telepon)
- Penyelarasan Modul: Pusat
- Padding Bawah: 0.5vw
- Lebar Batas Bawah: 1px
- Warna Batas Bawah: #000000
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;
}
