Saya sedang menyelesaikan sebuah landing page klien di Elementor v4, dan yang tersisa cuma satu detail dekoratif: sebuah shape kecil yang harus mengambang di pojok section, di belakang teks. Rencananya sederhana. Bungkus shape itu di sebuah flex container, set position: absolute, geser dengan offset, kasih z-index biar duduk di belakang. Pekerjaan lima menit, pikir saya.
Saya buka panel, ubah container ke absolute, atur offset, save. Editor bilang tersimpan. Tapi di preview, shape itu tetap duduk manis di dalam flex flow, mendorong elemen lain seolah tidak ada apa-apa yang berubah. Saya set ulang, save ulang, hard refresh. Tetap sama. Tidak ada error di editor, tidak ada warning, tidak ada apa pun. Elemen itu hanya menolak keluar dari flow.
Mengejar CSS yang tidak pernah ada
Refleks pertama saya adalah menuduh caching. Situs ini pakai layer optimasi, jadi saya curiga CSS lama disajikan dari cache. Saya purge semuanya, regenerate CSS Elementor lewat Tools, tetap tidak ada bedanya. Lalu saya berhenti menebak dan langsung memeriksa apa yang benar-benar dirender.
Elementor menulis CSS per-post yang di-scope ke ID elemen. Jadi saya curl halaman itu dan grep ID container-nya:
curl 'https://client-site.example/landing/' | grep 'elementor-element-a1b2c3d'Yang saya cari adalah position: absolute beserta top/left. Yang saya dapat: aturan CSS untuk elemen itu memang ada, ada warna, ada padding, tapi tidak ada satu pun deklarasi position. Elementor sama sekali tidak menulisnya. Nilai position: absolute tersimpan rapi di _elementor_data, tapi tidak pernah sampai ke CSS. Itu momen yang menjelaskan semuanya: bukan cache, bukan CSS yang di-override. Aturannya memang tidak pernah lahir.
Akar masalahnya: prefix underscore
Setelah membandingkan dengan widget lama yang posisinya berhasil di project lain, saya sadar kunci JSON yang saya kirim salah bentuk. Saya membangun blok ini secara terprogram, jadi saya menulis kunci setting langsung ke _elementor_data, dan saya memakai kebiasaan lama dari v3.
Di Elementor, widget v3 legacy memakai kontrol posisi versi advanced-prefix: _position dan _z_index. Underscore itu adalah konvensi lama untuk properti di tab Advanced. Refleks tangan saya menulis _position untuk container juga.
Masalahnya, container Elementor v4 tidak bekerja seperti itu. Container v4 memakai kontrol intrinsik yang UNPREFIXED: position dan z_index, tanpa underscore. Kunci berprefix _position diabaikan diam-diam pada container. Bukan error, bukan fallback, hanya diabaikan. Karena itulah position: absolute tidak pernah ditulis ke CSS: Elementor menerima nilai untuk kunci yang tidak dikenalinya sebagai kontrol posisi container, lalu membuangnya tanpa berkomentar.
Ini jenis bug yang paling menyita waktu justru karena senyap. Tidak ada yang gagal secara mencolok. Save sukses, _elementor_data berisi nilai yang kelihatannya benar, dan satu-satunya jejak bahwa ada yang salah adalah CSS yang diam.
Perbaikannya
Begitu tahu polanya, perbaikannya sepele: buang underscore untuk kontrol intrinsik container. Pakai position dan z_index (tanpa underscore) pada container; pada widget, tetap pakai _position dan _z_index.
Ini bentuk yang benar untuk container v4 yang saya kirim ke _elementor_data:
{
"position": "absolute",
"_offset_orientation_h": "start",
"_offset_x": { "unit": "px", "size": 420 },
"_offset_y": { "unit": "px", "size": 236 },
"z_index": 0
}Dan ini bentuk salah yang tadi diam-diam diabaikan:
{
"_position": "absolute",
"_z_index": 0
}Perhatikan detail penting: hanya position dan z_index yang kehilangan underscore. Field offset tetap berprefix underscore di container maupun widget: _offset_x, _offset_y, _offset_orientation_h, dan seterusnya. Jadi bukan aturan "buang semua underscore", melainkan pemisahan yang lebih tajam.
Mnemonik yang akhirnya saya pegang: properti intrinsik milik elemen itu sendiri (di mana dia diposisikan, di layer mana dia duduk) unprefixed pada container. Properti soal bagaimana elemen berperilaku relatif ke parent (offset) tetap underscored di mana-mana. Setelah saya ganti _position jadi position dan _z_index jadi z_index, regenerate CSS, curl yang sama sekarang balik dengan --position: absolute beserta top/left yang saya harapkan. Shape itu langsung melompat keluar dari flow dan duduk di pojok, persis di belakang teks.
Cara verifikasi
Karena kegagalannya senyap, jangan percaya pada tampilan editor saja. Verifikasi ke CSS yang benar-benar keluar:
curl 'https://client-site.example/landing/' | grep 'elementor-element-a1b2c3d'Kalau --position: absolute beserta top/left muncul di sana, aturannya benar-benar dirender. Kalau kosong, kuncimu kemungkinan masih salah bentuk.
Pelajaran
Elementor v4 mengubah kontrak nama kontrol antara container dan widget, dan perubahan itu tidak berteriak saat kamu salah. Container memakai position dan z_index tanpa underscore; widget memakai versi berunderscore. Field offset tetap berunderscore di keduanya. Kunci yang salah bentuk tidak menghasilkan error, hanya CSS yang bolong. Jadi setiap kali saya menyentuh _elementor_data langsung, saya berhenti percaya pada editor yang bilang "saved" dan mulai bertanya ke sumber yang jujur: apa yang benar-benar ada di CSS per-post yang dirender?