Pengaturan Thumbnail

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.

Tumpang tindih gambar mini hanya diterapkan di atas gambar thumbnail (independen dari overlay latar belakang tombol). Tumpang tindih saat hover juga dapat diatur secara terpisah.

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: Pilih gambar, Ulang, Metode Penyesuaian, Rotasi (deg), Opasitas: Menyesuaikan tampilan gambar thumbnail dan memotong titik fokus.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Fitur PRO (video): Pengaturan video gambar mini 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.

Batasan transition warna saat hover: Warna gambar mini menggunakan implementasi yang mentransisikan properti background secara langsung, sehingga peralihan dari warna solid normal ke gradien hover (atau sebaliknya) tidak akan bertransisi dan berubah secara instan. Ini karena spesifikasi CSS di mana background-color (warna solid) dan background-image: linear-gradient() (gradien) adalah properti yang berbeda, dan browser tidak dapat menganimasikan keduanya. Jika transisi yang halus diperlukan, samakan keduanya menjadi warna solid ke warna solid, atau gradien ke gradien.

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.

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 secara detail.
• Reset: Mengembalikan pengaturan bagian ini ke kondisi awal.

Transisi gambar mini diterapkan pada semua transisi hover: overlay, gambar, warna, border, border radius, dan opacity. Beroperasi secara independen dari transition badan tombol maupun ikon.

Perbedaan dengan background dan pita: Gambar mini tidak memiliki pengaturan Pola dan Transformasi (Skew). Jika diperlukan layer dekoratif dengan pola, gunakan pengaturan pita. Di sisi lain, gambar mini memiliki Ukuran, Perbatasan, Radius Tepi, Posisi, dan Opasitas, yang tidak tersedia pada pengaturan background.