Saya sedang membangun ulang sebuah desain Figma di Elementor — halaman kampanye untuk sebuah klien, full flexbox container, spacing terukur rapi di file desainnya. Tapi setiap section yang saya bangun keluar sedikit lebih sempit dari yang seharusnya. Konten mentok di 1180px padahal Figma bilang 1200px. Elemen di dalamnya meleset sehelai rambut di kiri dan kanan — terlalu kecil untuk langsung ketahuan, terlalu konsisten untuk diabaikan.
Refleks pertama saya jelek: saya "memperbaikinya" dengan mengakali angka. Lebar konten saya naikkan sedikit, width elemen saya bulatkan ke atas, sesekali pakai margin negatif. Setiap tambalan membereskan satu section dan merusak section lain. Setelah setengah jam main tarik-ulur begitu, saya berhenti menebak dan membuka DevTools. Saya inspect elemen container-nya — class .e-con — dan melihat computed box model-nya:
const container = document.querySelector('.e-con');
const styles = getComputedStyle(container);
console.log(styles.paddingLeft, styles.paddingRight); // "10px" "10px"Di situ dia. padding: 10px kiri dan kanan — padding yang tidak pernah saya set, di container yang baru saja saya buat kosong.
Kenapa ini terjadi
Elemen Container milik Elementor ternyata membawa padding default 10px di setiap container yang kamu buat. Nilainya diset global di Site Settings → Layout, di opsi container padding — dan berlaku untuk semua container baru tanpa pernah muncul di panel elemen sebagai nilai yang "kamu isi". Artinya setiap container diam-diam memakan 20px ruang horizontal: 10px kiri, 10px kanan.
Karena ini default — bukan sesuatu yang saya masukkan — tidak pernah terpikir untuk mencarinya. Saya mengaudit nilai-nilai yang saya set sendiri berulang kali dan semuanya benar. Dan di sisi desain, frame Figma tidak punya padding implisit semacam itu: frame 1200px berarti konten memang boleh menyentuh 1200px. Jadi setiap pengukuran dari desain ke build meleset persis 20px per level container. Matematikanya begini:
/* what the design says */
.design-frame {
max-width: 1200px; /* content can touch the full 1200px */
}
/* what Elementor actually renders */
.e-con {
max-width: 1200px;
padding: 10px; /* silent default from Site Settings -> Layout */
/* usable content width: 1200 - 20 = 1180px */
}Bukan bug, bukan salah hitung saya. Cuma dua alat yang punya asumsi berbeda tentang apa arti "lebar 1200px".
Perbaikannya
Ada dua level perbaikan, dan saya pakai keduanya.
Yang pertama, untuk shell layout yang pixel-critical: set padding container-nya ke 0 secara eksplisit, lalu kendalikan spacing sendiri. Padding sungguhan hanya saya taruh di tempat desainnya memang punya padding — bukan diwarisi diam-diam dari default.
Yang kedua, dan ini yang lebih benar: ubah default-nya di sumbernya. Buka Site Settings → Layout, cari default container padding, set ke 0. Sejak itu semua container baru lahir netral, dan setiap padding yang ada di halaman adalah padding yang saya set dengan sengaja mengikuti desain. Sekali diubah per proyek, selesai.
Untuk halaman yang terlanjur dibangun sebelum saya sadar, saya audit lewat console — cari semua container yang masih membawa padding horizontal:
document.querySelectorAll('.e-con').forEach((el) => {
const styles = getComputedStyle(el);
if (styles.paddingLeft !== '0px' || styles.paddingRight !== '0px') {
console.log(el, styles.paddingLeft, styles.paddingRight);
}
});Setiap baris yang muncul adalah 20px yang harus dipertanggungjawabkan: dipertahankan karena desainnya memang begitu, atau dinolkan.
Jebakan bonus: container bersarang menggandakan selisihnya
Satu hal lagi yang patut dicatat: default ini menumpuk. Container di dalam container berarti 20px plus 20px — konten paling dalam sudah 40px lebih sempit dari frame Figma-nya. Ini yang menjelaskan kenapa tambalan-tambalan awal saya terasa acak: section dengan kedalaman nesting berbeda meleset dengan jumlah berbeda, jadi angka "koreksi" yang berhasil di satu section pasti salah di section lain. Begitu default-nya dinolkan, semua koreksi itu justru harus dicabut satu per satu.
Pelajaran
Page builder itu punya opini, dan opininya dikirim sebagai default. Sekarang checklist saya sebelum pixel-matching desain apa pun:
- Audit default builder-nya dulu — padding, gap, breakpoint — sebelum menyalahkan angka sendiri.
- Ukur pakai computed styles di DevTools, bukan pakai mata. Mata bisa menoleransi 20px; box model tidak bohong.
- Kalau layout konsisten meleset dengan jumlah yang tetap, itu hampir pasti default, bukan kesalahan di nilai-nilaimu. Nilai yang salah melesetnya acak; default melesetnya seragam.
- Set default page builder ke netral sekali di awal proyek, lalu tambahkan spacing dengan sengaja mengikuti desain.
Sejak itu, hal pertama yang saya buka di proyek Elementor baru bukan halamannya — tapi Site Settings.