Come impostare una sezione Eroe

La copertina è la prima cosa che le persone vedono sulla vostra pagina. Introduce il contenuto e li spinge a seguirlo o riassume ciò che rende unico il vostro progetto. Una copertina di solito contiene un'immagine di sfondo: una foto elegante, un video avvincente, un colore, un gradiente o una texture.

Ecco alcuni suggerimenti che vi 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 uno schermo di dimensioni e proporzioni diverse. Inoltre, le aree visualizzabili variano da browser a browser. Ad esempio, i browser con una barra dei segnalibri fissa offrono un'area visualizzabile più piccola. L'immagine di copertina viene ritagliata per apparire senza bordi sullo schermo.

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

Per far sì che l'immagine risulti perfetta, seguite questi suggerimenti sulle migliori impostazioni per l'immagine di sfondo.

Se non siete soddisfatti della qualità dell'immagine, modificatela in anticipo in un editor grafico utilizzando l'articolo di riferimento qui sotto

Prima di scegliere un'immagine, leggete il nostro articolo "Come creare una copertina per un sito web" su Tilda Education. Contiene suggerimenti per la creazione della propria copertina e link a siti web di fotografia stock di qualità.

Il testo è la parte più importante di ogni copertina, poiché è il primo messaggio che il visitatore del sito web vede. Le copertine presentano un titolo, un sottotitolo, una descrizione e una nota in alto per trasmettere il messaggio ed evidenziare ciò che è importante.

È possibile riempire le copertine di 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 sia modificando la dimensione, il colore o altri parametri del testo nel pannello Impostazioni del blocco → Tipografia.

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

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

Per creare una copertina di questo tipo, accedere al campo "Altezza" nelle impostazioni del blocco. È possibile impostare l'altezza in pixel (ad esempio 400px) o in unità di misura dell'altezza del viewport, in percentuale (1vh è 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 della copertina facilmente leggibile. A tale scopo, aprire il pannello Impostazioni del blocco copertina e regolare il colore del filtro. Qui si può vedere un'immagine di copertina a cui è stato applicato un colore di filtro. A volte, per la tonalità si utilizza il colore del marchio o il colore primario di un sito web.

Come sfumare il colore nel colore del blocco successivo
A volte la copertura deve sfumare delicatamente nel blocco successivo. Per ottenere questo effetto, il colore del filtro finale deve essere impostato al 100% di opacità. Il colore del filtro deve essere uguale a quello del blocco successivo.

Se la copertura è due volte più alta e si applicano queste due impostazioni contemporaneamente, si otterrà l'effetto mostrato di seguito:

Caricare un video su YouTube o trovarne uno esistente. Andare quindi al pannello Contenuto del blocco copertina e incollare il link del video nel campo appropriato. In questo modo, è possibile creare una copertina video.

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

Aprire il pannello Impostazioni del blocco copertina e aggiungere i collegamenti al video nei campi corrispondenti.

Perché utilizzare entrambi i formati?
I browser utilizzano formati diversi, quindi non esiste un formato unificato. Quando un utente arriva sul vostro sito web, deve vedere un video che il suo browser è in grado di riprodurre. Altrimenti, la copertina apparirà vuota.

Gli schermi hanno un'ampia gamma di rapporti di aspetto e la copertina può apparire in modo diverso su dispositivi diversi. Sebbene i rapporti d'aspetto comuni non modifichino drasticamente l'immagine di copertina, i dispositivi mobili possono alterarla in modo irriconoscibile. Prendetevi del tempo per imparare a creare una copertina (o qualsiasi altro blocco) mobile-friendly utilizzando questa guida completa.

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

A causa delle peculiarità dei sistemi operativi mobili, i video di copertina non vengono riprodotti sui dispositivi mobili. I sistemi operativi mobili disabilitano l'autoplay. Se avete realizzato un video di copertina 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 vostro sito web da smartphone o tablet.

Un modulo di inserimento dati è presente nelle seguenti copertine: CR26 (Copertina con un campo di input), CR26AN (Copertina con più input), CR32 (Copertina con un modulo allineato a destra), CR34 (Copertina con un conto alla rovescia e un modulo di sottoscrizione), CR36 (Copertina con un'immagine o un video di YouTube e un modulo su due colonne)

È possibile visualizzare un'anteprima dell'aspetto del modulo visitando la Libreria blocchi → Copertine 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, leggete l'articolo Come impostare i moduli di acquisizione dati.

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

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

Se la data è impostata correttamente, sul frontespizio apparirà un timer.

I blocchi con copertine 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 Tildadi Zero Block .

Molti blocchi di copertina possono essere convertiti in Zero Block per ulteriori modifiche. A tale scopo, accedere alle Impostazioni del blocco, scorrere verso il basso e fare clic sul pulsante "Converti in Zero Block".

In seguito, la copertina viene convertita in Zero Block. Il formato verrà adattato correttamente. Se avete già apportato le vostre modifiche, queste non verranno salvate, quindi fate attenzione quando convertite la copertina.