Panduan Template Undangan

Panduan ini menjelaskan cara mengubah template menjadi website-mu, lalu mempublikasikannya. Kamu tidak perlu bisa coding. Cukup ikuti langkahnya satu per satu. Read this guide in English.

1. Isi paket

Untuk melihat website-mu kapan saja, klik dua kali index.html. File akan terbuka di browser. Setelah mengedit dan menyimpan, tekan tombol Refresh di browser untuk melihat perubahannya.

2. Persiapan: aplikasi untuk mengedit

index.html adalah file teks biasa. Kamu perlu aplikasi yang bisa mengedit teks apa adanya, bukan aplikasi dokumen seperti Microsoft Word.

Disarankan: Visual Studio Code (gratis)

Unduh di code.visualstudio.com, tersedia untuk Windows dan Mac. Buka aplikasinya, pilih File → Open Folder, lalu pilih folder template ini. Klik index.html di daftar sebelah kiri untuk mengeditnya.

Alternatif tanpa instal

• Windows: klik kanan index.html → Open with → Notepad.
• Mac (TextEdit): buka TextEdit → menu TextEdit → Settings (atau Preferences) → tab Open and Save → centang "Display HTML files as HTML code instead of formatted text". Tanpa pengaturan ini, TextEdit akan merusak file saat disimpan.

Cara mencari teks

Tekan Ctrl+F (Windows) atau Cmd+F (Mac) di aplikasi editor, ketik kata yang kamu lihat di website, dan editor akan melompat ke tempatnya. Ini cara tercepat menemukan apa pun yang ingin diganti.

3. Mulai cepat

Kalau kamu ingin cepat, kerjakan urutan ini. Tiap langkah dijelaskan lengkap di bagian berikutnya.

1. Ekstrak ZIP, klik dua kali index.html untuk melihat tampilan awal.
2. Isi nomor WhatsApp di bagian PENGATURAN.
3. Ganti nama dan teks contoh dengan milikmu.
4. Masukkan foto ke folder foto dan pasang di tempatnya.
5. Isi tanggal acara di PENGATURAN supaya hitung mundur benar.
6. Isi rekening untuk amplop digital, atau hapus bagiannya.
7. Sesuaikan warna dengan logomu.
8. Periksa dengan daftar cek, lalu upload ke Netlify atau hosting-mu.

Untuk pemula, siapkan waktu sekitar 1–2 jam, sebagian besar untuk menyiapkan foto.

4. Mengisi nomor WhatsApp

Ini langkah paling penting. Tanpa nomor, formulir RSVP dan tombol tanya belum berfungsi.

1. Buka index.html, lalu cari kata PENGATURAN. Letaknya di bagian bawah file.
2. Temukan baris ini:

   nomorWhatsApp: '',

3. Tulis nomormu di antara dua tanda kutip:

   nomorWhatsApp: '0812-3456-7890',

   Format 0812…, +62 812…, dan 62812… semuanya diterima.
4. Simpan, lalu refresh browser. Klik salah satu tombol WhatsApp. WhatsApp akan terbuka dengan pesan yang sudah terisi.

Selama nomor masih kosong, tombol dan formulir hanya menampilkan pengingat. Ini disengaja, supaya pengunjung tidak mengirim pesan ke nomor yang salah.

5. Mengganti teks

Semua nama, harga, cerita, dan ulasan di template ini adalah contoh. Cara termudah: cari teks yang terlihat di website (misalnya Raka) dengan Ctrl+F / Cmd+F, lalu ganti.

Yang wajib diganti

Menghapus satu bagian

Setiap bagian diawali komentar seperti <!-- ── KISAH CINTA ── -->. Untuk menghapusnya, hapus dari <section di bawah komentar itu sampai </section> pasangannya. Hapus juga tautannya di menu atas (cari href="#kisah").

6. Mengganti foto

Kotak berwarna dengan ikon adalah tempat foto. Template ini sengaja tidak menyertakan foto: foto prewedding atau foto kalian berdua jauh lebih meyakinkan daripada foto stok.

