Ruang Kelas Indonesia

Header menu yang responsif dan menarik adalah salah satu elemen penting dalam desain website modern. Dengan menggunakan Elementor, kita bisa membuat header yang tak hanya fungsional, tapi juga estetis. Salah satu efek yang sering digunakan adalah Sticky Effect Shrink, yaitu saat header mengecil secara otomatis ketika pengguna menggulir halaman ke bawah — memberikan tampilan yang lebih dinamis dan menghemat ruang layar. Dalam tutorial ini, kamu akan belajar bagaimana membuat efek tersebut menggunakan shortcode sederhana di Elementor, tanpa perlu plugin tambahan atau coding yang rumit. Cocok untuk kamu yang ingin mempercantik tampilan website WordPress-mu dengan cara yang praktis namun tetap profesional. copykan code di bawah pada custome CSS #header-bar .header-internal { border: 1px solid rgba(0, 0, 0, 0.0); } #header-bar.elementor-sticky–effects .header-internal { /* change the nav background colour & add blur */ background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(6px); /* Pushes nav container away from edges */ margin-top:20px; /* Add rounded edges */ border-radius: 100px; border: 1px solid rgb(255, 255, 255, 0.6); padding-right: 30px; padding-left: 30px; } #header-bar.elementor-sticky–effects .header-internal .sticky-menu-items ul li a { /* change the nav menu text colour – optional */ color: #fff !important; } #header-bar.elementor-sticky–effects .header-internal, #header-bar .header-internal .sticky-menu-items ul li a, #header-bar .elementor-sticky–effects .header-internal .header-logo, #header-bar .header-internal { transition: .3s all ease-in-out; } /* Mobile Styles */ @media (max-width: 767px) { #header-bar.elementor-sticky–effects .header-internal { background: rgba(0, 0, 0, 0.4) !important; } .elementor-nav-menu–dropdown { margin-left: 10px; margin-right: 10px; } } Jangan lupa subsribe ya

CPAS (Collaborative Performance Advertising Solution) Shopee adalah fitur kolaborasi iklan antara platform Shopee dengan Facebook (Meta), yang memungkinkan seller mempromosikan produk mereka langsung melalui Facebook Ads dan Instagram Ads dengan tujuan utama mengarahkan traffic ke toko atau produk mereka di Shopee. CPAS ini sangat berguna bagi seller yang ingin menjangkau audiens yang lebih luas di luar platform Shopee, namun tetap menjaga proses pembelian berlangsung di dalam Shopee. 4 Kelebihan CPAS Shopee Iklan Langsung Tertarget ke Produk ShopeeCPAS memungkinkan iklan langsung mengarah ke halaman produk di Shopee, sehingga memudahkan calon pembeli untuk segera checkout tanpa harus mencari-cari lagi. Retargeting yang EfektifSeller bisa menampilkan ulang iklan ke calon pembeli yang sudah pernah melihat atau mengklik produk mereka, meningkatkan kemungkinan konversi. Data Terintegrasi dengan Facebook PixelCPAS menyediakan insight performa iklan dengan data akurat dari Facebook, seperti klik, tambah ke keranjang, dan pembelian, sehingga memudahkan evaluasi strategi. Meningkatkan Branding dan PenjualanDengan menampilkan produk secara profesional di Facebook dan Instagram, seller dapat meningkatkan awareness dan memperbesar peluang penjualan. 4 Kekurangan CPAS Shopee Tidak Bisa Mengakses Data Pelanggan LangsungSeller tidak dapat mengakses data pelanggan secara mendetail karena semua transaksi terjadi di Shopee, membatasi strategi remarketing secara langsung di luar Shopee. Butuh Pengelolaan Iklan yang ProfesionalUntuk hasil optimal, seller harus paham strategi Facebook Ads. Tanpa pemahaman yang tepat, iklan bisa boros biaya dengan hasil yang minim. Tidak Cocok untuk Semua ProdukProduk dengan margin keuntungan kecil bisa kesulitan menutupi biaya iklan, terutama jika tidak memiliki keunikan atau daya saing tinggi. Proses Setup CPAS Tidak InstanSeller harus mendaftar ke Shopee untuk mengaktifkan fitur CPAS, dan terkadang proses verifikasi serta setup bisa memakan waktu. CPAS Shopee adalah solusi iklan kolaboratif antara Shopee dan Facebook yang memberikan kesempatan bagi seller untuk mempromosikan produk mereka di luar platform Shopee, khususnya melalui Facebook dan Instagram Ads. Dengan sistem yang mengarahkan langsung ke halaman produk di Shopee, fitur ini menjadi jembatan efektif antara media sosial dan e-commerce, memberikan kemudahan dalam proses pembelian dan peningkatan visibilitas toko. Meskipun menawarkan banyak kelebihan seperti kemudahan retargeting, integrasi data yang akurat, dan potensi peningkatan konversi, CPAS tetap membutuhkan strategi dan pengelolaan iklan yang baik. Keterbatasan seperti tidak bisa mengakses data pelanggan secara langsung dan biaya iklan yang bisa membengkak jika tidak dikelola dengan benar menjadi tantangan tersendiri bagi para seller. Secara keseluruhan, CPAS Shopee merupakan alat yang sangat potensial untuk meningkatkan performa toko, terutama bagi seller yang siap berinvestasi dalam iklan dan memahami dasar-dasar digital marketing. Dengan strategi yang tepat, CPAS bisa menjadi senjata ampuh untuk meningkatkan penjualan dan memperkuat brand di tengah persaingan marketplace yang semakin ketat.

