Impostazioni sfondo

Sovrapposizione

Punto chiave: Imposta un livello di colore sovrapposto agli elementi di sfondo. Utile per regolare la leggibilità su foto e video.

Cosa cambia con questa impostazione: Uniforma le differenze di luminosità del soggetto, rendendo il testo più leggibile.

Suggerimento per la regolazione: Iniziate definendo l'intensità con un colore pieno, ed espandete al gradiente solo se necessario per evitare risultati incoerenti.

Voci di impostazione

• Colore / Gradient: Imposta un colore pieno o un gradiente per regolare l'espressione dello sfondo.
• Opacità: Imposta l'opacità per regolare l'aspetto complessivo dell'elemento.
• Modalità di fusione: Seleziona la modalità di fusione per ottimizzare la sovrapposizione tra sfondo e testo.
• Ripristina: Riporta le impostazioni di questa sezione allo stato iniziale.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

La sovrapposizione viene renderizzata come livello più in alto dello sfondo del pulsante. Poiché si sovrappone alle immagini e ai colori di sfondo, è efficace quando si desidera preservare le tonalità dell'immagine garantendo al contempo la leggibilità. Anche la sovrapposizione nello stato hover è configurabile individualmente.

Motivo

Punto chiave: Imposta il tipo e l'intensità del pattern di sfondo. Aggiunge informazione visiva evitando la monotonia.

Cosa cambia con questa impostazione: La texture aggiunta conferisce più espressività rispetto a uno sfondo piatto.

Suggerimento per la regolazione: Il protagonista resta il testo, quindi mantenere basso il contrasto del pattern garantisce stabilità nell'uso pratico.

Voci di impostazione

• Tipo di motivo: Seleziona il tipo di pattern per definire la texture dello sfondo.
• Coloree motivo: Imposta il colore del pattern per regolare il contrasto con lo sfondo.
• Dimensione motivo: Imposta la dimensione del pattern per regolare la densità visiva.
• Opacità motivo: Imposta la trasparenza del pattern per regolare l'intensità della decorazione.
• Modalità di fusione: Seleziona la modalità di fusione per ottimizzare la sovrapposizione tra sfondo e testo.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

I pattern vengono renderizzati in formato SVG, quindi non si degradano neanche su display ad alta risoluzione. Anche il pattern nello stato hover è configurabile individualmente. Il colore del pattern cambia notevolmente in base alla combinazione con il colore di sfondo, pertanto si consiglia di regolarli contemporaneamente.

Immagine

Punto chiave: Imposta il metodo di visualizzazione di immagini e video. Fit, posizione e ripetizione cambiano notevolmente l'aspetto.

Cosa cambia con questa impostazione: Anche con lo stesso materiale, le impostazioni possono variare notevolmente l'impatto comunicativo.

Suggerimento per la regolazione: Definite prima il Fit, poi regolate la posizione e infine perfezionate la leggibilità con Opacità e Sovrapposizione: questo ordine è il più efficiente.

Voci di impostazione

• Tipo di media (immagine / video): Seleziona il tipo di media da utilizzare come sfondo.
• Immagine: Selezione immagine, Ripeti, Metodo di adattamento, Rotazione (gradi), Opacità: Regola il metodo di visualizzazione dell'immagine di sfondo ottimizzando ritaglio e leggibilità.
• Video: Video URL (MP4 / YouTube / Vimeo), Applica: Specifica la sorgente video e applica il video come sfondo.
• Visualizzazione video: Video Fit, Video Posizione X, Video Posizione Y: Regola l'adattamento e la posizione di visualizzazione del video.
• Poster: Poster URL, Remove Poster, Poster Fit, Poster Posizione X/Y: Imposta un'immagine fissa da mostrare prima del caricamento, prevenendo problemi di visualizzazione.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

UI di selezione immagine (Immagine)

• Impostando Tipo media su Immagine, viene visualizzata la scheda di selezione della sorgente immagine.
• Le schede sorgente sono di 4 tipi: Libreria media / Search / Selezione immagine / URL immagine.
• Qualunque sorgente si utilizzi, il risultato viene applicato allo stesso livello immagine di sfondo.

Immagine: Search

• Filtra i candidati tramite la commutazione del fornitore (Openverse / Unsplash / Pexels / Pixabay) e il modulo di ricerca.
• Openverse può essere utilizzato senza chiave API. Unsplash / Pexels / Pixabay richiedono la configurazione dell'API di ricerca (chiave API, ecc.); se non configurati, i risultati di ricerca non vengono recuperati.
• È possibile effettuare ricerche immediate anche tramite i chip di parole chiave (es.: business / persone / natura).
• Verificate i termini di utilizzo e le condizioni di licenza di ciascun servizio prima dell'uso.

Immagine: Libreria media

• Filtra l'elenco tramite categorie preimpostate (es.: Tutto / Natura / Lifestyle / Food).
• L'immagine selezionata dall'elenco viene applicata al livello di sfondo.
• Le immagini di grandi dimensioni rallentano la visualizzazione; si consiglia di utilizzare immagini ottimizzate per la dimensione necessaria.

Immagine: URL immagine

• Specificate l'URL nel formato https://... nel campo di immissione e applicate con il pulsante di conferma.
• Gli URL non raggiungibili a causa di errori 404 o CORS non vengono visualizzati.
• L'uso diretto di URL è soggetto a interruzioni durante migrazioni o cambi di CDN; per l'uso in produzione si consiglia una verifica periodica.

