Penjualan Ulang Tahun Elemen

Nikmati diskon 60% untuk pembelian baru, pembaruan dan peningkatan.

00 Hari -hari
:
00 Jam
:
00 Menit
:
00 Detik

Beli sekarang

Cara Mengganti Logo Sticky Header Pada Scroll Dengan Divi

Rifat Divi Tutorials Dec 10, 2021

Saat membuat tajuk lengket untuk situs web Anda, mengubah logo dapat mengarah ke opsi gaya di masa mendatang. Misalnya, Anda mungkin ingin mengubah warna latar belakang header lengket tetapi memerlukan logo yang berbeda untuk menyelesaikan desain. Atau, Anda mungkin memerlukan versi logo yang berbeda yang tidak terlalu mencolok untuk mengalihkan perhatian pengguna.

Dalam tutorial Divi hari ini, Anda akan melihat cara mengubah logo Anda pada header yang lengket. Namun, pertama-tama, kita akan menggunakan pembuat tema Divi untuk membuat header baru dengan dua logo yang beralih saat pengguna menggunakan status sticky header.

Mari kita mulai!

Pratinjau

Logo header lengket Changin adalah item yang sangat menarik dalam beberapa hari terakhir. Lihat preview desain hari ini.

Penawaran luar biasa

Ulang tahun ke -6 Elementor dengan diskon hingga 60%

Mulai sekarang

Bagian 1: Buat Header Baru

Untuk mengerjakan tutorial hari ini, mari buat header baru menggunakan opsi Pembuat Tema. Cukup buka opsi Pembuat tema dan lanjutkan dengan Build Custom Header for All Pages.

Bagian 2: Membuat Bagian Dan Baris Lengket

Penambahan Baris

Pilih pola baris yang ditandai untuk disisipkan pada bagian.

Pengaturan Untuk Bagian

Kami ingin header ini menjadi lengket. Jadi kita akan menambahkan posisi lengket ke bagian tersebut. Mari lakukan penyesuaian berikut pada efek Gulir dari tab Pengaturan lanjutan.

  • Posisi Lengket: Tongkat Ke Atas

Sekarang tambahkan warna latar belakang dari tab konten. Warna ini akan diterapkan pada desktop dan untuk status lengket sebagai berikut:

  • Warna Latar Belakang (desktop): #f6f0e7
  • Warna Latar Belakang (lengket): #000000

Perbarui padding dari tab desain.

  • Padding: 0px atas, 0px bawah

Pengaturan Baris

Setelah selesai dengan pengaturan bagian, sekarang kita harus melakukan beberapa pekerjaan dalam pengaturan baris. Pada tab desain,

  • Lebar Talang: 1
  • Lebar: 96%
  • Padding: 10px atas, 10px bawah

Bagian 3: Tambahkan Logo

Ya, kami akan bekerja dengan dua logo berbeda karena lebih nyaman menggunakan logo terpisah. Akan ada dua gambar berbeda yang akan meluncur masuk dan keluar dari pandangan. Logikanya adalah - Setelah halaman terisi penuh, pengguna akan melihat logo di header, tetapi logo akan berubah segera setelah mereka mulai menggulir.

logo tangan

Tambahkan modul gambar ke kolom kiri baris kami.

Sekarang tambahkan logo. Pastikan untuk menjaga logo dalam kisaran 200 px * 67 px. Anda dapat menambahkan tautan beranda ke logo ini untuk bertindak secara dinamis.

Buat perubahan berikut di tab Desain.

  • Tinggi Maks: 67px (desktop), 45px (tablet dan ponsel)

Ubah opsi terjemahkan transformasi dalam status lengket:

  • Transformasi Terjemahkan sumbu Y (lengket): -100%

Ini akan memindahkan logo ke atas di luar kolom untuk menyembunyikannya dari tampilan dalam status lengket.

Logo Negara Lengket

Untuk membuat logo yang akan bekerja dalam keadaan lengket, pertama-tama kita perlu menduplikasi modul gambar yang baru saja kita buat.

Sekarang ganti gambar/logo. simpan gambar ini dengan ukuran yang sama dengan yang sebelumnya.

Dari tab lanjutan, edit pengaturan posisi.

  • Posisi: Absolut

Logo sekarang harus berada tepat di atas logo utama.

Di bawah tab desain, perbarui opsi transformasi sebagai berikut:

  • Transformasi Terjemahkan Sumbu Y (desktop): 100%
  • Transformasi Terjemahkan Sumbu Y (lengket): 0%

Bagian 4: Luapan Kolom Tersembunyi

Visibilitas logo sticky state akan berada di luar kolom tetapi untuk mengubahnya, kami akan memodifikasi visibilitas overflow.

  • Luapan Horisontal: Tersembunyi
  • Luapan Vertikal: Tersembunyi

Bagian 5: Menu

Inilah bagian terakhir dari tutorial kami. Bagian header tidak ada artinya tanpa menu. Mari tambahkan modul menu dan letakkan item menu yang diinginkan di atasnya.

Jadikan latar belakang menu transparan.

Sekarang ikuti penyesuaian berikut untuk membuat menu lebih menarik.

  • Font Menu: Roboto
  • Berat Font Menu: Tebal
  • Warna Teks Menu: #ff9900
  • Ukuran Teks Menu: 18px
  • Tinggi Baris Menu: 1.3em
  • Perataan Teks: kanan
  • Warna Latar Menu Dropdown: #fff
  • Warna Garis Menu Dropdown: #000
  • Warna Teks Menu Dropdown: #000 (desktop), #000 (lengket)
  • Warna Latar Menu Seluler: #fff
  • Warna Teks Menu Seluler: #000 (desktop), #000 (lengket)
  • Warna Ikon Menu Hamburger: #000 (desktop), #fff (lengket)
  • Margin (desktop): 14px atas
  • Margin (tablet dan ponsel): 5px atas
  • Padding (tablet dan ponsel) 5px bawah
  • Sudut Bulat: 3px
  • Lebar Batas (tablet dan ponsel): 1px
  • Warna Batas : #ddd (desktop), #333 (lengket)

Tampilan Akhir

Berikut adalah tampilan akhir dari desain kami.

Menyelesaikan Pikiran

Tidak perlu menggunakan logo yang sama untuk header lengket Anda saat menggunakan Divi . Kami baru saja mendemonstrasikan betapa sederhananya membuat tajuk dinamis menggunakan fitur bawaan Divi . Tidak diperlukan kode tambahan. Setelah Anda membuka potensi penuh dari pengaturan lengket Divi , Anda mungkin menjadi agak kreatif dengan bagaimana logo ditransisikan masuk dan keluar dari tampilan. Mudah-mudahan, tip kecil ini terbukti berguna untuk proyek Anda yang akan datang!