Il miglior tema WordPress: Astra

Oggi ti parlerò di quello che reputo il miglior tema WordPress: Astra. Si tratta di un tema sviluppato da Brainstorm Force, azienda indiana specializzata in prodotti WordPress.

Astra è un tema che amo, negli ultimi sei mesi ho iniziato ad adoperarlo stabilmente per i miei progetti web. Il sito internet che stai navigando è fatto con Astra!

In particolare, lo uso in combinazione con Gutenberg, l’editor a blocchi nativo di WordPress (ma è possibile usare anche Elementor, Beaver e Brizy) insieme agli Ultimate Addons di Gutenberg, che ne estendono le funzionalità. Risultato? Siti velocissimi, leggeri, sviluppati con pochissimi plugins, personalizzabili all’infinito.

La questione della velocità, in particolare, per me è cruciale. Sono un consulente di Web Marketing, il che significa che non mi limito a realizzare siti web. Il mio obiettivo è realizzare siti web efficaci e ben posizionati sui motori di ricerca. Per entrambi questi obiettivi, decisivi per te che hai un’azienda o sei un libero professionista desideroso di incrementare il tuo business, è fondamentale avere un sito performante. Realizzare un progetto web sfruttando appieno le potenzialità di Astra con Gutenberg e limitando al minimo i plugin è, quindi, importantissimo!

In questa guida/recensione, ti spiegherò tutte le caratteristiche di Astra, dalla differenza tra il piano free e quelli a pagamento ai plugin compatibili alla customizzazione completa delle varie sezioni. In definitiva, avrai una panoramica completa su quello che in molti reputano il migliore tema WordPress! Se sei un collega, il tuo modo di realizzare siti in WordPress cambierà completamente Tutti gli altri avranno, invece, un nuovo standard di riferimento.

Come sempre, ti invito a leggere le mie due guide fondamentali: la Guida completa a WordPress e la guida “Primi su Google”, per migliorare il vostro posizionamento SEO.

Cos’è Astra e quali sono le sue caratteristiche

Astra è un tema per WordPress. E’ uno dei più diffusi (oltre un milione di users) ed è considerato da moltissimi esperti tra i temi più veloci per WordPress. Io lo considero semplicemente il migliore.

I suoi punti di forza:

• Performance focused: Astra usa Vanilla JavaScript, che evita il noiosissimo render blocking jQuery che spesso incide negativamente sulle performance.
• Ultravelocità: non ti racconto chiacchiere. Esegui il test di Pingdom sul mio sito: si carica in meno di mezzo secondo!
• Ultraleggero: Astra pesa pochissimo, meno di 50kb, la metà di un tema WordPress standard!
• Codice ottimizzato: il team di Astra mette particolare attenzione alla qualità del codice di programmazione. Mai riscontrato bug o malfunzionamenti! Inoltre, offre (lo vedremo più avanti) una serie di funzioni che ottimizzano il CSS inline, garantendo prestazioni ottimali.

Dal punto di vista del design, le possibilità sono praticamente infinite. Puoi personalizzare letteralmente ogni aspetto del sito senza interventi di coding. Layout, sidebar, header e intestazioni delle pagine, colori, tipografia, footer. Le funzioni le vedremo nel dettaglio più in avanti. Per ora ti basti sapere che se ami curare nel dettaglio il design di ogni progetto, con Astra puoi sbizzarrirti. Puoi disegnare il tuo template da zero o appoggiarti a una serie di template già strutturati (nella versione PRO).

Astra è inoltre perfettamente compatibile con WooCommerce, nel caso tu voglia adoperarlo per creare il tuo negozio online: te ne parlerò diffusamente più avanti. Se hai intenzione di realizzare un sito di corsi online, avrai a disposizione anche LifterLMS o LearnDash, due tra i migliori plugin del settore (nella versione PRO).

Per finire, il supporto è disponibile e puntuale. E comunque, probabilmente non ne avrai bisogno, vista la gran quantità di videoguide e articoli dedicati a spiegare ogni più piccolo aspetto di Astra.

Leggi l’elenco completo delle feature per saperne di più! Prima di entrare nel dettaglio del funzionamento di questo che reputo il miglior tema WordPress, diamo un’occhiata alle differenze tra il piano gratuito e la versione a pagamento.

Astra Free VS Pro

Per gli utenti “non professionisti”, Astra è disponibile in due versioni: free e Pro.

La versione free del tema è scaricabile a questo link; il pacchetto Pro puoi acquistarlo qui (hai a disposizione 14 giorni per recedere dall’acquisto e riavere i tuoi soldi).

Le differenze sono molteplici. Anzitutto, una minore possibilità di customizzazione dei vari aspetti grafici (ad esempio: colori, font, gestione delle spaziature, template del blog, custom layout dell’header, del footer ecc.) e una minore integrazione con plugin molto potenti come WooCommerce, LifterLMS, LearnDash e Easy Digital Downloads (ne parlerò a fondo più avanti). Dai un’occhiata a questa pagina per una comparazione tra i due pacchetti!

Per i freelance e le agenzie, Brainstorm mette a disposizione due pacchetti ulteriori: Mini Agency Bundle e Agency Bundle.

Il pacchetto Miny Agency Bundle comprende tutte le caratteristiche del pacchetto Pro, inclusi i plugin Astra Pro Addon e WP Portfolio, più gli Starter Templates (ovvero i template preimpostati, sono oltre 55, circa 30 in più di quelli disponibili nel pacchetto Pro) e gli Ultimate Addons di uno dei builder tra Elementor o Beaver (oltre a quelli di Gutenberg, beninteso).

Il pacchetto Agency Bundle è il top. Oltre alle funzionalità del pacchetto Mini, comprende anche gli Ultimate Addon di tutti i builder, e i plugin Convert Pro e Schema Pro. Per finire, l’accesso alla SkillJet Academy, una library di corsi online specificamente progettati per i professionisti del web design.

Quanto costano questi pacchetti? Clicca qui per scoprire i prezzi!

Come installare Astra su WordPress

