Pengaturan Band

Tumpang tindih

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur layer warna yang ditumpangkan di atas elemen latar belakang. Berguna untuk menyesuaikan keterbacaan pada foto atau video.

Dampak pengaturan ini: Meratakan perbedaan terang-gelap subjek sehingga teks lebih mudah dibaca.

Tips penyesuaian: Mulai dengan menentukan kepekatan menggunakan warna solid, lalu kembangkan ke gradien hanya jika diperlukan agar tidak berantakan.

Item Pengaturan

• Warna / Gradient: Mengatur warna solid atau gradien dan menyesuaikan tampilan latar belakang.
• Opasitas: Mengatur opasitas dan menyesuaikan tampilan keseluruhan elemen.
• Mode Campuran: Mengatur blend mode dan menyesuaikan cara tumpang tindih dengan latar belakang.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Pola

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur jenis dan intensitas pola latar belakang. Dapat menambah informasi visual sambil menghindari kesan monoton.

Dampak pengaturan ini: Tekstur ditambahkan sehingga memberikan ekspresi lebih dibanding warna polos.

Tips penyesuaian: Karena yang utama tetap teks, menjaga kontras pola agar tetap rendah akan memberikan stabilitas dalam penggunaan praktis.

Item Pengaturan

• Jenis Pola: Memilih jenis pola dan menentukan tekstur latar belakang.
• Warna Pola: Mengatur warna pola dan menyesuaikan kontras terhadap latar belakang.
• Ukuran Pola: Mengatur ukuran pola dan menyesuaikan kepadatan.
• Opasitas Pola: Mengatur transparansi pola dan menyesuaikan intensitas dekorasi.
• Mode Campuran: Memilih blend mode dan mengoptimalkan cara tumpang tindih antara latar belakang dan teks.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Gambar

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur metode tampilan gambar atau video. Tampilan sangat berubah tergantung fit, posisi, dan pengulangan.

Dampak pengaturan ini: Materi yang sama pun dapat sangat berbeda daya tariknya tergantung pengaturan.

Tips penyesuaian: Tentukan Fit terlebih dahulu, lalu sesuaikan posisi, dan terakhir selesaikan keterbacaan dengan Opasitas atau Tumpang tindih — urutan ini paling efisien.

Item Pengaturan

• Jenis media (gambar / video): Memilih jenis media yang digunakan untuk latar belakang.
• Gambar: Ulang, Metode Penyesuaian, Rotasi (deg), Opasitas: Menyesuaikan tampilan gambar latar belakang pita dan mengontrol intensitas dekorasi.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Fitur PRO (video): Pengaturan video pita tersedia di versi berbayar (ZenBlocks PRO). Untuk menggunakan URL video atau posisi tampilan video, diperlukan versi PRO.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Warna

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur warna dasar. Warna ini menjadi fondasi dari struktur layer.

Dampak pengaturan ini: Kesan akhir ditentukan oleh hubungan dengan overlay dan warna teks.

Tips penyesuaian: Prioritaskan warna yang terbaca dalam kombinasi teks dan latar belakang, daripada warna yang terlihat bagus sendiri.

Item Pengaturan

• Warna dasar: Mengatur warna dasar dan menentukan warna fondasi elemen.
• Opasitas: Mengatur opasitas dan menyesuaikan tampilan keseluruhan elemen.
• Mode Campuran: Memilih blend mode dan mengoptimalkan cara tumpang tindih antara latar belakang dan teks.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Transisi warna saat hover: Transisi hover warna pita diimplementasikan secara internal dengan metode crossfade (menumpuk status normal dan hover sebagai layer terpisah dan beralih dengan opacity). Oleh karena itu, peralihan dari warna solid normal ke gradien hover (atau sebaliknya) juga bertransisi dengan halus.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Ukuran

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur ukuran tampilan seperti lebar dan tinggi elemen. Digunakan untuk mengoptimalkan tampilan di setiap perangkat.

Dampak pengaturan ini: Meskipun jumlah konten sama, visibilitas dan kesan berubah tergantung pengaturan ukuran.

Tips penyesuaian: Setelah mengatur di desktop, periksa secara terpisah di mobile untuk memastikan tidak ada pemotongan teks atau kekurangan ruang.

Item Pengaturan

• Lebar: Mengatur lebar dan menyesuaikan luas area tampilan.
• Tinggi: Mengatur tinggi dan menyesuaikan kepadatan serta visibilitas elemen.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Perbatasan

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur warna, ketebalan, dan jenis garis bingkai. Memperjelas kontur tombol agar dikenali sebagai elemen yang dapat diklik.

Dampak pengaturan ini: Bahkan pada desain dengan warna latar belakang tipis, bingkai memberikan efek batas yang jelas.

Tips penyesuaian: Bingkai yang terlalu tebal melemahkan kehadiran teks, jadi mulai penyesuaian dari sekitar 1px agar lebih mudah dikelola.

Item Pengaturan

