WordPress Drag & Drop Theme e Page Builder: i migliori temi e plugin

Vuoi modificare il tuo tema WordPress e non sai da che parte incominciare?

Non vuoi avere niente a che fare con i codici?

Cerchi un tema WordPress che sia modificabile anche da un bambino di 2 anni (forse ho esagerato 🙂 )?

La parola magica: Drag & Drop.

Cosa significa questa parola? Che puoi spostare qualcosa in maniera molto semplice: basta cliccare sull’oggetto con il mouse, trascinarlo e rilasciarlo nel punto finale. Niente di più intuitivo.

Questa funzionalità viene utilizzata per modificare la struttura di una pagina, di un articolo, della homepage di un blog (o sito) WordPress, e prende il nome di Drag & Drop Theme Builder (alcuni offrono il Drag & Drop solo per l’homepage, ma è meglio puntare su quelli che offrono questo tipo di personalizzazione anche per la struttura degli articoli e le altre parti del blog).

In poche parole per creare una struttura di pagina ben precisa (ad esempio il menù, lo slider, gli articoli recenti a sinistra, la sidebar a destra e il footer in fondo) basta spostare con il mouse i relativi blocchi nel punto in cui vuoi che appaiano (nella pagina dedicata a questa funzionalità):

In questo articolo ho selezionato i migliori temi e plugin per WordPress che offrono il Drag & Drop Theme Builder e Page Builder, sia a pagamento (ho inserito dei link d’affiliazione) che gratuiti.

Praticamente tutti i temi sono predisposti per il mobile (responsive), possibilità di cambiare il colore, integrazione con i social network principali, integrazione SEO, quindi concentrerò la mia attenzione sulla funzionalità Drag & Drop.

Sono stati esclusi dalla selezione:

• iTheme Builder perchè non è un vero e proprio Drag & Drop, ma funziona tramite Moduli da aggiungere tramite click.
• Green Earth, RT-Theme 16, Ultimatum, Modernize, Carrington Build, Edison e Visual Composer perchè non permettono di selezionare la larghezza delle colonne se non nelle percentuali fissate dal designer (25%, 50%, ecc…).
• Aqua Page Builder non mi è sembrato comodo da utilizzare.

PageLines

Probabilmente è PageLines il miglior framework per realizzare siti o blog con WordPress sfruttando il Drag & Drop. Ho testato la versione free (che ha qualche funzionalità in meno) disponibile sul sito e che ti consiglio di provare.

Nel campo 1 è possibile scegliere quale parte della struttura si vuole modificare (in azzurro), ad esempio l’header, il corpo o il footer. Nel box 2 sono presenti i moduli attivi per quella determinata sezione, ed è possibile rimuoverli oppure aggiungerli dal box 3, semplicemente trascinandoli.

Ho trovato molto comoda la possibilità di creare e memorizzare più di un template, così da non rifare il lavoro ogni volta.

Per quanto riguarda le dimensioni di ciascun box, queste vengono gestite da un altro pannello (peccato):

Oltre al fatto di poter scegliere se mostrare il sito in maniera responsive (che sia adatta al tipo di dispositivo su cui viene visualizzato), è possibile scegliere (4) se mostrare zero, una o due sidebar, spostandole agilmente a destra o a sinistra. Infine, molto comoda la possibilità di modificare le dimensioni di ciascun blocco (5) trascinandolo (allargandolo o stringendolo) a proprio piacimento, e vedere immediatamente il risultato finale (con le relative misure in pixel).

Considerazioni finali

Il framework di PageLines consente di realizzare la struttura (ma non solo quella) del proprio blog o sito web in maniera molto semplice. Ottima la possibilità di modificare la dimensione di ciascun blocco semplicemente allargandolo o restringendolo con il mouse, vedendo immediatamente il risultato finale.

Per capire come utilizzare il framework bastano 5-10 minuti, è davvero intuitivo. Ci vuole qualcosina di più per la sezione “Template setup” dove si scelgono i moduli da mostrare attraverso il Drag& Drop, non immediatissimo da capire, ma in 20 minuti diventerai padrone anche di questa sezione.

Io lo consiglio vivamente, oltre al Drag & Drop, è davvero personalizzabile in ogni aspetto, sempre con grandissima semplicità. In più, c’è la versione gratuita con cui puoi capire se è proprio ciò che stai cercando, prima di acquistare la versione PRO! Che aspetti? Vai a dare un’occhiata su PageLines!

PS: favolosa la possibilità di inserire una barra sticky (quella che si fissa al top dello schermo quando si scorre verso il basso la pagina), utilissima per promuovere un ebook, un corso, un evento, ma non solo…

Headway

Headway ha un ottimo Theme Builder, l’ho provato nella versione demo (test drive) accessibile a chiunque, se fossi in te un girettino me lo farei 😉

La cosa che mi è piaciuta è che trovi tutte le informazioni/impostazioni che ti servono in una sola pagina, e non in sezioni separate come accade per altri framework.

Creare un layout è semplice, il piano di lavoro è diviso in una griglia a N colonne (di base 24), quindi la larghezza del blog è divisa in N parti (verticalmente). Questo, per quello che ho potuto provare, “limita leggermente” la possibilità di impostare la dimensione esatta di ogni blocco che si vuole inserire, perchè può essere largo come un multiplo di una colonna e non di una dimensione che si vuole… ma è una sottigliezza, non è così importante.