Langkah

1. Simpan fotomu di folder foto. Beri nama huruf kecil tanpa spasi, misalnya kami-berdua.jpg.
2. Di index.html, cari kotak foto yang ingin diganti. Bentuknya seperti ini:

   <div class="foto">
       <svg ...>...</svg>
   </div>

3. Ganti seluruh bagian <svg ...>...</svg> dengan:

   <img src="foto/kami-berdua.jpg" alt="Keterangan singkat foto" />

   Isi alt dengan keterangan singkat. Ini dibaca oleh Google dan pengunjung tunanetra.

Foto otomatis dipotong rapi mengikuti bentuk kotaknya. Label seperti "BARU" di atas foto tetap tampil, jadi biarkan bagian itu ada.

Ukuran foto

• Lebar sekitar 1200–1600 piksel sudah cukup.
• Usahakan setiap foto di bawah 300 KB, supaya website cepat dibuka di HP. Kecilkan gratis di squoosh.app.
• Foto HP biasanya 3–5 MB. Selalu kecilkan dulu.
• Foto mempelai berbentuk lengkung dan potret. Pilih foto setengah badan dengan wajah di bagian atas supaya tidak terpotong.

7. Dua bahasa

Template ini tampil dalam bahasa Indonesia dan Inggris. Setiap teks ditulis dua kali, berdampingan:

<span lang="id">Layanan</span><span lang="en">Services</span>

Hanya bahasa yang aktif yang tampil. Ganti keduanya setiap kali mengubah teks. Jangan mengubah tanda lang="id" dan lang="en".

Bahasa awal dan tombol ID/EN

• Bahasa awal diatur di baris <html lang="id"> di bagian atas file. Ganti menjadi <html lang="en"> agar pengunjung baru melihat bahasa Inggris.
• Tombol ID/EN di navigasi diatur dengan tombolBahasa: true di PENGATURAN. Pilihan pengunjung diingat di browser mereka.
• Link langsung: tambahkan ?lang=en di akhir alamat (misalnya namausaha.com/?lang=en) untuk membuka versi Inggris. Berguna untuk profil media sosial atau penawaran ke klien luar negeri.

Hanya butuh satu bahasa?

Atur tombolBahasa: false dan pilih bahasanya di <html lang="...">. Teks bahasa lain tetap ada di file tetapi tidak pernah tampil, jadi kamu cukup mengganti teks bahasa yang dipakai.

Teks di dalam atribut

Beberapa teks tidak terlihat langsung di halaman, jadi versi Inggrisnya ditulis sebagai atribut tambahan berawalan data-en:

Versi Inggris cocok untuk tamu dari luar negeri atau keluarga yang tidak berbahasa Indonesia. Kirim link dengan ?lang=en kepada mereka, dan bisa digabung dengan nama tamu: ?lang=en&to=Mr%20and%20Mrs%20Smith. Judul dan lokasi di Google Kalender juga punya dua versi di PENGATURAN.

8. Halaman, tampilan, dan tema gelap

Menu di atas tidak hanya menggulir: setiap menu membuka halaman sendiri, dengan link sendiri dan transisi yang halus. Semuanya tetap satu file index.html.

Cara halaman dibentuk

• Setiap link di menu atas, misalnya <a href="#mempelai">, menjadi satu halaman berisi bagian dengan id itu.
• Bagian yang tidak ada di menu ikut ke halaman sebelumnya. Semua yang ada sebelum bagian menu pertama adalah halaman Beranda.
• Beranda menampilkan kartu ke setiap halaman (Jelajahi), dan setiap halaman ditutup kartu Selanjutnya. Keduanya dibuat otomatis dari menu dan judul <h2> setiap bagian.
• Setiap halaman punya alamat sendiri, misalnya usahamu.com/#mempelai. Bagikan di media sosial atau WhatsApp untuk langsung membuka halaman itu.

Menambah atau menghapus halaman