Il pacchetto che ho attualmente attivato è il top, Agency Bundle. Ed è di questo pacchetto che ti parlerò nella guida, per mostrarti tutte le funzionalità di Astra.

Ad ogni modo, cominciamo dal principio, l’installazione. Se hai letto la mia guida completa a WordPress, saprai benissimo come installare un tema. Per i più distratti, lo ripeto qui sotto:

1. Scarica l’archivio zip del tema. Ti ricordo che la versione free puoi scaricarla da qui, mentre i pacchetti Pro puoi acquistarli qui. In quest’ultimo caso, una volta effettuato il pagamento otterrai delle credenziali e nella sezione download potrai scaricare il pacchetto zip Astra Theme.
2. Accedi al pannello di controllo del tuo sito WordPress
3. Vai su Aspetto > Temi > Aggiungi nuovo > Carica tema
4. Aggiungi il pacchetto che vuoi installare e clicca su “Installa adesso”

Ed ecco il tema installato con successo!

Generare e installare il Child theme di Astra

Il child theme di Astra è disponibile solo nel pacchetto Pro. E’ una funzionalità molto utile, perché permette di generare un child theme personalizzato nel nome, nell’immagine di anteprima, persino nei metadati (versione del tema, autore ecc.).

(Nel caso non lo sapessi, il child theme è utilissimo quando si effettuano modifiche nei template originali o nei fogli di stile, perché l’aggiornamento del tema parent non va a sovrascriverli. Leggi la guida ufficiale di WordPress ai child theme per saperne di più!)

Per generare il Child Theme, vai nella sezione “Download” del sito di Astra e clicca su “Astra Child Theme”.

La schermata successiva è composta da un campo in cui inserire il nome del Child Theme. Tu clicca su “Advanced Options”. Avrai accesso alla schermata in cui inserire tutti i dati del Child Theme, per personalizzarlo.

Attenzione quando carichi l’immagine di anteprima del tema: ricordati che deve avere dimensioni 1200×900!

Cliccando sul pulsante “Generate”, potrai scaricare il file .zip del tuo tema child di Astra. Va installato e attivato secondo la procedura standard, vista al punto precedente.

Se parliamo di personalizzazione dei metadati, Astra mette a disposizione un’altra opzione (che è complementare e non alternativa al child theme), il white label (te ne parlerò più avanti).

Ora, andiamo a vedere le prime configurazioni!

Astra Pro Addon Plugin

Astra Pro Addon Plugin è il plugin principale di Astra. Come fa capire il nome stesso, è disponibile solo per i pacchetti Pro (Pro, Mini Agency Bundle, Agency Bundle). La sua funzionalità è quella di dare accesso a tutte le possibili customizzazioni del tema. Una prima idea potete farvela guardando questo link. Il dettaglio delle possibilità di customizzazione lo vedremo nella sezione dedicata alle opzioni di Astra.

La procedura d’installazione è quella valida per tutti i plugin. Dopo aver scaricato il file zip dalla sezione “Download” di Astra, vai nel pannello di controllo del sito, clicca su “Plugin” e carica l’archivio. Terminata la procedura d’installazione, attiva il plugin.

Premium Starter Templates

Astra offre agli utenti un pacchetto di template già strutturati per qualsiasi esigenza. Li puoi trovare a questo link, suddivisi in base al builder (Gutenberg, Elementor, Beaver, Brizy).

La versione free e la versione Pro offrono un numero limitato di questi template. I pacchetti Agency ne rendono disponibili oltre 55.

Per installarli è necessario scaricare il plugin “Premium Starter Templates”, disponibile sempre nella sezione “Download”. Una volta installato dal vostro pannello di controllo, nella sezione “Aspetto” comparirà la voce “Starter Templates”. Qui potrai scegliere il builder che vuoi adoperare: Gutenberg, Elementor, Beaver e Brizy.

Approderai così alla schermata in cui sono presenti tutti i template che sfruttano quel builder.

Avrai comunque sempre la possibilità di modificare il builder prescelto tramite il menu in alto a destra.

A questo punto, non ti resta che scegliere il tema che desideri. Cliccaci sopra e avrai la possibiltà di:

• Vedere un esempio di sito strutturato con quel template
• Importare il sito completo
• Importare solo una pagina specifica

Ti ricordo che nei pacchetti Agency sono disponibili anche gli addon per Elementor e Beaver, dei plugin che estendono le funzionalità dei builder.

Opzioni Astra

A questo punto entriamo nel vivo di questa guida/recensione ad Astra per WordPress. Prima di accedere alla personalizzazione vera e propria del tema, diamo un’occhiata alle opzioni a nostra disposizione e attiviamo quelle desiderate.

Nella sezione Aspetto > Opzioni Astra hai a disposizione i collegamenti “Collegamenti alle impostazioni di Personalizzazione”, i “Moduli Astra Pro disponibili” e una serie di plugin gratuiti che estendono le funzionalità di Astra.

Esaminiamo i tre blocchi uno per uno.

I “Collegamenti alle impostazioni di Personalizzazione” sono:

• Carica Logo
• Imposta Colori
• Personalizza Font
• Opzioni Layout
• Opzioni Header
• Layout Blog
• Impostazioni Footer
• Opzioni barra laterale

E’ possibile accedere a queste opzioni anche dalla sezione Aspetto > Personalizza. Diciamo che questi sono i collegamenti essenziali, le cose che in prima istanza si impostano in un progetto web.

Nella sezione “Moduli Astra Pro disponibili”, troviamo alcune succulente opportunità di rendere il nostro tema Astra ancora più personalizzato. Ecco l’elenco dei moduli:

• Colori & Sfondo
• Tipografia
• Spaziatura
• Blog PRO
• Header Dispositivi Mobili
• Sezioni Header
• Menu di navigazione
• Header fisso
• Intestazioni Pagina
• Layout Personalizzati
• Layout Sito
• Widget Footer
• WooCommerce
• Easy Digital Downloads
• LearnDash
• LifterLMS
• Etichetta bianca

Puoi scegliere di attivare o disattivare tutti i moduli assieme con i rispettivi pulsanti. Oppure, puoi attivare il singolo modulo cliccando sul corrispondente link “Attivare”.

