Suggerimenti per la progettazione delle immagini degli eroi e come usarli in tutto Divi

Nel tutorial di oggi, condivideremo alcuni suggerimenti su come progettare una buona immagine/sezione dell'eroe. I suggerimenti che verranno condivisi possono aiutarti a creare sezioni di eroi efficaci per il tuo sito Web o per il sito Web di un cliente.

In generale, ci sono molti modi diversi per modellare un'immagine di un eroe e il modo in cui lo stili di solito dipende da cosa tratta il sito web. Ecco perché tratteremo alcuni suggerimenti di progettazione generali che si applicano a tutti i tipi di siti Web e che tutti dovrebbero conoscere.

Dopo aver dato un'occhiata ai diversi suggerimenti, condivideremo anche una sezione degli eroi di esempio all'altezza dei suggerimenti e ti mostreremo come ricreare questo esempio con Divi come costruttore di siti web.

L'esempio che ti mostreremo come realizzare, passo dopo passo, è simile a questo:

Scegliere l'immagine giusta

Quando si progetta un sito Web, e in particolare l'immagine di un eroe, si tratta di tornare alle origini. Dovresti tenere in considerazione che la sezione degli eroi sarà la prima cosa che le persone vedranno e sperimenteranno quando visitano il tuo sito web. Influirà sul loro comportamento e determinerà quali sentimenti collegheranno al tuo sito web.

Pertinenza

Per iniziare, trova un'immagine che sia in linea con l'argomento del tuo sito web. È la prima cosa che vedranno sul tuo sito web e assoceranno il tuo sito web.

Per trovare la pertinenza poniti due domande:

• Quale principale valore aggiunto offre il mio prodotto/servizio/sito web?
• Che tipo di immagine riflette quel valore aggiunto?

Dipende sempre da ciò che i tuoi visitatori vorrebbero vedere e dalla facilità con cui possono capire l'intera immagine. Le persone tendono a visualizzare tutto; anche una società o un'impresa. Ecco perché dovresti essere tu a dare loro un'immagine di eroe rilevante fin dall'inizio del loro soggiorno.

Alcuni degli stili di immagini degli eroi più comuni si basano su una (o più) delle seguenti cose:

• Prodotto (mostrando un prodotto come immagine)
• Contesto (mostrare un'immagine che racconta una storia insieme al contenuto fornito)
• Emozione (usando trigger emotivi, come le persone che sorridono)
• Azione (usare un'immagine che esprima una certa azione legata all'argomento del tuo sito web)

Scegli uno di questi focus e cerca di raccontare il messaggio nel modo migliore e più creativo possibile. Guarda se riesci a trovare immagini gratuite sufficientemente pertinenti e, in caso contrario, acquista foto stock o prova a crearne di tue.

Più la tua immagine da eroe è legata all'azienda, meglio è. Ecco perché creare le tue immagini in modo professionale è solitamente la cosa più consigliabile da fare. Ma nei casi in cui mancano le risorse, possono essere sufficienti anche immagini stock o immagini gratuite.

Alta qualità

Un altro fattore davvero importante per fare la scelta giusta per l'immagine del tuo eroe è la qualità. È ovvio, ma saresti sorpreso di vedere quanti siti web non sono all'altezza.

Vuoi che appaia il più professionale possibile perché vuoi che quella qualità sia associata ai servizi o ai prodotti che rappresenti sul tuo sito web.

Ti consigliamo di utilizzare un'immagine con una larghezza minima di 1920 px, come menzionato nella nostra guida definitiva all'utilizzo delle immagini all'interno di Divi.

Considera la modalità a schermo intero

Anche l'uso dell'immagine dell'eroe in una sezione dell'eroe che è in modalità a schermo intero viene spesso utilizzato. Rendendo la tua sezione degli eroi a schermo intero, hai l'opportunità di interagire con il tuo pubblico a un livello più profondo. Ti stai concentrando maggiormente su ciò che viene fornito nella sezione degli eroi, quindi dovrebbe davvero valerne la pena.

Se stai pensando di creare una sezione degli eroi a schermo intero, assicurati che sia la parte migliore del tuo sito Web poiché sarà la parte del tuo sito Web in cui ottieni la massima interazione. Interagendo con loro in una fase iniziale della loro visita, aumenti le possibilità di interagire con loro nel resto del sito web. Allo stesso modo, se una sezione dedicata agli eroi a schermo intero non vale la pena, può scoraggiare le persone a continuare a rimanere sul tuo sito web.

Centrare o non centrare

La maggior parte delle persone può essere d'accordo sul fatto che la simmetria è molto attraente per gli occhi. Eppure, lo vediamo così tanto in giro per il web che potremmo non pensarlo più come speciale. Puoi fare un sacco di cose belle anche quando non fai centro.

Ma, se non vuoi correre il rischio, puoi sempre ricorrere al centraggio di tutti i contenuti che stai creando per la tua sezione dell'eroe, inclusa la simmetria dell'immagine dell'eroe.

Crea contrasto

L'immagine dell'eroe di solito contiene tre cose: l'immagine stessa, il contenuto e la CTA. Vuoi che ognuno di loro svolga il proprio ruolo nell'esperienza che ogni visitatore ha, quindi deve avere un senso di armonia tra di loro. Ecco perché è importante creare un certo equilibrio con l'uso dei colori. L'aggiunta di una sovrapposizione di colore o sfumatura all'immagine di solito fa il lavoro.

Da quando le nuove opzioni di progettazione dello sfondo sono diventate disponibili con Divi builder, creare contrasto è diventato davvero facile. Puoi giocare con i colori che vengono utilizzati nell'immagine di sfondo per creare la migliore combinazione di colori e contrasto possibile per la tua sezione degli eroi, ma torneremo su questo quando ricreeremo la sezione degli eroi di seguito.

Prova invece uno sfondo video

Se desideri dare quella vita in più al tuo sito web, puoi anche considerare di utilizzare un video invece di un'immagine. Quando si sceglie un video per la sezione degli eroi, si applicano gli stessi suggerimenti delle immagini.

Puoi trovare diversi video online che potrebbero corrispondere al sito web che stai creando oppure puoi crearne uno tuo. Coverr è un sito Web che fornisce video che possono essere utilizzati in particolare per le sezioni degli eroi. Forniscono al loro pubblico diversi tipi di brevi video che sono eccellenti per creare siti Web senza molte risorse.

Caricano 7 nuovi video ogni lunedì e i video che condividono sono gratuiti, anche per scopi commerciali.

CTA che fa la differenza

Un'immagine e una sezione di grande eroe finiscono sempre per avere uno scopo. Tale scopo è più comunemente un'interazione tra il visitatore e la persona o l'azienda dietro il sito web. Vuoi conoscere i tuoi visitatori e, si spera; trasformarli in un visitatore fedele o un vantaggio.

Per assicurarti di raggiungere effettivamente quell'obiettivo e raggiungere lo scopo, un buon CTA può tornare utile. Quando si progetta un CTA, ci sono anche cose da tenere in considerazione. Vuoi aumentare l'efficacia della tua CTA e assicurarti che l'immagine dell'eroe fornisca i risultati che era destinata a fornire.

Quando si progetta un CTA, tenere in considerazione le seguenti cose:

• Assicurati che la CTA sia una delle prime cose che le persone notano (attraverso il colore e il contrasto)
• Pensa alla copia CTA che stai utilizzando. Vuoi che sia persuasivo
• Assicurati che ciò che segue dopo aver cliccato sul CTA valga la pena (dare valore aggiunto per ottenere risultati)

Iniziamo a creare (desktop)

Ora che abbiamo esaminato i suggerimenti generali sulle immagini degli eroi, è tempo di metterli in pratica. L'esempio che abbiamo fatto è orientato al prodotto, ma abbiamo incluso anche altri fattori (come il contesto).

Ci siamo assicurati che ci fosse abbastanza contrasto, un buon CTA, un'immagine di alta qualità e sebbene abbiamo usato una sezione standard invece di una sezione a larghezza intera, abbiamo regolato manualmente le sottocategorie Spaziatura per assicurarci che la sezione dell'eroe appaia a schermo intero sui desktop.

Scegli una sezione

Scegli tra una sezione a larghezza intera o una sezione normale. Poiché la sezione standard è più flessibile, sceglieremo una sezione standard e la trasformeremo in una sezione eroe che soddisfi le nostre esigenze.

Opzioni di sfondo

L'immagine che sarà rappresentata nella nostra sezione eroe è un prodotto, ma abbiamo anche fatto uso del contesto e dell'emozione. Puoi vedere che l'ambiente in cui è stata scattata la foto può essere correlato all'avventura. Utilizziamo anche le emozioni attraverso il contenuto fornito nell'immagine dell'eroe.

Stai dicendo alle persone di "prendersi il loro tempo" mentre vivono il loro stile di vita avventuroso. Stai anche dicendo loro che va bene perseguire le cose che desiderano di più nella vita e che questo certo orologio è il tocco finale ideale per questo viaggio.

L'immagine utilizzata in questo esempio proviene da Unsplash. Scegli l'immagine che desideri utilizzare come immagine di sfondo e apri le impostazioni della sezione su cui stai lavorando. All'interno della scheda Contenuto, troverai la sottocategoria Sfondo. Inizia aggiungendo l'immagine di sfondo.

Successivamente, vogliamo mettere una sovrapposizione di colore sull'immagine che stiamo usando. Questo risale al suggerimento "Crea contrasto" di cui abbiamo discusso sopra. Aggiungeremo una certa oscurità all'immagine per creare un migliore equilibrio con i moduli di testo e il modulo pulsanti che utilizzeremo.

Nella maggior parte dei casi, viene utilizzato un colore di sovrapposizione grigio. È il colore più standard da utilizzare come sovrapposizione che non cambierà molto i colori dell'immagine. Il codice colore che abbiamo usato è '#BFBFBF'.

Quindi, torna all'immagine di sfondo e applica Miscela immagine di sfondo. In questo caso, useremo 'Moltiplica'. Cambia anche la posizione dell'immagine di sfondo in "In alto a sinistra".

Impostazioni riga

Andando avanti, aggiungeremo una riga a larghezza intera alla sezione che abbiamo creato. Apri le impostazioni e aggiungi "10%" all'imbottitura superiore nella sottocategoria Spaziatura della scheda Progettazione.

Successivamente, vai alla scheda Avanzate e disabilita la riga per telefono e tablet nella sottocategoria Visibilità.

Primo modulo di testo

Successivamente, aggiungeremo il primo modulo di testo. Apri le impostazioni e digita il titolo che desideri utilizzare nella casella del contenuto all'interno della scheda Contenuto. Passa alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

• Orientamento del testo: a destra
• Carattere del testo: Aragosta
• Dimensione carattere del testo: 80
• Colore carattere testo: #FFFFFF
• Altezza riga di testo: 1,7 em

Scorri verso il basso la stessa scheda, aggiungi "25%" al margine superiore e "-12%" al margine destro nella sottocategoria Spaziatura.

Secondo modulo di testo

Aggiungi un altro modulo di testo, digita il testo nella casella del contenuto e vai alla scheda Design. Nella sottocategoria Testo, applica le seguenti modifiche:

• Orientamento del testo: a destra
• Carattere del testo: Montserrat
• Dimensione carattere del testo: 15
• Colore carattere testo: #FFFFFF
• Altezza riga di testo: 1,7 em

Scorri verso il basso la stessa scheda e aggiungi "4%" al margine superiore e "-12%" al margine destro nella sottocategoria Spaziatura.

Modulo pulsante

Continua aggiungendo un modulo pulsante e digitando il testo del pulsante. Quindi, vai alla scheda Design e modifica l'allineamento dei pulsanti su "Destra".

Scorri verso il basso la stessa scheda e apporta le seguenti modifiche alla sottocategoria Button:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 20
• Colore del testo del pulsante: #FFFFFF
• Colore di sfondo del pulsante: #E02B20
• Larghezza bordo pulsante: 2
• Colore bordo pulsante: #E02B20
• Raggio del bordo del pulsante: 3
• Carattere pulsante: Montserrat
• Stile carattere pulsante: maiuscolo

Versione mobile e tablet

Quando si crea un'immagine eroe per uno schermo desktop, ci sono molte più possibilità. Per telefoni e tablet, invece, devi in ​​qualche modo trovare un modo per far sembrare tutto a posto in modo semplice.

Renderemo tutto centralizzato quando qualcuno visita il tuo sito web con il telefono o il tablet. Vai avanti e clona la riga che abbiamo creato per desktop e posizionala nella stessa sezione.

Impostazioni della sezione

Apri le impostazioni delle tue sezioni e disabilita la sezione per desktop nella sottocategoria Visibilità della scheda Avanzate.

Primo modulo di testo

Vai alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

• Orientamento del testo: al centro
• Dimensione carattere: 50

Scorri verso il basso la stessa scheda, cancella il margine destro e modifica il margine superiore in "20%".

Secondo modulo di testo

All'interno della scheda Design del secondo modulo di testo, modifica l'orientamento del testo in "Centro".

Scorri verso il basso la stessa scheda, cancella il margine destro e mantieni il margine superiore.

Modulo pulsante

Ultimo ma non meno importante, apri il Modulo pulsanti e modifica anche l'allineamento dei pulsanti in "Centro".

Pensieri finali

In questo post, abbiamo esaminato alcuni suggerimenti di progettazione che dovresti prendere in considerazione quando crei un'immagine/sezione dell'eroe. Abbiamo anche condiviso un esempio di sezione eroe che segue questi suggerimenti. Se hai domande su questo argomento o se hai suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!