GreenShift: guida al builder per WordPress

A differenza della maggior parte degli altri plugin simili, GreenShift integra Gutenberg anziché cercare di sostituirlo. Questo significa che non dovrai abbandonare l’editor nativo di WordPress e abituarti a un’interfaccia completamente diversa.

In questa guida vedremo per quali motivi dovresti prendere in considerazione GreenShift come builder per WordPress e perché è diverso da Elementor e strumenti simili. In più ti aiuteremo a configurarlo e a costruire la tua prima pagina.

È vero che GreenShift offre i vantaggi dei builder senza gli svantaggi?

Scopriamolo insieme.

Cos’è GreenShift e a cosa serve

GreenShift è un plugin WordPress e un page builder che non si propone come alternativa a Gutenberg, ma nasce per espandere le funzionalità dell’editor nativo del CMS. Uno dei motivi della sua popolarità è proprio la perfetta integrazione in Gutenberg. 

Al pari di altri builder come Kadence Blocks, GreenShift affianca i suoi blocchi a quelli di Gutenberg. Non c’è il rischio di confonderli perché, rispetto a quelli nativi, gli elementi del plugin offrono impostazioni molto più estese, da cui puoi gestire funzionalità avanzate per la struttura della pagina e i suoi componenti.

Con GreenShift puoi ottenere un livello di personalizzazione grafica molto più alto rispetto a quello raggiungibile con i semplici blocchi Gutenberg anche senza scrivere codice. Ma se pensi sia arrivato il momento di imparare il CSS e l’HTML, abbiamo le guide pratiche che stavi cercando. 

Se hai già queste competenze, invece, GreenShift potrebbe comunque esserti d’aiuto, perché permette di costruire le pagine più in fretta grazie ai modelli e agli elementi preimpostati e di sfruttare la comodità dell’editor visuale di WordPress.

In più col builder avrai a disposizione strumenti per personalizzare il layout e aggiungere animazioni ed elementi di stile senza causare cali nelle prestazioni del sito.

GreenShift non funziona con l’editor classico di WordPress, ma abbiamo scritto una guida per aiutarti a passare da classic editor a Gutenberg.

Differenza tra GreenShift, Elementor e altri builder

Quando si parla di builder è facile considerarli tutti uguali, ma bisogna tenere a mente una prima grande differenza: ci sono i page builder, che permettono di modificare il layout delle singole pagine, e i site builder, con cui si può creare il layout del sito. Per esempio Elementor Pro, Divi, Bricks e Oxygen sono site builder, mentre Elementor Free, Breakdance e WPBakery sono page builder proprio come GreenShift.

Dei builder si parla spesso male, soprattutto tra gli sviluppatori. Elementor è spesso accusato di appesantire il codice, e a volte anche di costringere all’installazione di intere estensioni per aggiungere un dettaglio a una pagina. 

GreenShift, invece, è apprezzato anche dai web designer perché offre una serie di blocchi pensati proprio per chi usa abitualmente il CSS e scrive un codice pulito, senza aggiungere div inutili.

Forse sei qui proprio perché hai sentito parlare della leggerezza di questo plugin. Se tieni ad avere un sito sempre veloce, assicurati per prima cosa di fare affidamento su un ottimo hosting WordPress.

Un builder progettato per essere responsive

Uno degli aspetti più amati di GreenShift è la sua capacità di costruire layout super adattabili ai dispositivi degli utenti, per offrire la migliore esperienza utente in WordPress.

Per iniziare, come nella maggior parte dei builder, in GreenShift puoi gestire le opzioni tipografiche dei blocchi in modo responsive, cioè in base alla risoluzione del dispositivo. Per tutte le caratteristiche che hanno a che fare con la dimensione e la spaziatura degli elementi puoi impostare valori diversi per la visualizzazione su:

• computer (opzione predefinita)
• tablet
• smartphone orizzontale (landscape)
• smartphone verticale (portrait).

Per passare da una modalità all’altra ti basta cliccare sulle icone che le rappresentano.

Come vedremo tra poco, puoi definire dei breakpoint personalizzati nelle impostazioni generali del plugin.

Se usi il CSS, con GreenShift hai anche la possibilità di nascondere blocchi specifici in base al dispositivo. C’è un’apposita sezione Advanced > Responsive and custom CSS nelle impostazioni dell’elemento.

