Opzioni del tema Enfold

In questa lezione conosceremo meglio il tema Enfold, un tema multipurpose che si adatta benissimo a qualsiasi tipo di attività, come dimostrano anche le numerose versioni demo che gli sviluppatori hanno preparato e che si possono importare con un semplice click.

È un tema sviluppato dalla Kriesi, ed è un prodotto che ormai da anni occupa i primi posti delle classifiche di vendita su themeforest.

Il suo pannello opzioni possiamo raggiungerlo sia dal menu di sinistra che dal menu superiore.

Una volta al suo interno si apre una schermata suddivisa in varie tab, ognuna delle quali controlla un particolare aspetto del tema.

Iniziamo ad analizzare le più importanti, in modo che tu possa avere gli strumenti per essere autonomo nella personalizzazione del tuo sito.

La prima tab riguarda le opzioni generali, si può indicare qual’è la home page del sito e quale la pagina del blog, esattamente come avviene con il pannello delle impostazioni di WordPress.

Qui si inseriscono anche logo e Favicon, basta caricarli nella finestra dei media e selezionarli.

Ci sono poi altre opzioni come il precaricameto pagina, la possibilità di personalizzare la pagina 404 e persino di mettere il sito in manutenzione senza usare un plugin specifico.

Infine, Enfold consente anche di scegliere se utilizzare l’editor classico o Gutenberg, senza bisogno di installare alcun plugin.

La tab del layout riguarda la struttura base delle pagine.

Puoi scegliere tra un layout allungato, che occupa tutta la larghezza dello schermo, oppure un layout inscatolato, simile ai siti “vecchio stile”, che lascia due bordi sui lati.

In alternativa, puoi anche inserire una cornice fissa alla pagina.

Il logo poi, si può lasciare sulla parte superiore del sito, oppure, in caso volessi provare un tipo di impaginazione meno standard, puoi posizionarlo in una delle due sidebar.

Nella tab delle dimensioni imposti la larghezza massima dell’area contenuti e la proporzione con la sidebar. Io di solito le lascio come le trovo.

Nella tab stile generale si controllano le opzioni di colore e i caratteri tipografici.

Puoi scegliere fra uno degli schemi di colore che enfold predispone, ma anche di personalizzare ogni elemento singolarmente.

Le diverse sezioni che compongono il sito sono state organizzate in un sotto menu, abbiamo quindi:

• L’area dell’header che racchiude logo e menu principale
• L’area dei contenuti
• Un’area di contenuti alternativi che come vedi è inserita in ogni sezione e serve semplicemente per avere una doppia opzione di colorazione degli elementi
• L’area del footer e del socket, che è l’ultima riga in basso e che in genere racchiude i credits.

Per ognuno scegli il colore da dare ai vari elementi come carattere, link, sfondi etc.

L’ultima tab è dedicata alla scelta del carattere tipografico per titoli e testi, troverai moltissimi font di google da testare.

Per personalizzare ancora più nel dettaglio ogni elemento abbiamo a disposizione anche la tab dello stile avanzato.

Da qui si possono richiamare moltissimi elementi che interessano il tema e in questa versione demo ne sono già stati inseriti alcuni dagli sviluppatori.

Abbiamo i tag html classici, abbiamo i titoli, gli elementi del menu principale e altri specifici del tema.

Noto ad esempio che ne è presente uno specifico per i bottoni e lo seleziono.

Nella nostra home page ne abbiamo 3 inseriti in diversi box.

Vedo che posso intervenire sull’arrotondamento degli angoli, faccio le mie modifiche, salvo e aggiorno la pagina per vedere il risultato.

Le impostazioni che inserisci qui, andranno a sovrascrivere quelle dello stile generale e possono variare a seconda dell’elemento selezionato.

Prenditi del tempo per analizzarli tutti e capire cosa puoi controllare con queste opzioni.

Passiamo ora alla tab del menu principale con la quale imposti vari aspetti legati appunto al menu, che può essere classico o espandibile con icona.

In alto ne visualizzi sempre un’anteprima.

Volendo puoi anche creare un menu specifico per le versioni mobile e selezionarlo.

Sempre per gli aspetti mobile scegli la larghezza della pagina oltre la quale si deve attivare attiva il menu ridotto.

Controlla questa impostazione nel caso tu avessi un menu con moltissime voci.

Il menu mobile, chiamato anche burger menu, ha anche una tab dedicata con diverse varianti tra cui scegliere.

Nell’ultima tab imposti il colore icona e la larghezza del menu flyout.

Nella tab intestazione stabilisci la dispozione di logo e menu.

Come sempre ne puoi vedere l’anteprima nella parte superiore della schermata.

Lo stesso vale per le altre impostazioni che puoi modificare, come l’altezza personalizzata, lo stile e la visualizzazione di titoli e menu a briciole di pane.

