Opzioni di Avada

In questa lezione entriamo nel cuore delle opzioni tema di Avada.

La sezione Theme Options è organizzata in modo classico, un menu laterale permette di navigare tra le varie impostazioni del sito e sulla destra trovi tutti i parametri che puoi configurare.

La prima tab controlla il layout che può essere Wide, ossia a tutta pagina, oppure boxed, quindi centrato nella finestra del browser.

Noi scegliamo il più moderno a schermo pieno.

Poi puoi stabilire il padding della pagina, ossia quanto deve distare la zona contenuti dalla barra del menu e dal footer.

Ancora più sotto puoi impostare la proporzione di spazio tra contenuto e sidebar, sia con sidebar singola che con sidebar doppia.

Io di solito lascio le impostazioni di default.

Lo stesso faccio per la sezione successiva, che controlla gli aspetti responsive.

Puoi scegliere per ogni sezione, quindi header, sidebar e contenuti, qual’è la dimensione di pagina per cui si attiva la visualizzazione mobile ma, a meno di casi particolari, le impostazioni di base sono già ottimizzate per i dispositivi odierni.

La tab successiva regola le impostazioni di colore.

Intanto devi stabilire se il sito sarà su base chiara o scura, se scegli la seconda otterrai tutti i testi in bianco su fondo scuro.

Poi, puoi utilizzare uno degli schemi colore proposti o scegliere il colore primario che identificherà tutti gli elementi grafici del tema.

Passiamo alla sezione sull’header, che come vedi, si compone di alcune sottovoci.

Nella prima stabilisci la posizione dell’header. Con top avrai il classico menu in alto, mentre con right e left , il menu verrà posizionato sulla sidebar come in questo esempio.

Noi rimaniamo sul top tradizionale, che tra l’altro consente di scegliere tra moltissime disposizioni differenti.

Passando col mouse sopra alle anteprime le puoi osservare meglio, si va dalle minimali, a quelle con doppio menu, fino a quelle con logo centrato.

Per questo test scegliamo quella con menu ridotto e icona della ricerca.

Nel caso utilizzi uno slider, puoi anche decidere se farlo visualizzare sopra o sotto l’header, di solito si sceglie di avere l’header semper in cima ad ogni cosa, ma si possono anche sperimentare soluzioni differenti.

Salviamo le impostazioni e andiamo avanti con al seconda sottovoce, che dovrai utilizzare se vuoi inserire un’immagine di sfondo all’header.

Se opti per il si, ricordati di garantire la massima leggibilità del menu.

Abbiamo poi un’ulteriore sezione di personalizzazione in cui controlli il padding per ogni lato dell’header, puoi aggiungere un’ombra al di sotto e puoi decidere se lasciare che logo e menu siano sempre ai margini della pagina.

Infine scegli il colore di sfondo, impostando o il valore pieno o una trasparenza.

L’ultima voce controlla la sticky header, che non è altro che la funzione per cui la fascia con logo e menu rimane sempre visibile in cima al browser.

Puoi abilitarla o disabilitarla per i diversi device, abilitare l’animazione e scegliere i colori di sfondo e testi.

Andiamo avanti con la sezione dedicata al menu.

Anche in questo caso hai un sottomenu di voci dedicate, una per ogni tipo di menu che puoi utilizzare su avada.

Il primo è il menu principale in cui come prima cosa puoi selezionare la distanza tra le voci.

Se serve, regolala in base al numero di voci e alla lunghezza totale del menu in modo che sia armonico rispetto al logo.

Col tasto sotto puoi disabilitare l’icona del search nella barra principale.

In fondo regoli tutta la sezione sulla tipografia del menu, scegli quindi il carattere del menu tra i numerosi font di google che ci sono, e mi raccomando, occhio sempre alla leggibilità.

Puoi anche aumentare leggermente la grandezza del carattere se avrai poche voci.
Infine scegli il colore delle voci attive e del passagio col mouse.

Passiamo ora al Menu flyout, che è quello che avevamo scelto nella disposizione dell’header e che raggruppa tutte le voci sotto il menu a lineette.

Se scegli questo tipo di menu puoi decidere: dimensioni, colori dell’icona a riposo e al passaggio del mouse, e per finire anche la direzione di comparsa con l’ultima finestra di opzioni.

Il menu secondario è un’ulteriore opzione che consente di aggiungere una fascia all’header in cui inserire, oltre ad un ulteriore menu anche delle informazioni generiche come social, o recapiti.

Noi ovviamente avendo scelto il flyout non possiamo configurarlo, ma se cambio impostazioni, troverò semplcimente un’intera nuova sezione da compilare simile alla precedente.

La tab successiva controlla il menu per tablet e smartphone.

Hai 3 tipologie tra cui scegliere e a seconda della scelta diverse opzioni da configurare.