Tieni presente che i moduli di WooCommerce, Easy Digital Downloads, LearnDash e LifterLMS necessitano prima dell’installazione dei relativi plugin.

Esaminiamo questi moduli uno per uno!

Colori e sfondo

Il design e l’estetica sono parti essenziali di qualsiasi sito web. Il modulo “Colori e sfondo” estende le opzioni di personalizzazione di base. Attivandolo, in particolare, nel menu Aspetto > Personalizza, potrai modificare colori e sfondo di queste sezioni:

• Globale > Colori > Contenitore
• Header > Identità Sito
• Header > Header Principale
• Header > Menu Principale
• Blog > Blog / Archivio
• Blog > Articolo singolo
• Barra laterale

Tipografia

La gestione della tipografia (font, dimensioni, interlinea, stili, text transform ecc.) può avvenire anche a livello di builder, ma è molto meglio gestirla, per quanto possibile, nelle impostazioni generali del tema, per garantire uno stile uniforme in tutto il sito.

Ora, le impostazioni base della tipografia sono accessibili nella sezione Aspetto > Personalizza e riguardano body e contenuto (“Base tipografia”) e titoli (“Intestazioni”). Il modulo “Tipografia” amplia le possibilità a disposizione, e aggiunge la gestione degli elementi tipografici anche:

• Nel menu: Header > Menu Principale > Caratteri
• Nei pulsanti: Globale > Bottoni > Caratteri
• Nelle pagine di archivio dei blog: Blog > Blog / archivio > Tipografia
• Nel singolo articolo: Blog > Articolo singolo > Tipografia
• Nei widget della sidebar: Barra laterale
• Nei widget del footer: Footer

Spaziatura

L’addon “Spaziatura” ti consente di gestire il margine e il padding per vari elementi disponibili con Astra. I valori predefiniti per il tema verranno sovrascritti dai valori inseriti qui.

Il componente aggiuntivo aggiungerà un’opzione di controllo della spaziatura ai seguenti elementi:

• Identità del sito
• Contenitore
• Intestazione
• Archivio del blog
• Sidebar
• Footer

Esattamente, quali possibilità avremo?

Unità di spaziatura

È possibile selezionare un’unità di spaziatura tra PX (pixel), EM (relativo alla dimensione del carattere dell’elemento), % (percentuale) a seconda delle proprie preferenze.

Opzioni di spaziatura reattiva

È possibile impostare valori di spaziatura diversi per differenti dispositivi (PC, smartphone, tablet). Una volta selezionato il dispositivo, è possibile inserire valori per le quattro direzioni: alto, basso, destra, sinistra.

Connettore

Il controllo di spaziatura presenta l’iconcina di una catena la quale, quando fai clic, collegherà tutte e 4 le opzioni di spaziatura (Superiore, Destra, Inferiore, Sinistra) insieme, applicando lo stesso valore di spaziatura a tutti i lati.

Se il connettore è deselezionato, potrai aggiungere valori diversi per ciascun lato.

Blog PRO

Nella sezione Personalizza > Blog, il tema Astra fornisce una serie di opzioni di base per definire lo stile dell’archivio del blog (le pagine di tassonomia) e del singolo post. In particolare, le opzioni riguardano:

• la larghezza del contenuto
• gli elementi d’anteprima dell’articolo che vengono visualizzati (immagine, titolo, meta e il riassunto)
• alcuni elementi tipografici

Il modulo Blog PRO, se attivato, aggiunge più opzioni di personalizzazione che riguardano:

• il layout, con la possibilità di modificare la visualizzazione standard del contenuto
• la lunghezza del contenuto del riassunto da mostrare in anteprima nelle pagine di archivio
• il testo del “Read more” (sempre nelle pagine di archivio)
• lo stile della paginazione
• le dimensioni della featured image
• la spaziatura
• gli elementi tipografici
• l’inserimento del blocco con le info dell’autore (nel singolo post)
• l’auto load del post successivo, che viene caricato subito dopo quello attuale (idem)

Header Dispositivi Mobili

Quante volte avresti voluto modificare la visualizzazione dell’header sui dispositivi mobile? Be’, Astra ti offre questa possibilità attivando l’opzione “Header Dispositivi Mobile”.

Le opzioni a tua disposizione ti permtteranno di:

• modificare il breakpoint (il punto d’interruzione, oltre il quale si attiva il menu mobile)
• impostare un logo diverso per il mobile
• scegliere diversi stili del menu
• impostare i colori del menu

Sezioni Header

Il modulo “Sezioni Header” introduce due sezioni di intestazione (sopra e sotto l’header) nel tuo sito web. Si tratta di opzioni utili per mostrare call to action, dettagli di contatto, icone dei social media ecc.

In entrambi i casi, i layout a disposizione sono due: a due sezioni (testo / html, widget, cerca, menu o nulla) e a una sezione (come sopra).

Le regolazioni a tua disposizione comprendono:

• altezza della sezione
• bordo
• carattere
• possibilità di visualizzare o meno la top bar su mobile (ed eventualmente sostituire gli elementi)

Menu di navigazione

Non tutti i temi WordPress offrono la possibilità di creare mega menu. Talvolta può essere necessario installare un ulteriore plugin, con tutto ciò che questo comporta (tempo, appesantimento del codice, potenziali conflitti/incompatibilità ecc.). Se Astra è il miglior tema per WordPress è anche per l’attenzione che mette in questi particolari.

Dunque, una volta attivata la funzione “Menu di navigazione” dalla sezione “Opzioni Astra”, vai su Aspetto > Menu per creare il tuo mega menu.

Tieni sempre presente che il mega menu funziona se il menu ha le seguenti strutture:

Voce principale

            Voce child 1

            Voce child 2

            Voce child 3

Voce principale 2

            Voce child 4

            Voce child 5

            Voce child 6

ecc.

Oppure:

Voce principale

            Voce child 1

                        Voce child 1-1

                        Voce child 1-2

                        Voce child 1-3

            Voce child 2

                        Voce child 2-1

                        Voce child 2-2

                        Voce child 2-3

