Apakah Anda ingin membuat header transparan dan lengket yang bagus dengan Divi?
Saat menyiapkan tajuk global untuk . Anda situs jaringan, ada banyak cara untuk mendekatinya. Salah satu pendekatan yang lebih halus adalah header transparan.
Jika Anda memutuskan untuk menggunakan header transparan tetapi harus lengket saat menggulir, Anda akan menyukai tutorial ini. Transisi antara transparan dan lengket sangat mudah!
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial, mari kita lihat dulu hasilnya.
Buat template tajuk global baru
Buka Divi > Pembuat Tema.
Bagian #1 Pengaturan
Warna latar belakang
Setelah berada di editor template, Anda akan melihat sebuah bagian. Bagian ini akan didedikasikan untuk bilah header atas yang dapat Anda lihat di pratinjau artikel ini. Buka pengaturan bagian dan tambahkan warna latar belakang hitam.
- Latar belakang: #000000
jarak
Beralih ke tab Gaya Bagian dan hapus semua Margin Dalam (Atas dan Bawah) secara default.
- Inner Margin Vertex: 0px
- Margin Internal Bawah: 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
Tambahkan modul Teks ke kolom
Tambahkan modul Teks ke kolom baris dan masukkan pesan pilihan Anda.
Pengaturan teks
Beralih ke tab Module Style dan ubah pengaturan teks yang sesuai:
- Font Teks: Oswald
- Gaya Salin Teks: TT
- Warna teks Teks: #ffffff
- Teks Ukuran teks:
- Desktop: 19px
- Tablet: 18 piksel
- Telepon: 16px
- Perataan Teks: Terpusat
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 menggulir.
Buka pengaturan bagian dan hapus semua margin internal (Atas dan Bawah) secara default di tab Gaya.
- Inner Margin Vertex: 0px
- Margin Internal Bawah: 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
Warna latar belakang transparan
Buka pengaturan garis dan terapkan warna latar belakang yang benar-benar transparan ke garis.
- Latar belakang: rgba (255,255,255,0)
perekat
Beralih ke tab Gaya Garis dan ubah pengaturan ukuran.
- Gunakan Lebar Talang Kustom: Ya
- Jarak kolom: 1
- Lebar maksimum: 100%
- Lebar maksimum: 100%
jarak
Kemudian tambahkan margin internal (Kiri dan Kanan) khusus.
- Margin Dalam Kiri: 10%
- Margin internal Kanan: 10%
Kotak bayangan
Selanjutnya, terapkan bayangan kotak transparan. Nanti di tutorial kita akan menggunakan box shadow ini dalam keadaan sticky dengan warna bayangan yang berbeda.
- Kekuatan Buram Bayangan Kotak: 50px
- Warna Huruf Subtitle: rgba (0,0,0,0)
Posisi
Untuk memastikan garis muncul di bagian atas isi halaman, dengan latar belakang transparan, kita akan menggunakan posisi absolut untuk baris kita 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.
Unduh logo
Lalu unggah logo.
Hapus warna latar belakang
Hapus juga warna latar belakang dari modul.
Pengaturan teks menu
Beralih ke tab Gaya modul dan ubah pengaturan teks menu yang sesuai:
- Menu Font: Oswald
- Menu Cahaya Lembut: Tebal
- Salin Menu Gaya: TT
- Warna teks menu: #efefef
- Ukuran Teks Menu: 18px
- Perataan teks: kanan
Pengaturan menu drop-down
Ubah juga pengaturan menu tarik-turun.
- Warna baris tarik-turun: rgba(0,0,0,0)
- Menu seluler Warna latar belakang: rgba (0,0,0,0,95)
Pengaturan ikon
Selanjutnya, ubah warna ikon di pengaturan ikon.
- Warna ikon keranjang: #ffffff
- Warna ikon pencarian: #ffffff
- Warna Ikon Menu Hamburger: #ffffff
Pengaturan logo
Kami juga mengubah warna logo kami di pengaturan logo dengan mengubah filter inversi gambar.
- Pembalikan Gambar: 90%
perekat
Selanjutnya, kami akan menetapkan ketinggian maksimum untuk logo kami.
- Logo Lebar maks: 40 piksel
jarak
Selanjutnya, kita akan menambahkan padding Atas dan Bawah pada ukuran layar kecil.
- Margin internal puncak:
- Tablet dan ponsel: 10px
- Margin internal bawah:
- Tablet dan ponsel: 10px
Tambahkan modul Tombol ke kolom 2
Tambahkan teks ke Tombol
Di kolom 2, satu-satunya modul yang kita butuhkan adalah modul Button. Tambahkan teks pilihan Anda.
Perataan tombol
Beralih ke tab Module Style dan ubah perataan tombol.
- Penjajaran tombol: kanan
Pengaturan tombol
Sesuaikan tombol berikutnya.
- Gunakan gaya khusus untuk Tombol: Ya
- Ukuran Teks Tombol: 16px
- Warna teks tombol: #ffffff
- Tombol latar belakang: #ed4441
- Warna batas tombol: #ed4441
- Tombol Radius Perbatasan: 0 piksel
- Jarak Huruf Tombol: 4px
- Font Tombol: Oswald
- Tombol Soft Light: Teks tebal
- Tombol gaya salin: TT
- Tampilkan Ikon Tombol: Ya
- Warna Ikon Tombol: #1a1a1a
jarak
Dan selesaikan pengaturan modul dengan menambahkan nilai spasi khusus.
- Margin atas: -70px
- Margin internal atas dan bawah: 25 px
Terapkan efek lengket khusus
Buat bagian #2 lengket
Sekarang kita telah meletakkan dasar untuk header kita, saatnya untuk menerapkan efek sticky! Untuk melakukan ini, mulailah dengan membuka pengaturan di bagian kedua dan menerapkan pengaturan tempel berikut ke tab lanjutan:
- Posisi Lengket: Menempel ke Atas
- Tongkat Offset Atas: 0px
- Mimit Lengket Bawah: Tidak Ada
- Offset Dari Elemen Lengket Sekitarnya: YA
- Default Transisi dan Gaya Lengket: YA
Warna latar belakang garis tongkat
Sekarang setelah opsi sticky diaktifkan, kita dapat membuat perubahan opsi sticky ke semua elemen di bagian tersebut. Kita akan mulai dengan membuka baris yang berisi menu kita dan menerapkan warna latar belakang putih ke opsi sticky.
- Warna latar belakang: #FFFFFF
Jarak Baris Lengket
Selanjutnya, kita akan mengubah nilai spasi dari fungsi sticky baris.
- Inner Margin Vertex: 0px
- Margin Internal Bawah: 0px
Kotak Bayangan Baris Lengket
Kami juga mengubah warna bayangan kotak dalam keadaan lengket.
- Warna Huruf Subjudul: rgba(0,0,0,0.08)
Penempatan garis lengket
Selanjutnya, kami akan mengembalikan posisi baris ke relatif dalam keadaan lengket.
- Posisi: Relatif
- Offset Asal: kiri atas
Pengaturan teks menu status lengket
Selanjutnya, kita akan mengubah warna teks menu menjadi sticky state.
- Warna teks menu: #000000
Pengaturan tarik-turun menu dalam status lengket
Dengan warna latar belakang menu seluler dalam pengaturan menu tarik-turun.
- Menu Seluler, Warna Latar: #ffffff
Warna ikon menu dalam status lengket
Juga ubah warna ikon dalam status lengket.
- Warna ikon keranjang: #000000
- Warna ikon pencarian: #000000
- Warna Ikon Menu Hamburger: #000000
Filter logo dalam keadaan lengket
Selanjutnya, hapus filter terbalik dari gambar logo dalam keadaan lengket.
- Inversi gambar: 0%
Jarak tombol dalam status lengket
Dan selesaikan tutorial dengan menghapus margin atas negatif dari tombol saat dalam kondisi lengket.
- Margin Atas: 0px
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Pada artikel ini, kami menunjukkan kepada Anda cara menggabungkan konstruktor dari tema Divi dengan opsi lengket baru. Secara khusus, kami menunjukkan kepada Anda cara beralih dari tajuk transparan ke tajuk lengket gaya berbeda saat menggulir.
Pendekatan ini memungkinkan Anda untuk menggabungkan desain halaman Anda dengan menu Anda sambil tetap mempertahankan header lengket yang bagus saat menggulir.
Jika Anda ingin tahu lebih banyak tentang Divi, jangan ragu untuk mengunjungi katalog kami tutorial Divi. Anda juga dapat berkonsultasi Cara membuat halaman Blog dengan modul Blog Divi
Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Tapi sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
