Costruire una pagina con Enfold

In questa lezione costruiremo la home page di un sito di destinato ad una agenzia grafica, ma ovviamente si tratta solo di un esempio, con la stessa logica si possono costruire siti per ogni categoria merceologica.

Lo faremo partendo da una pagina completamente vuota.

Accediamo quindi all’area backend e per prima cosa, visto che questa sarà la nostra home page, voglio che sia subito incisiva.

Ho pensato di realizzare un semplice sfondo che occupa gran parte dello schermo con un titolo centrale.

Vado subito ad utilizzare la funzione di testata trasparente che abbiamo visto nella lezione sulle opzioni di Enfold.

Chiaramente ho già impostato tutte quelle relative a questo sito di esempio a livello di colori e tipografia e ho inserito anche anche una versione bianca del logo.

Procediamo quindi inserendo la prima sezione colore e apriamo il pannello opzioni.

Per prima cosa scelgo quanto deve essere alta.

Potremmo scegliere il 100% del monitor, in modo da fare una home page fullscreen, ma direi che possiamo stare sul 75%.

Qui si sceglie lo spazio che deve esserci all’interno della sezione, e visto che preferisco lasciare gli elementi molto distanti tra loro, scelgo padding ampio, tu ovviamente valuterai in base a quello che inserirai.

Possiamo poi scegliere gli stili dei bordi superiore e inferiore, vediamo che opzioni ci da.

Proviamo ad esempio a scegliere il bordo in diagonale.

Gli diamo il colore della sezione che andrà sotto a questa, che immagino bianca, e scegliamo la direzione della diagonale… facciamo da destra a sinistra.

Poi impostiamo anche lo stile e inserisco anche l’ultima opzione disponibile, una freccia colorata che in automatico farà scorrere la pagina alla sezione successiva.

Ora procediamo con la tab successiva per personalizzare graficamente la sezione.

Intanto puoi vedere che per ognuna, puoi richiamare gli stili colore che hai impostato nelle opzioni generali del sito, in modo da essere molto più veloce nel comporre pagine con sezioni differenti.

Noi andiamo a personalizzare ogni aspetto, partendo dal colore di sfondo.

Enfold mi da la possibilità di usare uno sfondo sfumato, proviamolo!

Scelgo il primo colore, e il secondo, poi ho anche diverse opzioni per la direzione della sfumatura, ne scegliamo una a caso.

Poi posso anche inserire una immagine di sfondo.

È chiaro che se inserissi una foto piena andrebbe a sovrascrivere il colore della sfumatura, per cui ho preparato una png trasparente realizzata con Photoshop.

Nel caso volessi inserire un’immagine di sfondo e dargli una colorazione particolare, puoi invece utilizzare l’overlay, con il quale scegli il livello di opacità e il colore sovrastante.

Poi con il menu a tendina puoi anche aggiungere un ulteriore effetto, e anche in questo caso ti invito a fare qualche prova perchè ce ne sono alcuni interessanti.

Infine per ogni sezione puoi stabilire in che formato farla apparire e in qualche nasconderla per costruirne magari una dedicata.

Passiamo ora all’inserimento del titolo centrale.

Vado quindi sulla tab degli elementi di contenuto e scelgo titolo speciale.

Apro il pannello opzioni e inizio a configurarlo, inserendo il titolo, che sarà l’h1 della home page, non metto alcun link, ma scelgo lo stile centrato.

Dall’anteprima si può vedere una bozza del risultato.

Aumento la spaziatura sotto e passo al colore, che inserirò bianco visto che abbiamo inserito lo sfondo dai toni blu.

Poi per aggiungere un piccolo elemento grafico utilizziamo il divisore.

Anche in questo caso ci sono opzioni predefinite ma anche la possibilità di personalizzarlo totalmente.

Cambiamo lo spessore del bordo, cambiamo i colori, l’icona e anche il colore dell’icona.

Andiamo avanti inserendo un sottotitolo.

Chiaramente sarà più piccolo del precedente ma sarà ugialmente bianco.

Ok, direi che la prima sezione è completata, quindi salvo la pagina e vado a vederne il risultato.

Sono soddisfatto e possiamo procedere con la seconda sezione che, dovrà mettere in luce i servizi offerti.

Quindi per prima cosa duplico il titolo e lo modifico cambiandone grandezza e colore.

Poi voglio promuovere 3 servizi principali e ho pensato di disporli in 3 colonne.

Aggiungo quindi la prima e nella prima tab, scelgo le impostazioni che varranno per tutta la riga.

Per renderle più ordinate possibili, dovranno avere tutte la stessa altezza e gli allineamenti saranno tutti a metà.

Poi voglio che siano unite, quindi scelgo nessun spazio fra le colonne.

Non voglio inserire alcun link alla colonna perchè aggiungeremo un tasto in fondo ai contenuti, però è importante dare un padding interno in modo che i testi che ci saranno non siano attaccati a bordi.