In generale nel plugin le impostazioni sono ereditarie, il che significa che se imposti un valore per le dimensioni per un dispositivo tutti i dispositivi con schermo più piccolo lo adotteranno in automatico, a meno che non ne specifichi uno diverso. 

Come installare GreenShift

La versione gratuita di GreenShift non può essere installata senza uscire dal sito come avviene con la maggioranza dei plugin WordPress. Il modo più semplice per farlo è scaricare il file .zip dalla pagina dedicata su WordPress.org, con clic sul tasto Download.

Dopodiché puoi tornare sul tuo sito e andare in Plugin > Aggiungi plugin e usare il pulsante Carica plugin, poi selezionare la cartella di GreenShift e dare l’OK.

Clicca poi sul pulsante Attiva plugin.

A questo punto nella barra laterale di WordPress sarà comparsa la voce GreenShift con tutto il menù delle sue impostazioni.

Come configurare GreenShift

Nella schermata di benvenuto del plugin puoi scegliere varie impostazioni relative allo stile che verrà applicato globalmente, cioè su tutto il sito, e le funzionalità che vuoi avere a disposizione nell’editor di articoli e pagine.

Scegliere quali blocchi visualizzare in Gutenberg

Spostandoti in GreenShift > GreenShift, accedi alla schermata in cui puoi scegliere quali blocchi del plugin vedere su Gutenberg. Ci sono 4 opzioni:

1. Beginner Blocks – mostra solo i blocchi per principianti, cioè i blocchi GreenShift;
2. Professional Blocks – mostra solo gli elementi per esperti, cioè i blocchi GreenLight;
3. Both, Professional first – visualizza entrambi i tipi di blocchi ma prima quelli per esperti;
4. Both, Beginner first – visualizza entrambi i tipi di blocchi ma prima quelli per principianti.

Se non hai familiarità con il codice, ti consiglio di scegliere l’opzione Beginner Blocks oppure Both, Beginner first.

La schermata di benvenuto del plugin contiene anche i link per accedere alla documentazione di supporto, a cui puoi accedere facendo clic sul link Learning Center. Qui trovi tutte le informazioni che ti servono per iniziare a usare il plugin in modo più efficace e quelle per accedere alle funzionalità più avanzate.

Scegliere le impostazioni generali

Le impostazioni generali di GreenShift si trovano nel percorso GreenShift > Settings e sono divise in 3 sezioni:

• Stylebook
• Global Settings
• Block Manager.

Stylebook

Stylebook è la sezione di GreenShift che permette di gestire le impostazioni globali di design, come colori, font, spaziature e stili dei componenti. Da qui puoi definire l’identità visiva del sito.

Qui, per esempio, è possibile definire le impostazioni tipografiche dei titoli e del corpo del testo, compresa la dimensione, il peso e il colore del carattere.

Altre tab ti permettono di:

• creare la palette di colori del sito
• inserire CSS
• definire l’identità visiva caricando logo e icona del sito e inserendo titolo e descrizione del sito.

Global Settings

Nella sezione Settings > Global Settings di GreenShift ci sono alcune impostazioni che possono essere applicate a livello globale, organizzate su 7 tab.

In Fonts si possono definire famiglie di caratteri e attivare l’opzione Font Preloaded, per pre-caricare il font all’avvio della pagina. GreenShift ti permette di caricare i font dal tuo server anziché da servizi esterni come Google Fonts e ti aiuta a essere conforme al GDPR.

Breakpoints definisce le soglie di larghezza dello schermo che determinano quando il layout del sito deve adattarsi a un diverso dispositivo. Sono già inseriti valori di default per i dispositivi più comuni, ma puoi modificarli.

In CSS Options puoi personalizzare alcune impostazioni relative ai fogli di stile come la posizione del CSS di GreenShift nel codice della pagina. Una caratteristica molto apprezzata dai web designer è la possibilità di attivare il rilevamento della modalità scura (dark mode) e adattare di conseguenza i colori sul sito. 

Script Options permette di attivare una funzionalità sperimentale per rimandare l’esecuzione del codice JavaScript del plugin.

In Header/Footer code puoi aggiungere codice personalizzato che vuoi inserire nella sezione Head del tuo HTML, per esempio script degli strumenti di analytics. 

