Cara Membuat Header Transparan Anda Lengket di Scroll dengan Divi

Ketika datang untuk menyiapkan tajuk global untuk situs web Anda, ada banyak cara untuk mendekatinya. Salah satu pendekatan yang lebih halus adalah header transparan. Header transparan ditempatkan di atas bagian pahlawan halaman Anda, yang dapat menghasilkan desain cantik yang berfokus pada pendekatan yang minimal namun jelas. Jika Anda memutuskan untuk menggunakan tajuk transparan tetapi membutuhkan tajuk yang lengket saat menggulir, Anda akan menyukai tutorial ini. Menggunakan opsi tempel bawaan Divi, kami akan menunjukkan kepada Anda cara beralih dari tajuk transparan ke tajuk lengket dengan gaya berbeda saat menggulir. Transisi antara transparan dan lengket sangat mudah! 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!

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.

Bagian #1 Pengaturan

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Bagian ini akan didedikasikan untuk bilah header atas yang dapat Anda lihat di pratinjau posting ini. Buka pengaturan bagian dan tambahkan warna latar belakang hitam.

• Warna Latar Belakang: #000000

Jarak

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

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Tambah isi

Tambahkan Modul Teks ke kolom baris dan masukkan beberapa salinan pilihan Anda.

Pengaturan Teks

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

• Font Teks: Oswald
• Gaya Font Teks: Huruf Besar
• Warna Teks: #ffffff
• Ukuran teks:
  • Desktop: 19px
  • Tablet: 18 piksel
  • Telepon: 16px
• Perataan Teks: Tengah

Tambahkan Bagian #2

Jarak

Tepat di bawah bagian pertama, tambahkan bagian reguler lainnya. Bagian ini akan didedikasikan untuk menu transparan kami yang akan menjadi lengket saat digulir. Buka pengaturan bagian dan hapus semua bantalan atas dan bawah default di tab desain.

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna Latar Belakang Transparan

Buka pengaturan baris dan terapkan warna latar belakang yang benar-benar transparan ke baris.

• Warna Latar Belakang: rgba(255,255,255,0)

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Tambahkan beberapa bantalan kiri dan kanan khusus berikutnya.

• Padding Kiri: 10%
• Padding Kanan: 10%

Bayangan Kotak

Kemudian, terapkan bayangan kotak transparan. Nanti di tutorial, kita akan menggunakan bayangan kotak ini dalam keadaan lengket dengan warna bayangan yang berbeda.

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

Posisi

Untuk memastikan baris muncul di atas konten halaman, dengan latar belakang transparan, kami akan menggunakan posisi absolut untuk baris kami di tab lanjutan.

• Posisi: Absolut
• Lokasi: Kiri Atas

Visibilitas Kolom 2

Kami juga menyembunyikan kolom kedua dari baris kami di tablet dan ponsel untuk memiliki desain header yang tidak terlalu rumit pada ukuran layar yang lebih kecil.

Tambahkan Modul Menu ke Kolom 1

Pilih Menu

Sekarang pengaturan baris kita sudah ada, saatnya untuk menambahkan modul, dimulai dengan Modul Menu di kolom 1. Pilih menu pilihan Anda.

Unggah Logo

Unggah logo berikutnya.

Hapus Warna Latar Belakang

Hapus juga warna latar belakang modul.

Pengaturan Teks Menu

Pindah ke tab desain modul dan ubah pengaturan teks menu yang sesuai:

• Font Menu: Oswald
• Berat Font Menu: Tebal
• Gaya Font Menu: Huruf Besar
• Warna Teks Menu: #efefef
• Ukuran Teks Menu: 18px
• Perataan Teks: Kanan

Pengaturan Menu Dropdown

Ubah juga pengaturan menu tarik-turun.

• Warna Garis Menu Dropdown: rgba(0,0,0,0)
• Warna Latar Menu Seluler: rgba(0,0,0,0.95)

Pengaturan Ikon

Kemudian, ubah warna ikon di pengaturan ikon.

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

Pengaturan Logo

Kami juga mengubah warna logo kami di pengaturan logo dengan mengubah filter pembalik gambar.

• Pembalikan Gambar: 90%

Perekat

Kemudian, kami akan menetapkan ketinggian maksimum untuk logo kami.

• Tinggi Maks Logo: 40px

Jarak

Selanjutnya, kita akan menambahkan beberapa padding atas dan bawah pada ukuran layar yang lebih kecil.

• Bantalan Atas:
  • Tablet & Telepon: 10px
• Bantalan Bawah:
  • Tablet & Telepon: 10px

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 modul dan ubah perataan tombol.

• Penjajaran Tombol: Kanan

Pengaturan Tombol

Gaya tombol berikutnya.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 16px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #ed4441
• Warna Batas Tombol: #ed4441

• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 4px
• Font Tombol: Oswald
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar
• Tampilkan Ikon Tombol: Ya
• Warna Ikon Tombol: #1a1a1a

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa nilai spasi khusus.

• Margin Atas: -70px
• Padding Atas: 25px
• Padding Bawah: 25px

2. Terapkan Efek Lengket Kustom

Putar Bagian #2 Lengket

Sekarang kita telah mengatur dasar header kita, saatnya untuk menerapkan efek lengket! Untuk melakukannya, mulailah dengan membuka pengaturan bagian kedua dan terapkan pengaturan tempel berikut ke tab lanjutan:

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

Warna Latar Belakang Baris Lengket

Sekarang setelah opsi sticky diaktifkan, kita dapat membuat perubahan desain sticky ke semua elemen di dalam bagian. Kami akan mulai dengan membuka baris yang berisi menu kami dan menerapkan warna latar belakang lengket putih.

• Warna Latar Belakang: #FFFFFF

Jarak Baris Lengket

Selanjutnya, kita akan memodifikasi nilai jarak tempel baris.

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

Bayangan Kotak Baris Lengket

Kami juga mengubah warna bayangan kotak dalam status lengket.

• Warna Bayangan: rgba (0,0,0,0.08)

Pemosisian Baris Lengket

Kemudian, kami akan mengembalikan posisi baris ke relatif dalam keadaan lengket.

• Posisi: Relatif
• Asal Offset: Kiri Atas

Pengaturan Teks Menu Lengket

Selanjutnya, kita akan mengubah warna teks menu sticky.

• Warna Teks Menu: #000000

Pengaturan Dropdown Menu Lengket

Seiring dengan warna latar belakang menu ponsel di menu dropdown pengaturan.

• Warna Latar Menu Seluler: #ffffff

Warna Ikon Menu Lengket

Ubah warna ikon dalam status lengket juga.

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

Filter Logo Lengket

Kemudian, hapus filter pembalik gambar logo dalam keadaan lengket.

• Pembalikan Gambar: 0%

Jarak Tombol Lengket

Dan selesaikan tutorial dengan menghapus margin atas negatif tombol saat lengket.

• Margin Atas: 0px

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 menggabungkan Pembuat Tema Divi dengan opsi tempel baru. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara beralih dari tajuk transparan ke tajuk lengket dengan gaya berbeda saat menggulir. Pendekatan ini memungkinkan Anda untuk menggabungkan desain halaman Anda dengan menu Anda sambil tetap mempertahankan header lengket yang indah saat menggulir. 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.