Untuk membuat header sticky yang awalnya transparan dan berubah menjadi solid saat di-scroll di Elementor Pro, kamu bisa mencapainya dengan Motion Effects dan Custom CSS. Ini sangat umum dipakai di website modern.

✅ Langkah-langkah Lengkap di Elementor Pro

1. Edit Template Header

• Buka Templates > Theme Builder > Header.
• Klik Edit with Elementor.

2. Atur Header Awalnya Transparan

• Klik section utama header (bagian paling luar).
• Tab Style > Background:
  • Atur Background Type ke Classic.
  • Pilih warna dengan opacity 0 (atau gunakan rgba(255,255,255,0)).

3. Tambahkan Kelas CSS

• Masih di section header → Tab Advanced > CSS Classes → isi misalnya: cssSalinEditmy-header

4. Aktifkan Sticky

• Tab Advanced > Motion Effects:
  • Sticky: Top.
  • Sticky On: Desktop, Tablet, atau sesuai kebutuhan.
  • Tambahkan Effects Offset jika ingin animasi muncul setelah scroll beberapa px.

5. Tambahkan Custom CSS (Elementor Pro Only)

Klik tab Advanced > Custom CSS, lalu masukkan kode berikut:

cssSalinEdit.my-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.elementor-sticky--effects.my-header {
  background-color: rgba(255, 255, 255, 0.95); /* ubah ke warna solid yang diinginkan */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* opsional: efek bayangan saat sticky */
}

Ganti warna rgba(255,255,255,0.95) sesuai keinginan (bisa juga #fff, dll).

---

🎯 Hasil Akhir:

• Saat halaman dimuat: Header transparan.
• Saat discroll: Header berubah jadi warna solid + efek bayangan (opsional).
• Transisi halus berkat transition.

---

Kalau kamu ingin juga ubah ukuran logo, teks, padding saat sticky, itu bisa ditambahkan juga — tinggal bilang ya!