Cara Membuat Akordeon yang Dapat Diklik Menggunakan Judul Halaman Lengket di Divi
Diterbitkan: 2020-09-03Opsi posisi lengket baru Divi membuka pintu untuk banyak kemungkinan desain baru dan menarik. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menggabungkan opsi posisi lengket Divi dengan tautan jangkar gulir yang mulus untuk membuat cara seperti akordeon untuk mengindeks dan menavigasi halaman Anda. Membangunnya sangat mudah dengan opsi bawaan Divi sehingga tidak perlu CSS tambahan atau kode lainnya. Setelah selesai, Anda akan memiliki cara unik untuk mengatur halaman Anda dan meningkatkan pengalaman pengguna di desktop dan seluler.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Di sini Anda dapat melihat judul halaman lengket menempel di bagian atas dan bawah jendela browser dan menumpuk di atas satu sama lain seperti akordeon.
Di sini Anda dapat melihat bahwa mengklik salah satu judul lengket akan melompat (menggunakan tautan jangkar pengguliran halus) ke bagian halaman itu juga seperti akordeon.
Berikut adalah fungsi di ponsel juga.
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Membuat Baris Lengket
Sebagai permulaan, mari kita buat baris lengket kita. Untuk melakukannya, tambahkan baris satu kolom ke bagian default.
Buka pengaturan baris. Di bawah tab Advanced, perbarui posisi sticky sebagai berikut:
- Posisi Lengket: Tempel ke Atas dan Bawah
Ini akan menyebabkan baris menempel di bagian atas jendela browser saat pengguna menggulir ke bawah dan kemudian menempel di bagian bawah jendela browser saat pengguna menggulir ke atas.
Menata Baris Lengket
Sekarang posisi lengket sudah ada, kita bisa mulai menata baris menggunakan opsi gaya lengket bawaan yang memungkinkan Anda memberi elemen gaya tertentu setiap kali posisi lengket berlaku (atau macet). Untuk baris, kami ingin latar belakang berubah menjadi warna gelap setiap kali berada dalam posisi macet. Untuk melakukannya, buka pengaturan baris dan perbarui yang berikut ini:
- Warna Latar Belakang (desktop): #ffffff
- Warna Latar Belakang (lengket): #051923
Di bawah tab desain, perbarui yang berikut ini:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar (tablet dan ponsel): 100%
- Padding: 0px atas, 0px bawah
Selanjutnya, kita ingin memberikan batas bawah pada baris untuk dijadikan sebagai garis pemisah antara heading dan konten di bawahnya. Dan, setelah baris berada di posisi lengket, kami ingin menunjukkan batas kiri sebagai gantinya.
Di bawah sakelar opsi perbatasan, perbarui yang berikut ini:
- Warna Perbatasan: #6eeb83
- Lebar Batas Bawah (desktop): 8px
- Lebar Batas Bawah (lengket): 0px
- Lebar Batas Kiri (desktop): 0px
- Lebar Batas Kiri (lengket): 8px
Membuat Teks Judul Lengket
Untuk membuat teks judul halaman, tambahkan modul teks baru ke baris.
Kemudian rekatkan HTML berikut di konten isi.
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
Dan perbarui warna latar belakang saat melayang juga ...
- Warna Latar Belakang (arahkan kursor): rgba(255,255,255,0.2)
Ini akan membuatnya lebih jelas bahwa judul dapat diklik oleh pengguna.
Menata Teks Judul Lengket
Di bawah tab desain, perbarui yang berikut ini:
- Judul 2 Font: Montserrat
- Judul 2 Perataan Teks: Kiri
- Judul 2 Warna Teks (desktop): default (atau hitam)
- Judul 2 Warna Teks (lengket): #ffffff
- Judul 2 Ukuran Teks: 80px (desktop), 22px (lengket), 28px (ponsel)
- Pos 2 Tinggi Baris: 1.3em (desktop), 1em (lengket)
Kemudian perbarui padding sebagai berikut:
- Padding (desktop): 15px atas, 15px bawah
- Padding (lengket): 10px atas, 0px bawah, 20px kiri
- Padding (tablet dan ponsel): 15px atas, 15px bawah, 15px kiri, 15px kanan
Membuat Konten Halaman Mock
Setelah baris lengket berada di tempatnya, kita dapat menambahkan baris lain yang akan berisi beberapa konten halaman tiruan di bawah judul. Untuk melakukan ini, buat baris satu kolom baru di bawah baris lengket.
Kemudian tambahkan modul teks baru ke baris dan tempel di beberapa konten tiruan.
Menduplikasi Bagian yang Diperlukan untuk Judul dan Konten Halaman yang Lebih Melekat
Pada titik ini, Anda memiliki desain dasar untuk membuat bagian halaman tambahan dengan judul tempel hanya dengan menduplikasi bagian tersebut.
Bagian Duplikat
Untuk membuat bagian lain, duplikat bagian yang ada yang berisi baris/tajuk tempel dan baris konten tiruan. Ini akan mempercepat proses pengembangan pembuatan bagian halaman berikutnya.
Perbarui Konten Teks dan Warna Perbatasan Baris
Di bagian duplikat, perbarui teks di dalam modul teks lalu perbarui warna batas di bawah pengaturan baris.
Ulangi sesuai kebutuhan
Lanjutkan untuk menduplikasi bagian dan perbarui konten teks dan warna batas baris sesuai kebutuhan. Untuk contoh ini, kita akan menduplikasi bagian dua kali lagi untuk memberi kita total empat judul halaman lengket yang akan membentuk akordeon.
Menambahkan Tautan Jangkar ke Judul Halaman Lengket
Saat ini, fungsionalitas akan memungkinkan pengguna untuk menggulir ke bawah halaman dan membuat judul menempel di bagian atas dan bawah seperti akordeon. Sekarang kita ingin membuat heading dapat diklik sehingga, ketika pengguna mengklik salah satu heading yang melekat, pengguna akan dibawa ke bagian halaman tersebut. Ini dilakukan dengan menggunakan tautan jangkar.
Untuk menambahkan tautan jangkar, pertama-tama kita perlu menambahkan ID CSS ke bagian yang ingin kita lompati tautannya.
Tambahkan ID CSS Bagian 1
Buka pengaturan untuk bagian tersebut dan tambahkan ID CSS berikut:
- ID CSS: satu
Kemudian buka pengaturan untuk baris lengket dan tambahkan URL tautan baris berikut:
- URL Tautan Baris: #one
Sekarang ketika pengguna mengklik baris/judul, halaman akan melompat ke bagian pertama ini.
Tambahkan ID CSS Bagian 2
Selanjutnya, kita perlu menambahkan tautan jangkar untuk heading kedua.
Buka pengaturan bagian kedua dan tambahkan ID CSS berikut:
- ID CSS: dua
Tambahkan URL Tautan Baris Lengket Bagian 1
Kemudian buka pengaturan untuk baris lengket di dalam bagian kedua dan tambahkan URL tautan baris:
- URL Tautan Baris: #dua
Tambahkan ID CSS Bagian 3
Selanjutnya, kita perlu menambahkan tautan jangkar untuk heading ketiga.
Buka pengaturan bagian ketiga dan tambahkan ID CSS berikut:
- ID CSS: tiga
Tambahkan URL Tautan Baris Lengket Bagian 1
Kemudian buka pengaturan untuk baris lengket di dalam bagian ketiga dan tambahkan URL tautan baris:
- URL Tautan Baris: #three
Tambahkan ID CSS Bagian 4
Terakhir, kita perlu menambahkan tautan jangkar untuk heading keempat.
Buka pengaturan bagian keempat dan tambahkan ID CSS berikut:
- ID CSS: empat
Tambahkan URL Tautan Baris Lengket Bagian 1
Kemudian buka pengaturan untuk baris lengket di dalam bagian keempat dan tambahkan URL tautan baris:
- URL Tautan Baris: #four
Hasil Akhir
Di sini Anda dapat melihat judul halaman lengket menempel di bagian atas dan bawah jendela browser dan menumpuk di atas satu sama lain seperti akordeon.
Di sini Anda dapat melihat bahwa mengklik salah satu judul lengket akan melompat (menggunakan tautan jangkar pengguliran halus) ke bagian halaman itu juga seperti akordeon.
Berikut adalah fungsi di ponsel juga.
Pikiran Akhir
Desain ini menggunakan opsi posisi lengket dengan cara yang unik. Judul halaman tidak hanya tetap terlihat saat pengguna menggulir, tetapi setiap judul juga dapat diklik, membawa pengguna ke bagian tertentu menggunakan tautan jangkar. Hasilnya seperti akordeon untuk seluruh halaman Anda. Desain ini pasti akan berguna untuk mengindeks konten bentuk panjang atau untuk membuat satu halaman yang ramah pengguna.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!