Come installare e configurare il tema Avada su WordPress

Con oltre 400.000 vendite, Avada risulta essere il tema più venduto per WordPress. Complimenti agli sviluppatori!

Tra i pregi del tema: la compatibilità con i plugin più utilizzati (WooCommerce, SEO by Yoast, Easy Digital Download, bbPress, Contact Form 7 e moltissimi altri), la corposa documentazione, le numerose demo, gli strumenti messi a disposizione per la creazione di pagine visualmente attraenti.

In questa guida vedremo come installare il tema sul proprio sito WordPress.

Operazioni preliminari: acquisto del tema Avada e download dei file

Acquistato il tema Avada su Theme Forest, si avrà la possibilità di scaricare 2 pacchetti di file: uno che contiene il pacchetto con tutti i file del tema (documentazione, psd, ecc.) e uno che contiene solo il tema.

La prima volta che si deve installare Avada sul proprio progetto WordPress conviene scaricare il pacchetto completo, il file themeforest-2833226-avada-responsive-multipurpose-theme.zip (di oltre 250 MB) e scompattarlo.

Si otterranno così diverse cartelle: Avada Theme, Extras, Languages, Licensing, PS. Tra queste la più importante è la prima, Avada Theme, che al suo interno contiene i 2 zip del tema: Avada.zip e il relativo tema child Avada-Child-Theme.zip.

Installazione del tema Avada su WordPress

Come per ogni tema di WordPress, è possibile installare il tema in 2 modi: direttamente dal pannello di amministrazione di WordPress oppure via FTP.

Installazione del tema Avada dal pannello di amministrazione di WordPress

Per installare il tema base Avada direttamente da WordPress:

Aspetto > Temi > Aggiungi nuovo > Carica tema > Scegli file > selezionare il file Avada.zip e caricarlo

Successivamente caricare anche il file Avada-Child-Theme.zip

Questi file si trovano all’interno del pacchetto scaricato da Themeforest, in Avada_Full_Package\Avada Theme.

Avada.zip è grande circa 5MB, per cui il caricamento di questo file via pannello impiegherà un po’ di tempo (qualche minuto).

Installazione del tema Avada via FTP

Per installare il tema Avada tramite un client FTP:

scompattare i file Avada.zip e Avada-Child-Theme.zip

copiare le relative cartelle in wp-content > themes, assicurandosi che i nomi delle cartelle caricate siano Avada e Avada-Child-Theme.

La cartella Avada è di 14.6MB.

Attivazione del tema Avada

Una volta installato il tema con uno dei due metodi visti sopra, naturalmente deve essere attivato da pannello di amministrazione:

Aspetto > Temi > click sul pulsante Attiva in Avada Child.

Operazioni conclusive: registrazione del tema, attivazione dei plugin e verifica del sistema

A questo punto il tema Avada risulta installato sul proprio sito, ma è comunque necessario svolgere alcune operazioni per completare l’installazione.

Registrazione del tema Avada

Innanzitutto occorre inoltre registrare il tema, cliccando sul tab Registration e inserendo il codice di registrazione (token) creato seguendo le istruzioni sotto alla casella dove va inserito il codice. Al nome del token conviene dare il nome del progetto che stiamo realizzando: in questo modo se si acquista il tema Avada per più progetti, visitando la pagina di Avada si otterrà l’elenco di tutte le proprie installazioni.

La registrazione ha due funzioni principali:

• sblocca i plugin commerciali a corredo del tema,
• dà l’accesso a tutte le demo del tema.

Attivazione dei plugin commerciali compresi nel tema Avada

Eseguita la registrazione è necessario cliccare il tasto Manage Plugins Below per attivare i plugin commerciali compresi nel tema, in particolare Fusion Core e Fusion Builder, essenziali per il funzionamento di Avada.

Verifica dei requisiti del server web

L’ultimo passaggio prevede la verifica delle impostazioni del server per fare in modo che il tema Avada funzioni al meglio.

Cliccare sul tab System Status e verificare che le impostazioni siamo tutte sul verde, altrimenti è oppportuno intervenire nelle impostazioni del server, per esempio cambiando la versione del PHP, installando componenti mancanti, aumentando alcune impostazioni del PHP (max input vars, time limit…).

Prime configurazioni del tema Avada

Molte caratteristiche del tema si gestiscono da Avada > Theme Options.

Le principali sono:

• il layout
• il menu
• i colori
• l’header
• il footer
• l’aspetto del testo (typography)

e molte altre configurazioni ancora.

Custom Post Type in Avada

Seguire questa guida di 10for2.com (in inglese).

Versione stampabile in Avada

Non esiste nel tema Avada un settaggio per configurare questo aspetto.

Si può agire con questo workaround.

1. Aggiungere la classe no-print nel foglio di stile di Avada

Da Avada > Theme Options > Custom CSS, aggiungere:

/* VERSIONE STAMPABILE DOCUMENTI */
/* classe per non visualizzare contenuti su versione stampabile */
@media print
{ .no-print, .no-print *
{ display: none !important; }
}

2. Aggiungere la classe no-print sui div dei diversi template che compongono la pagina

Si individua il template da modificare nella cartella /public_html/wp-content/themes/Avada/templates, per esempio footer-content.php.

Si copia il file nel tema child, anche lì nella cartella templates (quindi in /public_html/wp-content/themes/Avada-Child-Theme/templates).

Infine si edita il template, aggiungendo la classe no-print all’elemento div che non si intende visualizzare nella versione stampabile.

3. Utilizzare la media query print per eliminare gli altri elementi non presenti nei template e ottimizzare la visualizzazione

Per esempio per eliminare gli elementi privacy, back to top e re-captcha, uso il codice:

@media print
/* non mostra recaptcha, privacy, slidingbar */
{ .rc-anchor, .grecaptcha-badge, .slidingbar-area
{ display: none !important; }
}

Per ottimizzare il layout della versione stampabile invece uso:

/* altre personalizzazioni */
@media print
/* allinea contenunto del documento a sx */
{ .campi-documento
{ margin-left: -200px; }
/* toglie bordo sotto titolo */
.fusion-page-title-bar
{ border: 0; padding:0; }
/* avvicina contenuto a titolo pagina */
#main
{ padding: 0; }
}

Riferimenti utili

Documentazione ufficiale del tema Avada

Demo e funzioni del tema Avada

Hai trovato utile l’articolo? Commenta sotto o condividilo!