Menu Dock adalah fitur siap pakai di plugin WeddingPress (WDP Pro & WDP Lite) berupa menu melayang ala aplikasi di tepi layar. Setiap item berisi ikon dan label, misalnya Home, Acara, Galeri, dan Ucapan. Tamu mengetuk item untuk melompat ke bagian itu, dan item bagian yang sedang dibaca ikut menyala.

Fitur ini hanya ada di WeddingPress v4.

Masalah yang diselesaikan

Undangan digital biasanya panjang. Tamu yang ingin langsung melihat lokasi acara atau mengirim ucapan harus menggulir jauh. Menu Dock memberi jalan pintas ke setiap bagian.

Manfaat

  • Untuk klien: tamu cepat menemukan informasi penting seperti waktu dan lokasi.
  • Untuk tamu: navigasi seperti aplikasi di HP, selalu terlihat di bawah layar.
  • Untuk vendor: cukup memberi CSS ID pada container dan mengisi daftar menu.
Menu Dock dengan empat item Home, Acara, Galeri, dan Ucapan; item Acara menyala biru karena bagian Acara sedang dibaca
Item Acara menyala saat bagian Acara sedang dibaca.

Cara pakai dasar (vendor)

  1. Beri CSS ID pada setiap container tujuan: pilih container, buka tab Advanced › CSS ID, lalu isi misalnya section-acara.
  2. Tambahkan widget Menu Dock di halaman. Letaknya bebas, karena menu menempel di layar.
  3. Bagian Item Menu: untuk setiap item, isi Label, pilih Icon, dan isi Section ID Target dengan CSS ID tujuan, tanpa tanda #.
  4. Bagian Pengaturan Scroll: isi Offset Scroll dari Atas bila halaman memakai header yang menempel di atas.
  5. Bagian Posisi & Tampilan: atur posisi (bawaan tengah bawah), Z-Index, dan Tampilkan Label.
  6. Klik Publish, lalu coba ketuk setiap item dari HP.
Panel Edit Menu Dock bagian Item Menu: petunjuk Section ID Target tanpa tanda pagar, daftar menu Home, Acara, Galeri, Ucapan, dan item Home terbuka berisi Label Home, Icon rumah, dan Section ID Target section-home
Section ID Target harus sama dengan CSS ID container tujuan.

Selama cover Invitation belum dibuka, Menu Dock disembunyikan. Menu baru muncul setelah tamu mengetuk Buka Undangan, jadi Z-Index tidak perlu diatur untuk urusan cover.

Contoh: menu undangan Andy & Zhea

Vendor memberi CSS ID section-home, section-acara, section-galeri, dan section-ucapan pada empat container undangan, lalu memasang Menu Dock dengan empat item. Setelah membuka cover, Budi mengetuk Acara dan halaman bergulir ke jadwal acara; item Acara menyala.

Tips & Praktik Terbaik

  • Item contoh bawaan berjumlah enam (Home, Couple, Event, Gallery, RSVP, Gift). Hapus yang tidak dipakai dan sesuaikan Section ID Target-nya.
  • Pilihan "Tidak (Full Width)" di Ikuti Lebar Container Widget tidak membuat menu selebar layar; menu tetap selebar isinya.
  • Durasi Scroll (ms), Jenis Easing, dan Durasi Mengikuti Jarak hanya berlaku di browser lama. Browser modern memakai gulir halus bawaannya sendiri.
  • Offset Horizontal (px) disembunyikan saat Posisi Horizontal = Tengah, karena tidak berlaku di posisi itu.
  • Z-Index yang dikosongkan memakai 9999.
  • Item yang diketuk langsung aktif. Di HP, warna hover tidak menempel setelah item diketuk.
  • Label mode Tampil saat Hover memang muncul saat kursor diarahkan, jadi tidak terlihat di layar sentuh. Pilih Selalu Tampil untuk undangan.
  • Bila Section ID Target tidak ditemukan di halaman, editor memberi tahu ID mana yang salah.

Pertanyaan yang Sering Diajukan (FAQ)

Kenapa mengetuk menu tidak menggulir ke bagian tujuan? +
Section ID Target tidak sama dengan CSS ID container tujuan. Buka container tujuan, tab Advanced › CSS ID, lalu isi ID yang sama persis, tanpa tanda #. Nama ID peka huruf besar-kecil.
Apakah Menu Dock terlihat di atas cover undangan? +
Tidak. Menu Dock disembunyikan selama cover Invitation belum dibuka, lalu muncul setelah tamu mengetuk Buka Undangan. Z-Index tidak perlu diturunkan untuk itu.
Berapa jumlah menu yang ideal? +
Empat sampai lima. Minimal dua item agar widget tampil. Enam item atau lebih terasa sempit di HP lebar 360–412 px.
Apakah menu bisa mengarah ke halaman lain? +
Tidak. Setiap item hanya mengarah ke bagian di halaman yang sama lewat CSS ID.

Artikel & Panduan Terkait

Kenalan dengan Invitation
Cover pembuka dengan nama tamu.
Kenalan dengan Audio MP3
Musik latar dengan tombol jeda.
Daftar Lengkap Fitur Siap Pakai
Semua 26 fitur WeddingPress.