Cara Mengubah Logo Lengket Anda di Gulir dengan Divi

Sejak opsi lengket Divi keluar, kemungkinan desain interaksi tanpa akhir telah ditambahkan ke kotak peralatan Divi kami. Selain dapat mengubah header menjadi sticky pada scroll, Anda juga dapat mengubah gaya elemen Anda dalam status sticky. Ini memungkinkan Anda untuk menyorot tajuk Anda setelah menjadi lengket, dan menciptakan pengalaman pengguna lain saat orang membaca halaman dan posting Anda.

Salah satu pertanyaan yang sering ditanyakan di komunitas adalah bagaimana cara mengubah logo Divi dalam keadaan lengket. Dalam tutorial ini, kami akan menunjukkan cara cepat dan mudah untuk melakukannya. Kita akan memulai tutorial dengan membuat header global, kemudian kita akan menerapkan efek sticky dan di bagian ketiga dari tutorial, kami akan menunjukkan cara mengubah logo sticky pada scroll. Jika Anda sudah terbiasa dengan opsi tempel Divi dan kemungkinan tajuk global, jangan ragu untuk melompat ke bagian ketiga dari tutorial untuk melihat beberapa langkah yang diperlukan untuk mengubah logo tempel Anda saat menggulir.

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 dan buat header global atau kustom baru.

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturan bagian itu dan terapkan warna latar belakang.

• Warna Latar Belakang: #556de0

Jarak

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

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

Bayangan Kotak

Tambahkan bayangan kotak juga.

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

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

• Gunakan Lebar Talang Kustom: Ya
• Lebar selokan: 1
• Samakan Tinggi Kolom: Ya
• Lebar:
  • Desktop: 80%
  • Tablet & Telepon: 100%
• Lebar Maks: 2580px

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Spasi Kolom 1

Kemudian, buka pengaturan kolom 1 dan terapkan beberapa padding atas dan bawah.

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

Warna Latar Belakang Kolom 2

Pindah ke pengaturan kolom kedua dan tambahkan warna latar belakang.

• Warna Latar Belakang: #6eba01

Tambahkan Modul Menu ke Kolom 1

Pilih Menu

Sekarang pengaturan baris dan kolom umum sudah ada, saatnya untuk menambahkan modul, dimulai dengan Modul Menu di kolom 1.

Hapus Warna Latar Belakang

Hapus warna latar belakang putih default modul.

Pengaturan Teks Menu

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

• Font Menu: Montserrat
• Berat Font Menu: Tebal
• Warna Teks Menu: #ffffff
• Ukuran Teks Menu: 16px
• Perataan Teks: Kanan

Pengaturan Menu Dropdown

Kemudian, buat beberapa perubahan pada pengaturan menu dropdown.

• Warna Latar Menu Dropdown: #556de0
• Warna Garis Menu Dropdown: rgba (0,45,76,0)
• Warna Latar Menu Seluler: #556de0
• Warna Teks Menu Seluler: #ffffff

Pengaturan Ikon

Ubah warna ikon berikutnya.

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

Jarak

Dan terapkan beberapa nilai spasi responsif.

• Batas atas:
  • Tablet & Telepon: 10px
• Margin Bawah:
  • Tablet & Telepon: 10px
• Margin Kiri:
  • Tablet & Telepon: 5%
• Margin Kanan: 5%

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 modul.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Gaya tombol berikutnya.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 17px
• Warna Teks Tombol: #ffffff
• Lebar Batas Tombol: 0px

• Jarak Huruf Tombol: 1px
• Font Tombol: Montserrat
• Gaya Font Tombol: Huruf Besar

Jarak

Dan terapkan beberapa nilai spasi responsif.

• Batas atas:
  • Desktop: 30px
  • Tablet & Telepon: 20px
• Margin Bawah:
  • Desktop: 30px
  • Tablet & Telepon: 20px

2. Terapkan Efek Lengket Kustom

Jadikan Bagian Lengket