Quando dicevo che avada non scherza con il numero di variabili intendevo proprio questo.

Ci sono un’infinità di funzioni da scoprire e lascio a te tutti gli esperimenti del caso.

L’altra voce controlla, il mega menu, utilissimo se hai molti link che vuoi che siano subito disponibili, ma anche per creare delle soluzioni che vadano oltre al semplice link.

Se hai intenzione di utilizzare un mega menu, puoi tranauillamente importare le opzioni di un tema che ne fa uso, in modo ca pairne i meccanismi.

Per impostarlo poi, dovrai seguire le istruzioni che trovi nella documentazione ufficiale.

nella prima voce dovrai abilitare il checkbox mega menu e poi dovrai scegliere la larghezza, il numero di colonne e se impostare un’icona o un’immagine.

Per creare le sottopagine devi ragionare secondo uno schema gerarchico esattamente come per il menu tradizionale.

L’ultina controlla invece l’aspetto delle eventuali icone, che puoi inserire per abbellire il tuo menu.

Passiamo ora alla sezione del logo.

Per prima cosa imposti l’allineamento. Come riporta la nota quello centrato è valido solo per alcune opzioni di layout.

Poi stabilisci i margini laterali e superiori, utile in caso di loghi molto alti.

Se vuoi puoi anche inserire uno sfondo colorato e un link differente dalla home page.

Poi, semplicemente dovrai caricare il tuo logo dal pannello media.

Se riesci, meglio creare anche un logo retina che deve essere grande il doppio rispetto al logo base.

Inoltre, se vuoi usare un logo differente, magari più compatto per la visualizzazione sulla sticky header o mobile, hai a disposizione un campo per ognuno.

Come ultimo passaggio devi impostare la favicon che apparirà di fianco all’indirizzo nella barra del browser.

Hai differenti misure da creare a seconda del dispositivo.

La sezione sottostante riguarda titoli e bredcrumbs, ossia il menu a briciole di pane.

In pratica inserisce di dafault una barra che riporta su tutte le pagine e in automatico, il titolo della pagina e il menu di nagivazione laterale.

Noi decidiamo di escludere tutto, ma nel caso la volessi utilizzare hai tutte le funzioni da impostare sotto, partendo dalla dimensioni. al colore, a tutti gli elementi tipografici per finire con l’immagine di sfondo.

Stessa cosa per le impostazioni dei breadcrumbs.

Avada è uno dei pochi temi ad essere predisposto per una sliding bar.

In sostanza è un pannello che può aprirsi con diverse icone e in diverse posizioni che puoi utilizzare per fornire informazioni aggiuntive che possono essere facilmente raggiunte senza essere invasive.

Se la abiliti trovi tutti gli aspetti grafici da personalizzare, ma anche in questo caso, lascio a te la libertà di provare.

Per inserire poi gli elementi dovrai andare nella sezione dei widget di wordpress, troverai le aree destinate alla sliding bar.

La sezione successiva controlla il footer, quando è abilitato, imposti il numero di colonne e scegli il tipo di effetto, puoi lasciarlo tradizionale, ma anche inserire un effetto parallasse o stycky com per l’header.

In basso c’è il campo per attivare e personalizzare l’ultima barra grafica destinata ai copiright e alle informaizoni come la partita IVA.

Come per l’header, troviamo poi una sezione per inserire un eventuale immagine di background.

Per aggiustare invece lo stile grafico passiamo all’ultima sottovoce, in cui come sempre puoi decidere le spaziature, i colori, inserire un bordo, personalizzare i divisori e controllare tutti gli aspetti tipografici.

Passiamo alla sezione successiva, le sidebar.

Partendo dall’altro puoi usare il drag&drop per scegliere la disposizione delle sidebar in relazione al contenuto, poi puoi scegliere se tenere le sidebar fisse o meno.

Infine, ti concentri su padding e colori, nel caso volessi farla risaltare rispetto al resto dei contenuti della pagina.

Poi, trovia tutta la lista delle pagine in cui può essere presente o meno la sidebar.

All’interno di ognuna, scegli che sidebar destinare a quale pagina, e in quale posizione inserirla.

Capisci bene come sia uno strumento veramente potente per aver eil massimo livello di personalizzazione per ogni sezione del sito.

Passiamo velocemente alla successiva sezione del pannello opzioni, che controlla il colore di sofndo delle pagine e dell’area contenuti.

Può essere utile se ad esempio vuoi utilizzare un layout inscatolato con un’immagine o un colore di sfondo.

La sezione sulla tipografia si compone di due voci principali, nella prima imposti il carattere generale per il bocy, che riguarda quindi tutti i testi.

Scegli un google font che sia chiaro e leggibile, dimensioni e colori.

Per sicurezza, puoi anche in serire un font di backup nel caso ci fossero problemi di visualizzazione.