1. Menambah: beri bagian sebuah id (huruf kecil, tanpa spasi), lalu tambahkan link-nya di menu: <a href="#idmu">Nama</a>.
2. Menghapus: hapus link-nya dari menu (bagiannya ikut halaman sebelumnya), atau hapus bagian beserta link-nya.

Satu halaman panjang saja

Isi halamanTerpisah: false di PENGATURAN. Menu kembali menggulir satu halaman panjang.

Tema terang dan gelap

• Tema awal diatur di baris pertama halaman: <html lang="id" data-tema="otomatis">. Pilih otomatis (ikut pengaturan HP/komputer pengunjung), terang, atau gelap.
• Tombol matahari/bulan membuat pengunjung bisa mengganti tema, dan pilihannya diingat. Sembunyikan dengan tombolTema: false di PENGATURAN; halaman lalu selalu memakai tema awal.
• Warnamu (--utama) berlaku di kedua tema. Warna tema gelap ada di blok CSS bertanda Tema gelap / Dark theme, di dekat akhir bagian gaya.

Glass theme (glassmorphism) dan animasi

Kartu transparan bergaya frosted glass, warna latar yang bergerak pelan, dan animasinya ada di blok CSS bertanda KACA (nama kode untuk glass theme). Tidak ada yang perlu diubah di sana. Dua nilai yang boleh kamu atur, di awal blok itu:

Pengunjung yang menyalakan Kurangi gerakan di perangkatnya tetap mendapat halaman dan tema yang sama, tanpa animasi.

9. Tanggal & hitung mundur

Hitung mundur dan tombol Google Kalender membaca satu pengaturan di bagian PENGATURAN:

tanggalAcara: '2027-03-20T08:00:00+07:00',
durasiJam: 6,
judulKalender: { id: 'Pernikahan Raka & Sinta', en: 'Raka & Sinta’s Wedding' },
lokasiKalender: { id: 'Gedung Serbaguna Melati, Bandung', en: 'Gedung Serbaguna Melati, Bandung, Indonesia' },

Cara menulis tanggal

Urutannya: TAHUN-BULAN-TANGGAL, huruf T, JAM:MENIT:00, lalu zona waktu. Bulan dan tanggal selalu dua digit (03, bukan 3).

durasiJam hanya dipakai untuk menentukan jam selesai di kalender tamu. Tanggal dan jam yang tampil di halaman (bagian pembuka dan Rangkaian acara) ditulis biasa di teks dan harus kamu ganti sendiri.

Setelah tanggal terlewat, hitung mundur otomatis berubah menjadi tulisan "Hari bahagia telah tiba".

10. Nama tamu di setiap link

Satu file bisa dipakai untuk semua tamu. Tambahkan ?to= di akhir link, diikuti nama tamu:

https://namadomain.com/?to=Bapak%20Budi%20dan%20Keluarga

• Spasi ditulis %20.
• Tanpa ?to=, halaman menampilkan "Bapak/Ibu/Saudara/i" (dalam bahasa Inggris "Honoured guest"). Kalimat ini bisa diganti di teks (cari Bapak/Ibu/Saudara/i).
• Untuk tamu luar negeri, tambahkan juga lang=en: ?lang=en&to=Mr%20and%20Mrs%20Smith.
• Untuk banyak tamu, buat daftar nama di Google Sheets. Di kolom sebelahnya pakai rumus: ="https://namadomain.com/?to="&SUBSTITUTE(A2;" ";"%20") untuk membuat linknya.

11. Rangkaian acara, kisah cinta & galeri

Acara

Setiap acara adalah satu blok <article class="acara">. Salin blok utuh untuk menambah acara (misalnya Ngunduh Mantu atau Siraman), hapus untuk mengurangi. Ganti nama, hari, tanggal, jam, tempat, dan alamat.

Tombol "Lihat lokasi di Maps" memakai link pencarian. Ganti bagian setelah query= dengan nama tempat (spasi menjadi %20). Atau, cara yang lebih tepat: buka tempatnya di Google Maps → Bagikan → Salin link, lalu tempel sebagai pengganti seluruh isi href="...".