UI di selezione video (Video)

• Impostando Tipo media su Video, vengono visualizzati l'URL del video, la ricerca video e le impostazioni del poster.
• Anche per utilizzare la ricerca video è necessaria la configurazione dell'API di ciascun fornitore (chiave API, ecc.). Se non configurata, i risultati di ricerca non vengono visualizzati.
• Regolate la posizione di ritaglio del video con Video Fit e Video Posizione X/Y.
• Il Poster è l'immagine di fallback mostrata quando il video non è in riproduzione. È particolarmente importante su mobile.

Funzionalità PRO (video): Le impostazioni video dello sfondo (Video URL / visualizzazione video / poster) sono funzionalità disponibili nella versione a pagamento (ZenBlocks PRO).

La struttura dei livelli dell'immagine di sfondo, dal basso verso l'alto, è: "Coloree -> Immagine -> Motivo -> Sovrapposizione". Ogni livello è gestito tramite z-index (Coloree: 0, Immagine: 1, Motivo: 2, Sovrapposizione: 3), e a tutti viene applicato pointer-events: none per non interferire con le operazioni di clic. Anche le impostazioni dell'immagine nello stato hover possono essere commutate individualmente.

Limitazioni del video di sfondo: Sui dispositivi mobile (iOS / Android), esiste una specifica del browser per cui la riproduzione automatica dei video è consentita solo in stato muto. Questo blocco applica automaticamente muted, playsinline, loop e autoplay, ma in base alle impostazioni del dispositivo o del browser, la riproduzione automatica potrebbe essere bloccata. Si raccomanda vivamente di impostare un'immagine poster. Sorgenti video supportate: YouTube (incorporamento in modalità privacy avanzata tramite youtube-nocookie.com), Vimeo, URL di file diretti (MP4, ecc.).

Controllo esclusivo immagine/video: Selezionando "video" come tipo di media, il livello immagine di sfondo viene nascosto con display: none. Immagine e video non vengono visualizzati contemporaneamente.

Coloree

Punto chiave: Imposta il colore di base. È il colore fondamentale della struttura a livelli.

Cosa cambia con questa impostazione: L'impressione finale è determinata dal rapporto con la sovrapposizione e il colore del testo.

Suggerimento per la regolazione: Piuttosto che un colore che colpisce da solo, date priorità a un colore leggibile nella combinazione testo-sfondo.

Voci di impostazione

• Colore / Gradient: Imposta un colore pieno o un gradiente per regolare l'espressione dello sfondo.
• Alpha: Imposta la trasparenza per regolare l'intensità della sovrapposizione.
• Commutazione gradiente: Commuta tra colore pieno e gradiente per modificare l'espressione dello sfondo.
• Ripristina: Riporta le impostazioni di questa sezione allo stato iniziale.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Utilizzando un gradiente, è possibile esprimere profondità visiva con transizioni fluide tra più colori. Anche il colore nello stato hover è configurabile individualmente, rendendo possibili variazioni di gradiente al passaggio del mouse. Funzionando come livello più basso dello sfondo, considerate il bilanciamento cromatico con la sovrapposizione, il pattern e l'immagine nei livelli superiori.

Transizione colore al hover: La transizione hover del colore di sfondo è implementata internamente con un metodo di cross-fade (lo stato normale e lo stato hover sono sovrapposti come livelli separati e commutati tramite opacity). Pertanto, la transizione funziona in modo fluido anche nel passaggio da colore pieno a gradiente (e viceversa).

Transizione

Punto chiave: Imposta la velocità di transizione dallo stato normale allo stato hover. È l'elemento che determina la "piacevolezza" durante l'interazione.

Cosa cambia con questa impostazione: Se troppo veloce il cambiamento non viene percepito, se troppo lento la risposta appare lenta.

Suggerimento per la regolazione: Partite con una Duration di 200-350ms come riferimento, aggiungendo ritardi ed easing personalizzati solo dove è necessario un effetto particolare.

Voci di impostazione

• Durata (ms): Imposta il tempo della variazione per regolare la velocità di risposta.
• Ritardo (ms): Imposta il tempo di attesa prima dell'inizio della variazione per regolare il timing dell'effetto.
• Andamento: Imposta la curva di velocità per definire l'impressione del movimento.
• Valore personalizzato: Specifica un valore di easing personalizzato (formato CSS cubic-bezier) per regolare in dettaglio la velocità di variazione dello sfondo.
• Ripristina: Riporta le impostazioni di questa sezione allo stato iniziale.

Questa transizione dello sfondo si applica alla transizione hover di tutti gli elementi di sfondo: sovrapposizione, pattern, immagine e colore. Essendo indipendente dalla transizione delle impostazioni stile, è possibile creare effetti in cui solo lo sfondo cambia a una velocità diversa.

Differenze con miniatura e fascia: Poiché le impostazioni dello sfondo costituiscono il livello più basso che copre l'intero pulsante, non sono presenti impostazioni per dimensione, bordo, angoli arrotondati, posizione, trasformazione (Skew) e trasparenza (pannello individuale). Queste sono invece disponibili per miniatura e fascia. D'altra parte, le impostazioni dello sfondo includono il Motivo, che non è disponibile per la miniatura. Le impostazioni del poster per il video di sfondo sono le più dettagliate nelle impostazioni dello sfondo.