[Ad_1]
Mari kita mulai!
penelitian
Untuk membantu Anda memvisualisasikan hasil yang ingin kita capai, mari kita lihat hasil akhirnya:
Unduh tata letaknya GRATIS
Untuk mendapatkan desain dalam tutorial ini, pertama-tama Anda harus mengunduhnya menggunakan tombol di bawah ini. Untuk mengakses unduhan, Anda harus berlangganan milis Divi Daily kami menggunakan bentuk di bawah. Sebagai pelanggan baru, Anda akan menerima lebih banyak manfaat Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah dan klik unduh. Anda tidak akan "berlangganan kembali" atau menerima email tambahan.
Untuk mengimpor tata letak bagian ke perpustakaan Divi Anda, buka perpustakaan Divi.
Klik pada tombol Impor.
Di jendela pop-up portabilitas, pilih tab impor dan pilih file yang akan diunduh dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung ke tutorialnya ya?
Apa yang Anda butuhkan untuk memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika Anda belum melakukannya, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di front-end (pembuat visual).
- Pilih opsi "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 header di atas garis air yang akan berfungsi sebagai bagian header utama halaman kita. Bagian tersebut akan menjadi layar penuh di desktop untuk memastikan bahwa bagian tersebut memenuhi seluruh jendela.
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]
Pada tab Desain, perbarui tinggi dan bantalan minimum.
- Tinggi minimum: 100 vh (komputer desktop), otomatis (tablet dan telepon)
- Padding: 20vh atas, 20vh bawah
Teks Tajuk
Untuk membuat teks header, tambahkan modul teks baru ke baris.
Kemudian perbarui konten dengan header H1 berikut:
<h1>Above the Fold</h1>
Pengaturan teks
Pada tab Desain Pengaturan Teks, perbarui Gaya Font Judul sebagai berikut:
- Font judul: Rubik
- Berat Font Header: Semi Tebal
- Gaya Font Tajuk TT
- Perataan Teks Tajuk: Tengah
- Warna Teks Judul: # 302ea7
- Ukuran teks judul: 130px (desktop), 70px (tablet), 40px (ponsel)
- Spasi Huruf Header: 2px
- Tinggi Garis Pos: 1,3 em
Bagian 2: Membuat bagian di bawah flip
Untuk mendemonstrasikan fungsionalitas bilah navigasi lengket, kita perlu menambahkan bagian di bawah flip sehingga kita dapat memiliki ruang untuk menggulir.
Untuk membuat bagian, duplikat bagian di atas garis air yang baru saja kita buat.
Perbarui latar belakang bagian duplikat.
- Warna latar belakang: # f4def1
Kemudian beri bagian tinggi minimum yang besar sehingga kita memiliki ruang untuk menggulir halaman. Ini hanyalah bagian yang harus diisi alih-alih konten sebenarnya pada halaman.
Kemudian perbarui isi modul teks dengan mengganti kata “Di Bawah” dengan “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.
Tambahkan bagian baru dan baris baru
Tambahkan bagian reguler baru tepat di bawah bagian di atas garis air.
Kemudian tambahkan baris ke kolom ke bagian.
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.
- Isi: 0px atas, 0px bawah
Tambahkan luapan yang terlihat
Untuk memastikan bahwa menu tarik-turun akan tetap terlihat, perbarui opsi visibilitas sebagai berikut:
- Luapan horizontal: Terlihat
- Luapan vertikal: terlihat
Berikan bagian itu posisi absolut di ponsel
Menu tarik-turun seluler akan terbuka secara default di bawah ikon hamburger. Jika kita menyimpan bilah navigasi di bagian bawah, itu akan menyembunyikan menu drop-down jika pengguna mengkliknya di posisi bawah. Untuk pengalaman pengguna yang lebih baik, kami ingin bilah navigasi dimulai di bagian paling atas halaman pada layar tablet dan ponsel.
Untuk melakukan ini, tetapkan bagian posisi absolut pada tablet dan ponsel.
- Posisi: Relatif (komputer desktop), Absolute (tablet dan ponsel)
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 isian sebagai berikut:
- Padding: 10 piksel di bagian atas, 10 piksel di bagian bawah
Buat menu navigasi
Dengan bagian dan baris di tempat, kami siap untuk membuat menu navigasi.
Mulailah dengan menambahkan modul menu ke baris ke kolom.
konten menu
Perbarui konten menu sebagai berikut:
- pilih menu dari daftar drop-down
- tambahkan gambar logo (saya menggunakan gambar 122px kali 52px)
- hapus warna latar belakang default
Pada tab Desain, perbarui pengaturan teks dan ikon menu berikut ini:
- Warna tautan aktif: #fff
- Font menu: Rubik
- Gaya Font Menu: TT
- Warna teks menu: #fff
- Ukuran teks menu: 16px
- Perataan teks: kanan
- Warna garis menu tarik-turun: # 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 mengatasi masalah ini, 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. Klik kanan pada bagian yang berisi menu dan pilih opsi Inspect Item dari menu konteks browser. Anda akan melihat kotak alat di bawah bagian yang menunjukkan dimensi (termasuk tinggi) bagian tersebut. Untuk contoh ini, tinggi bagian bilah navigasi 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 Desain, 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, Anda tidak akan bisa melihat border karena hanya berfungsi untuk menekan section ke bawah agar tidak terpotong.
Hasil akhir
Temukan hasil akhirnya!
final pikiran
Membuat navbar lengket bawah-ke-atas dapat dengan mudah dicapai menggunakan posisi bawaan Divi dan opsi lengket. Kuncinya adalah memberikan bagian atas flip ketinggian 100vh, lalu tambahkan bagian navbar di bawah yang menempel di bagian bawah dan atas navigator. Semoga ini akan membantu menambahkan lebih unik dan menarik di atas permukaan air untuk Anda situs jaringan.
Navbar lengket ini berfungsi paling baik untuk desain satu halaman daripada templat keseluruhan. Karena itu, Anda dapat dengan mudah memilih untuk menggunakan ini sebagai desain beranda dan menggunakan tajuk global untuk halaman lainnya menggunakan pembuat. Tema Divi.
Saya menunggu kabar dari Anda di komentar.
Untuk kesehatanmu!
[Ad_2]
