Apakah Anda ingin membuat bilah navigasi di Divi yang melekat dari bawah ke atas halaman?
Dalam tutorialnya Divi Hari ini kami akan menunjukkan kepada Anda langkah demi langkah cara membuat bilah navigasi lengket dari bawah ke atas di Divi.
Ini akan memungkinkan bilah navigasi pada awalnya tetap berada di bagian bawah halaman untuk tata letak paruh atas yang unik. Kemudian, setelah Anda menggulir bagian di atas lipatan halaman, bilah navigasi akan tetap berada di bagian atas halaman dan tetap berada di sana sepanjang halaman.
Anda bisa mengatakan bahwa halaman tersebut akan "mengambil alih" menu di bagian bawah layar dan membawa efek interaksi yang bagus ke menu utama Anda dan situs jaringan.
Ayo mulai!
penelitian
Untuk membantu Anda memvisualisasikan hasil yang ingin kami capai, mari kita lihat hasil akhirnya:
Unduh DIVI sekarang!!!
Mari kita mulai dengan membuat halaman baru dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Buat bilah navigasi bawah-ke-atas yang lengket di Divi
Bagian 1: Membuat Bagian dan Header Di Atas Garis Air
Untuk bagian pertama dari tutorial ini, kita akan membuat bagian dan tajuk di atas flip yang akan berfungsi sebagai bagian tajuk utama halaman kita. Bagian tersebut akan menjadi layar penuh di desktop untuk memastikan bahwa bagian tersebut memenuhi seluruh jendela tampilan.
Baca juga: Divi: Pilih antara kisi dan tata letak lebar penuh dari modul Portofolio Filterable
Tambahkan satu baris
Untuk memulai, tambahkan baris ke kolom ke bagian default.
Pengaturan bagian
Sebelum menambahkan modul, buka pengaturan bagian dan tambahkan latar belakang sebagai berikut:
- Warna Latar Belakang: #e9f9ff
- Gambar Latar Belakang: [tambahkan gambar]
Di bawah tab Mendesain, perbarui tinggi dan bantalan minimum.
- Tinggi Min: 100vh (Desktop), otomatis (Tablet dan Ponsel)
- Padding: 20vh (Atas dan Bawah)
Teks Tajuk
Untuk membuat teks header, tambahkan modul Teks baru ke baris.
Kemudian perbarui isi dengan tajuk H1 berikut:
<h1>Above the Fold</h1>
Pengaturan teks
Di bawah tab Mendesain dalam pengaturan modul Teks, perbarui gaya font header sebagai berikut:
- Menuju:
- Font: Ruby
- Berat Huruf: Semi Tebal
- Gaya: TT
- Perataan Teks: terpusat
- Warna Teks: #302ea7
- Ukuran: 130px (Desktop), 70px (Tablet), 40px (Ponsel)
- Spasi Huruf: 2px
- Tinggi Garis: 1,3 em
Bagian 2: Membuat bagian di bawah garis air
Untuk mendemonstrasikan fungsionalitas sticky navbar, kita perlu menambahkan bagian di bawah flip sehingga kita dapat memiliki ruang untuk menggulir.
Untuk membuat bagian, duplikat bagian di atas lipatan yang baru saja kita buat.
Perbarui latar belakang bagian duplikat.
- Warna Latar Belakang: #f4def1
Kemudian beri bagian tersebut tinggi minimum yang besar sehingga kita memiliki ruang untuk menggulir halaman ke bawah. Ini hanyalah bagian yang harus diselesaikan sebagai pengganti isi nyata satu halaman.
- Tinggi Min: 200vh
Kemudian perbarui isi modul Teks dengan mengganti kata "Di bawah" bahkan "Di atas".
Bagian 3: Buat bilah navigasi lengket
Untuk membuat bilah navigasi lengket dari bawah ke atas, langkah pertama kami adalah membuat bagian baru dengan satu baris ke satu kolom.
Menambahkan bagian dan baris baru
Pertama, mari tambahkan bagian reguler baru tepat di bawah bagian paro atas.
Selanjutnya, mari tambahkan baris satu kolom ke bagian tersebut.
Latar belakang bagian dan padding
Buka pengaturan bagian dan perbarui warna latar belakang.
- Warna Latar Belakang: #302ea7
Kemudian lepaskan bantalan atas dan bawah sehingga bilah navigasi memiliki ketinggian yang lebih rendah.
- Padding: 0px (Atas dan Bawah)
Tambahkan luapan yang terlihat
Untuk memastikan bahwa menu tarik-turun akan tetap terlihat, perbarui opsi visibilitas sebagai berikut:
- Luapan Horisontal: Terlihat
- Luapan Vertikal: Terlihat
Berikan bagian itu posisi absolut di ponsel
Menu tarik-turun seluler akan terbuka secara default di bawah ikon hamburger. Jika kami menyimpan bilah navigasi di bagian bawah, itu akan menyembunyikan menu tarik-turun jika pengguna mengkliknya.
Untuk pengalaman pengguna yang lebih baik, kami ingin bilah navigasi dimulai di bagian paling atas halaman pada layar tablet dan ponsel.
Untuk ini, berikan bagian itu posisi absolut pada tablet dan ponsel.
- Posisi: relatif (Desktop), Absolut (Tablet dan Telepon)
Tambahkan posisi lengket untuk desktop dan seluler
Untuk menambahkan posisi lengket ke bagian bilah navigasi, perbarui yang berikut ini:
- Posisi Tempel: Tempel ke Atas dan Bawah (Desktop), Tempelkan ke Atas (Tablet dan Ponsel)
Perbarui bantalan baris
Setelah bagian lengket selesai, buka pengaturan baris di dalam bagian dan perbarui padding sebagai berikut:
- Padding: 10px (Atas dan Bawah)
Buat menu navigasi
Dengan bagian dan garis di tempat, kami siap untuk membuat menu navigasi.
Mulailah dengan menambahkan modul Menu ke baris satu kolom.
konten menu
Perbarui konten menu sebagai berikut:
- pilih menu dari daftar drop-down
- tambahkan gambar logo
- hapus warna latar belakang default
Di bawah tab Mendesain, perbarui pengaturan teks dan ikon menu berikut:
- Warna Tautan Aktif: #fff
- Font Menu: Ruby
- Gaya Font Menu: TT
- Warna Teks: #fff
- Ukuran Teks Menu: 16px
- Perataan Teks: kanan
- Warna Garis Menu Dropdown: #e19dff
- Warna Teks Menu Seluler: #302ea7
- Warna Ikon Keranjang Belanja: #fff
- Warna Ikon Pencarian: #fff
- Warna Ikon Menu Hamburger: #fff
Menggunakan batas untuk mengimbangi posisi absolut bilah navigasi di ponsel
Karena bagian bilah navigasi memiliki posisi absolut di ponsel, bilah akan berada di atas (dan memotong) bagian atas halaman. Untuk memperbaikinya, kita perlu mengimbangi bagian atas menggunakan batas atas dengan ketinggian yang sama dengan bilah navigasi/bagian.
Periksa ketinggian bagian bilah navigasi di ponsel
Untuk menentukan ketinggian bilah navigasi di seluler, buka versi langsung halaman di jendela browser baru. Kemudian Anda dapat mengurangi lebar browser di bawah 980px untuk melihat menu seluler.
Anda juga dapat berkonsultasi: Divi: Cara membuat bilah navigasi lengket
Klik kanan pada bagian yang berisi menu dan pilih opsi periksa elemen di menu konteks peramban. Anda akan melihat sebuah kotak alat di bawah bagian yang menunjukkan dimensi (termasuk tinggi) bagian.
Untuk contoh ini, tinggi bagian navbar adalah 72 piksel.
Tambahkan offset batas atas ke bagian paruh atas
Sekarang kita telah menentukan tinggi bagian, buka pengaturan untuk bagian atas (di atas flip).
Di bawah tab Mendesain, tambahkan batas atas berikut di tablet dan ponsel:
- Lebar Batas Atas: 72 piksel (Tablet dan Ponsel)
- Warna Batas Atas: #302ea7
Karena border sama tingginya dengan section dengan posisi absolute, kamu tidak akan bisa melihat border karena hanya berfungsi untuk menekan section ke bawah agar tidak terpotong.
Hasil akhir
Temukan hasil akhirnya!
Unduh DIVI sekarang!!!
Kesimpulan
Membuat bilah navigasi lengket dari bawah ke atas dapat dengan mudah dilakukan menggunakan posisi bawaan Divi dan pilihan lengket.
Kuncinya adalah memberi bagian atas flip ketinggian 100vh, lalu tambahkan bagian navbar di bawah yang menempel di bagian bawah dan atas browser. Semoga ini membantu menambahkan yang lebih unik dan menarik ke paro atas Anda situs jaringan.
Bilah navigasi lengket ini berfungsi paling baik untuk desain satu halaman daripada templat keseluruhan. Yang mengatakan, Anda dapat dengan mudah memilih untuk menggunakan ini sebagai desain beranda Anda dan menggunakan tajuk global untuk halaman lainnya menggunakan Generator tema Divi .
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
