Timeline adalah fitur siap pakai di plugin WeddingPress (WDP Pro & WDP Lite) untuk menyusun cerita menjadi garis waktu. Setiap cerita punya judul, tanggal, teks, foto, dan ikon. Dipakai untuk kisah cinta (awal bertemu, lamaran, hari H) atau rangkaian acara.

Garis progres yang mengikuti gulir halaman (Scroll Progress Line) hanya ada di WeddingPress v4.


Masalah yang diselesaikan

Kisah cinta yang ditulis dalam satu paragraf panjang jarang dibaca tamu. Timeline memecahnya menjadi beberapa momen pendek, sehingga undangan lebih mudah dibaca di HP.

Manfaat

  • Untuk klien: cerita perjalanan mereka tampil rapi sebagai bagian yang paling personal di undangan.
  • Untuk tamu: cerita dibaca per momen sambil menggulir.
  • Untuk vendor: tinggal mengisi daftar cerita, susunan dan animasinya sudah jadi.
Timeline di HP berisi tiga cerita dengan ikon hati di garis: Awal Bertemu Juli 2022, Lamaran 5 Februari 2027, dan Akad dan Resepsi 12 Desember 2027, masing-masing dengan teks cerita singkat
Kisah Andy & Zhea dalam Timeline.

Cara pakai dasar (vendor)

  1. Tambahkan widget Timeline di bagian cerita.
  2. Bagian Layout Settings: pilih Layout (Left, Center, atau Right). Center tampil dua kolom di layar lebar dan satu kolom di HP.
  3. Bagian Timeline Story Contents: buka setiap cerita, lalu isi:
  • Story Title, misalnya "Awal Bertemu".
  • Story Date: teks bebas, misalnya "Juli 2022" atau "5 Februari 2027".
  • Description: cerita singkat 2–3 kalimat.
  • Choose Image: foto momen itu, atau kosongkan dan matikan Image. Ukuran gambar bisa dipilih per cerita.
  1. Klik Publish.
Panel Edit Timeline bagian Timeline Story Contents dengan cerita Awal Bertemu terbuka: Story Title Awal Bertemu, Story Date Juli 2022, Description berisi cerita, Choose Image, dan Image Resolution
Isi satu cerita di Timeline Story Contents.

Story Date adalah teks biasa, bukan pemilih tanggal. Tulis dalam bahasa Indonesia agar sesuai dengan isi undangan.


Setiap cerita bisa punya tombol Selengkapnya yang menuju Button Link, misalnya album foto. Tombol tampil bila Show Readmore Button (Layout Settings) dan Show Button Link (di cerita itu) sama-sama aktif.

Link membuka halaman baru di tab yang sama, jadi tamu keluar dari undangan. Judul dan tombol cerita yang link-nya kosong tidak memuat ulang halaman; judulnya tampil sebagai teks biasa. Matikan tombol bila cerita tidak punya link.


Ikon cerita

Ikon setiap cerita diatur di item cerita. Item yang ikonnya kosong memakai Fallback Icon di tab Style › Icon, bawaannya ikon hati. Ganti dengan ikon lain, atau pilih None agar item itu tetap tanpa ikon. Ikon kosong biasanya terjadi saat template diimpor ke situs yang unggahan SVG-nya dimatikan; editor lalu menampilkan peringatan berisi jumlah item tanpa ikon.

Icon Color dan Hover Color di Style › Icon juga mewarnai ikon SVG unggahan, termasuk SVG yang punya warna sendiri.


Contoh: kisah Andy & Zhea

Vendor mengisi tiga cerita: "Awal Bertemu" (Juli 2022), "Lamaran" (5 Februari 2027), dan "Akad & Resepsi" (12 Desember 2027). Foto tidak dipakai. Di HP, ketiga cerita tersusun ke bawah dengan ikon hati di garis kiri.


Tips & Praktik Terbaik

  • Ganti tanggal contoh "31 December 2018" di setiap cerita baru.
  • Saklar Date di Additional Options menyembunyikan tanggal di dalam kartu sekaligus tanggal di garis.
  • Scroll Progress Line aktif secara bawaan untuk widget baru. Widget yang dibawa dari v3 tetap tanpa garis progres sampai dinyalakan di tab Style › Item.
  • Scroll Animation dan Scroll Progress Line hanya untuk skin bawaan. Saat Skin Horizontal dipilih, kedua pengaturan itu disembunyikan.
  • Scroll Animation di Additional Options (bawaan mati) memunculkan kartu, tanggal, garis, dan ikon saat digulir.

Pertanyaan yang Sering Diajukan (FAQ)

Bagaimana menghilangkan tombol Selengkapnya? +
Matikan Show Readmore Button di bagian Layout Settings untuk semua cerita, atau matikan Show Button Link di cerita tertentu. Tombol hanya berguna bila Button Link diisi.
Kenapa cerita yang ikonnya kosong menampilkan ikon hati? +
Item tanpa ikon memakai Fallback Icon di tab Style bagian Icon, bawaannya ikon hati. Ganti dengan ikon lain, atau pilih None bila cerita itu memang tanpa ikon. Ikon kosong biasanya berasal dari ikon SVG template yang tidak ikut terimpor karena unggahan SVG dimatikan.
Bisakah Timeline tampil mendatar? +
Bisa, pilih Skin Horizontal. Tampilan mendatar hanya berlaku di layar lebih lebar dari 700 px. Di HP, Timeline tetap tersusun ke bawah.
Kenapa ada gambar abu-abu di setiap cerita? +
Cerita baru memakai gambar contoh Elementor. Ganti dengan foto di Choose Image, atau matikan Image di bagian Additional Options bila cerita tidak memakai foto.