A sinistra (6) è possibile scegliere cosa si vuole modificare, se l’homepage, il template degli articoli, delle pagine, dell’archivio ecc… Al centro (8) si vede la griglia con le 24 colonne, dove è possibile creare ed aggiungere i blocchi semplicemente cliccando con il mouse in un punto e spostarlo per “disegnare” il rettangolo (che è il blocco). Immediatamente vengono fuori (9) informazioni come le  dimensioni e il nome del blocco stesso. Premendo col tasto destro, è possibile far apparire le impostazioni del blocco nell’area (7) che si estenderà fino a metà schermo.

Una volta creato il blocco, è possibile scegliere con che modulo bisogna riempirlo:

Considerazioni finali

Headway ha un ottimo Drag & Drop theme builder. Ci ho impiegato una trentina+ di minuti per capire bene il funzionamento, non è così immediato all’inizio, ma devo dire che è davvero ben realizzato. Mi piace molto il fatto di avere tutto in una sola pagina (impostazioni e la possibilità di scegliere larghezza e contenuto). L’unica cosa che non mi ha convinto molto è stato il fatto che non sono riuscito ad impostare la larghezza che volevo io, ma che si è limitati dalla dimensione delle colonne della griglia.

PressWork

PressWork è un framework (o meglio, toolbox) gratuito che permette di apportare le modifiche al tema direttamente dal front-end (dal sito vero e proprio, non dal pannello di amministrazione), senza la necessità di conoscere e modificare nessun codice!

Ecco come funziona:

Sulla sinistra compare una barra di aiuto (solo se sei loggato come amministratore), clicca sull’icona PressWork Settings e poi attiva (metti su ON) il Drag & Drop Editor.

Ora è possibile modificare la struttura della Home (o di qualsiasi altra pagina, semplicemente trascinando i blocchi (nell’esempio ho spostato il logo sotto al menù):

Molto interessante è anche la possibilità di modificare le dimensioni dei blocchi principali (main content, first sidebar e second sidebar) direttamente dal front-end, così da vedere in real-time come si comporta il sito (se è troppo grande, se è troppo piccolo, se il margine va bene, ecc…).

Purtroppo il ridimensionamento è un po’ limitato, così come la possibilità di aggiungere infiniti box (ci sono solamente gli N predefiniti).

Quando hai terminato le modifiche, premi il pulsante Save button nella barra a sinistra.

Considerazioni finali

PressWork purtroppo non permette di avere strutture personalizzate complesse, ma è molto comodo se si utilizza la struttura standard (contenuto centrale + sidebar). È gratuito, è vero, ma la grafica di base non è entusiasmante. Per avere qualcosa di più carino, occorre acquistare uno dei loro 3 temi “professionali” (un po’ pochini, non ti pare?), che non sono poi un granchè.

Ottima idea, peccato che non venga sviluppata come meriterebbe.

Aspetta! Mi sa che qualcuno ci ha visto lungo, e quel qualcuno sono i ragazzi di Themify! Praticamente hanno preso questo framework e lo hanno adattato ai loro temi, rilasciando a Luglio 2013 il loro drag & drop framework.

Ecco un video esplicativo:

Elegant Themes Builder

Elegant Themes Builder è un ottimo plugin che si integra con qualsiasi tema, non solo con quelli di Elegant Themes!

Purtroppo ha un grosso limite: funziona come Page Builder, quindi permette di personalizzare “solamente” il layout del contenuto di ogni pagina o articolo, ma non l’header, la sidebar e il footer. Il contenuto scritto all’interno dell’editor non verrà visualizzato perchè verrà sovrascritto dal contenuto che creerai con il Page Builder.

Attivando il plugin viene aggiunto in automatico in fondo alla classica pagina dell’editor di articoli e pagine, un meta box “Layout Builder“:

Immagino che solo vedendo l’immagine tu abbia già capito come funzioni!

Cliccando su Add a Module compaiono tutti i moduli che è possibile inserire (e sono davvero tanti, ma hanno il tipico stile grafico di Elegant Themes).

Il plugin permette un vero e proprio Drag & Drop dei moduli ma soprattutto, permette di modificarne le dimensioni allargandoli o stringendoli (con il mouse), mostrando la larghezza in percentuale rispetto alla larghezza della pagina.

Ottimo anche il fatto che è possibile personalizzare i contenuti (ma anche la grafica) di ogni modulo direttamente da questa pagina.

Considerazioni finali

Elegant Themes Builder è un buono strumento per chi ha bisogno di creare delle pagine di vendita, di presentazione, o per chi desidera semplicemente modificare la struttura del contenuto, ma non va bene per chi cerca qualcosa che gli permetta di modificare l’intero tema.

Come per ogni altro plugin, bisogna prestare bene attenzione che il plugin si integri graficamente con il tema in uso, altrimenti bisognerebbe modificarne lo stile tramite codice CSS.

 Site Origin

Site Origin è un plugin gratuito che funziona da Page Builder (quindi non da Theme Builder).

Aggiunge un proprio editor al classico di WordPress che trovi a fianco del tab “Visuale” e “Testo” (11), con il quale puoi realizzare tutti i template di pagina che vuoi.

Tramite i relativi pulsanti (10) è possibile inserire i moduli e widget più comuni, ma anche creare più colonne e modificarne la larghezza trascinando il punto in comune (12). Ovviamente è possibile spostare i moduli in Drag & Drop.

Considerazioni finali

Site Origin è ottimo per personalizzare la struttura di una pagina specifica, l’ho trovato davvero molto semplice e funzionale. Il problema nasce se si vuole modificare in Drag & Drop l’intera struttura del tema, in quanto non è possibile, questa rimane sempre fissa.