Interface permette di attivare alcune opzioni relative alla visualizzazione dell’interfaccia.

API Keys & AI è la sezione dedicata alle integrazioni con piattaforme esterne, come Google, Cloudflare, OpenAI.

Block Manager

Nella sezione Block Manager puoi decidere quali modifiche al layout sono accessibili ai diversi ruoli utente in Gutenberg. Infatti è possibile mostrare ai ruoli ‘non editor’ un pannello semplificato, che non permette di modificare o spostare i blocchi.

L’interfaccia dell’editor con GreenShift

Dopo l’attivazione di GreenShift l’interfaccia di Gutenberg mantiene la stessa struttura, con i due pannelli laterali e l’area di lavoro centrale, ma compaiono molte più funzionalità. Per iniziare, sulla barra laterale sinistra ora hai diverse decine di nuovi blocchi, che precedono i blocchi classici di Gutenberg.

In più nella barra dei comandi orizzontale trovi delle icone che ti permettono di accedere alle impostazioni generali di GreenShift senza uscire dall’editor. 

Cliccando sulla “G” puoi accedere alle diverse sezioni dello Stylebook direttamente nel pannello laterale destro di Gutenberg. 

L’icona a forma di database invece corrisponde a GreenShift Helpers, la libreria dei template di layout e sezioni del page builder.

Panoramica dei blocchi del builder

I blocchi inseriti da GreenShift appartengono a 2 tipi principali: quelli propri di GreenShift (in blu) e quelli di GreenLight (in verde). A seconda della configurazione che hai scelto, vedrai prima i blocchi per principianti o quelli per esperti.

All’interno dei blocchi GreenShift trovi per primi i blocchi di layout (Layout Blocks), cioè i contenitori che servono a definire la struttura della pagina: sezioni, colonne, griglie, box.

Poi ci sono i blocchi per il contenuto avanzati (GreenShift Content Blocks) che servono a creare heading, pulsanti, video, testi da cui partono popup, testi e forme SVG, ecc. 

Invece i GreenShift Extra Blocks servono a inserire elementi aggiuntivi che possono arricchire la pagina come contatori, mappe, indici degli articoli, caroselli, pulsanti di condivisione. Il fatto di poterli inserire dal builder può evitarti di installare dei plugin specifici e aiutarti a mantenere il sito veloce e ordinato.

I blocchi GreenLight sono organizzati allo stesso modo: elementi di layout, di contenuto, elementi extra e una sezione aggiuntiva dedicata agli elementi tag.

Differenza tra blocchi di GreenShift e blocchi GreenLight

Come hai visto, questo builder per WordPress offre due tipi di blocchi, che possono essere combinati per costruire una pagina. Ma qual è la differenza?

I blocchi GreenShift sono pensati per essere intuitivi da usare anche per chi non conosce il codice, quindi sono molto visivi. 

In questo caso le opzioni del blocco sono divise in 2 tab: General e Advanced.

Le impostazioni generali permettono di definire in modo molto dettagliato aspetti come:

• tipografia 
• sfondo
• spaziatura
• bordo
• ombreggiatura
• dimensione
• testo contenuto
• inserimento di un sottotitolo.

Le impostazioni avanzate sono dedicate all’animazione del blocco. Alcune sono gratuite, altre possono essere attivate solo con l’acquisto di un’estensione a pagamento: Animation Addon.

I blocchi GreenLight offrono un controllo totale sul codice e la massima flessibilità nella personalizzazione, usano nomenclature CSS standard e sono perfetti per chi ha già competenze tecniche. 

Contengono due sezioni principali: una generale relativa al contenuto e al tag HTML e poi un menù.

Qui trovi funzionalità come:

• Local Styles, caratteristiche tipografiche e di stile che si possono applicare al singolo blocco;
• Interaction layer, che permette di aggiungere un livello che gestisce i comportamenti dinamici degli elementi della pagina;
• Animation, con le funzionalità per rendere il blocco dinamico;
• Extra options & Effects, che permette di aggiungere variabili CSS dinamiche, effetti legati allo spostamento del mouse, didascalie dinamiche (tooltip) 