Kisah cinta

Setiap tonggak adalah satu blok <li> sampai </li>. Salin untuk menambah, hapus untuk mengurangi. Kalau tidak ingin memakainya, hapus seluruh bagian (lihat "Menghapus satu bagian" di bab teks).

Info untuk tamu

Tiga kartu: dress code, parkir & akses, dan siaran langsung.

• Dress code: ubah tulisan, dan ubah empat lingkaran warna lewat style="background:#6b7f5e". Tidak ada dress code? Hapus seluruh blok <div class="warna-dress"> beserta kalimat di atasnya.
• Parkir & akses: ganti dengan info tempatmu yang sebenarnya.
• Siaran langsung: kartu ini tersembunyi sampai kamu mengisi linkLive di PENGATURAN, contoh linkLive: 'https://youtube.com/live/...'. Kosongkan lagi untuk menyembunyikannya.

Galeri

Enam kotak foto. Kamu boleh menambah atau menghapus kotak <div class="foto"> di dalam <div class="galeri">.

12. Amplop digital (rekening)

Setiap rekening adalah satu blok <div class="rekening">. Ganti tiga hal, dan nomor yang sama di dua tempat:

<span class="nomor" data-salin="1234567890">1234567890</span>
...
<button ... data-salin-tombol="1234567890">

• Nomor yang tampil (di antara > dan <) dan nomor di data-salin-tombol harus sama, karena yang kedua yang disalin tombol.
• Ganti nama bank dan nama pemilik rekening.
• Hanya punya satu rekening? Hapus satu blok utuh. Tidak ingin memakai fitur ini? Hapus seluruh bagian AMPLOP DIGITAL dan menu href="#hadiah" bila ada.

13. RSVP dan ucapan

Formulir RSVP mengirim satu pesan WhatsApp ke nomormu berisi nama, kehadiran, jumlah tamu, dan ucapan. Tidak ada data yang disimpan di server mana pun, jadi kamu mencatat balasan langsung dari WhatsApp.

• Ubah pilihan kehadiran atau jumlah tamu di bagian <select> dengan mengedit baris <option>. Teks Inggrisnya ada di data-en="...".
• Ubah kalimat pembuka pesan di data-wa-form="..." dan data-en-wa-form="..." pada tag <form>.
• Tamu harus menekan tombol Kirim di WhatsApp sendiri setelah aplikasinya terbuka.

Karena semua masuk ke satu chat, siapkan catatan (misalnya Google Sheets) untuk menghitung jumlah tamu yang hadir.

14. Musik latar (opsional)

1. Siapkan satu file lagu berformat MP3. Gunakan lagu yang kamu punya haknya atau bebas royalti. Mengunggah lagu berhak cipta ke website publik bisa bermasalah.
2. Buat folder musik di sebelah index.html, lalu simpan lagunya, misalnya musik/lagu.mp3. Usahakan di bawah 4 MB.
3. Di PENGATURAN, isi:

   musik: 'musik/lagu.mp3'

4. Simpan dan refresh. Tombol bulat berikon nada muncul di kiri bawah. Musik baru diputar setelah tamu menekannya, karena browser memblokir suara otomatis.

Ikut upload folder musik saat mempublikasikan. Kosongkan lagi (musik: '') bila ingin mematikan fitur ini.

15. Mengganti warna

Di bagian atas file, cari :root. Ubah dua baris ini dengan kode warna logomu:

--utama: #6b7f5e;
--utama-gelap: #566849;

--utama-gelap adalah versi yang sedikit lebih gelap, dipakai saat tombol disentuh. Cari kode warna di Google: color picker. Hindari warna yang terlalu terang untuk --utama, karena teks putih di atasnya sulit dibaca.

Pilihan warna siap pakai

Di halaman demo ada tombol "Coba warna" untuk melihat tiap pilihan. Untuk memakainya, ganti dua baris di :root dengan salah satu pasangan ini:

16. Mempublikasikan website

Sebelum mempublikasikan, lewati dulu daftar cek di bawah.

