Cara Membuat Tajuk Lengket dengan Opsi Lengket Divi

Cara kami menggunakan Divi Theme Builder saat menyiapkan situs web telah mempercepat alur kerja kami dan membuat segalanya lebih mudah. Meskipun kami dapat membuat tajuk khusus sejak hari pertama sejak Divi Theme Builder keluar, satu hal telah diminta terus menerus, yaitu mampu membuat tajuk lengket tanpa menggunakan kode tambahan. Dengan opsi lengket baru Divi, membuat header lengket menjadi lebih mudah dari sebelumnya. Pengaturan lengket yang disediakan Divi akan dengan mudah membantu Anda mengubah elemen desain apa pun menjadi lengket dan menetapkan gaya khusus ke status lengket, yang menghasilkan kemungkinan desain dan pengalaman pengguna yang tak terbatas.

Dalam tutorial ini, kami akan menunjukkan cara membuat header lengket yang berisi berikut ini:

• Header yang kami buat memiliki bilah header atas + bilah menu
• Kami mengubah bagian yang berisi bilah menu lengket ketika Anda melewatinya, segera setelah Anda kembali ke atas, bilah tajuk muncul lagi
• Kami mengubah gaya desain bagian lengket (dan elemennya) setelah bagian menjadi lengket

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

Buka Divi Theme Builder dan mulai buat header global atau kustom baru.

Bagian #1 Pengaturan

Latar Belakang Gradien

Begitu berada di dalam editor template, kita akan mulai dengan membangun struktur elemen dari header kita. Di bagian kedua dari tutorial ini, kita akan fokus pada penerapan pengaturan sticky yang berbeda untuk menyelesaikan desain sticky header kita. Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan terapkan latar belakang gradien.

• Warna 1: #ffba60
• Warna 2: #ffd6a0
• Arah Gradien: 90 derajat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Tambahkan Baris Baru

Struktur Kolom

Untuk membuat bilah tajuk teratas kami, kami akan menambahkan baris baru ke bagian kami menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 95%
• Lebar Maks: 2580px

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 15px
• Padding Bawah: 15px

Elemen Utama CSS

Dan untuk memastikan kolom tetap bersebelahan pada ukuran layar yang lebih kecil, kita akan menambahkan satu baris kode CSS ke elemen utama baris di tab lanjutan.

display: flex;

Tambahkan Modul Ikuti Media Sosial ke Kolom 1

Tambahkan Jejaring Sosial Pilihan

Saatnya menambahkan modul, dimulai dengan Modul Ikuti Media Sosial di kolom 1. Tambahkan jejaring sosial pilihan Anda beserta tautan terkaitnya.

Hapus Warna Latar Belakang Setiap Jejaring Sosial

Lanjutkan dengan menghapus setiap warna latar belakang jaringan sosial satu per satu.

Pengaturan Ikon

Kemudian, kembali ke pengaturan modul umum dan ubah warna ikon di tab desain.

• Warna Ikon: #26333a

Jarak

Tambahkan beberapa margin atas juga.

• Margin Atas: 5px

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.

Tambahkan Tautan

Tambahkan tautan berikutnya.

Penjajaran Tombol

Kemudian, pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Kanan

Pengaturan Tombol

Kami juga menata tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 14px
• Warna Teks Tombol: #26333a
• Lebar Perbatasan Tombol: 2px
• Warna Batas Tombol: #26333a
• Radius Perbatasan Tombol: 0px

• Jarak Huruf Tombol: 4px
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar
• Tampilkan Tombol: Ya

Jarak

Dan kita akan menyelesaikan pengaturan modul dengan menambahkan beberapa padding atas dan bawah ke pengaturan spasi.

• Padding Atas: 10px
• Padding Bawah: 10px

Tambahkan Bagian #2

Latar Belakang Gradien

Tambahkan bagian reguler lainnya tepat di bawah yang sebelumnya. Bagian ini akan didedikasikan untuk menu kita dan akan diubah menjadi sticky di bagian kedua dari tutorial ini. Setelah Anda menambahkan bagian, terapkan latar belakang gradien.

