5 Hal Keren yang Dapat Anda Lakukan Di Divi dengan Anchor Links
Diterbitkan: 2018-10-21Tautan jangkar dapat meningkatkan navigasi dan membantu mengatur konten Anda, terutama di situs web dengan konten berdurasi panjang. Salah satu manfaat utama lainnya dari menggunakan tautan jangkar selain navigasi adalah fakta bahwa tautan tersebut luar biasa untuk SEO. Meskipun konsep menggunakan tautan jangkar sangat sederhana, mungkin sulit untuk mengetahui dari mana harus memulai. Ini sebenarnya salah satu hal pertama yang saya cari ketika saya mulai mengembangkan situs WordPress.
Artikel ini menunjukkan kepada Anda 5 hal keren yang dapat Anda lakukan di Divi dengan tautan jangkar. Untuk contoh-contoh ini, yang Anda butuhkan hanyalah Divi dan keinginan untuk belajar.
Ayo pergi!
Anda akan Mempelajari cara:
- Gulir ke dan Buka Toggle dengan Anchor Link di Divi
- Buat Menu Navigasi Satu Halaman
- Lompat ke Bagian Halaman dari Halaman Lain
- Gunakan Navigasi Divi Dot
- Tambahkan Tautan Jangkar ke Judul Anda
5 Hal Keren yang Dapat Anda Lakukan Di Divi dengan Anchor Links
Berlangganan Saluran Youtube Kami
Gulir ke dan Buka Toggle dengan Anchor Link di Divi
Beralih adalah salah satu elemen yang dapat meningkatkan pengalaman pengguna. Sebut saya malas (saya akan menggunakan kata efisien) tetapi semakin mudah bagi saya untuk mendapatkan informasi saya, semakin baik. Saya penggemar berat matikan untuk jenis konten tertentu.
Salah satu kegunaan terbaik yang pernah saya lihat untuk matikan adalah untuk halaman FAQ. Mereka bekerja sangat baik untuk mengungkapkan sedikit informasi yang ingin menjadi fokus pengguna. Ini hanya akan memakan waktu satu menit dan beberapa baris JavaScript untuk diselesaikan. Anda juga dapat menggunakan variasi metode ini untuk membuka tab atau akordeon dan meskipun ini mungkin tampak sulit, sebenarnya tidak terlalu rumit.
Pertama, buat halaman baru dan terapkan pembuat visual. Kemudian pilih opsi “Choose a Premade Layout”. Di popup Muat dari Perpustakaan, temukan tata letak halaman FAQ Akuntan dengan mengetikkan “faq” di bilah pencarian. Kemudian klik pada tata letak dan pada pratinjau yang muncul, klik tombol Gunakan Tata Letak Ini untuk menerapkannya ke halaman Anda.
Sekarang Anda siap untuk menambahkan fungsionalitas tautan jangkar Anda. Untuk contoh ini, saya akan menggunakan tombol di bagian header atas sebagai tautan jangkar sehingga, ketika diklik, halaman akan bergulir ke sakelar tertentu yang secara bersamaan akan terbuka secara otomatis.
Untuk melakukan ini, pertama buka pengaturan tombol dan tambahkan URL tautan berikut untuk tombol Anda:
URL Tautan Tombol: #toggle3
Saya memberi tautan jangkar ini id "toggle3" untuk membantu mengingat bahwa saya ingin menautkan ke sakelar ketiga di halaman. Nama id ini akan berkorelasi dengan ID CSS toggle yang akan kita tambahkan nanti agar button mengetahui toggle mana yang akan di scroll.
Selanjutnya tambahkan Kelas CSS unik ke modul tombol:
Kelas CSS: buka-toggle
Kemudian simpan pengaturan Anda.
Nama kelas ini membantu mengingatkan Anda tentang tindakan pembukaan sakelar saat mengklik tombol. Kami akan menggunakan kelas ini di jqeury khusus kami untuk mendapatkan fungsionalitas yang diinginkan dalam sedikit.
Selanjutnya gulir ke bawah halaman ke baris yang berisi dua kolom modul sakelar yang digunakan untuk FAQ. Buka pengaturan modul sakelar ketiga di kolom pertama. Ini adalah modul yang ingin kita gulir dan buka saat mengklik Tombol (atau tautan jangkar).
Di bawah Tab Lanjutan, tambahkan ID CSS berikut:
ID CSS: toggle3
Penting bahwa ini benar-benar berkorelasi dengan url tautan tombol yang digunakan sebelumnya. Satu-satunya perbedaan di sini adalah Anda harus meninggalkan "#".
Langkah terakhir melibatkan menambahkan beberapa kode khusus ke badan halaman kita. Untuk melakukan itu, navigasikan ke Opsi Tema Divi, dan buka Tab Integrasi lalu rekatkan yang berikut ini ke bagian tubuh seperti yang ditunjukkan pada GIF di bawah ini.
jQuery(function ($) {
//open toggle on button click
$('a.open-toggle').on('click', function(event){
$('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
});
});
Jangan lupa untuk membungkus kode dalam tag skrip yang tepat.
Sekarang Anda dapat menguji halaman Anda untuk melihat apakah itu berfungsi.
Untuk memahami sedikit tentang apa yang dilakukan kode ini. Mari kita lihat lebih dekat. Ini cuplikannya lagi:
jQuery(function ($) {
//open toggle on button click
$('a.open-toggle').on('click', function(event){
$('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
});
});
Dalam kode, pemilih "a.open-toggle" mengacu pada tombol dengan kelas khusus kami. Selector “#toggle3.et_pb_toggle_2 .et_pb_toggle_title” mengacu pada judul toggle dengan id “toggle3” dan kelas “et_pb_toggle_2”.
Kelas “et_pb_toggle_2” sebenarnya adalah kelas yang terkait dengan sakelar ketiga. Itu karena Divi memberikan toggle pertama kelas “et-pb_toggle_0”, toggle kedua “et-pb_toggle_1”, dan seterusnya.
Jadi jika Anda ingin tahu apa kelas untuk sakelar tertentu di halaman Anda, Anda cukup menghitung dari 0 dimulai dengan sakelar pertama di halaman dan terus turun. Atau Anda selalu dapat memeriksa kode html untuk menemukan kelas seperti itu.
Ini penting untuk diketahui sehingga Anda dapat memperbarui kode Anda sesuai dengan itu. Misalnya, jika saya ingin tombol saya membuka sakelar kedua di halaman, saya akan mengganti “#toggle3.et_pb_toggle_2 .et_pb_toggle_title” dengan “#toggle3.et_pb_toggle_1 .et_pb_toggle_title”.
Cuplikan kode ini adalah variasi dari konsep berikut. Saya mencoba membuatnya sesederhana mungkin.
Teknik keren ini juga bisa digunakan untuk tab dan akordeon. Caranya adalah dengan mengidentifikasi kelas css yang tepat untuk item atau tab akordeon sehingga Anda dapat menggunakannya dalam kode.
Buat Menu Navigasi Satu Halaman
Desain menu semacam ini populer untuk situs satu halaman. Akan berguna untuk membuat tautan di menu untuk melompat dari bagian ke bagian di halaman Anda. Ini sangat membantu jika Anda membangun situs satu halaman, atau halaman arahan. Anda dapat melihat dokumentasi tentang cara membuat situs web satu halaman dengan Divi untuk info lebih lanjut tentang proses ini.
Berikut adalah ikhtisar singkat tentang cara melakukan ini.
Ini akan bekerja untuk semua tata letak yang dibuat sebelumnya, tetapi untuk contoh ini, saya akan menggunakan Tata Letak Halaman Beranda Freelancer Web. Buat halaman baru, terapkan visual builder, pilih “Choose Premade Layout”, lalu terapkan Freelancer Home Page Layout ke halaman Anda.
Sekarang Anda perlu menambahkan ID CSS ke setiap bagian yang ingin Anda tautkan (atau gulir). Temukan bagian berjudul "Layanan Saya". Buka pengaturan bagian, klik tab lanjutan, dan tambahkan ID CSS berikut:
ID CSS: layanan
Selanjutnya, temukan bagian "pekerjaan unggulan" dan berikan bagian itu ID CSS sebagai berikut:
ID CSS: bekerja
Dan tambahkan ID CSS berikut ke bagian "Tentang Kami" juga:
ID CSS: tentang
Dengan ketiga bagian ini diatur dengan benar dengan ID CSS uniknya, kita dapat mengetahui membuat tautan jangkar menu kita.
Dari Dasbor, navigasikan ke Appearance > Menus dan buat Menu Utama baru . Kemudian Buat tiga tautan khusus dengan URL dan Teks Tautan berikut:
Tautan Khusus 1
URL: #layanan
Teks Tautan: Layanan
Tautan Khusus 2
URL: #kerja
Teks Tautan: Kerja
Tautan Khusus 3
URL: #tentang
Teks Tautan: Tentang
Jangan lupa untuk memilih setel lokasi tampilan Anda ke Menu Utama. Kemudian simpan menu Anda.
Sekarang ketika Anda mengunjungi halaman Anda, Anda dapat mencobanya. Anda mungkin memperhatikan bahwa ada pengguliran yang mulus. Ini karena tema Divi secara otomatis menambahkan pengguliran yang mulus – fitur ini ditambahkan di Divi versi 2.4.
Untuk inspirasi lebih lanjut tentang membangun situs web gaya satu halaman pembunuh, lihat posting ini:
- Cara Membangun Bilah Sisi Tetap yang Responsif Dengan Tautan Jangkar
- Cara Membuat Bagian Layar Penuh dengan Tautan Gulir Atas dan Bawah dengan Divi
- Cara Membuat Tautan Aktif di Gulir untuk Situs Web Divi Satu Halaman
Lompat ke Bagian Halaman dari Halaman Lain
Kita dapat menggunakan contoh dari atas untuk menunjukkan ini. Karena kami menambahkan ID CSS ke tiga bagian pada halaman (layanan, pekerjaan, tentang), kami tidak hanya dapat melompat ke bagian tersebut menggunakan tautan jangkar menu kami, tetapi kami juga dapat melompat ke bagian tersebut dari halaman yang sama sekali berbeda.
Yang perlu Anda lakukan adalah menggunakan URL tautan jangkar saat membuat tautan di halaman lain. Jika Anda ingin meletakkan tautan ke bagian layanan dengan ID "layanan", itu akan terlihat seperti, www.domainanda.com/page/#services .
Berikut adalah contoh bagaimana halaman akan memuat dan menggulir ke bagian "Layanan Saya" saat menautkan ke bagian tersebut dari halaman lain.
Ini berfungsi baik untuk banyak ajakan bertindak yang berbeda (yaitu pelajari lebih lanjut, dapatkan Divi, pilih saya!, dll.) yang mungkin ingin Anda lompati dari halaman berbeda di situs Anda.
Gunakan Navigasi Divi Dot
Secara teknis ini adalah tautan jangkar bawaan. Anda tidak perlu menambahkan id bagian CSS Anda sendiri. Fitur Dot Navigation secara otomatis membuat tautan jangkar dari bagian Anda. Untuk mengaktifkan navigasi titik untuk halaman Anda, cukup atur opsi Navigasi Titik ke "ON" di bawah Pengaturan Halaman Divi di kanan atas layar saat mengedit halaman Anda. Setelah Anda mengaktifkan Navigasi Dot, Divi secara otomatis menambahkan menu transparan di sisi halaman Anda. Setiap titik bergulir ke bagian di seluruh halaman Anda saat diklik.
Untuk info lebih lanjut, ada posting bagus tentang cara menambahkan label ke navigasi titik Anda.
Tambahkan Tautan Jangkar ke Judul Anda
Menambahkan tautan jangkar ke judul Anda selalu merupakan ide yang bagus. Ini adalah cara yang bagus untuk mengindeks halaman yang lebih panjang dengan banyak konten, memungkinkan Anda untuk dengan mudah menavigasi ke setiap judul dalam halaman yang sama atau untuk membuat tautan ke judul ini dari halaman lain di situs web Anda. Ini juga membantu mesin pencari merayapi situs Anda.
Untuk menambahkan ID CSS ke header Anda menggunakan Divi Builder, buka modul yang berisi teks heading Anda. Pastikan Anda membuka tab teks. Temukan tag header (h1, h2, h3, dll...) lalu masukkan id di dalam tanda kurung dari tag header awal. Berikut adalah contoh heading h3 dengan id “webdesign”:
<h3 id="webdesign">Website Design</h3>
Sekarang saya dapat menautkan ke tajuk ini dari mana saja selama saya menggunakan URL tautan jangkar yang benar. Yang untuk contoh ini akan terlihat seperti ini:
www.domainanda.com/page/#webdesign
Ini juga akan berguna untuk halaman atau posting yang tidak menggunakan pembuat Divi. Untuk menambahkan Tautan Jangkar ke judul Anda untuk halaman atau posting ini, buka tab Teks di editor teks WordPress. Cukup cari judul pilihan Anda dan tambahkan id di dalam tag heading seperti yang ditunjukkan di bawah ini.
Inilah yang saya lakukan untuk posting ini. Tautan bagian di bagian atas posting ini berfungsi sebagai daftar isi yang bagus yang menautkan ke berbagai judul pada posting.
Hal-hal yang cukup keren.
Membungkus
Tautan jangkar memiliki beberapa kegunaan praktis yang hebat, tetapi jangan terlalu tergila-gila dengannya karena Anda harus selalu mempertimbangkan audiens dan tujuan Anda terlebih dahulu. Ingat, desain yang baik adalah tentang kegunaan dan fungsi, jadi, dalam beberapa kasus, tautan jangkar bisa sangat membantu. Tetapi di tempat lain, itu hanya berarti pengguna bolak-balik melewati bagian paralaks dan akhirnya tersesat. Mudah-mudahan, Anda bisa mendapatkan beberapa tips berguna dari posting ini.
Apakah Anda memiliki tip atau pertanyaan tentang tautan jangkar? Beri tahu kami tentang pengalaman Anda di bagian komentar di bawah.