ecc.

Quindi distinguiamo tra voci principali (primo livello) e voci child (secondo e terzo livello).

Quindi, una volta selezionato il menu su cui vuoi lavorare, clicca sulla voce principale e da lì sul pulsante “Astra impostazioni menu”. Flagga la casella “Abilita mega menu”.

Come puoi vedere anche dall’immagine, hai a disposizione una serie di opzioni. Puoi definire la larghezza del mega menu (Contenuto – Larghezza contenitore menu – Larghezza piena – Full width stretched), il colore o l’immagine di sfondo, puoi modificare i colori (link e divisori colonna) o aggiungere un’etichetta alla voce.

Quando hai modificato quello che vuoi modificare, clicca su “Salva”.

Passa poi a lavorare sulle voci child, cliccando sempre su “Astra impostazioni Menu”. Avrai la possibilità di definire se la voce in questione è intestazione di colonna, nascondere l’etichetta del menu e persino eliminare il link, definire una sorgente del contenuto (testo personalizzato, template, widget) e l’etichetta in evidenza.

Ora, non voglio dilungarmi troppo sulla procedura di creazione di un mega menu con Astra perché non è questo lo scopo della guida. Se hai bisogno di un aiuto, puoi lasciare un commento a fondo pagina o scrivermi. Ti mostro qui due esempi di quello che puoi fare; il secondo, in particolare, sfrutta un’altra funzione di Astra, la creazione di layout personalizzati, che possono essere applicati anche ai mega menu (tramite la funzione “Sorgente del contenuto”).

Header fisso

L’”header fisso” è l’header sticky, quello che scorre con te quando scorri la pagina. Puoi abilitarlo attivando l’apposita opzione di Astra. Per poterlo gestire, vai su Personalizza > Header > Header fisso.

Qui potrai, tra le altre cose, abilitare l’opzione, scegliere un logo diverso per la fase “sticky”, abilitare o meno l’effetto riduzione quando l’header scorre, nascondere l’header durante lo scorrimento in basso, selezionare un effetto di animazione, applicare l’header fisso solo su alcuni dispositivi, modificare i colori.

Intestazioni pagina

Con questa opzione attiva puoi progettare i titoli delle pagine o l’intera intestazione, inserendo i breadcrumb e modificando colori e immagini di sfondo. Puoi scegliere inoltre di applicare i nuovi layout all’intero sito o solo ad alcune pagine.

Una volta attivata l’opzione, la troverai nel menu “Aspetto” con una sua voce specifica. Cliccando su “Aggiungi nuovo”, potrai creare la tua nuova intestazione.

La schermata è divisa in tre tab: Header della pagina, Header del sito, Visualizzare le regole.

Nella prima tab abbiamo tutto l’occorrente per progettare l’intestazione dei nostri contenuti. Possiamo scegliere un layout (allineamento centrale, laterale, nessun header), se mostrare o meno il breadcrumb, il colore del titolo e del breadcrumb, il colore di sfondo o l’immagine (è possibile anche impostare come sfondo l’immagine in evidenza di ciascuna pagina).

Nella seconda tab, flaggando la casella “Unire Intestazione Pagina con l’intestazione del sito”, è possibile modificare l’header di tutto il sito, sovrascrivendo le regole che finora abbiamo dato. Non è obbligatorio, tant’è che di default l’opzione non è attivata, ma per alcuni tipi di contenuti potresti voler modificare non solo il titolo ma anche l’header vero e proprio.

Terza tab è quella delle regole di visualizzazione. In quali casi mostriamo l’intestazione (e il nuovo header)? Possiamo scegliere: tutte le pagine, solo le pagine speciali, tutti gli articoli, tutti gli archivi ecc. Possiamo anche aggiungere delle regole di esclusione: per esempio, tutte le pagine tranne la home page. Infine, possiamo impostare una regola di visualizzazione basata sulla tipologia di utente (amministratore, editor, autore ecc.).

Ti mostro qui un piccolo esempio di intestazione per pagine che ho creato con questo strumento molto molto utile!

Layout personalizzati

Questa opzione è uno dei punti di forza di Astra. Permette di creare header e footer customizzati, pagine 404 o di aggiungere snippet di codice in punti strategici del sito.

Una volta attivata l’opzione si crea la voce “Layout personalizzati” subito sotto “Opzioni Astra” (in “Aspetto”).

Nella schermata che si apre, in basso, è possibile selezionare una tra quattro opzioni:

• Header
• Footer
• Pagina 404
• Hooks

Se selezioni “Header”, puoi realizzare il nuovo header del sito tramite il builder del tema (Gutenberg, Elemento, Beaver e Brizy) oppure in html. Puoi scegliere se l’header debba essere fisso o meno, in quale tipo di contenuto visualizzarlo (tutto il sito o specifiche sezioni) e per quale tipologia di user.

Stesso discorso per il footer.

Se selezioni “Pagina 404”, puoi creare la pagina da mostrare quando una risorsa non è disponibile. Inoltre, puoi disabilitare l’header primario o il footer, per rendere la pagina la più semplice possibile.

La sezione “Ganci” è molto interessante. Puoi inserire qui snippet di codice da mostrare in punti specifici del sito. Quali sono? Questi.

Hai a disposizione una serie di opzioni:

• Priorità: se sono attivi più elementi per una determinata azione, la priorità decide quale elemento viene eseguito per primo. Più basso è il numero, maggiore è la priorità.
• Spaziatura: aggiunge spazio superiore e inferiore
• Visualizza: dove visualizzare il contenuto in questione
• Ruoli utente: quale tipologia di utente può vedere il contenuto in questione

Layout sito

Questa opzione ti permette di scegliere il layout da applicare al wrapper esterno del sito. Hai quattro possibilità:

• Larghezza piena
• Larghezza max
• Imbottito
• Fluido

Puoi selezionare uno di questi layout in Aspetto > Personalizza > Globale > Contenitore.

Widget del footer

Questa è un’opzione che estende la personalizzazione del footer del sito. Attivandola, troverai nella sezione Aspetto > Personalizza > Footer > Footer widgets una serie di possibilità:

• 7 layout diversi per il footer
• Possibilità di definire la larghezza, la spaziatura, la dimensione e il colore del bordo superiore
• Modificare i colori di background e del contenuto
• Modificare il font e le sue caratteristiche

Torna su

Permette di attivare il pulsante “scroll to top”, ovvero quel pulsantino che, tipicamente posizionato in basso a destra, permette, se cliccato, di risalire all’inizio della pagina.

Una volta attivata l’opzione, nella sezione Aspetto > Personalizza > Globale > Torna su, potrai:

• attivare il pulsante solo su desktop, solo su mobile o su entrambi i dispositivi
• definire la posizione (destra o sinistra)
• definire la dimensione dell’icona
• definire il raggio del bordo
• personalizzare il colore dell’icona

WooCommerce

Arriviamo alle opzioni che hanno bisogno di un plugin esterno per essere attivate. Questa, in particolare, è una funzione che assicura l’integrazione tra Astra e WooCommerce, il più popolare plugin di WordPress per la creazione e gestione degli shop online.

Attivando l’opzione, nella sezione “Aspetto” comparirà la voce WooCommerce. Tra le sezioni su cui potrai agire ti segnalo:

• Generale
• Catalogo prodotti
• Singolo prodotto
• Pagamento

Vediamole una per una.

Generale

• Notifica vendita: quando aggiungi un prodotto scontato nello shop, automaticamente il prodotto sarà contrassegnato dal bollino “In offerta”. Se vuoi modificare questo contenuto, seleziona “Stringa personalizzata”. Potrai, ad esempio, impostare il valore dello sconto (es. -15%), oppure inserire un altro testo (es. “Sconto!”). Puoi anche disattivare il bollino.
• Stile nuvola vendita: ti permette di modificare l’aspetto del bollino che segnala lo sconto. Puoi scegliere tra: cerchio, contorno a cerchio, quadrato, contorno quadrato.
• Icona del carrello nell’intestazione: sono disponibili quattro diversi tipi di icone tra cui per il carrello: Default, Carrello, Borsa, Cestino. E’ possibile anche modificare lo stile (Contorno, Riempi, Nulla). Puoi inoltre scegliere se mostrare il totale del carrello e il titolo del carrello.
• Colore valutazione Prodotto: se sono attive le recensioni per i tuoi prodotti, con questa impostazione puoi modificare il colore delle stellette.

Catalogo prodotti

Le opzioni a disposizione (tantissime!) permettono di intervenire sulla pagina “Shop” (o “Negozio” o comunque tu l’abbia chiamata). Vediamo quelle principali.

Anzitutto, il layout. Puoi scegliere tra una vista a griglia e una vista ad elenco, selezionando il numero di colonne.

Puoi definire il numero di prodotti da caricare nella pagina e gli elementi da visualizzare. Ovvero:

• Categoria
• Titolo
• Valutazioni
• Prezzo
• Aggiungi al carrello
• Breve descrizione

Puoi selezionare o deselezionare ciascun campo cliccando sull’iconcina dell’occhio.

Puoi scegliere inoltre l’allineamento del contenuto (destra, sinistra, centro) e l’eventuale effetto ombra sotto il box del prodotto, anche in hover.

Poi c’è la paginazione. Nel caso tu abbia scelto di non mostrare tutti i prodotti in una sola pagina, puoi attivare la paginazione, personalizzando anche l’aspetto grafico. In alternativa, puoi optare per lo scorrimento infinito.

Le opzioni non sono finite qui: scoprile tu stesso e realizza il tuo perfetto catalogo dei prodotti con Astra e WooCommerce!

Singolo prodotto

Si tratta di customizzare la pagina del singolo prodotto, a cominciare dal layout della galleria di immagini: puoi scegliere l’orientamento orizzontale o verticale.

Puoi inoltre scegliere quali informazioni mostrare:

• Titolo
• Valutazioni
• Prezzo
• Breve descrizione
• Aggiungi al carrello
• Meta

Il meccanismo di attivazione e disattivazione è identico a quello visto nel paragrafo precedente.

Puoi scegliere se attivare o disattivare il breadcrumb, lo zoom sull’immagine, se mostrare o meno le schede prodotto con descrizione e recensioni (ed eventualmente con quale layout), i prodotti correlati e infine personalizzare tutti gli aspetti grafici (colori e tipografia).

Pagamento

Queste opzioni consentono di cambiare l’aspetto della procedura di pagamento di WooCommerce. In particolare potrai:

• modificare la larghezza del modulo cassa (default o personalizzata)
• mostrare o meno il campo “Nome della società”
• mostrare o meno il campo “Indirizzo linea 2”
• scegliere se rendere obbligatorio, opzionale o nascosto il campo “Telefono”
• evidenziare o meno i campi richiesti con un asterisco
• indicare la pagina con la privacy policy e i termini e le condizioni
• scegliere se abilitare o meno la modalità “two step” per la cassa, separando in due pagine i dettagli di fatturazione e il pagamento dell’ordine o inserendoli in un’unica pagina (opzione di default)
• mostrare o meno le note dell’ordine
• mostrare o meno il campo coupon
• nascondere il menu dall’header, per abilitare una versione della pagina senza distrazioni
• usare le etichette dei campi come segnaposto
• fare in modo che il contenuto dei campi di fatturazione sia persistente, di modo che non vada perduto anche in caso di refresh involontario della pagina

Easy Digital Downloads

Easy Digital Downloads è una soluzione di e-commerce completa per la vendita di prodotti digitali su WordPress. L’addon di Astra offre soluzioni per personalizzare lo stile del negozio EDD. Vediamo come!

Una volta installato il plugin e attivato il modulo, vai su Aspetto > Personalizza > Easy Digital Downloads. Le sezioni su cui intervenire sono quattro:

• Generale
• Archivio Prodotto
• Singolo Prodotto
• Pagina Cassa

Le opzioni a disposizione sono molto simili a quelle di WooCommerce (anche se in quantità minore).

LearnDash

