Cara Menggunakan Custom CSS di Elementor

Kapan Menggunakan Custom CSS?

Walaupun Elementor sangat powerful secara visual, ada kalanya kamu perlu Custom CSS untuk styling yang tidak tersedia di panel: animasi khusus, efek hover kompleks, atau penyesuaian yang sangat spesifik.

3 Tempat untuk Menambahkan Custom CSS di Elementor

1. Per Widget (Paling Spesifik)

1. Klik widget yang ingin dikustomisasi
2. Buka tab Advanced
3. Scroll ke bagian Custom CSS
4. Tulis CSS menggunakan selector selector yang otomatis merujuk ke widget tersebut

Contoh: selector { border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

2. Per Halaman (Elementor Settings)

1. Di panel kiri bawah, klik ikon hamburger → Page Settings (Pro) atau gunakan Custom CSS field
2. CSS berlaku untuk seluruh halaman tersebut

3. Global (Seluruh Website)

1. Buka WordPress Admin → Appearance → Customize → Additional CSS
2. Atau Elementor → Site Settings → Custom CSS (Pro)
3. CSS berlaku di semua halaman

Contoh CSS Berguna untuk Elementor

Membuat tombol dengan gradient:

selector {
  background: linear-gradient(135deg, #1877f2, #42a5f5) !important;
  border: none;
  transition: opacity 0.3s;
}
selector:hover { opacity: 0.85; }

Efek card hover dengan shadow:

selector {
  transition: transform 0.3s, box-shadow 0.3s;
}
selector:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

Tips Custom CSS di Elementor

• Gunakan selector keyword — Elementor otomatis menggantinya dengan class unik widget
• Tambahkan !important jika CSS tidak berfungsi karena tertimpa style Elementor
• Gunakan browser DevTools (F12) untuk inspect class yang perlu di-override