Sekarang kita memiliki semua elemen di tempatnya, saatnya untuk menambahkan efek lengket dan mengubah logo lengket kita juga. Mulailah dengan membuka pengaturan bagian lagi. Buka tab lanjutan dan terapkan pengaturan posisi lengket berikut:

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

Warna Latar Belakang Bagian Lengket

Sekarang bagian telah berubah menjadi lengket, kita dapat menerapkan beberapa gaya lengket ke elemen induk dan anak. Mulailah dengan masuk ke pengaturan latar belakang bagian dan terapkan warna latar belakang putih dalam keadaan lengket.

• Warna Latar Belakang: #FFFFFF

Ukuran Baris Lengket

Ubah lebar baris dalam status lengket berikutnya.

• Lebar: 100%

Kolom Lengket 1 Spasi

Kemudian, kami akan menghapus padding atas dan bawah kolom 1 dalam keadaan lengket.

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

Warna Latar Belakang Kolom Lengket 2

Kami juga akan mengubah warna latar belakang kolom 2 lengket.

• Warna Latar Belakang: #556de0

Warna Teks Menu Lengket

Lanjutkan dengan membuka Modul Menu dan menerapkan warna teks menu lengket.

• Warna Teks Menu: #556de0

Pengaturan Dropdown Menu Lengket

Ubah beberapa warna menu dropdown dalam status lengket juga.

• Warna Latar Menu Dropdown: #ffffff
• Warna Latar Menu Seluler: #ffffff
• Warna Teks Menu Seluler: #556de0

Pengaturan Ikon Menu Lengket

Seiring dengan warna ikon lengket.

• Warna Ikon Keranjang Belanja: #556de0
• Warna Ikon Pencarian: #556de0
• Warna Ikon Menu Hamburger: #556de0

Spasi Menu Lengket

Kemudian, buka pengaturan spasi dan terapkan beberapa margin kiri yang lengket.

• Margin Kiri: 5%

Jarak Tombol Lengket

Last but not least, ubah nilai margin lengket Modul Tombol dalam pengaturan spasi.

• Margin Atas: 15px
• Margin Bawah: 15px

3. Ubah Logo dalam Status Lengket

Unggah Kedua Ikon ke Perpustakaan Media

Satu-satunya yang tersisa untuk dilakukan adalah menambahkan dua logo berbeda ke Modul Menu. Satu logo akan diterapkan dalam keadaan statis, yang lain dalam keadaan lengket. Unggah kedua logo ke perpustakaan media Anda.

Pilih Logo Statis

Kemudian, buka Modul Menu dan pilih file gambar logo statis di pengaturan logo.

Terapkan Lebar & Tinggi Logo Maks dalam Piksel

Pindah ke tab desain modul dan terapkan beberapa lebar dan tinggi maksimum logo. Nilai-nilai ini akan membantu kami menjaga ukuran logo statis dan lengket kami tetap sama.

• Logo Lebar Maks: 100px
• Tinggi Maks Logo: 60px

Salin URL Logo Lengket

Sekarang, kembali ke perpustakaan media Anda dan salin URL logo tempel Anda.

Tambahkan URL Lengket dalam Status Lengket (Elemen Utama Logo Menu)

Untuk mengubah logo dalam status lengket, kami akan menavigasi ke tab lanjutan Modul Menu dan gulir ke bawah ke kotak Menu Logo CSS. Di sana, kita akan mengaktifkan opsi sticky pada kotak CSS dan menambahkan satu baris kode CSS dengan URL logo sticky di antara tanda kurung. Itu dia!

content: url(addlinkhere);

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 mengubah logo lengket Anda saat menggulir menggunakan opsi lengket Divi. Pendekatan ini memungkinkan Anda untuk menggunakan dua logo berbeda di header Anda tanpa harus menggunakan menu terpisah. Kami telah mulai dengan menunjukkan kepada Anda cara membuat header global, lalu kami mengubah bagian sticky dan mengubah gaya sticky. Kami telah menyelesaikan tutorial dengan menunjukkan kepada Anda bagaimana mengubah logo lengket Anda pada scroll di bagian ketiga dari tutorial. 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.