LearnDash è un plugin per creare e vendere corsi online. Si tratta di un plugin molto potente, disponibile solo a pagamento. Per avere un’idea delle sue potenzialità, dai un’occhiata al sito ufficiale.

Una volta acquistato e attivato, attivando anche il modulo LMS di Astra potrai modificare queste opzioni:

• Apprendimento senza distrazioni: l’attivazione dell’opzione di apprendimento senza distrazioni rimuove i collegamenti del menu di navigazione dall’intestazione e dal piè di pagina delle pagine dei singoli corsi, argomenti, lezioni e quiz di LearnDash. In questo modo, i contenuti saranno presentati in un formato semplice e pulito.
• Gravatar dello studente nell’intestazione primaria: personalizza l’esperienza dei tuoi studenti che hanno effettuato l’accesso al tuo sito web LearnDash visualizzerà la loro immagine Gravatar pubblica. Puoi collegare questa immagine a qualsiasi URL, come la pagina “Il mio account”.
• Border radius, tipografia e colori della Table of content: puoi scegliere di rendere i bordi più o meno arrotondati, modificare le caratteristiche del font e i colori.

LifterLMS

Come LearnDash, LifterLMS consente di creare una piattaforma di e-learning. Anche in questo caso siamo difronte a un prodotto a pagamento. Maggiori informazioni puoi trovarle sul sito ufficiale.

Attivato il modulo di Astra per LifterLMS avrai a disposizione tantissime funzioni. Oltre alla possibilità di personalizzazione grafica, te ne segnalo altre:

• Colonne membership: LifterLMS ti permette di scegliere vari abbonamenti per i corsi che offri. L’addon di Astra Pro per LifterLMS ti aiuta a gestire le impostazioni di visualizzazione delle membership.
• Distraction free checkout e distraction free learning: come con LearnDash, puoi abilitare una versione “senza distrazioni” delle pagine dei corsi e del checkout. Questo significa niente header, footer, sidebar e qualsiasi altro elemento di distrazione.
• Distinzione tra la visualizzazione per studenti e la visualizzazione per utenti semplici, con la possibilità di personalizzare sezioni differenti

White label

Questo è uno dei moduli più interessanti di Astra, soprattutto se sei uno sviluppatore di siti web. Cos’è la “white label”? E’ la capacità di rinominare e presentare un prodotto o un plugin come tuo. Questa opzione ti aiuta a nascondere l’effettiva identità del tema e dei plugin utilizzati e ti consente invece di utilizzare il tuo marchio.

Detto altrimenti: tramite questa opzione di Astra puoi cambiare quasi ogni campo per dimostrare che il prodotto è tuo e tu sei l’intero e unico sviluppatore che ha lavorato su un sito web!

Attivato il modulo, potrai inserire i dati della tua agenzia, modificare il nome, la descrizione e lo screenshot del tema, modificare il nome del plugin Astra Pro e la descrizione del plugin. Stesso discorso per il plugin dei temi preimpostati.

Inoltre, selezionando l’opzione “Abilita etichetta bianca”, le informazioni di default di Astra verranno sovrascritte e il modulo non sarà più disponibile nella sezione opzioni. Per modificare di nuovo questi campi dovrai disattivare e riattivare il plugin Astra Pro.

Il white label è attivo anche per i seguenti plugin/moduli:

• Astra Hooks
• Custom Fonts
• Custom Typekit Fonts
• Lightweight Sidebar Manager

Importante: il white label non modifica il codice. Perciò, analizzando il sorgente del sito i riferimenti ad Astra rimarranno. Se questo per te è un problema, leggi qui.

Estendi Astra con i plugin gratuiti

Sempre nella sezione “Opzioni Astra” hai la possibilità di attivare una serie di plugin gratuiti. Vediamoli brevemente:

• Impostazioni Importazione/Esportazione Personalizza: permette di esportare o importare le personalizzazioni fatte sul tuo tema Astra, in modo da poter creare più velocemente i tuoi siti web;
• Ripristina Personalizza Astra: permette di resettare tutte le impostazioni di Astra e tornare a quelle di default con un solo click;
• Personalizza Ricerca: è un plugin che attiva un campo di ricerca nella sezione “Personalizza”, per permetterti di trovare più rapidamente le opzioni che cerchi;
• Modifica in blocco di Astra: è utile per modificare certe impostazioni di Astra su più pagine / post contemporaneamente. Per esempio: abilitare o disabilitare il titolo della pagine o modificare il layout. In questo modo, eviti di aprire ogni pagina / post per modificarla;
• Widget di Astra: aggiunge nella sezione “Widget” tre widget molto utili: Astra Address, Astra List Icons e Astra Social Profiles, perfetti da usare nel footer.
• Font personalizzati: questo plugin ti aiuta a incorporare facilmente file di font (woff2, woff, ttf, svg, eot, otf);
• Font Typekit personalizzati: permette di embeddare facilmente nel tuo sito WordPress font Adobe;
• Gestione barra laterale: crea tutte le sidebar che vuoi e associale alle pagine / post in cui vuoi mostrarle;
• Ultimate Addons for Gutenberg: forse il plugin più utile del lotto. Estende le potenzialità di Gutenberg aggiungendo tutta una serie di blocchi avanzati. Quali? Scoprili sul sito ufficiale!

Un’opzione avanzata: CSS File Generation

Astra è notoriamente uno dei temi più veloci di WordPress. Tuttavia, è possibile migliorare ulteriormente le performance di base attivando l’opzione “CSS File Generator”, presente sempre nella sezione “Opzioni Astra”.

Fino all’aggiornamento 2.0, ogni volta che si apportavano modifiche al sito web utilizzando il customizer di Astra, il tema generava un CSS inline, ovvero inseriva le regole di stile direttamente nell’html tramite il tag <style>. Lo stile veniva caricato in ogni pagina del sito web, rendendo però l’HTML più voluminoso e “sporco”.

A partire dalla versione 2.1 di Astra, il CSS delle personalizzazioni non è più inserito nel codice sorgente ma come file separato. Il file CSS verrà generato per ciascuna delle pagine e caricato insieme alla pagina. Quindi, invece di generare ogni volta CSS dinamici inline, un file separato servirà il CSS richiesto dall’addon. Questo permette di velocizzare il caricamento della pagina, giacché il file in questione è facilmente memorizzabile nella cache del browser.