• Warna 1: #ffffff
• Warna 2: #f7f7f7
• Tipe Gradien: Linier
• Arah Gradien: 90 derajat
• Posisi Awal: 25%
• Posisi Akhir: 25%

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 ke bagian menggunakan struktur kolom berikut:

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar Maks: 2580px

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 10px
• Padding Bawah: 10px

Tambahkan Modul Menu ke Kolom

Pilih Menu

Kemudian, tambahkan Modul Menu ke kolom baris dan pilih menu dinamis pilihan Anda.

Unggah Logo

Unggah logo berikutnya.

Hapus Warna Latar Belakang

Kemudian, hapus warna latar belakang putih default modul.

Pengaturan Teks Menu

Pindah ke tab desain dan gaya pengaturan teks menu juga.

• Berat Font Menu: Tebal
• Warna Teks Menu: #002d4c
• Ukuran Teks Menu: 15px
• Spasi Huruf Menu: 4px
• Perataan Teks: Kanan

Pengaturan Teks Menu Dropdown

Kemudian, buat beberapa perubahan pada pengaturan menu dropdown.

• Warna Latar Menu Dropdown: #ffffff
• Warna Garis Menu Dropdown: #002d4c

Pengaturan Ikon

Seiring dengan pengaturan ikon.

• Warna Ikon Keranjang Belanja: #002d4c
• Warna Ikon Pencarian: #002d4c
• Warna Ikon Menu Hamburger: #002d4c

Perekat

Dan selesaikan pengaturan modul dengan menambahkan tinggi maksimum logo ke pengaturan ukuran.

• Tinggi Maks Logo: 60px

2. Terapkan Efek Lengket Kustom

Putar Bagian #2 Lengket

Sekarang kita telah membuat struktur elemen dari header kita, saatnya untuk mengubah bagian kedua kita menjadi lengket dan mengubah gaya desainnya dan elemennya dalam keadaan lengket. Buka pengaturan bagian kedua dan lanjutkan ke tab lanjutan. Di sana, buka pengaturan efek gulir dan terapkan opsi tempel berikut:

• 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

Ubah Latar Belakang Gradien Bagian dalam Keadaan Lengket

Sekarang bagian kami telah menjadi lengket, opsi tambahan akan muncul di dalam pengaturan bagian, baris dan modul kami; pilihan lengket. Saat Anda mengklik ikon ini, Anda akan dapat membuat gaya alternatif untuk elemen yang telah Anda pilih saat dalam status lengket. Kami akan menggabungkan beberapa pengaturan desain lengket ini untuk menyesuaikan tampilan dan nuansa header lengket kami saat menggulir. Mulailah dengan masuk ke pengaturan latar belakang bagian kedua dan terapkan latar belakang gradien lengket berikut:

• Warna 1: #26333a
• Warna 2: #1e272f

Peregangan Baris dalam Keadaan Lengket

Selanjutnya, kita akan membuka baris yang berisi Modul Menu dan kita akan mengubah lebar dalam keadaan lengket.

• Lebar: 95%

Hapus Padding Baris dalam Kondisi Lengket

Kami juga menghapus padding atas dan bawah yang lengket dari baris kami.

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

Ubah Warna Teks Menu dalam Status Lengket

Selanjutnya, kita akan mengubah warna teks menu menjadi sticky state.

• Warna Teks Menu: #ffbd68

Ubah Warna Ikon Menu dalam Status Lengket

Seiring dengan warna ikon.

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

Hapus Tinggi Logo dalam Status Lengket

Dan yang tak kalah pentingnya, kita akan mengubah tinggi maksimum logo menjadi nol dalam status lengket. Ini akan menghapus logo dari tajuk kami sepenuhnya setelah pengaturan tempel bagian diaktifkan. Itu dia! Pastikan Anda menyimpan semua perubahan Divi Theme Builder setelah Anda menyelesaikan desain header dan mempratinjaunya di situs web Anda.

• Tinggi Maks Logo: 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 membuat header lengket menggunakan Divi's Theme Builder dan opsi lengket. Segera setelah bagian yang berisi menu kita menjadi lengket, kita juga menerapkan gaya kustom. Opsi ini dimungkinkan oleh opsi lengket Divi baru yang memberi Anda banyak kemungkinan untuk meningkatkan pengalaman pengguna dan desain yang Anda buat. Anda juga dapat mengunduh template tajuk global 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.