Apakah Anda ingin membuat bilah navigasi antar postingan yang melekat di Divi?
Bilah navigasi posting yang lengket adalah cara yang efektif untuk meningkatkan pengalaman pengguna apa pun situs jaringan dari blog. Selain navigasi utama situs Anda, tautan navigasi postingan memungkinkan pengguna dengan mudah melompat ke postingan sebelumnya atau postingan berikutnya blog Anda. Dan, jika Anda menambahkan tautan navigasi postingan ini ke bilah tempel, tautan ini tetap terlihat dan lebih mudah diakses.
Dalam tutorial ini, kita akan membuat navbar di antara post sticky in Divi. Untuk melakukan ini, kami akan menggunakan opsi bawaan Divi untuk mengubah baris menjadi bilah tempel. Selanjutnya, kita akan menggunakan modul navigasi artikel untuk mendesain link “artikel sebelumnya” dan “artikel berikutnya”.
Selain itu, kami akan menambahkan judul posting sebagai konten dinamis di tengah bilah yang mengingatkan pengguna tentang posting yang sedang mereka lihat, memberikan elemen "masa lalu, sekarang, dan masa depan" yang bagus pada navbar. .
Ayo mulai!
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Apa yang Anda butuhkan untuk memulai
Meskipun Anda dapat menambahkan bilah navigasi posting lengket ini ke tata letak atau templat posting blog apa pun di Divi, kami akan menggunakan templat posting blog yang sudah jadi untuk mempercepat proses dan memulai desain dengan cepat.
Impor template posting blog "Meal Kit" ke Divi Theme Builder
Untuk memulai, unduh templat posting blog gratis untuk Paket Tata Letak Meal Kit Divi . Untuk melakukannya, buka posting blog .
Kemudian masukkan email Anda untuk mengunduh file zip.
Setelah itu, unzip file tersebut sehingga siap untuk diimpor.
Untuk mengimpor file ke editor tema, ikuti langkah-langkah berikut:
- Buka Divi > Pembuat Tema.
- Klik pada ikon portabilitas.
- Di jendela pop-up Portabilitas, pilih tab impor.
- Pilih file unzip yang diunduh sebelumnya untuk diimpor.
- Klik « Impor Pembuat Tema Divi template ».
- Klik ikon edit untuk mengedit template yang diimpor.
Buat Bilah Navigasi Lengket di Divi
Bagian 1: Membuat garis lengket
Untuk membuat sticky navbar, kita akan menggunakan baris tiga kolom sebagai sticky container untuk link navigasi kita antara post dan post title.
Baca juga: Divi: Cara menggunakan opsi "Gradient Repeat" untuk membuat pola latar belakang khusus
Di bagian kedua tata letak template, tambahkan baris baru di bawah baris yang berisi konten postingan.
Pengaturan saluran
Buka pengaturan baris.
Pertama, kita perlu menambahkan posisi sticky ke garis sehingga kita dapat memperbarui opsi desain lain dalam status sticky.
Di bawah tab Advanced, perbarui berikut ini:
- Posisi Lengket: Tempel ke Atas dan Bawah
- Batas Lengket Atas: Bagian
- Batas Lengket Bawah: Area Tubuh
Untuk memastikan kolom tidak menumpuk di seluler, tambahkan CSS khusus berikut ke Elemen Utama :
display:flex;
flex-wrap:nowrap;
align-items:center;
Di bawah tab Konten, tambahkan warna latar belakang putih ke garis dalam status lengket sebagai berikut:
- latar belakang: tidak ada
- Bakground: #ffffff (Lengket)
Di bawah pengaturan Mendesain, perbarui berikut ini:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 100%
- Padding: 0px (Atas dan Bawah)
Sembunyikan kolom tengah di tablet dan ponsel
Untuk menyembunyikan kolom di ponsel, buka pengaturan untuk kolom 2 (kolom tengah) dan perbarui opsi visibilitas sebagai berikut:
- Nonaktifkan di: Ponsel, Tablet
Bagian 2: Membuat tautan navigasi artikel
Untuk membuka lebih banyak fleksibilitas desain untuk navigasi posting, kami akan menggunakan dua modul Navigasi Posting terpisah. Di kolom sebelah kiri, kita akan menambahkan modul Navigasi Posting yang hanya menampilkan link dari artikel sebelumnya. Di kolom kanan, kita akan menambahkan modul Navigasi Posting yang hanya menampilkan link posting berikutnya.
Tautan ke posting sebelumnya
Di kolom 1, tambahkan modul Navigasi Posting baru.
Buka pengaturan modul, perbarui tab opsi Konten sebagai berikut:
- Tautan Sebelumnya (Teks): Posting Sebelumnya
- Tampilkan Tautan Posting Sebelumnya: YA
- Tampilkan Tautan Posting Berikutnya: TIDAK
- Latar belakang: #000000
Di bawah tab Mendesain, perbarui berikut ini:
- Font Tautan: Kumbh Sans
- Berat Font Tautan: Tebal
- Gaya Huruf: TT
- Warna Teks Tautan: #ffffff
- Ukuran Teks Tautan: 26px (Desktop), 16px (Tablet dan Ponsel)
- Tinggi Garis: 1,3 em
- Padding: 0,9em (Atas), 0,7em (Bawah), 2em (Kiri dan Kanan)
Karena kami menyembunyikan kolom tengah di seluler, dua kolom tersisa yang akan berisi tautan navigasi sekarang masing-masing dapat menempati 50% dari lebar browser di tablet dan ponsel.
Lihat juga: Divi: Cara mengubah gaya beberapa elemen saat melayang atau setelah klik
Untuk memastikan bahwa tautan navigasi mencakup 50% area pandang, tambahkan CSS khusus berikut ke kotak CSS Tautan untuk tampilan tablet:
display:block;
width:50vw;
text-align:center;
float:none;
Pembuatan tautan Postingan Berikutnya
Untuk membuat link postingan selanjutnya, copy modul Post Navigation (dengan link postingan sebelumnya) yang baru saja kita rancang dan paste ke kolom 3 (kolom kanan).
Selanjutnya, buka pengaturan navigasi posting untuk modul duplikat di kolom kanan dan perbarui opsi tab konten berikut:
- Tautan Berikutnya: Posting Berikutnya
- Tampilkan Tautan Posting Sebelumnya: TIDAK
- Tampilkan Tautan Postingan Berikutnya: YA
- Latar belakang: #ffb100
Di bawah tab Mendesain, perbarui warna teks tautan:
- Warna Teks Tautan: #000000
Bagian 3: Membuat Judul Postingan Dinamis
Dengan kedua tautan navigasi di tempat, kami siap untuk menambahkan judul posting sebagai konten dinamis di kolom tengah.
Idenya adalah untuk memberi pengguna pengingat yang bagus tentang pesan yang mereka baca dengan kemampuan untuk menavigasi ke pesan sebelumnya dan pesan berikutnya.
Di kolom tengah, tambahkan modul Teks baru.
Di bawah tab Konten, klik pada ikon “Gunakan Konten Dinamis” di area tubuh, lalu pilih Judul Postingan/Arsip.
Setelah judul posting dinamis telah ditambahkan, buka pengaturan Judul Postingan/Arsip dan perbarui konten sebelumnya:
- Sebelum membaca
Kemudian simpan perubahannya.
Di bawah tab Mendesain, perbarui berikut ini:
- Font Teks: Kumbh Sans
- Berat Font Teks: Tebal
- Gaya Huruf: TT
- Warna Teks Teks: transparan (Desktop), #000000 (Sticky)
- Ukuran Teks: 16px
- Spasi Huruf: 1px
- Tinggi Garis: 1,3 em
- Perataan Teks: terpusat
- Lebar Maks: 96%
- Modul penyelarasan: tengah
- Padding: 0,5em (Atas dan Bawah)
Hasil akhir
Unduh DIVI sekarang!!!
Kesimpulan
Dalam tutorial ini, kami menunjukkan betapa mudahnya membuat bilah navigasi posting lengket untuk template posting blog di Divi.
Fungsionalitas stick bar/line juga dapat dengan mudah disesuaikan dengan opsi bawaan Divi. Misalnya, Anda dapat membatasi status lekat ke bagian atau memilih untuk membuatnya lekat hanya di bagian atas atau bawah area pandang browser.
Semoga bermanfaat untuk blog anda selanjutnya. 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.
...