Un’altra differenza tra i due tipi di blocchi riguarda il tag. I blocchi di GreenLight permettono di cambiarlo dopo l’inserimento e passare a un altro tipo di blocco, come quelli di Gutenberg. Invece i blocchi di GreenShift permettono variazioni più ristrette, per esempio di passare da un tipo di heading a un altro ma non da un titolo a un contenuto multimediale.

Come creare una pagina con GreenShift

Come ormai avrai capito, per creare una pagina o un articolo con GreenShift non devi far altro che avviare l’editor a blocchi di WordPress nel solito modo.

A seconda delle opzioni che hai scelto, visualizzerai prima i blocchi GreenShift o i blocchi GreenLight.

Il plugin sfrutta l’editor drag and drop di Gutenberg, quindi per aggiungere i suoi blocchi alla pagina non devi far altro che trascinarli e rilasciarli nell’area centrale dell’editor.

Per costruire una pagina inizierai con l’inserimento di un elemento contenitore, cioè uno dei Layout Blocks. Per esempio io ho inserito Row/Columns Advanced, ho scelto la struttura a due colonne e poi ho inserito nella prima un testo e nella seconda un’immagine.

Una volta che ho inserito un elemento di GreenShift, posso cliccarci sopra per visualizzare le impostazioni nel pannello a destra, come avviene normalmente su Gutenberg ma con più opzioni a disposizione.

Quando aggiungiamo blocchi di testo e heading di GreenShift dobbiamo ricordare che vengono inseriti con un tag div, quindi dovremo cambiarlo in p se vogliamo rispettare le buone pratiche della SEO on-page.  

Un’altra differenza rispetto ai blocchi di testo di Gutenberg consiste nel fatto che in GreenShift premendo Invio non creiamo un nuovo blocco, ma andiamo a capo all’interno dello stesso blocco. Se vuoi creare un nuovo blocco GreenShift, invece, devi trascinare nell’area di lavoro un nuovo elemento di testo oppure aprire il menù del blocco nella barra dei comandi orizzontale e scegliere Aggiungi dopo.

Agli elementi di GreenShift possiamo aggiungere funzionalità specifiche come le animazioni, come ho fatto su questa immagine.

Quando inseriamo un pulsante, invece, apparirà inizialmente come un semplice link, e solo modificando le impostazioni riusciremo a ottenere un bottone vero e proprio.

Nelle impostazioni del pulsante puoi vedere molti dei tipici Preset di GreenShift, cioè gruppi di opzioni predefinite che permettono di trasformare del tutto l’aspetto degli elementi grafici con un solo clic. Spesso contengono anche delle animazioni, come quella nell’immagine sotto.

In questo titolo invece è presente uno dei tanti elementi grafici extra disponibili nelle impostazioni del blocco, la linea tratteggiata.

Uno dei punti a favore di questo builder è il fatto che, quando modifichiamo le impostazioni predefinite di un blocco, in quella sezione compare un pallino blu che resta lì come promemoria, come quello che vedi nell’immagine sopra accanto a Extra Heading Element.

Altre funzionalità di GreenShift

I preset e gli stili globali non sono le uniche funzionalità di GreenShift che possono farti risparmiare tempo. Vediamo come funzionano i template: quelli già pronti e quelli che puoi creare a partire dalle tue preferenze.

Template già pronti (GreenShift Helpers)

GreenShift offre anche molti template, tra cui alcuni gratuiti, che puoi importare nella pagina e adattare al tuo progetto in pochi clic. La libreria del plugin si chiama GreenShift Helpers e puoi aprirla dall’editor nativo di WordPress cliccando sull’icona a forma di database e poi sul pulsante Templates.

In questa sezione del plugin trovi modelli già pronti per diversi tipi di elementi.

In Layout ci sono intere pagine già pronte, ma solo 3 sono comprese nel piano gratuito.

In Sections puoi aggiungere alla pagina sezioni preimpostate come hero con pulsanti, slider o icone, oppure blocchi di recensioni, di prodotti suggeriti o CTA.

Wireframes, invece, ospita strutture di pagina senza contenuto, pronte per essere riempite con i tuoi testi e immagini.

Template FSE (Full Site Editing) contiene modelli che definiscono la struttura di parti specifiche di un sito, come homepage, post singoli, ecc. 

In Fancy Library trovi elementi singoli come card, slider, menù a discesa.

Tieni conto che i template potrebbero contenere anche blocchi per utenti esperti, i blocchi GreenLight di cui abbiamo già parlato.