Beta Updates

Ultimissima opzione: nella sezione “Opzioni Astra” puoi abilitare la ricezione di notifiche in merito al rilascio delle versioni beta del tema. Significa che potrai testare in anteprima le novità del tuo tema preferito.

Attenzione però: Brainstorm Force specifica che per quanto le versioni beta siano le più stabili possibile (vengono rilasciate solo dopo un test interno), possono comunque presentare bug o malfunzionamenti o incompatibilità con i plugin installati. Il consiglio, pertanto, è quello di utilizzare le versioni beta solo in ambiente di staging o siti di prova. In alternativa, ricordati di fare un backup di sito e database!

Wp Portfolio

Vuoi un plugin semplice e flessibile per realizzare il tuo portfolio? Il pacchetto Pro di Astra ti mette a disposizione gratuitamente Wp Portfolio, uno dei migliori plugin nel suo genere.

Con Wp Portfolio puoi creare un portfolio con immagini, siti web, video e pagine, e incorporarlo semplicemente con uno shortcode.

Come funziona? Una volta scaricato e installato il plugin, comparirà nella barra laterale del tuo pannello di controllo la voce Wp Portfolio. Vediamo per prima le impostazioni (“Settings”).

Nella prima tab, “General”, hai accesso alle impostazioni di base. Puoi scegliere il builder con cui costruisci le pagine, puoi importare i template prestrutturati come portfolio (utile se hai una web agency e vuoi costruire un portfolio per i tuoi clienti), hai a disposizione lo shortcode da usare nel punto del sito in cui vuoi mostrare il portfolio. Infine, una serie di opzioni: puoi abilitare il filtro delle categorie, mostrare il box di ricerca e rendere responsive i pulsanti.

La seconda tab, “Style”, contiene alcune impostazioni di stile. Puoi scegliere anzitutto l’azione che permetterà ai tuoi utenti di vedere tutti i lavori del portfolio (scroll o click); puoi impostare l’effetto di hover sull’anteprima del lavoro (“default” corrisponde a una semplice ombreggiatura, “scroll” significa che verrà mostrata, con uno scorrimento, l’immagine nella sua interezza). Puoi scegliere se visualizzare la preview bar in alto o in basso e inserire una call to action da mostrare in fondo al portfolio. Soprattutto, potrai definire il layout del tuo portfolio, impostando il numero di colonne, di elementi per pagina e selezionando o meno la versione “Masonry” del portfolio.

La tab “Advaced” ti permette di modificare gli slug del singolo elemento del portfolio, delle categorie, dei tag.

Una volta definite le impostazioni di base, puoi lavorare su categorie, “altre categorie” e tag. La differenza tra categorie e “altre categorie” (“Other categories”) posso spiegartela così: se crei un portfolio con i siti web di Astra, puoi stabilire come categorie le aree “Sito aziendale”, “E-commerce” ecc., e come “Other categories” il builder adoperato (Gutenberg, Beaver ecc.).

Le tipologie di contenuto che puoi aggiungere nel portfolio sono di quattro tipi:

• Siti internet (“Website”)
• Immagini (“Image”)
• Video (“Video”)
• Pagine singole (“Single page”)

Selezionando “Websites”, potrai creare un portfolio di siti internet. Potrai aggiungere la thumbnail, lo url, scegliere se aprire il link in un’altra pagina e aggiungere una call-to-action.

Selezionando “Image”, potrai aggiungere un’immagine di anteprima e un’immagine di portfolio (più grande).

Selezionando “Video”, potrai aggiungere un’immagine di anteprima e il link del video.

Infine, selezionando “Single page” potrai creare una pagina vera e propria, adoperando anche il builder prescelto. In più, potrai scegliere l’immagine di anteprima.

I plugin della versione Agency: Schema Pro e Convert Pro

Il pacchetto Agency ti offre due utilissimi plugin: Schema Pro e Convert Pro.

Il primo è utile ad implementare nel sito il markup Schema. Il secondo permette di creare pop-up e avvisi utilissimi per il marketing. Vediamoli brevemente!

(N.b: i due plugin possono essere acquistati separatamente dai pacchetti Astra tramite i loro siti ufficiali!)

Schema Pro

Il markup Schema, scrive il blog di Ahrefs, “è un tipo di codice che aiuta i motori di ricerca a comprendere meglio i tuoi contenuti e rappresentarli nel modo giusto all’interno dei risultati di ricerca.”

In pratica, il markup Schema svolge una funzione di disambiguazione. Inoltre, il markup Schema è alla base dei rich snippet, ovvero modalità “arricchite” di visualizzazione dei risultati sui motori di ricerca (per esempio, le stelline delle recensioni, i prezzi di un prodotto, o gli argomenti delle FAQ mostrati in anteprima). Questo genere di risultati spesso gode di CTR (Click Through Rate, la percentuale di click ottenuta) più elevati rispetto al normale.

I plugin che gestiscono Schema sono tantissimi, ma quello che preferisco rimane Schema Pro, sviluppato da Brainstorm Force e integrato alla perfezione con Astra (è anche per questo che è il miglior tema WordPress!).

Anche qui, una volta scaricato, installato e attivato il plugin (ricordati sempre di attivare la licenza per ricevere gli aggiornamenti!), puoi iniziare a configurare le impostazioni di base su Impostazioni > Schema Pro, selezionando la tab “Website information”.

Qui puoi inserire le informazioni di base sul tuo sito: logo, tipologia di attività, profili social, informazioni di contatto ecc.

Nella tab “Breadcrumb” puoi scegliere se attivare o meno il breadcrumb, se adoperare quello nativo di Astra o quello di Yoast, e se aggiungere livelli intermedi nel caso del portfolio, degli articoli, dei prodotti o di qualsiasi altra tipologia di contenuto “speciale” tu abbia aggiunto tramite plugin.

