Creare una pagina con Avada

In questa lezione vedremo come utilizzare il builder visivo di Avada per costruire le pagine che comporranno il tuo sito web.

Realizzeremo una home page per il sito di un fotografo, ma come diciamo sempre non è necessario copiare esattamente i passaggi che stai per vedere.

Questa lezione serve per illustrarti le funzionalità di Avada in modo che tu possa sfruttarle al meglio per realizzare il tuo progetto, che dovrà essere unico rispetto alla concorrenza.

Intanto diamo un’occhiata alla schermata che si apre quando si crea una pagina da zero.

Una volta attivato il builder hai la possibilità di partire con la costruzione oppure di accedere alla libreria, dalla quale puoi caricare le versioni demo, sempre che il tema sia registrato, e gestire i tuoi template.

Da qui puoi salvare l’intero layout della pagina, ma ci sono anche i Contenitori, le singole colonne e i singoli elementi.

Quello che salvi lo ritrovi in una lista qui sotto da cui puoi caricarli, modificarli o eliminarli.

Fatta questa piccola premessa, partiamo con la solita pagina completamente bianca.

Andiamo in modifica pagina e inseriamo il primo container.

Prima di inserire i contenuti però, verifichiamo le funzionalità che puoi controllare per le singole pagine.

Nella lezione precedente abbiamo fatto riferimento ai modelli di pagina, che sono disponibili dalla sidebar laterale.

Puoi scegliere tra:

• Template standard
• A larghezza piena
• Pagina completamente vuota
• Pagina contatti che recupera le informazioni inserite nelle opzioni tema come la mappa di google e il form
• Versione con navigazione laterale che però sarà sostituita da un widget.

Inoltre sotto al builder di layout trovi una serie di funzioni che, se personalizzate, vanno a sovrascrivere le impostazioni generali.

La prima controlla lo slider.

Cliccando sulla finestra a tendina, ci vengono riproposti tutti gli slider a disposizione.

Ovviamente prima di poter visualizzare lo slider, dovrai crearlo con il plugin che sceglierai.

Noi ne avevamo già creato uno con il fusion slider che ho completato aggiungendo altre slide e che infatti ritroviamo disponibile.

Volendo potremmo anche modifcarne la posizione o inserire un’immagine che sarà utilizzata solo per i dispositivi mobile, ma per questo esempio possiamo lasciare tutto come di default.

Appena inserito, puoi notare che appare il blocco in prima posizione nel builder di layout.

Andiamo poi alle impostazioni di pagina, in cui si possono modificare gli spazi esattamente come nelle opzioni tema.

Abbiamo poi la sezione sull’header.

In questo caso, voglio che lo slider si fonda con la zona menu, e quindi vado a dare una leggera trasparenza al colore di sfondo.

Le altre sezioni le visualizziamo velocomente, perchè in pratica sono una ripetizione di quelle che abbiamo visto nella lezione precedente.

Abbiamo quella che visualizza o nasconde gli elementi del footer, abbiamo il controllo delle sidebar e abbiamo quella per inserire un colore o un’immagine di sfondo personalizzata per pagina e area contenuti.

Infine, oltre all’esportatore di impostazioni, abbiamo quella per gestire il titolo della pagina e il menu a briciole di pane.

Noi l’abbiamo disattivato, ma come puoi vedere, se visibile ti fornisce il massimo controllo grafico di ogni aspetto.

Passiamo ora all’atto pratico e prendiamo dimestichezza con il builder di layout.

Abbiamo la nostra pagina con lo slider attivo in cima a tutto e il menu in trasparenza.

Ora vogliamo realizzare un blocco con un testo di presentazione e un’immagine di lato.
Andiamo in modifica pagina e iniziamo ad impostarlo.

In Avada, le sezioni di pagina che dovrai inserire in cascata vengono chiamate Container.

In cima ad ognuno trovi la barra degli strumenti che ti consente di clonarlo, di salvarlo nella libreria o di eliminarlo. Inoltre, quando hai finito di realizzarlo, puoi anche ridurlo ad una sola riga per ottimizzare gli spazi di lavoro.

Dalla prima icona invece, si accede al pannello di personalizzazione vero e proprio.

Nella prima tab controlli innanzitutto se deve essere una sezione che occupa il 100% della pagina in altezza.

La seconda opzione invece è utile se utilizzi una struttura a più colonne e se vuoi che abbiano la stessa altezza.

Nel campo name invece, puoi dare un nome univoco alla sezione che può essere richiamata con un ancior link dal menu principale in caso di sito one page, ma anche da qualsiasi punto della pagina.

Infine controlli la visibilità di questo container sui vari dispositivi.

Interessante anche la funzione di programmazione delle pubblicazione.