Template e layout riutilizzabili

Con GreenShift puoi trasformare un blocco con le impostazioni che hai scelto in un elemento replicabile in altre parti del sito.

Per farlo seleziona il blocco, apri il menù con i 3 puntini nella barra orizzontale delle impostazioni e fai clic su Crea pattern.

Dai un nome riconoscibile all’elemento, e se vuoi assegnalo a una categoria.

Con l’opzione Sincronizzato fai sì che, ogni volta che modifichi il pattern su una pagina, i cambiamenti vengano applicati anche agli elementi analoghi presenti in altre pagine.

Ora, se ti sposti in GreenShift > Reusable Templates usando la barra laterale di WordPress, troverai il pattern che hai appena creato e alcuni predefiniti.

Quanto costa GreenShift?

GreenShift offre una versione gratuita, che puoi usare per fare esperimenti e anche per costruire il tuo sito con ottimi risultati se non hai esigenze specifiche. Per chi vuole più funzionalità ci sono i piani a pagamento e le estensioni.

Piani tariffari di GreenShift

I piani tariffari di GreenShift comprendono funzionalità premium e possono dare accesso ai blocchi aggiuntivi inclusi nelle estensioni a pagamento. Puoi scegliere tra 4 abbonamenti diversi.

Design Pack – il piano base, pensato per semplificare la costruzione di layout complessi, a 39,99$ l’anno.

Woo Pack – proposto come la soluzione ideale per l’e-commerce, a partire da 49,99$.

GreenLight PRO – pensato per freelance e web agency, a partire da $51,99.

All in One Pack – Tutto quello di cui hai bisogno in un’unica soluzione, a partire da $59,99.

Tutti i piani sono limitati a 5 siti ma prevedono una versione illimitata a un prezzo superiore.

Ogni piano è disponibile in una versione lifetime molto conveniente a circa il quadruplo del prezzo annuale base.

Estensioni a pagamento

GreenShift offre anche 5 addon, che comprendono sia funzionalità che blocchi aggiuntivi adatti a diverse esigenze, e possono essere acquistati singolarmente oppure come parte dei piani in abbonamento.

• Animation raccoglie blocchi e opzioni avanzate per creare animazioni moderne, ed è compresa anche nel piano Design Pack.
• Query contiene blocchi che servono ad aggiungere contenuti dinamici, come griglie di articoli, valori personalizzati e funzioni interattive come like e liste dei desideri. È compresa anche nel piano Design Pack.
• SEO and Marketing dà accesso a blocchi speciali pensati per il posizionamento sui motori di ricerca e la monetizzazione del sito, ed è inclusa anche nel SEO Pack.
• WooCommerce comprende blocchi avanzati per i template dei prodotti e funzionalità per il tuo negozio online su WordPress.
• AI generation ti aiuta a integrare sul tuo sito funzionalità basate sull’intelligenza artificiale.

Se ti stai chiedendo quali blocchi aggiunga al tuo builder ciascuna estensione, in questa pagina trovi un elenco dettagliato ufficiale.

Conclusioni

In questa guida a GreenShift abbiamo visto come questo plugin si distingua tra i page builder perché espande le funzionalità di Gutenberg e non rallenta il sito.

Grazie ai blocchi GreenShift puoi costruire layout complessi, aggiungere animazioni ed elementi avanzati anche senza scrivere codice. Mentre a chi sa usare il CSS i blocchi GreenLight uniscono il massimo della flessibilità e del controllo sull’HTML finale alla comodità di lavorare su un editor visivo. In entrambi i casi puoi velocizzare la costruzione delle pagine sfruttando i template già pronti della libreria Helpers, i preset di stile e i pattern riutilizzabili.

GreenShift è quindi un’opzione da valutare se cerchi un builder potente e flessibile che non comprometta la velocità del sito e la qualità del codice, due aspetti che le alternative più popolari spesso sacrificano in nome della semplicità.

Tra i possibili lati negativi del plugin bisogna considerare che è ancora poco usato, l’interfaccia non è stata tradotta in italiano e la documentazione di supporto è solo in inglese, per cui risolvere eventuali problemi potrebbe essere più difficile.

E tu hai già provato GreenShift o altri builder per WordPress? Com’è andata? Se ti va, parliamone nei commenti.