Con la tab “Plugin setting” potrai gestire le opzioni avanzate del plugin. Potrai abilitare il nella topbar di WordPress il link al servizio di Google che testa i dati strutturati, in modo da poter velocemente verificare il lavoro svolto. Decidere la collocazione della voce di menu “Schema Pro” nel tuo pannello di controllo (di default, come ho detto, è in “Impostazioni”). Scegliere in quale parte del sito aggiungere il codice di Schema Pro (ti consiglio di lasciare invariato “Header”), impostare un’immagine di default da adoperare nel caso in cui l’immagine in evidenza non sia disponibile. Inoltre, potrai scegliere di non renderizzare lo schema di un post o una pagina qualora manchino dei campi obbligatori (il che potrebbe produrre un errore); infine, fare in modo che con la cancellazione del plugin vengano rimossi anche tutti i dati.

Anche Schema Pro ha l’opzione “White Label”, perfetta se sei uno sviluppatore di siti web!

Ma veniamo al dunque, creiamo i nostri “schemi”! Possiamo farlo dalla prima tab, “Schemas”. Gli schemi disponibili sono:

• Article
• Book
• Course
• Event
• Job Posting
• Local Business
• Review
• Person
• Product
• Recipe
• Service
• Software Application
• Video Object
• FAQ
• How-to

Per avere dettagli sui vari tipi, ti consiglio di dare un’occhiata al sito ufficiale di Schema.

Il passaggio successivo (“Set Target Pages”) consente di impostare dove mostrare lo schema, in quali pagine inserirlo e in quali non inserirlo. Supponiamo tu abbia selezionato il tipo di schema forse più comune, “Local business”. E’ buona norma (come ha spiegato anche John Mueller di Google) adoperarlo solo in una pagina e non in tutto il sito. La collocazione più logica è la home page, perché si suppone sia la pagina più importante del sito, ma anche la pagina dei contatti può andar bene (in ogni caso, voglio specificarlo, non si ottengono penalizzazioni se per errore si attiva lo schema su tutto il sito).

A questo punto, siamo pronti per compilare tutti i campi dello schema prescelto. Ecco la schermata:

I campi contrassegnati con l’asterisco sono obbligatori, è opportuno che tu non ne salti nessuno altrimenti potresti incappare in errori gravi.

Un campo può essere riempito automaticamente (con informazioni che il plugin ricava dal sito, dalla pagina, dall’articolo o dalla tipologia di post su cui stai lavorando), oppure puoi riempirlo tu con un valore fisso (“Fixed options”).

Per qualsiasi dubbio, ti consiglio vivamente di controllare il sito ufficiale di Schema o, in alternativa, la guida di Astra.

Convert PRO

Convert PRO è un plugin utilissimo per le tue campagne di lead generation. Puoi creare popup, info bar, widget box, opt-in form, insomma tutto quello che può servirti per acquisire contatti.

Per farlo, avrai a disposizione un editor “drag & drop”, dunque non avrai bisogno di lavorare direttamente sul codice. Potrai partire da un modello vuoto oppure da layout preimpostati. Convert PRO è inoltre responsive e molto veloce, qualità che impediranno ai popup e agli altri elementi di incidere negativamente sulle performance.

La sezione “Settings” contiene alcune impostazioni di base. Oltre alla possibilità di attivare la licenza per ricevere gli aggiornamenti e il supporto, puoi gestire le notifiche email, il recaptcha di Google, il servizio di geolocalizzazione MaxMind. Nelle impostazioni avanzate (“Advanced”) puoi gestire l’antispam, il record MX di validazione per le mail, attivare gli aggiornamenti beta e svuotare la cache del plugin. Come sempre, nella sezione “Brading” è disponibile l’opzione per il white label.

Cliccando su “Create new” potrai scegliere quale tipo di call to action creare.

Potrai scegliere tra:

• Modal popup: il popup classico
  Info bar: una barra informativa nella parte alta o bassa del sito
  Slide in: un popup o un form opt-in che compare con un effetto di slide dai lati dello schermo
  Before/After: un banner o un form opt-in che può essere inserito prima o dopo gli articoli del blog
  In Content Form: come il punto precedente, solo che il form può essere inserito a metà del contenuto
  Widget box: in questo caso, il banner o il form possono essere inseriti in una sidebar
  Convert mat: è una specie di “benvenuto” all’interno di una pagina
  Full screen popup: un popup che occupa tutto lo schermo

Selezionando ciascuna di queste avrai accesso ai template prestrutturati, oppure potrai partire da zero con un blank template.

Facciamo un esempio con il blank template, il template vuoto.

L’editor, come puoi notare nella schermata sottostante, è basato sulla logica “drag & drop”, sfrutta una serie di blocchi (elementi, form, pulsanti, forme ecc.) che puoi personalizzare a tuo piacimento.

Nella parte alta, sulla topbar, cliccando sulla rotellina potrai abilitare la creazione di una call to action multistep, organizzata cioè su più passaggi, e inoltre scegliere se lavorare sulla versione desktop della cta oppure su quella per mobile.

Il flusso di lavoro è organizzato in tre step: “Design”, “Configure”, “Connect”. Nella sezione “Configure” puoi definire i “ruleset”, ovvero i set di regole che definiscono quando e dove mostrare la call to action. Le opzioni sono tantissime, a dimostrazione della grande personalizzabilità del plugin.

“Connect”, invece, ti permette di collegare Convert PRO con servizi esterni, a patto che tu abbia installato il plugin Convert PRO Addon, disponibile sempre con Astra Agency. L’addon (gestibile sempre tramite il menu “Settings”) ti permette anche di attivare una griglia nella sezione design, di collegare Convert PRO ad Analytics per esaminare le performance delle tue cta, di effettuare A/B test, di inserire script di codice avanzato e di importare/esportare le opzioni.

I servizi esterni collegabili sono tantissimi: Mailchimp, Hubspot, Zapier sono solo i più famosi!

Una volta terminata la configurazione della tua cta, puoi attivarla cliccando su “Make public”.

Bene, siamo ai saluti. Spero che questa guida al miglior tema WordPress ti sia stata utile. Se hai critiche, domande, curiosità, lascia un commento!