Come impostare una sezione Hero

La copertina è la prima cosa che le persone vedono sulla tua pagina. Introduce il contenuto e li spinge a farlo o riassume ciò che rende unico il tuo progetto. Una copertina di solito contiene un'immagine di sfondo: una foto elegante, un video accattivante, un colore, una sfumatura o una trama.

Ecco alcuni suggerimenti che ti aiuteranno a lavorare con copertine, sfondi e video in modo più efficiente.

A differenza delle pagine delle riviste, le pagine dei siti Web non hanno un'area visualizzabile fissa. Ogni dispositivo ha dimensioni dello schermo e proporzioni diverse. Inoltre, le aree visualizzabili variano da browser a browser. Ad esempio, i browser con una barra dei segnalibri fissa forniscono un'area visualizzabile più piccola. L'immagine di copertina viene ritagliata per apparire senza bordi sullo schermo.

Caricate un'immagine di sfondo di copertina nel pannello Contenuto del blocco→ Immagine di sfondo.

Per rendere l'immagine fantastica, segui questi suggerimenti sulle migliori impostazioni per l'immagine di sfondo.

Se non sei soddisfatto della qualità dell'immagine, modificala in anticipo in un editor grafico utilizzando l'articolo di riferimento di seguito

Prima di scegliere un'immagine, leggi il nostro articolo "Come creare una copertina per un sito web" su Tilda Education. Contiene suggerimenti per creare la tua pagina di copertina e collegamenti a siti Web di fotografia stock di qualità.

Il testo è la parte più importante di qualsiasi copertina, in quanto è il primo messaggio visualizzato da un visitatore del sito web. Le copertine presentano un titolo, un sottotitolo, una descrizione e una nota superiore per trasmettere il messaggio ed evidenziare ciò che è importante.

Puoi riempire le copertine con il testo in due modi: utilizzando il pannello Contenuto del blocco o facendo clic sul testo durante la modifica della pagina.

È possibile formattare il testo utilizzando sia il pannello di controllo in alto o modificando le dimensioni, il colore o altri parametri del testo nel pannello Impostazioni del blocco → Tipografia.

Per creare una copertina interessante, consulta l'articolo Come creare una copertina per un sito web con esempi pratici di combinazioni di testo e immagini di sfondo e la guida Creazione di una proposta di vendita unica (USP) per un sito web per rendere la tua copertina accattivante per i visitatori. meno di dieci secondi.

Una copertura sottile ha un'altezza del 60% o del 70%, non del 100%. Svolge una funzione più formale in quanto l'attenzione dell'utente si sposta sulle informazioni che seguono la copertina.

Per creare una tale copertura, vai al campo " Altezza" nelle impostazioni del blocco. È possibile impostare l'altezza in pixel (ad esempio 400 px) o le unità di misura dell'altezza del riquadro di visualizzazione, percentuale (1 vh è l'1% dell'area visualizzabile). Si consiglia di impostare l'altezza in vh.

Come cambiare il tono dell'immagine di sfondo
Cambiamo il tono dell'immagine quando vogliamo rendere il testo di copertina facilmente leggibile. Per fare ciò, apri il pannello Impostazioni del blocco di copertina e regola il colore del filtro. Qui puoi vedere un'immagine di copertina a cui è stato applicato un colore del filtro. A volte, è il colore del marchio o il colore primario di un sito Web che viene utilizzato per la tonificazione.

Come fondere il colore nel colore del blocco successivo
A volte il coperchio dovrebbe fondersi delicatamente nel blocco successivo. Per ottenere questo effetto, il colore del filtro finale deve essere impostato al 100% di opacità. Il colore del filtro dovrebbe essere uguale al colore del blocco successivo.

Rendere la copertura due volte più alta mentre si applicano queste due impostazioni contemporaneamente ti aiuterà a ottenere l'effetto mostrato di seguito:

Carica un video su YouTube o trovane uno esistente lì. Quindi vai al pannello Contenuto del blocco copertina e incolla il link del video nel campo appropriato. In questo modo, puoi creare una copertina video.

È possibile utilizzare i convertitori online per creare video WebM e MPEG-4 e ospitarli sul server o sul sito Web del servizio di conversione. Ad esempio, gfycat.com consente sia la conversione che l'hosting .

Apri il pannello Impostazioni del blocco di copertina e aggiungi i collegamenti video ai campi corrispondenti.

Perché utilizzare entrambi i formati?
I browser utilizzano formati diversi, quindi non esiste un formato unificato. Quando un utente arriva sul tuo sito web, vedrà un video che il suo browser può riprodurre. In caso contrario, la copertina apparirà vuota.

Gli schermi hanno un'ampia gamma di proporzioni e la copertina potrebbe apparire in modo diverso su dispositivi diversi. Sebbene le proporzioni comuni non apportino modifiche sostanziali all'immagine di copertina, i dispositivi mobili possono alterarla oltre il riconoscimento. Per favore, prenditi del tempo per imparare come creare una copertina ottimizzata per i dispositivi mobili (o qualsiasi altro blocco) utilizzando questa guida completa.

Perché i video di copertina non vengono riprodotti sui dispositivi mobili

A causa delle peculiarità del sistema operativo mobile, le copertine video non verranno riprodotte sui dispositivi mobili. Il sistema operativo mobile disabilita la riproduzione automatica. Se avete creato una copertina video con riproduzione automatica, non dimenticate di aggiungere un'immagine nel pannello Contenuto del blocco di copertina. L'immagine apparirà quando il video non può essere riprodotto, cioè quando i visitatori accedono al tuo sito web da smartphone o tablet.

È possibile trovare un modulo di inserimento dati nelle seguenti copertine: CR26 (Copertina con campo di inserimento), CR26AN (Copertina con più inserimenti), CR32 (Copertina con modulo allineato a destra), CR34 (Copertina con conto alla rovescia e modulo di iscrizione ), CR36 (Copertina con un'immagine o un video di YouTube e modulo in due colonne)

Puoi visualizzare in anteprima l'aspetto del modulo visitando la libreria di blocchi → la copertina e scegliendo l'opzione preferita.

I moduli sui frontespizi svolgono la stessa funzione e possono essere personalizzati allo stesso modo dei moduli normali. Per personalizzare il modulo, leggere l'articolo Come impostare i moduli di acquisizione dati.

Le copertine dei blocchi CR34 e CR35 presentano un conto alla rovescia fino a un momento specifico nel futuro. Questa funzione è particolarmente utile se stai creando una pagina per una promozione o un evento.

Nel pannello Contenuto di questi blocchi, puoi impostare la data, l'ora e il fuso orario dell'ora di inizio dell'evento.

Se la data è impostata correttamente, sulla copertina apparirà un timer.

I blocchi con coperture sono esempi collaudati di buon design che si adattano automaticamente a tutti i dispositivi. Ma a volte è necessario aggiungere un elemento o creare una copertina personalizzata. Questo può essere fatto utilizzando l'editor Zero Block di Tilda.

Molti blocchi di copertina possono essere convertiti in Zero Block per ulteriori modifiche. Per fare ciò, vai alle Impostazioni blocco, scorri verso il basso e fai clic sul pulsante "Converti in Zero Block".

Successivamente, la copertina viene convertita in Zero Block. Il formato verrà adattato correttamente. Se hai già apportato le modifiche, non verranno salvate, quindi fai attenzione quando converti la copertina.