Wireframe design adalah kerangka dasar visual dari suatu halaman website atau aplikasi yang menunjukkan struktur, tata letak, dan elemen-elemen utama pada antarmuka tanpa memperhatikan detail desain seperti warna, gambar, atau tipografi yang kompleks. Tujuan Wireframe: Untuk memetakan dan merancang alur navigasi pengguna (user flow) dan posisi elemen-elemen penting seperti header, menu, tombol, form, gambar, dll. sebelum masuk ke tahap desain visual yang lebih detail. Ciri-ciri Wireframe: Biasanya dibuat hitam putih atau abu-abu. Tidak memiliki warna, tipografi artistik, atau gambar asli. Menggunakan placeholder seperti kotak, garis, dan ikon dummy. Fokus pada fungsi dan hierarki informasi, bukan estetika. Jenis-jenis Wireframe: Low-fidelity wireframe: Sangat sederhana, biasanya sketsa atau digambar di atas kertas atau tools digital (Figma, Balsamiq, Whimsical). Mid-fidelity wireframe: Sedikit lebih detail, sudah memperlihatkan ukuran elemen dan hierarki konten. High-fidelity wireframe: Hampir mendekati desain akhir, namun masih belum full visual Kenapa wireframe penting? Memudahkan diskusi antar tim (designer, developer, klien). Menghindari revisi besar di akhir karena alur sudah dipikirkan dari awal. Menghemat waktu dan biaya produksi.   High Fidelity Design (Hi-Fi Design) adalah versi desain yang paling mendekati tampilan akhir dari sebuah aplikasi atau website. Desain ini sudah lengkap secara visual, interaktif, dan siap untuk di-handover ke developer untuk dikoding. Ciri-ciri High Fidelity Design: ✅ Warna & Tipografi FinalSudah menggunakan warna, font, ukuran teks, dan gaya visual yang sebenarnya. ✅ Gambar & Ikon AsliTidak ada placeholder. Semua visual sudah seperti versi produksi. ✅ Detail InteraksiTombol, animasi, efek hover, transisi, dan feedback interaktif sudah ditunjukkan. ✅ Real ContentMenggunakan konten yang mendekati aslinya (bukan hanya “Lorem ipsum”). ✅ Responsive Design (opsional)Biasanya disertakan versi mobile, tablet, dan desktop.  Tujuan High Fidelity Design: Memberikan gambaran final kepada stakeholder. Menjadi panduan utama untuk tim developer. Bisa digunakan untuk prototyping dan user testing yang lebih akurat.  Tools Populer untuk Hi-Fi Design: Figma (paling populer sekarang) Adobe XD Sketch Framer InVision (untuk prototyping)

Design System dalam UI/UX adalah kumpulan pedoman, prinsip, komponen, dan pola desain yang secara konsisten digunakan untuk membangun antarmuka pengguna (user interface) dalam sebuah produk digital.