Saya lagi membangun sebuah baris fitur di situs WordPress klien pakai Elementor v4. Layout-nya sederhana: satu container flex sebagai baris, dan di dalamnya sebuah container anak sempit untuk kartu angka, saya set lebarnya 296px biar rapat di kiri sementara sisanya ngalir. Saya masukkan angka itu di panel width, klik update, dan buka halaman depan. Container anak itu tampil selebar penuh parent, sekitar 850px, seolah field width yang saya isi tidak ada artinya sama sekali.
Refleks pertama saya: pasti ada CSS lain yang menimpa. Saya buka DevTools, cari elemen container anak itu, dan menyisir rule yang menyentuh width. Tidak ada yang menimpa. Yang aneh: tidak ada rule --width sama sekali untuk elemen itu. Bukan ditimpa, tapi memang tidak pernah ditulis. Padahal di editor, nilai 296px jelas tersimpan. Saya cek _elementor_data untuk memastikan, dan benar, angka itu ada di sana. Jadi datanya tersimpan, tapi CSS per-post-nya diam saja soal width.
Kenapa ini terjadi
Butuh beberapa saat sampai saya sadar bahwa di Elementor v4, width sebuah container itu tidak berdiri sendiri. Dia digate oleh satu setting lain: content_width.
Defaultnya content_width bernilai "boxed". Dan dalam mode boxed, field width yang saya isi itu diabaikan. Boxed pakai semantik yang berbeda: dia baca boxed_width sebagai max-width, bukan width, dan container-nya dapat class e-con-boxed yang memaksa width: 100%. Jadi 296px yang saya isi di field width memang benar-benar tersimpan, tapi tidak pernah dipakai untuk menghasilkan rule --width, karena mode boxed tidak melirik field itu. Itu sebabnya CSS per-post-nya kosong soal width, dan container-nya melebar penuh mengikuti parent.
Hanya content_width: "full" yang membuat Elementor memancarkan nilai --width mentah. Selama content_width masih "boxed", nilai width literal saya seperti bicara ke ruang kosong.
Ada satu lapisan tambahan yang memperkeruh. Kalau template itu pernah disentuh di Elementor v3, kadang tersisa _element_width warisan lama yang menempel dan menambah konflik. Jadi meski saya sudah membenahi content_width, sisa _element_width bisa tetap menarik layout ke arah lain.
Perbaikannya
Solusinya bukan mengakali dengan CSS !important di luar. Solusinya adalah mengatur setting container-nya supaya Elementor benar-benar menulis rule width yang saya mau. Tiga hal yang saya set bersamaan:
{
"content_width": "full",
"width": { "unit": "px", "size": 296 },
"_flex_size": "none",
"_element_width": ""
}Yang penting di sini: content_width harus "full" supaya --width benar-benar dipancarkan. Lalu width diisi 296px seperti biasa. Yang gampang terlewat: _flex_size harus "none". Ini menerjemahkan container anak itu ke flex: 0 0 auto, artinya dia tidak melar dan tidak menyusut mengikuti ruang sisa flex, jadi lebarnya benar-benar dihormati alih-alih ditarik penuh oleh flex-grow. Dan _element_width saya kosongkan supaya sisa warisan v3 tidak ikut campur.
Kalau saya memang mau container yang boxed betulan, ceritanya lain: saya set boxed_width, bukan width. Tapi untuk kasus kartu sempit ini yang saya mau lebar mentah, full plus width adalah jalannya.
Cara verifikasinya sederhana: buka CSS per-post yang dihasilkan Elementor untuk halaman itu dan pastikan --width: benar-benar muncul untuk elemen container tersebut. Kalau --width: sudah ada, layout-nya pasti ikut. Kalau masih tidak ada, berarti content_width masih "boxed" di suatu tempat.
Jebakan bonus: _element_width: "initial" tidak cukup
Sepanjang menelusuri ini, saya sempat mencoba jalan pintas yang keliru. Saya kira cukup set _element_width: "initial" warisan v3 untuk "melepas" lebarnya. Itu tidak bekerja. Selama content_width masih "boxed", class e-con-boxed tetap memaksa width: 100%, jadi _element_width: "initial" sendirian tetap meninggalkan container melebar penuh. Akar masalahnya ada di gate content_width, bukan di field width warisan. Sampai gate itu dibetulkan ke full, apa pun yang saya utak-atik di lapisan v3 hanya menutupi gejala.
Pelajaran
Di Elementor v4, width container itu bukan setting tunggal, tapi hasil dari sebuah gate. content_width memutuskan apakah field width kamu bahkan dibaca. Kalau container-mu mengabaikan lebar yang jelas kamu isi, jangan langsung buru-buru menuduh CSS lain menimpa, cek dulu apakah content_width masih "boxed". Set content_width: "full", isi width, kunci dengan _flex_size: "none", kosongkan sisa _element_width warisan, lalu buktikan lewat --width: di CSS yang dihasilkan. Sejak paham gate ini, saya berhenti menganggap Elementor "menghiraukan" input saya, dan mulai bertanya: apakah setting yang saya isi ini memang sedang dibaca dalam mode yang aktif?