LUXEE HELPS
Menu Diklik Tapi Tidak Melompat ke Lokasi? Ini Rahasia Setup Anchor Link Halus Elementor!
📌 Apa itu Anchor Link di Undangan Digital?
Anchor Link (tautan jangkar) adalah tautan navigasi internal yang berfungsi untuk mengarahkan atau menggulirkan (scroll) layar pengunjung secara otomatis ke seksi tertentu di dalam halaman web yang sama. Fitur ini sangat krusial pada undangan digital satu halaman (one-page website) untuk mempermudah tamu melompat langsung ke bagian Mempelai, Acara, Galeri, atau RSVP.
Bayangkan undangan digital pengantin memiliki 6 seksi panjang. Di bagian bawah cover, terdapat tombol bertuliskan "Lihat Lokasi". Jika Anda mengarahkan tombol tersebut dengan link penuh yang memuat ulang (reload) halaman, tamu harus menunggu loading dari awal lagi. Menggunakan Anchor Link membuat halaman bergulir halus (smooth scroll) langsung ke koordinat seksi lokasi hanya dalam waktu kurang dari satu detik.
🛠️ Langkah Membuat Anchor Link di Elementor
Langkah 1: Menentukan CSS ID pada Seksi Target
Buka editor Elementor Anda, pilih seksi target yang ingin dituju (misalnya seksi RSVP). Masuk ke tab **Advanced > Layout**, temukan kolom bernama **CSS ID**. Tulis nama ID kustom yang unik dan mudah diingat menggunakan huruf kecil tanpa spasi (contoh: konfirmasi-hadir). Penting: JANGAN gunakan tanda pagar (#) di kolom ini.
Langkah 2: Menghubungkan Tombol Pemicu
Klik tombol atau menu navigasi yang akan menjadi pemantik lompatan. Di bagian pengaturan link sebelah kiri, tulis tanda pagar # diikuti oleh nama CSS ID target yang telah Anda buat di Langkah 1. Contoh: #konfirmasi-hadir.
Langkah 3: Pengujian di Tab Samaran (Incognito)
Simpan perubahan halaman (Update) lalu buka pratinjau halaman di browser Anda. Klik tombol pemicu untuk memastikan layar bergeser secara halus ke seksi target tanpa terjadi error lompatan terpotong.
Langkah 4: Menonton Video Tutorial Detail
Tonton video berikut untuk mempraktikkan proses konfigurasi anchor link, trik mengatasi lompatan yang tertutup menu sticky, serta penulisan nama ID yang benar:
Hindari penulisan CSS ID menggunakan huruf kapital di tengah kata (CamelCase) atau menyertakan spasi (misalnya: #Acara Resepsi). Format penulisan terbaik yang direkomendasikan adalah menggunakan huruf kecil semua yang dipisahkan oleh tanda hubung minus (kebab-case, contoh: acara-resepsi) guna mencegah kegagalan deteksi di beberapa jenis browser ponsel.
🔗 Modul Panduan Terkait
Langkah berikutnya adalah cara memodifikasi navigasi bar menu melayang di ponsel:
💡 Pertanyaan Sering Ditanya (FAQ)
Hal ini terjadi karena tinggi bar menu melayang Anda memakan ruang layar. Solusinya, berikan jarak margin-top/padding-top tambahan pada seksi target di Elementor, atau gunakan pengaturan offset scroll pada setelan web Elementor Anda.
Bisa. Tuliskan link lengkap tujuan diakhiri nama ID target. Contoh: https://domainanda.com/undangan/#acara-resepsi. Browser secara otomatis akan memuat halaman tersebut lalu menggulirnya ke ID yang dituju.
Tidak wajib. Menggunakan fitur bawaan **CSS ID** pada kolom pengaturan Advanced seksi/kolom jauh lebih bersih, hemat DOM element, dan direkomendasikan untuk menjaga performa loading website.