Pilihan A: Netlify (gratis, paling mudah)

1. Daftar akun gratis di netlify.com.
2. Buka app.netlify.com/drop.
3. Seret seluruh folder template (yang berisi index.html dan folder foto) ke halaman itu.
4. Tunggu beberapa detik. Website-mu langsung online dengan alamat seperti nama-acak.netlify.app. Nama itu bisa kamu ubah di pengaturan situs.

Untuk memperbarui website nanti, seret lagi foldernya di halaman situs tersebut di Netlify (bagian Deploys).

Pilihan B: hosting berbayar dengan cPanel

1. Masuk ke cPanel hosting-mu → File Manager → buka folder public_html.
2. Klik Upload, lalu upload index.html dan folder foto beserta isinya. (Bisa juga upload sebagai ZIP, lalu klik kanan → Extract.)
3. Buka nama domainmu di browser.

PANDUAN.html dan LISENSI.txt tidak perlu di-upload.

Pilihan C: GitHub Pages (gratis)

Cocok kalau kamu sudah punya akun GitHub. Buat repositori publik, upload index.html dan folder foto, lalu di Settings → Pages pilih branch main dan folder / (root).

Memakai domain sendiri

Domain .com, .id, atau .my.id bisa dibeli di penyedia domain mana pun. Di Netlify, buka pengaturan situs → Domain management dan ikuti petunjuknya. Di hosting cPanel, domain biasanya sudah terpasang saat membeli paket.

17. Tampilan saat link dibagikan

Saat link website-mu dibagikan di WhatsApp atau media sosial, yang tampil adalah judul dan deskripsi dari og:title dan og:description di bagian atas file. Ganti keduanya.

Untuk menampilkan gambar juga, siapkan satu foto berukuran sekitar 1200 × 630 piksel, simpan di folder foto, lalu tambahkan baris ini tepat di bawah og:description. Alamatnya harus lengkap, termasuk domainmu:

<meta property="og:image" content="https://domainmu.com/foto/sampul.jpg" />

Untuk undangan, bagian og:description paling sering dibaca di WhatsApp sebelum link dibuka. Contoh yang baik: "Kami mengundangmu di pernikahan Raka & Sinta, 20 Maret 2027."

18. Daftar cek sebelum publikasi

Buka website-mu di browser, lalu periksa satu per satu:

• Nomor WhatsApp sudah diisi dan tombol membuka WhatsApp yang benar.
• Tidak ada lagi nama, alamat, harga, atau rekening contoh.
• Semua foto muncul (tidak ada kotak berikon yang tertinggal).
• Kedua bahasa sudah diganti: klik tombol EN dan periksa tidak ada teks contoh berbahasa Inggris yang tertinggal (atau tombol bahasa sudah dimatikan).
• Tanggal di PENGATURAN sama dengan tanggal yang tertulis di halaman.
• Hitung mundur menunjukkan hari yang benar.
• Nomor rekening benar. Coba tombol "Salin nomor" dan cocokkan hasilnya.
• Tombol Maps akad dan resepsi membuka lokasi yang benar.
• Kirim satu RSVP percobaan ke dirimu sendiri dan pastikan pesannya utuh.
• Link dengan ?to=Nama menampilkan nama tamu dengan benar.
• Judul tab browser dan og:title sudah diganti.
• Sudah dicoba dari HP, bukan hanya dari komputer.
• Sudah dicoba dengan meng-klik semua tombol sekali.

19. Jika ada masalah

Mau kami yang pasangkan?

Kalau nggak sempat mengedit sendiri, ada Jasa Pasang + Editing (dibeli terpisah): kami edit template ini sesuai permintaanmu, lalu meng-online-kannya di Netlify paket gratis, di akun atas namamu. Cari Jasa Pasang Website atau Website Setup Service di toko UpVire tempat kamu membeli template ini (Lynk.id, Gumroad, atau Etsy).

Pertanyaan tentang pembelian dan pengunduhan dapat diajukan melalui halaman produk di platform tempat kamu membeli.