Widget Heading Elementor Membuang `background-clip: text`, Teks Gradien Jadi Kotak Solid

Di tengah sebuah diagram radial ada satu kata bergradien. Cara menatanya paling biasa: gradien dipasang sebagai gambar latar, background-clip: text memotong lukisan itu mengikuti bentuk glif, lalu fill teksnya dibikin transparan lewat -webkit-text-fill-color supaya yang tersisa hanya gradien berbentuk huruf. Begitu kata itu masuk ke widget heading Elementor, yang muncul di layar bukan huruf bergradien melainkan kotak berwarna solid.

Kotak itu sebenarnya sudah setengah keterangan. Kalau langkah pemotongan berjalan, yang tersisa di layar adalah bentuk huruf; kalau yang tersisa justru kotak seukuran elemen, artinya pemotongannya tidak pernah terjadi. Jadi yang perlu dicari bukan kenapa gradiennya salah warna, melainkan ke mana perginya properti yang seharusnya memotong.

Field title-nya menerima HTML, atribut style-nya yang disaring

Kesimpulan tergampang di titik ini adalah field title widget heading tidak menerima HTML sama sekali. Itu keliru, dan bantahannya ada di build yang sama. Untuk kartu bernomor, teks judulnya saya bungkus dengan <ol start="N" style="margin:0;padding-left:36px;list-style:decimal;"><li>...</li></ol> langsung di field title widget heading, dan itu jalan. Field-nya memang menerima HTML.

Yang terjadi jauh lebih sempit. Widget heading membuang inline style itu dari HTML title-nya, sementara widget text-editor meneruskan inline style tanpa disentuh. Bukan tag-nya yang ditolak, melainkan atribut style-nya yang disaring dalam perjalanan.

Temuan ini saya simpan sebagai pitfall bernomor 46 di catatan rebuild, ditulis dengan penegasan bahwa style itu memang dibuang oleh widget heading dan hasilnya kotak solid, lalu ditutup penanda halaman dan tanggal kejadian di ujung entrinya. Kata "dibuang" itu yang penting. Catatan yang cuma menulis "gradiennya tidak muncul" akan membuat saya menelusuri CSS lagi dari awal enam bulan kemudian.

Ini juga bukan satu-satunya kali widget heading memaksakan pendapatnya sendiri pada isi yang disuapkan ke dia. Di bagian lain halaman yang sama, widget heading memaksakan max-width secara ketat: dengan _element_custom_width diisi 776, teksnya benar-benar terkunci di 776 dan membungkus ke baris berikutnya, tidak seperti <div style="width:776px"> di widget HTML yang tetap melar mengikuti isi kalau isinya lebih lebar. Pola yang sama, properti yang berbeda.

Karena widget text-editor meneruskan inline style apa adanya, perbaikan yang dipilih adalah memakai widget text-editor berisi elemen p ber-inline-style penuh untuk efek gradient text-clip. Seluruh deklarasi yang dibutuhkan duduk di satu atribut style, dari font sampai dua properti clip-nya:

<p style="margin:0;text-align:center;font-family:sans-serif;font-weight:500;font-size:24px;line-height:32px;background-image:linear-gradient(180deg,rgba(64,64,72,0.9),rgba(64,64,72,0.6));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;">Platform</p>

Perhatikan dua pasangan yang sengaja ditulis dobel di sana. -webkit-background-clip berpasangan dengan background-clip, dan -webkit-text-fill-color: transparent berpasangan dengan color: transparent. Di widget heading, justru pasangan-pasangan itulah yang tidak selamat sampai ke render.

Arah perbaikan ini bukan datang dari penelusuran saya sendiri. Klien melewati beberapa putaran iterasi di bagian ini, dan dari sana kembali lima perbaikan kritis. Yang kedua dari lima persis soal ini: teks gradien harus lewat widget text-editor karena widget heading membuang background-clip: text. Poin pertamanya menarik disebut karena bentuknya kebalikan, yaitu penolakan atas sesuatu yang sudah terpasang di sana. Klien menyatakan tidak ada cincin dekorasi luar 290×290 di bagian itu, cincin itu salah ditambahkan dan memang tidak ada di Figma.

Bubble yang sama menolak dua bayangan sekaligus

Elemen kecil ini masih menyimpan kendala kedua. Desain Figma-nya memakai dua bayangan pada satu elemen, halo putih setebal 8px ditambah drop shadow lembut, sedangkan Elementor hanya mendukung satu box-shadow per elemen. Di CSS mentah dua bayangan tinggal dipisah koma, tapi kontrol Elementor tidak menyediakan slot untuk yang kedua.

Jalan keluarnya geometris, bukan CSS. Halo itu diwujudkan sebagai container tambahan yang membungkus lingkaran dalam. Lingkaran dalamnya 124 dan halonya 8 di setiap sisi, jadi container luarnya harus 124 ditambah 8 dikali 2, yaitu 140. Container 140 diberi latar putih dan radius 999, dan drop shadow yang tersisa dipasang di sana. Selisih 16px yang mengelilingi lingkaran dalam itulah yang dibaca mata sebagai halo putih 8px.

Struktur akhirnya begini, dengan widget text-editor bergradien tadi duduk di lapisan paling dalam:

container 140×140     z_index 3, latar putih, radius 999, drop shadow 0 16 132 rgba(0,0,0,0.1)
  container 124×124   latar putih, border 1px #e5e7eb, radius 999
    text-editor       <p> ber-inline-style gradien seperti di atas

Spec-nya sendiri menandai trik halo ini sebagai workaround terkait dari build yang sama, satu paket dengan perbaikan gradient text-clip, dan menuliskan angkanya dalam bentuk singkat di blok code hints. Wajar keduanya jadi satu paket, karena keduanya menempel pada elemen yang sama dan keduanya lahir dari kontrol Elementor yang lebih sempit daripada properti CSS di baliknya.

Urutan elemen di array ternyata belum cukup

Bagian tempat bug ini muncul bukan section sederhana. Isinya lebih dari 19 elemen berposisi absolut, dan yang disebut satu per satu berjumlah persis 19: 6 garis penghubung, 12 ikon tool, dan 1 lingkaran teks tengah. Semuanya duduk di container induk berukuran 1008×395 dengan overflow: visible, dan dua belas lingkaran tool-nya masing-masing 88×88 dengan overflow: hidden. Satu detail kecil yang gampang bikin kepleset: nama field posisinya berbeda antara widget dan container, widget memakai _position: absolute dengan garis bawah di depan sedangkan container memakai position: absolute tanpa garis bawah.

Aturan tumpukan dasarnya sudah saya patuhi. Urutan elemen di dalam array menentukan tumpukan dan yang belakangan berada lebih atas, jadi garis ditaruh pertama, lalu lingkaran tool, lalu lingkaran tengah paling akhir supaya bagian tengah menutupi persilangan garis. Hasilnya tetap salah. Meski urutan DOM-nya sudah benar, pembungkusan container milik Elementor tetap memunculkan masalah tumpang tindih, dan garisnya terlihat menembus ikon tool sekaligus lingkaran teks tengah.

Yang menyelesaikannya adalah z_index eksplisit bertingkat pada anak-anak container diagram, ditambah overflow: hidden pada lingkaran tool supaya ikonnya terpotong rapi mengikuti radius lingkaran:

wrapper garis         z_index 1
12 lingkaran tool     z_index 2 + overflow: hidden
wrapper tengah 140    z_index 3

Container 140 dari bagian sebelumnya itulah yang memegang z_index: 3. Jadi wrapper yang lahir semata-mata sebagai akal-akalan halo putih akhirnya merangkap tugas sebagai lapisan teratas diagram.

Angka posisi dari markup lama bisa sudah menyimpang

Satu temuan lagi dari bagian yang sama, dan ini yang paling gampang lolos tanpa ketahuan. Bangunan awalnya memakai posisi yang saya ambil dari widget HTML lama, dan angkanya berbeda dengan Figma. Satu ikon yang di HTML lama duduk di x=0 seharusnya di x=45 y=154, satu lagi yang di x=920 seharusnya di x=875 y=153, dan satu ikon yang tercatat 36×36 di HTML lama ternyata salah satu dari tiga ikon yang di Figma berukuran 64×36, lebih lebar. Kesimpulannya, HTML asli bisa menyimpang dari maksud Figma, jadi posisi lingkaran tool dan dimensi gambar di dalamnya harus dicek silang ke metadata Figma, bukan cuma dicocokkan hash-nya.

Halaman itu akhirnya tercatat rampung 100% pada 18 Mei 2026 tanpa satu pun widget HTML tersisa, dan pekerjaan keseluruhannya berakhir dengan nol widget HTML di 16 dari 16 halaman. Angka nol itu yang bikin bug kecil tadi tidak bisa dihindari dengan cara paling gampang, karena membungkus teks gradien di widget HTML memang tidak boleh. Di bawah daftar berjudul "DO NOT" tertulis larangan memakai widget HTML dan kewajiban membuat semua section jadi Elementor betulan berupa container plus widget heading, text-editor, image, dan button.

Pelajaran

Widget heading Elementor menerima HTML di field title-nya, tapi tidak semua yang dititipkan sampai ke render. Inline style yang membawa background-clip: text dan -webkit-text-fill-color: transparent dibuang, dan yang muncul kotak berwarna solid.
Widget text-editor meneruskan inline style tanpa disentuh, jadi di situlah tempat yang benar untuk efek yang seluruhnya bergantung pada atribut style.
Gejala "gradien saya jadi kotak" berarti langkah clip-nya tidak pernah terjadi, bukan gradiennya yang salah. Cari properti yang hilang, jangan otak-atik warnanya.
Elementor hanya mendukung satu box-shadow per elemen. Desain dengan dua bayangan diselesaikan lewat container pembungkus yang ukurannya ditambah dua kali ketebalan halo, dalam kasus ini 124 ditambah 8 dikali 2 sama dengan 140.
Urutan elemen di array memang menentukan tumpukan, tapi untuk layout absolut yang padat itu belum cukup. z_index eksplisit bertingkat plus overflow: hidden pada elemen yang mengklip isinya baru menghentikan garis yang menembus ikon.
Angka posisi yang diwarisi dari markup lama layak dicurigai. Cek silang ke metadata desainnya, karena markup lama bisa sudah menyimpang tanpa ada yang pernah mengoreksi.