Ipotizziamo 40 pixel per ogni lato.

Poi posso scegliere se dare un bordo alla colonna e per quetso esempio provo ad inserire un’ombra. Scelgo il colore nero e ne cambio l’opacità per fare in modo che sia un effetto lieve. Infine scelgo la dimensione dell’ombra e metto lo sfondo bianco.

Volendo ci sarebbe anche a da impostare l’animazione, ma questi aspetti si possono anche vedere a fine lavoro quando la pagina sarà completata.

Ora è il momento di inserire i contenuti.

Inserisco un titolo, un blocco di testo e un bottone

Poi li vado a personalizzare uno ad uno.

Tu non prendere alla lettera le mie impostazioni, a seconda del carattere che sceglierai, o a seconda della quantità di contenuto che inserisci dovrai trovare le tue impostazioni personalizzate, in modo da realizzare un progetto unico che sia realmente identificativo per la tua attività…

Fatta la prima colonna, possiamo duplicarla, modificare i titoli e siamo pronti per visualizzare un’anteprima di cosa abbiamo fatto.

Eccola subito pronta.

Non è male, ma voglio enfatizzare la colonna centrale, che è il servizio su cui voglio puntare maggiormente.

Torniamo quindi sulle opzioni della colonna centrale, perchè voglio sfruttare questa opzione che prima non ho considerato.

Perfetto, mi permette di ingrandire la colonna fino al 50%. Per ora proviamo con il minimo.

Un leggero ingrandimento però non mi basta e quindi vado a modificare il colore, utilizzando la sfumatura che avevo usato per la parte iniziale.

Faccio anche le modifiche ai colori dei testi per renderli bianchi e faccio anche una modifica al pulsante, che lascerò trasparente e luminoso.

Aggiorniamo la pagina ed ecco che anche la seconda sezione è terminata.

Ora possiamo procedere con la prossima.

Supponiamo di voler sponsorizzare un nuovo servizio che propone l’agenzia.

Ho inserito quindi una nuova sezione colore simile alla prima, con bordo diagonale e sfumatura.

Stavolta ho suddiviso la sezione in colonne di differenti larghezze per animare un pò la pagina e al suo interno ho messo un titolo personalizzato con sottotitolo.

Più sotto, un normale box di testo.

Nella colonna di fianco, inserisco un’immagine che ho già preparato e gli do un’animazione pop up in entrata.

Salviamo nuovamente e vediamo a che punto siamo con la versione online.
Perfetto.

Con la stessa logica si può andare avanti, utilizzando gli elementi di enfold che sono più strategici per la tua attività.

Nel nostro esempio creo un’altra sezione che divido in 3 colonne.

Nella prima inseriamo il modulo team member, in cui posso inserire un box biografico.

Inserisco il nome e la descrizione.

Poi scelgo un’immagine per il profilo che ho già caricato e vado a completare i campi inserendo una piccola descrizione e un’icona linkabile.

In questo esempio inserisco solo quella di facebook giusto per far vedere l’effetto.

Poi posso provare ad usare il modulo barre di avanzamento in cui si può far vedere graficamente in cosa si è specializzati.

Posso scegliere il nome di ogni barra, dargli il colore e controlarne l’aspetto.

Poi mi basta duplicare le barre e modificarle per aggiungerne altre.

Per l’ultima colonna usiamo il numero animato e anche qui lo vado a personalizzare in ogni aspetto.

Salviamo la pagina e guardiamone l’anteprima. Direi che sta prendendo forma molto bene.

Ora è arrivato il momento di una nuova sezione a tutta pagina che possiamo utilizzare per far vedere gli utlimi lavori realizzati.

Enfold ci offre diverse possibilità.

Si può usare la griglia del portfolio, che puoi popolare per mostrare i lavori che realizzi, oppure se stai costruendo un blog, puoi recuperare gli articoli inseriti.

In questo esempio ci limitiamo ad inserire una galleria di immagini, così facciamo vedere l’effetto finale.

Apro il solito pannello opzioni e lo configuro, prima scegliendo le immagini e poi impostatndo massimo a 8.

Posso lasciare che enfold calcoli automaticamente la dimensione ottimale, ma io voglio che sia tutto omogeneo, quindi imposto la griglia perfetta, il formato quadrato, nessun divario fra le immagini e un effetto in scala di grigio.

Poi passo alla tab sulla didascalia che voglio mostrare in overlay e solo al passaggio del mouse.

Finite le impostazioni, salvo e controllo.

Potrei andare avanti all’infinito ad inserire i moduli di enfold e a creare delle nuove sezioni, ma ora tocca a te.

Progetta la tua pagina, magari utilizzando un semplice foglio di carta, così capisci bene che elementi inserire.

Prendi spunto dai siti online e dalle demo di enfold e prova tutti i moduli per vedere quale utilizzare in relazione ai tuoi contenuti.

Per questa lezione abbiamo terminati, Ti auguro buon lavoro per la costruzione di tutte le tue pagine.