Poi scegli il colore che avranno i link.

Lo stesso lavoro di personalizzazione lo dovrai fare per tutti i titoli e tutti gli elementi tipografici richiesti dal tema.

Avada consente anche di uploadare un font personalizzato, ma per questioni di velocità e ottimizzazione, ti consiglio di rimanere sui font di Google.

La tab successiva ti permette di controllare l’aspetto del blog.

La prima voce riguarda la pagina di recupero degli articoli, in cui scegli se visualizzare il titolo e il layout generale che gli vuoi dare.

Ci sono moltissimi esempi che puoi visionare nella demo principale.

Ci sono le opzioni di paginazione, con i classici tasti, con scroll infinito o con il tasto per caricare altri post.

Ci sono le opzioni per controllare la lunghezza del testo del riassunto, più altre inerenti all’immagine di anteprima e al formato della data.

Per il post singolo invece ci sono una serie di checkbox di scelta, che controllano quali informazioni devono apparire.

Lo stesso discorso vale per il portfolio.

Abbiamo la prima voce che controlla l’aspetto della pagina di recupero di tutti i lavori.

Può essere a griglia, ossia che mostra i lavori secondo uno schema ordinato o in base a parametri fissi, oppure con effetto masonry, che adatta le dimensioni delle anteprime a seconda del formato della foto per strutture più varie.

A seconda della scelta, ci saranno da impostare diverse opzioni, come ad esempio il numero di colonne, la lunghezza del riassunto, la disposizione dei titoli e gli eventuali margini.

Poi c’è la sezione dedicata al lavoro singolo, che è molto simile a quella appena vista per i post del blog.

Passiamo oltre e apriamo la sezione social Media. Ti basta aprire la tendina, scegliere il social, inserire la URL e premere add.

Ripeti per tutti quelli che vuoi inserire.

Ci sono poi due sottovoci che controllano presenza, dimensione e colori delle icone social, sia per l’header che per il footer.

Infine puoi personalizzare anche lo sharing box, un elemento che puoi inserire negli articoli o nel portfolio per incrementare le condivisioni social delle tue pagine.

Le successive due sezioni riguardano le impostazioni del modulo slideshow e dell’elastic slider, che trovi nel menu principale e che configuri in modo simile al fusion slider della lezione precedente.

Non le analizzeremo perchè sono davvero molto semplici. Se vuoi creare uno slider più complesso ti consigliamo di imparare uno dei due plugin premium che sono sicuramente più ricchi di funzioni e possibilità di personalizzazione.

Avada ha anche una funzione per controllare l’aseptto e la funzionalità dei lightbox all’interno del sito.

La tab sul modulo di contatto funziona solo se utilizzi il template contact page.

È una funzione di form interno sviluppata dalla theme fusion, ma puoi anche utilizzare il più classico contact form 7.

Ad ogni modo le opzioni da inserire sono decisamente intuitive.

Trovi anche la possibilità di inserire il codice ricapcia con le istruzioni.

Anche questa funzione della mappa funziona solo nel caso di utilizzo del template contant page e per usufruirne avrai bisogno della solita chiave API di google come avviene per tutti i temi.

Una volta ottenuta avrai la possibilità di impostare i controlli il livello di zoom e la scale e, con la tab successiva personalizzare anche l’aspetto grafico della mappa, inserendo ad esempio un colore di sfondo e un box di contenuti.

La successiva sezione controlla le funzionalità della pagina di ricerca, ma direi che le puoi lasciare impostare come di default.

C’è poi un’intera sezione per la privacy che è stata implementata con le nuove regole del GDPR.

Come si legge dalla nota occorre compilare anche la pagina privacy con tutte le ulteriori informazioni, ma avada consente di aggiungere la barra per il consenso del trattamento di alcuni dati e dei cookie principali.

Cliccando qui trovi tutta la lista sul tipo di contenuto che avada puoi controllare.

Poi abilitando la privacy bar, puoi decidere come personalizzare appunto la barra di accettazione, dal punto di vista grafico e dei contenuti.

Per concludere abbiamo una sezione extra che contiene varie funzioni di secondaria importanza, come ad esempio l’aspetto che devono avere i link correlati nella sezione portfolio.

Non perderci troppo tempo, ma dagli comunque un’occhiata per capire se c’è qualcosa che ti può interessare.

Le funzioni avanzate le lasciamo agli sviluppatori, così come la gestione dei css personalizzati, è interessante invece la sezione sugli elementi del builder.

Per i più accaniti, si può trovare un livello di personalizzazione maniacale di ogni elemento del builder di layout, che affronteremo nella prossima lezione.

Il pannello di opzioni di avada si chiude con la classica funzione di esportazione o importazione di tutte le opzioni che abbiamo appena analizzato.

Ti ringrazio per l’attenzione e ti aspetto al prossimo video.