• Perbatasan (ON/MATI): Mengaktifkan/menonaktifkan bingkai dan menentukan apakah kontur ditekankan.
• Warna: Mengatur warna dan menyesuaikan visibilitas elemen serta keselarasan desain.
• Lebar: Mengatur lebar dan menyesuaikan luas area tampilan.
• Style: Memilih style dan menyesuaikan tampilan garis dan dekorasi.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Radius Tepi

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur kelengkungan sudut elemen. Dapat menyesuaikan nuansa merek (kaku/lembut) pada tingkat kesan.

Dampak pengaturan ini: Nilai border radius mengubah tampilan berdasarkan rasio terhadap ukuran tombol.

Tips penyesuaian: Sekitar 20-35% dari tinggi menjadi acuan yang baik untuk keseimbangan yang tidak terlalu bulat dan tidak terlalu kaku.

Item Pengaturan

• Radius Tepi: Mengatur radius sudut dan menyesuaikan kesan elemen.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Posisi

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur posisi penempatan elemen. Dapat mengontrol tumpang tindih dan jarak dengan elemen sekitarnya.

Dampak pengaturan ini: Pengaturan posisi memiliki dampak yang luas karena juga bisa menjadi penyebab rusaknya layout.

Tips penyesuaian: Mulai dengan posisi relatif terlebih dahulu, dan batasi posisi absolut hanya pada bagian yang diperlukan agar lebih mudah dipelihara.

Item Pengaturan

• Horizontal (Left / Center / Right): Mengatur posisi penempatan horizontal dan menyeimbangkan titik berat layout.
• Vertikal (Top / Center / Bottom): Mengatur posisi penempatan vertikal dan mengoptimalkan keseimbangan atas-bawah.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Opasitas

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur opasitas keseluruhan elemen dan blend mode. Dapat menyesuaikan cara tumpang tindih dengan latar belakang secara desain.

Dampak pengaturan ini: Warna yang sama pun dapat memberikan kesan yang sangat berbeda dengan Opasitas dan Blend.

Tips penyesuaian: Jika keterbacaan menurun, koreksi dulu warna teks dan kontras latar belakang sebelum menyesuaikan Opasitas.

Item Pengaturan

• Opasitas: Mengatur opasitas dan menyesuaikan tampilan keseluruhan elemen.
• Mode Campuran: Mengatur blend mode dan menyesuaikan cara tumpang tindih dengan latar belakang.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Transformasi

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur transformasi seperti rotasi dan kemiringan. Dapat digunakan untuk panduan visual atau aksen dekoratif.

Dampak pengaturan ini: Transformasiasi kecil pun memberikan perubahan kesan yang besar, dan jika berlebihan akan mengurangi keterbacaan.

Tips penyesuaian: Mulai dari sekitar 0 derajat dengan penyesuaian halus, dan hindari transformasi kuat dalam penggunaan praktis.

Item Pengaturan

• Skew X: Mengatur kemiringan arah sumbu X dan menambahkan aksen dekoratif.
• Skew Y: Mengatur kemiringan arah sumbu Y dan menyesuaikan ekspresi elemen.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Dihasilkan sebagai CSS transform: skew(). Transformasi saat hover juga dapat diatur secara terpisah. Semakin besar sudut kemiringan, semakin besar kemungkinan melampaui batas tombol, jadi periksa bersama dengan pengaturan overflow: hidden.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Transisi

Tampilan mungkin sedikit berbeda dari kondisi aktual.

Poin penting: Mengatur kecepatan perubahan dari status normal ke status hover. Item yang menentukan "kenyamanan" saat berinteraksi.

Dampak pengaturan ini: Terlalu cepat membuat perubahan tidak terasa, terlalu lambat terasa tidak responsif.

Tips penyesuaian: Mulai dengan Duration 200-350ms sebagai acuan, lalu tambahkan delay atau custom easing hanya pada bagian yang membutuhkan efek khusus.

Item Pengaturan

• Durasi (ms): Mengatur durasi perubahan dan menyesuaikan kecepatan efek.
• Tunda (ms): Mengatur waktu tunda dan menyesuaikan timing mulai animasi.
• Pelemahan: Mengatur kurva perubahan kecepatan dan menyesuaikan kesan gerakan.
• Nilai Kustom: Menentukan nilai custom easing (format CSS cubic-bezier) dan menyesuaikan nuansa perubahan.
• Reset: Mengembalikan pengaturan bagian ini ke kondisi awal.

Transisi pita diterapkan pada semua transisi hover: overlay, pola, gambar, warna, opacity, dan transform. Beroperasi secara independen dari transition badan tombol.

Perbedaan dengan background dan gambar mini: Pita adalah yang paling kaya fitur di antara tiga layer visual (background, gambar mini, pita). Transformasi (Skew) hanya tersedia pada pita. Selain itu, Pola tersedia pada background dan pita tetapi tidak pada gambar mini. Karena pengaturan background tidak memiliki Ukuran, Perbatasan, Radius Tepi, Posisi, dan Transformasi, gunakan pita atau gambar mini untuk layer dekoratif yang memerlukan kontrol individual atas posisi dan bentuk.