Creare la Home Page

In questo tutorial ti diamo degli spunti su come realizzare l’home page del tuo sito attraverso il page builder Avia. La home page è composta da uno slider a tutto schermo in cui scorrono immagini con un titolo e un sotto titolo seguiti da due pulsanti. Alle immagini abbiamo applicato un effetto parallasse in modo da animarle quando si scorre la pagina. Abbiamo optato per una testata trasparente in modo che le immagini possano essere visualizzate anche nella parte alta del sito.

La Home Page con Enfold

Per realizzare questa sezione abbiamo prima di tutto selezionato, in Impostazioni di Layout della pagina, Testata trasparente. Dal page builder Avia, dal tab Elementi Media, abbiamo trascinato il blocco Slider a schermo intero per visualizzare due immagini a scorrimento.

La Home Page con Enfold

Come abbiamo detto prima, all’interno di questo blocco sono presenti immagini, titoli e pulsanti che possono essere inseriti entrando nel pannello di gestione.

La Home Page con Enfold

Il sito prosegue con un secondo blocco Sezione colore in cui abbiamo attivato la freccia nella parte bassa della sezione che permette lo scorrimento alla sezione successiva. All’interno di questa sezione abbiamo inserito un Titolo speciale con una frase di Bruno Munari.

La Home Page con Enfold

Segue un altro blocco Sezione colore in cui abbiamo inserito tre colonne e all’interno dei Box icona che possono essere utilizzati per descrivere i servizi che offri, caratteristiche di prodotti, ecc.

La Home Page con Enfold

Nella sezione successiva è presente un’immagine di sfondo con effetto parallasse e, per aumentare il contrasto tra lo sfondo e il testo, abbiamo applicato un effetto overlay. Le due colonne sono contenute in una Sezione colore con un’immagine di sfondo. Nella prima colonna c’è un Titolo speciale, un Blocco di testo e un Pulsante mentre nella seconda un Video.

La Home Page con Enfold

Il sito continua ancora con una Sezione colore con tre colonne dove all’interno abbiamo usato il blocco Numeri animati utili a mostrare i lavori effettuati, i clienti soddisfatti, ecc.

La Sezione colore che segue è stata personalizzata usando un’immagine di sfondo con effetto parallasse con all’interno il blocco Testimonial. Nella Sezione colore successiva abbiamo inserito un blocco Titolo speciale, un Separatore e in seguito, per visualizzare gli ultimi articoli del blog, abbiamo usato il blocco Slider articolo.

La Home Page con Enfold

Il sito termina con l’ennesima Sezione colore dove all’interno ci sono due colonne. Nella prima è presente un Titolo speciale seguito dal blocco Accordian da utilizzare eventualmente per creare FAQ con domande e risposte. Nella seconda colonna, invece, abbiamo inserito un blocco Titolo speciale e un Modulo di contatto.

La Home Page con Enfold

Con il blocco Modulo di contatto, del page builder Avia, oltre ad inserire diverse tipologie di campi puoi attivare anche il Captcha, un filtro che ti permette di combattere lo spam.

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.