Nel primo di una serie di articoli dedicati alla home, abbiamo sottolineato l’importanza di questa pagina e come dovrebbe essere pensata sin dal principio. Abbiamo anche visto i primi passi da compiere per poter iniziare a creare la home page.
Ora vedremo come sviluppare la prima sezione di questa pagina, ovvero l’introduzione.
Tabella dei Contenuti
Introduzione Home: perché è importante
La ragione per cui la parte introduttiva della home assuma una grande importanza è piuttosto ovvia: è quella porzione di pagina che il visitatore visulizza per prima.
È la prima occasione che abbiamo per comunicare con il visitatore.
Ed è spesso la parte introduttiva della home page a deteriminare la permanenza o l’abbandono del nostro sito da parte dell’utente. Proprio per questo motivo, deve essere studiata e curata in ogni minimo dettaglio.
Come sfruttare l’intro
L’introduzione della home page è generalmente riservata a un insieme di elementi emozionali, messaggi evocativi, slogan, brevi descrizioni e pulsanti di approfondimento.
Di frequente, infatti, all’apertura di una home page possiamo trovare una di queste due soluzioni:
- un’immagine o un video ad ampiezza piena (o schermo intero)
- diverse immagini e/o video a scorrimento e ad ampiezza piena (o schermo intero)
Ovviamente queste non sono le uniche soluzioni per creare una presentazione di impatto, ma sicuramente sono tra quelle più diffuse.
Introduzione home con slider
In questo tutorial, proveremo a creare uno slider di immagini con titoli e pulsanti animati.
Ecco come.
Elemento Slides di Elementor
Per prima cosa, cerca l’elemento Slides del page builder (che trovi tra gli elementi PRO). Trascina quindi Slides all’interno dell’area tratteggiata, sulla destra dell’interfaccia di Elementor.
Seleziona l’elemento appena inserito per iniziare a personalizzarlo.
Vai in CONTENUTO > SLIDES > SFONDO e imposta un’immagine di sfondo dalla tua libreria Media.
Vai in CONTENUTO > SLIDES > CONTENUTO e inserisci un titolo, una breve descrizione, un testo per il pulsante ed il relativo link.
Vai in STILE > SLIDES per impostare un’ampiezza per i contenuti testuali ed eventualmente personalizzare il posizionamento (centrato, in alto a destra, in basso a sinistra, ecc).
Per ciascuna slide abbiamo impostato diversi colori e immagini di sfondo, inoltre abbiamo inserito un titolo, una breve descrizione e un bottone. Ed ecco il risultato…
Esempio intro home
Nella tab STILE puoi personalizzare gli stili generali (quindi di tutte le slides) del titolo, della descrizione e del pulsante. Puoi anche personalizzare in modo diverso lo stile dei contenuti di ciascuna slide, andando in CONTENUTO > SLIDES > STILE e attivando la casella “Personalizzato“.
Alternative per creare slider
Elementor Pro offre una libreria davvero ricca di componenti, tuttavia, è plausibile che per una parte rilevante come l’intro della home page, si voglia optare per qualcosa di più sofisticato dell’elemento Slides di Elementor, le cui opzioni sono comunque limitate rispetto ad altre soluzioni.
In tal caso, si può scegliere tra i molti plugin interamente dedicati a questo tipo di funzionalità. Eccone alcuni tra i più popolari:
Introduzione home con immagine a pieno schermo
Vediamo ora come realizzare l’introduzione home con una sola immagine.
Per iniziare, crea una nuova sezione e nel pannello di modifica, imposta a Pieno schermo l’altezza.
Spostati ora nella tab STILE; seleziona un’immagine di sfondo e imposta le relative opzioni in base alle tue preferenze (posizione, allegato, ripetizione, ecc.).
Se lo ritieni opportuno, puoi anche aggiungere uno sfondo overlay. In questo caso, abbiamo aggiunto un overlay nero con opacità 0,5 e infatti l’immagine risulta scurita rispetto all’originale.
Puoi rendere ancora più particolare la tua sezione utilizzando il separatore sagomato, una delle tante funzionalità messe a disposizione da Elementor Pro.
Sempre nella tab STILE, apri la tendina del “Separatore sagomato“. Scegli se vuoi applicarlo alla parte superiore o inferiore della sezione (o entrambe). Dopodiché seleziona l’effetto che preferisci dalla tendina “Tipo” e configura eventuali altre caratteristiche e opzioni.
A questo punto aggiungi una o più Intestazioni all’interno della sezione. Personalizzane font, colori, posizione, animazione, ecc.
Aggiungi un elemento Pulsante sotto l’intestazione e, anche in questo caso, personalizzalo come preferisci.
Ed ecco che in una manciata di minuti abbiamo realizzato l’introduzione per la home page. Le possibilità sono infinite, lascio a te il gusto di provarle e sperimentarle tutte.
Alla fine di questo articolo, abbiamo visto come creare intro per la home page. Ma questo è solo l’inizio, non perderti il prossimo!
