Sebuah situs klien yang saya pegang punya satu dekorasi yang sama di semua halamannya: grid SVG tipis yang duduk di belakang konten atas tiap section, full-width, dan harus dirender persis 1440×192, di-stretch. Enam belas halaman, satu dekorasi. Kedengarannya kerjaan lima menit. Nyatanya saya gagal tiga kali dengan tiga cara berbeda, dan tiap kegagalan punya akar masalah yang berbeda pula, sebelum akhirnya ketemu satu kombinasi yang benar-benar jalan.
Sedikit konteks kenapa saya ngotot pindah ke elemen native. Sebelumnya dekorasi ini hidup sebagai custom CSS ::before yang di-scope per halaman, totalnya sekitar 28 ribu karakter, dan semua selector-nya menempel ke ID elemen Elementor. Tiap kali template di-apply ulang, Elementor me-regenerate ID elemen dan seluruh CSS itu putus serentak. Jadi targetnya jelas: dekorasinya harus jadi elemen Elementor beneran, tanpa selector rapuh yang bisa mati kapan saja.
Gagal pertama: background image di container
Cara paling malas dulu: jadikan SVG-nya background_image di container, lalu atur background_bg_width ke 1440. Hasilnya, SVG dirender di ukuran naturalnya, 1459×520, bukan 1440×192 yang saya minta.
Akar masalahnya: background_bg_width cuma mengontrol lebar. Yang dia hasilkan adalah background-size: 1440px, satu nilai, artinya tinggi tetap auto. Begitu tinggi auto, rasio intrinsik SVG yang menang, dan dari situlah 1459×520 muncul. Tidak ada kontrol native yang bisa memaksa dua dimensi sekaligus di background container.
Gagal kedua: offset orientation "center"
Ganti strategi: dekorasinya jadi container sendiri dengan position: absolute, tinggal di-center horizontal. Di settings Elementor ada _offset_orientation_h, jadi saya isi center dan berharap beres.
Output CSS-nya: left: 0px. Bukan error, bukan warning, cuma diam-diam salah. Ternyata schema _offset_orientation_h hanya menerima dua nilai, start dan end. Nilai center tidak ada di enum-nya, jadi Elementor fallback ke start tanpa bilang apa-apa. Ini tipe kegagalan yang paling menyebalkan: settings-nya kelihatan tersimpan, output-nya yang bohong.
Gagal ketiga: left 50% plus translate
Kalau begitu pakai trik CSS klasik: left: 50% lalu translateX(-50%). Elementor punya _transform_translate_popover untuk persis ini. Saya isi popover-nya, cek output, dan CSS variable-nya memang muncul: --e-con-transform-translateX: -50%. Tapi hanya variable-nya. Tidak pernah ada rule transform yang benar-benar memakai variable itu.
Akar masalahnya: toggle popover saja tidak cukup untuk mengaktifkan output rule transform Elementor. Variable di-set, rule-nya tidak pernah dirender, jadi secara visual tidak terjadi apa-apa.
Cara yang akhirnya jalan
Tiga kegagalan itu sebenarnya satu pola: saya terus mencoba center-kan elemennya. Cara yang jalan justru berhenti center-kan container-nya, span-kan saja selebar ancestor, lalu biarkan flex yang center-kan isinya.
Konkretnya: satu container dekorasi sebagai first child dari section, position: absolute, dan ini kuncinya, isi _offset_x: 0 DAN _offset_x_end: 0 sekaligus. Dua-duanya terisi berarti CSS-nya jadi left: 0; right: 0, alias membentang penuh selebar ancestor yang positioned. Sisanya tinggal flex_justify_content: center untuk center-kan isi, dan z_index: 0 supaya dekorasi duduk di belakang.
{
"container_type": "flex",
"content_width": "full",
"min_height": { "unit": "px", "size": 192 },
"flex_direction": "row",
"flex_justify_content": "center",
"flex_align_items": "flex-start",
"position": "absolute",
"_offset_orientation_h": "start",
"_offset_x": { "unit": "px", "size": 0 },
"_offset_x_end": { "unit": "px", "size": 0 },
"_offset_orientation_v": "start",
"_offset_y": { "unit": "px", "size": 0 },
"z_index": 0
}Perhatikan _offset_orientation_h tetap start. Itu pelajaran dari kegagalan kedua: memang cuma start dan end yang ada, jadi jangan lawan enum-nya.
Di dalam container itu, satu image widget yang dikunci persis 1440×192:
{
"image_size": "full",
"width": { "unit": "px", "size": 1440 },
"height": { "unit": "px", "size": 192 }
}Bagian terakhir ada di file SVG-nya sendiri: dia harus tetap punya preserveAspectRatio="none". Tanpa itu, atribut width dan height di tag img tidak akan bisa memaksa stretch, dan rasio 1459×520 kembali menang. Dengan itu, browser patuh pada 1440×192 yang saya minta.
Terakhir, semua sibling konten di section itu saya naikkan ke z_index: 1 supaya tidak ketutup dekorasi. Pola ini saya apply identik ke enam belas halaman, lalu 28 ribu karakter custom CSS per halaman itu saya hapus tuntas. Template boleh di-apply ulang sesering apa pun, dekorasinya tidak akan putus lagi.
Pelajaran
- Background control Elementor tidak bisa memaksa dua dimensi.
background_bg_widthcuma menghasilkanbackground-sizesatu nilai; tinggi selalu ikut rasio intrinsik. - Nilai settings di luar enum gagal diam-diam.
centerdi_offset_orientation_hjadileft: 0pxtanpa error. Selalu verifikasi CSS yang benar-benar keluar, bukan settings yang tersimpan. - Popover transform butuh lebih dari sekadar diisi. Kalau yang muncul cuma CSS variable tanpa rule yang memakainya, berhenti buang waktu melawannya.
left: 0plusright: 0plus flex center jauh lebih tahan banting daripadaleft: 50%plus translate untuk elemen absolut full-width.- SVG yang mau di-stretch wajib
preserveAspectRatio="none". Tanpa itu, dimensi yang kamu kunci di widget tidak berarti apa-apa.