Pengaturan Latar Belakang

Tumpang tindih

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: Memilih blend mode dan mengoptimalkan cara tumpang tindih antara latar belakang dan teks.
• Reset: Mengembalikan pengaturan bagian ini ke kondisi awal.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Tumpang tindih digambar sebagai layer paling depan dari latar belakang tombol. Karena ditumpangkan di atas gambar atau warna latar belakang, ini efektif untuk memastikan keterbacaan sambil mempertahankan nuansa warna gambar. Tumpang tindih saat hover juga dapat diatur secara terpisah.

Pola

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.

Pola digambar berbasis SVG sehingga tidak mengalami degradasi pada layar resolusi tinggi. Pola saat hover juga dapat diatur secara terpisah. Tampilan warna pola sangat berubah tergantung kombinasi dengan warna latar belakang, sehingga disarankan menyesuaikan bersamaan dengan warna latar belakang.

Gambar

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 metode tampilan gambar latar belakang dan mengoptimalkan pemotongan serta keterbacaan.
• Video: Video URL (MP4 / YouTube / Vimeo), Terapkan: Menentukan sumber video dan menerapkan video latar belakang.
• Tampilan video: Video Fit, Video Posisi X, Video Posisi Y: Menyesuaikan cara video ditampilkan dan posisi tampilannya.
• Poster: Poster URL, Remove Poster, Poster Fit, Poster Posisi X/Y: Mengatur gambar diam yang ditampilkan sebelum dimuat untuk mencegah masalah tampilan.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

UI Pemilihan Gambar (Gambar)

• Jika Jenis media diatur ke Gambar, tab pemilihan sumber gambar akan ditampilkan.
• Tab sumber terdiri dari 4 jenis: Media Library / Search / Pilih Gambar / URL Gambar.
• Sumber mana pun yang digunakan, hasilnya akan diterapkan ke layer gambar latar belakang yang sama.

Gambar: Search

• Mempersempit kandidat dengan beralih vendor (Openverse / Unsplash / Pexels / Pixabay) dan formulir pencarian.
• Openverse dapat digunakan tanpa API key. Unsplash / Pexels / Pixabay memerlukan pengaturan API pencarian (API key, dll.), dan kandidat pencarian tidak dapat diambil jika belum diatur.
• Pencarian instan juga tersedia melalui chip kata kunci (contoh: bisnis / orang / alam).
• Silakan periksa syarat penggunaan dan ketentuan lisensi setiap layanan sebelum menggunakannya.

Gambar: Media Library

• Mempersempit daftar berdasarkan kategori preset (contoh: semua / alam / gaya hidup / makanan).
• Gambar yang dipilih dari daftar akan diterapkan ke layer latar belakang.
• Gambar berukuran besar akan memperlambat tampilan, jadi disarankan menggunakan gambar yang dioptimalkan sesuai ukuran yang dibutuhkan.

Gambar: URL Gambar

• Masukkan di kolom input URL gambar dalam format https://... dan terapkan dengan tombol apply.
• URL yang tidak dapat diambil karena 404, CORS, dll. tidak akan ditampilkan.
• Penentuan URL langsung rentan terputus saat migrasi atau pergantian CDN, sehingga disarankan pengecekan berkala untuk penggunaan produksi.

UI Pemilihan Video (Video)

• Jika Jenis media diatur ke Video, URL video/pencarian video dan pengaturan poster akan ditampilkan.
• Saat menggunakan pencarian video, pengaturan API (API key, dll.) untuk setiap vendor yang digunakan juga diperlukan. Hasil pencarian tidak akan ditampilkan jika belum diatur.
• Sesuaikan posisi pemotongan video dengan Video Fit dan Video Posisi X/Y.
• Poster adalah gambar fallback yang ditampilkan saat video belum diputar. Ini sangat penting terutama di mobile.

Fitur PRO (video): Pengaturan video latar belakang (Video URL / tampilan video / poster) adalah fitur yang tersedia di versi berbayar (ZenBlocks PRO).

Struktur layer gambar latar belakang dari bawah ke atas adalah "Warna – Gambar – Pola – Tumpang tindih". Setiap layer dikelola dengan z-index (Warna: 0, Gambar: 1, Pola: 2, Tumpang tindih: 3), dan semuanya memiliki pointer-events: none sehingga tidak menghalangi operasi klik. Pengaturan gambar saat hover juga dapat dialihkan secara terpisah.

Batasan video latar belakang: Pada perangkat mobile (iOS / Android), spesifikasi browser hanya mengizinkan pemutaran otomatis video dalam keadaan mute. Blok ini secara otomatis menambahkan muted, playsinline, loop, dan autoplay, tetapi pemutaran otomatis dapat diblokir tergantung pengaturan perangkat atau browser. Pengaturan poster image sangat disarankan. Sumber video yang didukung: YouTube (disematkan melalui mode privasi youtube-nocookie.com), Vimeo, URL file langsung (MP4, dll.).

Kontrol eksklusif gambar/video: Saat jenis media "video" dipilih, layer gambar latar belakang disembunyikan dengan display: none. Gambar dan video tidak ditampilkan secara bersamaan.

Warna

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 / Gradient: Mengatur warna solid atau gradien dan menyesuaikan tampilan latar belakang.
• Alpha: Mengatur transparansi dan menyesuaikan intensitas tumpang tindih.
• Beralih penggunaan gradien: Mengalihkan antara warna solid dan gradien untuk mengubah tampilan latar belakang.
• Reset: Mengembalikan pengaturan bagian ini ke kondisi awal.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Menggunakan gradien memungkinkan ekspresi kedalaman visual melalui transisi warna yang halus. Warna saat hover juga dapat diatur secara terpisah, dan perubahan gradien saat hover juga dapat diwujudkan. Karena berfungsi sebagai layer paling bawah dari latar belakang, pertimbangkan keseimbangan warna dengan overlay, pola, dan gambar di layer atasnya.

Transisi warna saat hover: Transisi hover warna latar belakang 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.

Transisi

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 respons.
• Tunda (ms): Mengatur waktu tunggu sebelum perubahan dimulai dan menyesuaikan timing efek.
• Pelemahan: Mengatur kurva perubahan kecepatan dan menyesuaikan kesan gerakan.
• Nilai Kustom: Menentukan nilai custom easing (format CSS cubic-bezier) dan menyesuaikan kecepatan perubahan latar belakang secara detail.
• Reset: Mengembalikan pengaturan bagian ini ke kondisi awal.

Transisi latar belakang ini diterapkan pada transisi hover dari semua elemen latar belakang: overlay, pola, gambar, dan warna. Karena independen dari transition pengaturan style, dimungkinkan untuk membuat efek di mana hanya latar belakang yang berubah dengan kecepatan berbeda.

Perbedaan dengan gambar mini dan pita: Karena pengaturan latar belakang adalah layer paling bawah yang menutupi seluruh tombol, tidak ada pengaturan Ukuran, Perbatasan, Radius Tepi, Posisi, Transformasi (Skew), dan Opasitas (panel terpisah). Pengaturan ini tersedia pada gambar mini dan pita. Di sisi lain, pengaturan latar belakang memiliki Pola, yang tidak ada pada gambar mini. Pengaturan Poster untuk video latar belakang paling detail pada pengaturan background.