D
P
0
← Semua artikel Read in English

Elementor: Di Balik Page Builder

Icon Widget Elementor Bikin SVG Outline Jadi Blok Solid, `primary_color` Mewarnai Lingkaran, dan `icon-list` Tanpa Typography

Ditulis oleh · · 5 menit baca
Icon Widget Elementor Bikin SVG Outline Jadi Blok Solid, `primary_color` Mewarnai Lingkaran, dan `icon-list` Tanpa Typography

Waktu membangun ulang satu halaman panjang untuk sebuah situs klien, saya kena tiga kejutan berturut-turut dari widget yang paling saya anggap sepele: icon widget. Ketiganya muncul dalam sesi yang sama, ketiganya bikin saya bolak-balik ke editor karena mengira saya yang salah setting. Ternyata ketiganya adalah perilaku bawaan widget itu, cuma tidak ada yang memberi tahu.

Saya tulis ketiganya sekaligus karena polanya sama: icon widget punya asumsi sendiri tentang bentuk ikonmu, dan kalau ikonmu tidak cocok dengan asumsi itu, dia tidak protes. Dia diam saja sambil merusak.

Kejutan pertama: SVG outline berubah jadi blok solid

Komponen pertama yang saya pasang adalah kartu langkah, masing-masing dengan ikon garis di atasnya. Ikon-ikonnya bertipe outline, artinya di dalam SVG-nya seperti ini:

<path stroke="white" fill="none" stroke-width="1.5" d="..." />

Bentuknya kerangka. Tidak ada isian, cuma garis. Begitu saya masukkan ke icon widget, hasilnya bukan garis. Yang muncul di halaman adalah gumpalan solid, seperti siluet aneh dari ikon aslinya. Awalnya saya kira file SVG-nya rusak, jadi saya buka di editor. File-nya baik-baik saja, garisnya bersih.

Yang bikin makin bingung: beberapa ikon lain di halaman yang sama tampil normal. Setelah saya bandingkan, bedanya jelas. Ikon yang normal adalah ikon solid, yang di dalamnya memang punya fill="#hex" sendiri. Ikon yang rusak semuanya bertipe outline.

Penyebabnya ada di CSS yang dipasang icon widget sendiri. Widget itu ingin kamu bisa mengatur warna ikon dari panel, jadi dia menerapkan fill: var(--icon-color) ke semua path di dalam SVG-mu. Untuk ikon solid, itu persis yang kamu mau: warnanya jadi bisa dikontrol. Untuk ikon outline, itu bencana. fill="none" yang tadinya bikin ikon berupa kerangka ditimpa dengan warna penuh, dan yang tadinya ruang kosong di dalam garis sekarang jadi blok berwarna. Atribut stroke kamu sebenarnya masih digambar, cuma sudah tidak terbaca lagi sebagai garis begitu ruang di dalamnya ikut berwarna.

Jadi bukan SVG-nya yang salah, dan bukan juga setting saya. Icon widget memang cuma ditulis dengan asumsi bahwa ikon itu bentuk solid.

Perbaikannya: jangan pakai icon widget untuk SVG outline. Ganti dengan kombinasi container dan widget image. Container yang mengurus lingkaran latarnya (background plus border-radius 50%), widget image yang menampilkan SVG-nya. Kuncinya, widget image me-render SVG sebagai <img>, dan <img> tidak bisa diintervensi CSS dari luar. Atribut stroke dan fill="none" di dalam file tetap utuh, ikonnya tampil persis seperti di editor desain.

Aturan praktis yang saya pegang sejak itu: icon widget aman untuk SVG solid, tidak aman untuk SVG outline.

Kejutan kedua: primary_color malah mewarnai lingkarannya

Kejutan kedua datang dari komponen lain di halaman yang sama, semacam pill kecil berisi ikon di dalam lingkaran. Untuk itu saya pakai icon widget dengan view: "stacked", yang memang menyediakan bentuk lingkaran di belakang ikon.

Saya ingin ikon putih di atas lingkaran berwarna aksen. Logika saya sederhana: ikonnya yang utama, jadi warna ikon masuk ke primary_color, dan lingkarannya cuma pendukung, jadi masuk ke secondary_color. Hasilnya kebalikan total. Lingkarannya jadi putih, ikonnya jadi warna aksen.

Di mode stacked, semantiknya memang terbalik dari intuisi:

Begitu tahu itu, kombinasinya langsung jelas. Ikon putih di atas lingkaran aksen berarti primary_color diisi warna aksen dan secondary_color diisi #FFFFFF.

Ada satu lagi yang sempat menghabiskan waktu saya di komponen yang sama: ukurannya. Saya set icon_size ke ukuran lingkaran yang saya mau, dan hasilnya selalu jauh lebih besar. Di mode stacked, icon_size itu ukuran ikonnya saja, bukan ukuran lingkarannya. Ukuran total dihitung begini:

total = icon_size + (2 × icon_padding)

Jadi kalau kamu mau lingkaran 48px dengan ikon 24px di tengahnya, isi icon_size 24 dan icon_padding 12. Untuk pill yang saya kerjakan, targetnya lingkaran 64px dengan ikon 20px, jadi paddingnya 22:

{
  "view": "stacked",
  "shape": "circle",
  "icon_size": 20,
  "icon_padding": 22,
  "primary_color": "<hex aksen, alpha rendah untuk tint halus>",
  "secondary_color": "<hex warna ikon>"
}

primary_color di situ saya isi warna aksen dengan alpha sangat rendah, sekitar 0.02, supaya lingkarannya cuma jadi tint tipis, bukan blok berwarna.

Kejutan ketiga: icon-list tidak punya typography sama sekali

Yang ketiga ini paling bikin saya merasa gila sebentar. Saya pasang beberapa bullet pakai widget icon-list, lalu buka tab Style untuk menyetel font teksnya. Saya set family, size, weight, semuanya. Halaman di-refresh, teksnya tetap tampil dengan font default tema, Inter 16px. Tidak bergeser sedikit pun.

Refleks pertama saya jelas: pasti ada CSS tema yang menang spesifisitas. Jadi saya inspect elemennya, siap mencari selector yang menimpa. Tidak ada. Yang saya temukan justru tidak ada deklarasi typography sama sekali yang keluar dari widget itu.

Ternyata memang tidak ada. Schema widget icon-list tidak punya field text_typography_* sama sekali. Yang tersedia untuk teks bullet cuma text_color. Ada field icon_typography_*, dan itu yang bikin menyesatkan karena namanya terasa relevan, tapi field itu hanya berpengaruh ke glyph Font Awesome-nya, bukan ke teks di sebelahnya. Setting yang saya kira sedang saya ubah itu memang tidak pernah ada.

Jadi ini bukan bug spesifisitas, bukan cache, bukan salah panel. Kontrolnya memang tidak disediakan.

Perbaikannya: berhenti pakai icon-list kalau kamu butuh kontrol font. Saya bongkar tiap bullet jadi tiga bagian:

Lebih banyak node di struktur? Iya. Tapi setiap propertinya bisa diatur, dan hasilnya konsisten dengan komponen lain di halaman.

Yang saya bawa pulang