Esattamente come avviene per le pagine puoi decidere di mettere online una sezione del sito immediatamente, oppure di salvarlo in bozza fino a che non avrai ultimato di lavorarci.

Ma puoi anche decidere di programmare la pubblicazione in date particolari, ad esempio per spingere la promozione di un prodotto solo per il periodo natalizio.

Nella tab successiva trovi le impostazioni per il background.

Puoi scegliere un colore di sfondo, un’immagine di sfondo, ma anche un video di sfondo, che dovrai caricare in vari formati per essere certo che sia visibile su tutti i browser, o inserire i link di youtube o vimeo.

Nella tab design invece controlli gli eventuali bordi con rispettivo colore e tipologia e le spaziature di margini e padding per i 4 lati.

Chiudiamo il pannello e andiamo ad inserire le colonne con cui creeremo la griglia di contenuti.

A seconda dell’idea grafica che vuoi sviluppare scegli il layout da questa lista.
Per il nostro esempio, scegliamo la suddivisione ⅔ - ⅓

Ora andiamo ad inserire i moduli necessari a comporre la grafica, che in avada, vengono chiamati elementi.

Come al solito, ti consiglio di provarli uno ad uno o di andarli a visualizzare nella demo principale in modo da capire subito quali sono i più congeniali per ciò che devi fare.

Noi partiamo con un classico titolo.

Per ogni modulo ci saranno opzioni differenti, in questo caso, solo la visibilità e gli eventuali css personalizzati.

Nella tab design però trovi tutte le opzioni per controllare il più piccolo dettaglio, allineamento, tipo di heading, dimensioni e altezza di linea.

È chiaro che se hai già impostato questi valori nella sezione tipografia delle opzioni generali non devi compilarli ogni volta, ma se ti serve fare qualche modifica come l’ingrandimento di un particolare titolo, puoi sovrascrivere qui quelle generali.

Stessa cosa per il colore e l’eventuale separatore.

Poi andiamo ad inserire un blocco di testo.

Anche qui abbiamo una funzione particolare, ossia quella di separare il testo in colonne.

Proviamo a metterne due e vediamo che succede.

Lascio vuoto il campo della larghezza minima ma compilo quello della spaziatura, per fare in modo che siano un po distanziate.

Si possono aggiungere valori sia in pixel che in percentuale e si possono anche impostare i separatori tra le colonne.

Nella colonna successiva inseriamo una semplice immagine, alla quale volendo potremmo dare degli effetti come bagliore esterno, o un’ombra.

Se lo attivi appaiono le opzioni di colore e dimensione dell’effetto.
Puoi anche impostare un bordo, e scegliere dimensioni, colore e livello di smussatura degli angoli.

Per questo esempio lasciamo tutto piatto.

Possiamo però scegliere l’allineamento dell’immagine, che in questo caso, voglio al centro della colonna.

L’ingrandimento con lightbox non ci interessa, così come non compileremo il campo per l’attributo alt, che però a te consiglio di inserire in ottica SEO.

Volendo puoi anche aggiungere un link.

Per questo elemento, abbiamo anche la possibilità di gestire l’animazione.

Proviamo l’effetto bounce e impostiamo la direzione dal basso.

Perfetto, ecco che il builder ci offre una piccola anteprima del risultato, ma per vederlo dal vivo salviamo la pagina e andiamo alla pagina online.

Direi che come inizio ci siamo, ma si può fare sicuramente qualcosa per sistemare gli spazi e gli allineamenti.

Intanto andiamo ad impostare la funzione vista prima per fare in modo che le colonne siano di uguale altezza.

Poi andiamo ad incrementare lo spazio tra il contenuto e le altre sezioni inserendo ad esempio 4% di margine superiore e inferiore.

Fatto questo sul container generale, possiamo controllare le singole colonne, che hanno una lista di icone uguale al container.

Aprendo il pannello, troverai opzioni simili alle precedenti.

Nel nostro caso, visto che che abbiamo impostato che le colonne devono avere la stessa altezza, possiamo centrare i contenuti verticalmente.

Salviamo, e aggiorniamo la pagina per vedere il risultato... molto meglio!

Ora possiamo abbellire la sezione inserendo ad esempio un elenco puntato con icone.

Scegliamo il modulo checklist.

Questo è un pò diverso rispetto ai soliti, abbiamo da una parte la lista delle righe da inserire, mentre dall’altra il pannello di controlli generali dell’elemento.

Se ad esempio vuoi che la lista abbia tutte le icone uguali, ti basterà selezionarla da qui.

Per personalizzarle una ad una invece, devi entrare nella singola voce.

Scriviamo una frase a caso e scegliamo l’icona del cuore ricercandola dal pannello).

Fatta la prima, possiamo clonarla o inserirne un’altra da zero.

