Custom CSS Invitation Tidak Jalan di WDP v4? Ini Solusinya

Class CSS widget Invitation di WDP v4 (Pro dan Lite) hampir semuanya sama dengan WeddingPress v3. Script lama gagal karena v4 memindahkan cover undangan ke <body>, sehingga kata selector milik Elementor tidak lagi menemukan targetnya. Perbaikannya: ganti selector dengan .modalx, beri !important pada margin dan padding, lalu rapikan penulisan komentar CSS.

Masalah yang Sering Terjadi Setelah Upgrade ke v4

Banyak pembuat undangan menambahkan sentuhan kecil lewat Custom CSS di widget Invitation: teks "Undangan Pernikahan" di atas foto mempelai, catatan permohonan maaf di bawah tombol "Buka Undangan", atau jarak nama mempelai yang dibuat lebih lega. Setelah plugin diperbarui dari v3 ke WDP v4, sebagian atau semua tambahan itu hilang tanpa pesan error.

Kalau dibiarkan, cover undangan klien tampil berbeda dari desain yang sudah disetujui. Untuk vendor yang mengelola puluhan undangan, mengecek satu per satu tanpa tahu penyebabnya akan memakan banyak waktu.

Perbaikannya cukup di sisi CSS. Struktur widget tetap kompatibel dan pengaturan panel yang lama tetap terbaca.

Dua hal perlu dibedakan sebelum mengubah CSS:

• Cover tidak muncul sama sekali. Ini bukan masalah CSS. Widget Invitation tidak ditampilkan selama lisensi WDP Pro atau WDP Lite di website itu belum aktif. Cek menu Lisensi lebih dulu.
• Tampilan widget lain berubah (ikon Audio, kotak Comment Kit 2, garis Timeline). Ini ditangani menu Kompatibilitas v3, bukan Custom CSS. Menu itu tidak mengubah CSS kustom di cover Invitation.

Penyebab Script Custom CSS v3 Tidak Berfungsi

1. Cover dipindah ke <body> sehingga selector kehilangan target

Saat Anda menulis selector di Advanced > Custom CSS, Elementor mengubahnya menjadi class wrapper widget, kira-kira .elementor-element-3f9a2c1. Di v3, cover undangan (.modalx) berada di dalam wrapper tersebut, jadi aturannya kena.

Di v4 dengan Mode Tampilan: Fullscreen (bawaan), cover dipindahkan ke bagian paling luar halaman (<body>) begitu halaman dibuka. Tujuannya agar cover benar-benar menutup layar penuh di tema apa pun. Efek sampingnya, cover tidak lagi berada di dalam wrapper widget, sehingga semua aturan yang diawali selector tidak berlaku.

Jika widget memakai Mode Tampilan: Menyesuaikan Container, cover tidak dipindah dan selector masih bekerja. Meski begitu, .modalx tetap lebih aman karena berfungsi di kedua mode.

2. Pengaturan panel v4 memakai selector yang lebih kuat

Karena cover keluar dari wrapper widget, v4 menulis ulang pengaturan dari panel (margin, padding, warna, tipografi) dengan selector berbasis ID, misalnya:

#modalx-3f9a2c1 .wdp-text { padding: 0 20px 0 20px; }

Selector ID selalu menang melawan selector class biasa seperti .wdp-text { ... }. Jika margin atau padding juga diisi di panel widget, nilai dari panel yang akan dipakai. Tambahkan !important pada properti custom Anda yang bentrok dengan pengaturan panel.

3. Kesalahan penulisan yang terbawa dari script lama

Beberapa script v3 yang beredar mengandung kesalahan yang juga ikut membuatnya gagal:

Langkah Memperbaiki Script Custom CSS

1. Buka halaman undangan, klik Edit with Elementor.
2. Pilih widget Invitation (atau Invitation Full Screen), lalu buka tab Advanced > Custom CSS.
3. Ganti setiap selector dengan .modalx.
4. Tambahkan .modalx di depan selector yang belum memilikinya, misalnya .wdp-name menjadi .modalx .wdp-name.
5. Tambahkan !important pada margin, padding, warna, atau font yang juga diatur di panel widget.
6. Ubah komentar menjadi format /* ... */ dan hapus baris @import serta onclick.
7. Klik Update, bersihkan cache plugin atau CDN, lalu cek halaman undangan dari tampilan depan (bukan editor).

Contoh: script v3 sebelum diperbaiki

/*custom posisi teks nama mempelai -boleh dihapus */
.wdp-mempelai{
    margin-bottom: 30px;
}

/custom posisi teks mempelai -boleh dihapus/
.wdp-name{
    padding: 0 5px 0 5px;}