Nel sottomenu intestazione troviamo altre voci come il comportamento del titolo con alcuni checkbox di opzioni, puoi leggere tranquillamente le didascalie per capire a cosa corrispondono.

Oltre a logo e menu principale, puoi anche inserire degli elementi aggiuntivi nell’intestazione e smi riferisco alle icone social, ad un eventuale menu secondario o ad informazioni aggiuntive come un numero di telefono.

Per ognuna puoi stabilirne la posizione.

Particolarmente interessante dal punto di vista grafico anche l’opzione per gestire la trasparenza del menu.

È infatti possibile ottenere un effetto per cui logo e menu principale vengono sovrapposti allo sfondo sottostante.

L’effetto è quello che si vede ad esempio sulla home page di Webipedia, in cui il logo e il menu non sono delimitati dalla classica fascia, ma si fondono con il contenuto sottostante.

Per ottenerlo dovrai caricare un logo dedicato.

Se ad esemepio hai intenzione di utilizzare sfondi scuri come come nostro caso, inserirai un logo chiaro e chiaro sarà il colore che dovrai scegliere per il menu.

Poi nelle impostazioni di pagina singole potrai decidere in quale pagina abilitare la versione con testata trasparente.

Procediamo con la sezione relativa alle sidebar in cui scegli quale sidebar mostrare nelle varie sezioni del sito, quindi pagine archivio, blog, singoli post e così via.

In basso ci sono altre opzioni di stile e allineamenti.

Il footer del sito lo controlli invece dalla tab pie di pagina.

Puoi scegliere se mostrare sia i widget che il socket oppure se escluderne uno.

Volendo puoi anche costruire una pagina con il layout builder e stabilire che sarà quella visualizzata al posto del footer.

Questo può essere davvero utile, perchè il footer è una delle sezioni più strategiche dove posizionare i contenuti, come spiegato nell’articolo che trovi sul nostro blog.

Nel caso volessi utilizzare gli strumenti tradizionali puoi invece stabilire il numero di colonne in cui suddividere il footer e andare a comporlo con i tuoi widget.

Più sotto imposti il testo del copyright da scrivere nel socket.

A questo proposito ti segnalo anche che se non vuoi che appaia il link alla kriesi in automatico, devi aggiungere [nolink] alla fine del testo.

Se infine vuoi che appaiano anche le icone social, spunta questa voce.

La tab del layout builder controlla alcune impostazioni del builder visivo, ma puoi tranquillamente lasciare impostate le opzioni che trovi di deafult.

Procediamo con il Layout blog con il quale puoi selezionare diverse opzioni di visualizzazione sia a livello di stile che a livello degli elementi che verranno recuperati.

Abbiamo delle opzioni che valgono a livello generale per la pagina blog e abbiamo delle opzioni di controllo per i singoli post.

Anche qui ti invito a provare le diverse opzioni per scoprire quale soluzione ti piace di più.

Sempre per i post singoli hai due liste di checkbox con cui selezioni cosa far visualizzare all’utente e con quali social vuoi che possano essere condivisi i tuoi post.

Passiamo velocemente a vedere le altre tab del pannello opzioni di Enfold, in cui troviamo quella relativa ai profili social, nella quale ti basterà aggiungere le url di quelli relativi al tuo progetto.

Abbiamo poi una tab sulle prestazioni che ti consiglio di lasciare impostarta con i valori che trovi di default e una relativa alla privacy e alla cookie policy.

Enfold è uno dei pochi temi che consente di inserire la barra per l’accettazione dei cookie senza usare un plugin.

Puoi personalizzare il messaggio e scegliere la posizione dove farlo apparire.

Ci sono anche due pulsanti di cui controlli il testo e ne stabilisci l’azione.

Ma c’è anche di più.

Puoi infatti attivare la Modal Window, una finestra di pop up che oltre a dare delle informazioni più dettagliate agli utente, gli consente il controllo immediato di alcuni cookie.

Infine abbiamo le voci per integrare il servizio di Newsletter di Mailchimp, di cui abbiamo a disposizione un corso dedicato su Webipedia, così come l’integrazione dei codici di Google relativi al monitoraggio dati con analytics e alle Mappe.

Nella tab delle versioni demo trovi tutte quelle che hanno progettato gli sviluppatori della kriesi, puoi vederne un’anteprima online, scoprire quali sono i plugin consigliati e agevolarti nella costruzione delle tue pagine.

Le ultime voci servono per importare o esportare le opzioni del tema che abbiamo appena visto su un altro sito che utilizza enfold e per inserire il codice di ThemeForest che consente di ricevere gli aggiornamenti del tema stesso.

Per questa lezione abbiamo concluso, ora non ti resta che prendere dimestichezza con il pannello opzioni e fare qualche esperimento per adattare quanto appreso al tuo sito web.

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