Style Universal — Properti Style yang Berlaku untuk Semua Komponen

Tentang Style Universal

Setiap komponen di builder Konvert — Heading, Text, Button, Image, Column, Group, dan seterusnya — memiliki panel Style di bagian bawah panel kanan. Panel ini berisi properti-properti yang sama persis di semua komponen.

Halaman ini adalah referensi lengkap untuk semua properti style universal tersebut. Baca sekali, berlaku untuk semua.

Spacing (Margin & Padding)

Spacing mengontrol ruang di sekitar dan di dalam komponen. Ada dua konsep yang berbeda:

• Margin — jarak antara komponen ini dengan elemen di luar (komponen lain di sekitarnya)
• Padding — jarak antara border komponen dan isi komponen itu sendiri

4 Sisi Independen

Baik margin maupun padding bisa diatur untuk 4 sisi secara independen:

Satuan yang Didukung

Panduan Nilai Margin (Rekomendasi)

Background

Color

Klik color picker untuk memilih warna background komponen. Mendukung:

• Warna solid (pilih dari palet atau ketik hex code seperti #F57C00)
• Transparansi (opacity slider)

Gradient

Toggle untuk mengaktifkan background gradasi:

Contoh gradasi populer:

/* Oranye ke merah — energik */
linear-gradient(135deg, #F57C00, #E53935)

/* Biru ke ungu — premium/tech */
linear-gradient(135deg, #1976D2, #7B1FA2)

/* Hijau ke teal — segar/natural */
linear-gradient(135deg, #2E7D32, #00695C)

Border

Width

Ketebalan garis border dalam piksel. Set ke 0 untuk tidak ada border.

Color

Warna garis border — klik color picker.

Radius

Pembulatan sudut komponen dalam piksel.

Style

Shadow

Toggle shadow untuk menambahkan efek bayangan di belakang komponen.

Preset Shadow

Visibility

Hide on Mobile

Komponen tidak ditampilkan di layar mobile (lebar < 768px), tapi tetap muncul di desktop.

Hide on Desktop

Komponen tidak ditampilkan di layar desktop (lebar ≥ 768px), tapi tetap muncul di mobile.

Kapan Pakai Visibility Toggle

Ini adalah fitur yang sangat berguna untuk optimasi performa dan UX per perangkat:

Animation

Animasi muncul saat komponen masuk ke viewport (saat visitor scroll ke area tersebut). Menggunakan Intersection Observer API.

Type

Duration

Delay

Waktu tunggu sebelum animasi mulai setelah komponen masuk viewport:

Trigger

Semua animasi dipicu saat komponen scroll masuk ke viewport (Intersection Observer). Tidak ada trigger berdasarkan klik atau hover dari panel ini — untuk interaksi hover, gunakan Custom CSS.

Custom CSS

Textarea untuk menulis CSS yang berlaku ke wrapper komponen ini secara langsung.

Cara Kerja

CSS yang kamu tulis diapply ke elemen wrapper terluar komponen. Mirip seperti menulis inline style tapi dengan kekuatan penuh CSS.

Contoh Penggunaan

/* Efek glow oranye saat hover */
&:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(245, 124, 0, 0.3);
  transition: all 0.3s ease;
}

/* Custom font weight */
font-weight: 900;
letter-spacing: -0.02em;

/* Animated gradient background */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
background-size: 300% 300%;
animation: gradientShift 6s ease infinite;

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glassmorphism card effect */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);

/* Pulsing CTA effect */
animation: pulse 2s ease-in-out infinite;

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.03); }
}

Best Practices

/* Perlu custom karena desainer minta efek glow khusus — tidak tersedia di preset shadow */

Ringkasan Quick Reference