.wdp-text{
    padding-right: 10px;
    padding-left: 10px;
}

/penambahan text di atas foto mempelai/
selector .elementor-image::before {
    content: "Undangan Pernikahan";
    ...
}

@import url('https://fonts.googleapis.com/css2?family=Baumans&display=swap');

.wdp-button-wrapper::after{
    content: "*Mohon maaf apabila ada kesalahan penulisan nama/gelar";
    ...
}

.wdp-button-wrapper {
    onclick:openFullscreen();
}

Contoh: script yang sudah disesuaikan untuk v4

/* custom posisi teks nama mempelai - boleh dihapus */
.modalx .wdp-mempelai {
    margin-bottom: 30px !important;
}

/* custom posisi teks nama tamu & teks pengantar - boleh dihapus */
.modalx .wdp-name {
    padding: 0 5px !important;
}

.modalx .wdp-text {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

/* teks di atas foto mempelai */
.modalx .elementor-image::before {
    content: "Undangan Pernikahan";
    color: #3E3E3E;
    white-space: pre;
    display: block;
    font-size: 18px;
    font-family: 'Crimson Pro', serif;
    font-weight: normal;
    margin: 0 0 15px 0;
}

/* teks di bawah tombol buka undangan */
.modalx .wdp-button-wrapper::after {
    content: "*Mohon maaf apabila ada kesalahan penulisan nama/gelar";
    display: block;
    font-family: 'Crimson Pro', serif;
    font-size: 12px;
    margin: 5px 0 0 0;
    color: #3E3E3E;
}

Perubahan Struktur Widget Invitation dari v3 ke v4

Tabel berikut membandingkan HTML widget Invitation di WeddingPress v3 dan WDP v4. Hanya bagian tombol dan posisi cover yang berubah.

Jika script lama Anda memakai .elementor-button-icon atau .elementor-button span untuk menata teks tombol, sesuaikan dengan contoh di bagian berikutnya.

Daftar Class CSS Widget Invitation di WDP v4

Gunakan tabel ini sebagai acuan bila ingin menata bagian lain dari cover undangan. Awali setiap selector dengan .modalx agar tetap berlaku setelah cover dipindah ke <body>.

Contoh custom CSS lain yang sering dibutuhkan

Mengganti huruf dan warna nama tamu:

.modalx .wdp-name {
    font-family: 'Crimson Pro', serif !important;
    color: #8B6B3D !important;
    letter-spacing: 1px;
}

Menggelapkan overlay agar teks lebih terbaca di foto background yang terang:

.modalx .overlayy {
    background-color: rgba(0, 0, 0, 0.45) !important;
}

Membuat tombol buka undangan berbentuk kapsul dengan garis tepi:

.modalx .wdp-button-wrapper .elementor-button {
    border-radius: 50px !important;
    border: 1px solid #FFFFFF !important;
    padding: 12px 32px !important;
}

Menyembunyikan ikon di tombol buka undangan:

.modalx .wdp-button-wrapper .elementor-button span {
    display: none;
}

Selector ini hanya aman di v4. Di v3 teks tombol juga dibungkus span, sehingga ikut tersembunyi.

Memberi jarak ikon dengan teks tombol:

.modalx .wdp-button-wrapper .elementor-button span {
    margin-right: 8px;
}

Membuat foto mempelai berbentuk lingkaran:

.modalx .elementor-image img {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

Menyembunyikan elemen lain selama cover belum dibuka, misalnya tombol musik melayang. Tambahkan class tombol-musik lebih dulu di Advanced > CSS Classes pada elemen tersebut:

body.wdp-cover-active .tombol-musik {
    visibility: hidden;
}

Studi Kasus Nyata: Undangan Pernikahan Andy & Zhea

• Kebutuhan: Undangan Andy & Zhea dibuat saat masih memakai WeddingPress v3. Cover-nya memiliki teks "Undangan Pernikahan" di atas foto dan catatan permohonan maaf di bawah tombol, keduanya dari Custom CSS widget Invitation.
• Masalah: Setelah plugin diperbarui ke WDP v4, link https://websiteundangan.com/andy-zhea/?to=Andy+Hermawan menampilkan cover tanpa kedua teks tersebut, dan jarak nama mempelai kembali ke ukuran bawaan.
• Penerapan: selector .elementor-image::before diganti .modalx .elementor-image::before, .wdp-button-wrapper::after diawali .modalx, margin nama mempelai diberi !important, dan komentar CSS dirapikan sesuai contoh di atas.
• Hasil: Setelah cache dibersihkan, cover tampil seperti desain awal. Karena script tidak lagi memakai selector, CSS yang sama bisa dipakai ulang di undangan klien lain.

Tips & Praktik Terbaik