Una volta completato l’inserimento scegli il colore che avranno le icone e il colore dello sfondo. Noi decidiamo di lasciare solo l’icona.

Salviamo e andiamo a ricontrollare la pagina.

Mi piace, ma possiamo fare ancora meglio, inserendo ad esempio un divisore grafico.

Scelgo il modulo separator lo imposto.

Ci sono varie versioni da provare, per questo esempio, userò il tratteggiato.

Inserisco un margine sopra e sotto, aumento lo spessore del bordo e imposto le misure.

Nel nostro caso facciamo 100%.

Con il drag& drop lo vado a posizionare tra i due elementi precedenti, salvo e ricontrollo la pagina.

Ora sono soddisfatto e posso passare alla prossima sezione, in cui voglio utilizzare un elemento di avada che permette di creare un effetto prima e dopo di un’immagine.

Per il nostro fotografo, potremmo ad esempio utilizzarla per promuovere un servizio di fotoritocco.

Intanto, per differenziarla graficamente dalla sezione precedente, voglio che abbia un colore di sfondo, che deve occupare l’intera larghezza della pagina.

Per fare questo imposto la larghezza del contenuto al 100%, e poi vado ad assegnare il colore nella sezione background.

Per finire, inserisco gli stessi valori di padding della precedente e imposto anche un valore di padding interno per fare in modo che l’immagine sia più centrata all’interno del container.

A questo punto siamo pronti per inserire l’elemento Image Before & After.

Scelgo lo scorrimento a slide e carico le due immagini una per il prima e una per il dopo, poi aggiungo la didascalia.

Diminuisco leggermente il corpo del carattere e provo questa opzione per il divisore.

Le altre opzioni le lasciamo come sono, ma diamo anche a questa sezione una leggera animazione.

Completate le operazioni, torniamo a visualizzare la pagina, ed ecco il modulo in azione.

Per abbellirla inserisco un titolo, un sottotitolo e un separatore, che vado a personalizzare inserendo l’opzione ombra e icona centrale.

Seguendo la stessa logica andiamo avanti ad implementare altre sezioni.

La prossima la divideremo in due colonne uguali.

Voglio inserire un modulo per i testimonial e poi l’elemento di Avada che consente di creare grafici personalizzati.

Non è propriamente ideale per il nostro sito di fotografia, ma serve solo a scopo dimostrativo.

Il modulo testimonial, è molto simile al checklist di poco fa.

Sulla sinistra va inserita la lista dei testimonial che vuoi far apparire.

Noi mettiamo dei nomi a caso, impostiamo il contenuto e l’immagine.

Non sto a farti vedere tutti i passaggi perchè credo che tu abbia capito il meccanismo.

Il modulo per i grafici va studiato un pochino di più, ma è sempre intuitivo come gli altri.

Nella prima schermata, puoi inserire un titolo e sopratutto scegliere il tipo.
L’offerta è davvero molto vasta, c’è il grafico a barre, a ciambella, a linee ecc.

Noi scegliamo quello a barre orizzontali, lasciamo la legenda in posizione di default e inseriamo i valori per gli assi.

Nella tab dei dati invece, trovi un’impostazione simile ad excel, in cui puoi inserire righe e colonne per aggiungere le voci, a cui dai un nome, un colore di riferimento e il valore che deve avere.

Oltre ad inserire un bordo puoi anche personalizzare tutte le opzioni di colorazione generale e le spaziature tra le celle.

Torniamo a controllare la pagina.

Per l’ultima sezione, voglio creare una call to action di chiusura, con uno sfondo, un contatore e un tasto per invio mail.

In questo caso ci deve essere una duplice struttura all’interno di un solo contenitore.

In pratica la prima parte sarà suddivisa in due colonne, mentre nella seconda ci sarà un unica riga.

Ecco come appare la struttura nel backend.

Due colonne molto semplici in cui ho già inserito i testi nella prima e lasciato vuota la seconda.

Al di sotto il modulo contatore e un bottone che si personalizza come al solito.

Giusto per farti vedere, apro il pannello del container dove ho inserito l’immagine di sfondo.

Per l’elemento contatore invece, c’è poco da dire.

Ho impostato la data di scadenza, inserito titolo e sottotitolo e personalizzato background e colori.

Aggiorniamo nuovamente ed ecco la nostra pagina completa.

Per chiudere questa lezione, ti ricordo di dare un’occhiata agli elementi che trovi sulla versione demo, perchè in ogni pagina ci sono moltissime personalizzazioni differenti dello stesso modulo.

Guarda ad esempio i flip box.

Grazie ad un mix di contenuti demo e sezioni personalizzate puoi davvero realizzare un sito web unico, e offrire un’immagine professionale ai tuoi clienti.

Direi che abbiamo concluso, ti ringrazio per l’attenzione e ti auguro buon lavoro!