Page Builder per WordPress: l’argomento che andremo a trattare in questo articolo lo definirei… innovativo.
Vediamo il perché: il mondo dello sviluppo dei siti web, ormai da qualche anno, è in continua evoluzione ed espansione trainando di conseguenza anche coloro che li gestiscono, i Page Builder o costruttori di pagine.
Come sicuramente saprai i siti web sono pagine e pagine di codice, di linguaggi di programmazione. In particolare si utilizzano:
- HTML 5 per la parte di struttura delle pagine web
- CSS per le regole, la formattazione, l’estetica delle pagine web (vengono chiamati anche fogli di stile)
Quando nacque il World Wide Web (WWW) nel 1990 per la creazione e messa in rete dei siti bisognava conoscere nei minimi dettagli i linguaggi di programmazione.
Poiché l’unico modo per creare un sito web era scrivere codice su codice..
La foto qui sopra è il primo sito web che è stato pubblicato su
http://info.cern.ch/hypertext/WWW/TheProject.html solo 32 anni fa.
Inutile notare come in questi pochi anni le cose si siano completamente rivoluzionate!
Oggi non è più indispensabile sapere i linguaggi di programmazione per sviluppare un sito web; questo perché sono stati studiati tanti strumenti che permettono di creare un sito anche senza saper programmare.
WordPress è uno degli strumenti che ti permette di sviluppare un discreto sito web anche senza questa tipologia di conoscenze.
Ci tengo però a dirti che secondo me un po’ di confidenza nella programmazione è meglio averla!
Tornando ora all’argomento centrale dell’articolo, l’introduzione dei page builder nel mondo informatico ha cambiato le carte in tavola.
Questi editor visuali permettono di creare dei siti web molto professionali anche se le conoscenze che hai non sono approfondite nel settore.
Parlando nel dettaglio di WordPress, sono due gli editor visuali più famosi ed utilizzati per la costruzione dei siti web.
Sto parlando di Elementor e Divi, secondo me due bombe!
Ora andremo a vederli nel dettaglio entrambi.
Elementor
Parto da Elementor perchè nella mia carriera è quello su cui mi sono lanciata prima.
Il sito web ufficiale è una miniera d’oro di risorse; puoi vedere dei siti demo, le principali funzionalità, leggere tanti articoli a riguardo, consigli di utilizzo e molto altro!
Cosa mi ha spinto a provarlo subito? I piani di acquisto!
Ha un piano base che è FREE e poi vari piani a pagamento.
Sicuramente il suo primo grande punto a favore è che ha la possibilità di provare, utilizzare e testare l’editor visuale in modo completamente gratuito.
La maggior parte dei siti su cui ho lavorato e che ho sviluppato ho utilizzato Elementor Pro (ovvero quello a pagamento) perchè ti apre un mondo.
Ti assicuro, però, che anche quello free con l’aggiunta di qualche altro plugin integrativo e un po’ di tempo in più dà degli ottimi risultati, soprattutto se le risorse economiche sono limitate.
Elementor: come si installa?
Prima di procedere con l’installazione assicurati che il tema del tuo sito web sia tra quelli compatibili con Elementor; ad esempio: Astra o Ocean WP.
Se utilizzi la versione Pro e pensi di fare tutto il sito web con Elementor, sfruttando così tutte le sue potenzialità, allora ti consiglio di installare Hello Elementor come tema.
Ora passiamo all’installazione del plugin. Fai l’accesso all’area riservata del tuo sito, successivamente il percorso che devi fare è:
Bacheca > Plugin > Aggiungi nuovo > Cerca: Elementor > Installa > Attiva
Dopo averlo attivato ci saranno due nuove voci sulla barra laterale della bacheca: Elementor e Template. In queste due sezioni potrai scegliere le impostazioni del plugin e visualizzare la libreria di template e quelli futuri che creerai.
Hai acquistato la versione PRO?!
Dopo aver installato il plugin gratuito di Elementor, vai nella tua area riservata sul sito ufficiale e scarica il download.
Per installarlo vai su:
Bacheca > Plugin > Aggiungi nuovo > Carica plugin > Installa
Dopo di che fai il collegamento per connettere ed attivare la licenza.
Elementor: una panoramica generale
Vediamo ora qualche funzionalità e come si utilizza in generale questo plugin.
Si presenta con una barra laterale a sinistra e un’anteprima in tempo reale della pagina su cui si sta lavorando a destra.
Nella barra in alto a sinistra, si possono andare a settare le impostazioni del sito, navigare nella pagina e in questa sezione trovi anche il pulsante per uscire dalla pagina e tornare alla bacheca di WordPress.
I quadrati che si trovano al centro invece sono gli elementi che si possono inserire nel sito, semplicemente con il DRAG AND DROP (in italiano trascinamento).
Ti basterà scegliere l’elemento che ti serve e per portarlo all’interno della tua pagina web premi con il mouse e lo trascini nella posizione che preferisci nella parte destra dello schermo.
Questo video YouTube sicuramente chiarirà molti dubbi sull’utilizzo e le principali funzionalità dell’editor visuale. Clicca play e goditi la visione!
Vedremo tanto altro che riguarda Elementor nei prossimi articoli 😉
https://www.youtube.com/watch?v=lBu9TKg7dFM
Divi
Passiamo ora all’altro editor visuale, partendo come sempre dal sito ufficiale dove si può vedere che Divi è il prodotto di punta dell’e-commerce Elegant Themes.
Un altro spazio pieno di risorse: ci sono demo da provare, la spiegazione e visualizzazione di tutte le funzionalità che si possono avere utilizzando Divi.
Per essere più precisi, Divi è un page builder, ma prima ancora viene catalogato come un tema per WordPress.
In questa veste ti permette di personalizzare al massimo tutte le specifiche della base del sito, quindi crearti il tuo tema da zero. Poi all’interno possiamo trovare anche l’editor visuale per la costruzione delle pagine.
Divi vs Elementor
Analizziamo alcune differenze che ci sono rispetto ad Elementor, il page builder appena sopra descritto.
La prima grande differenza: Divi è solo a pagamento, non c’è una versione gratuita.
C’è da dire che leggendo le recensioni e facendo un giro sul sito web si capisce che sono sicuramente soldi ben spesi! E poi è presente la possibilità di richiedere un rimborso entro 30 giorni dall’acquisto, nel caso non ci si trovi bene.
Ci sono anche due tipologie di piani acquistabili: accesso annuale (dove quindi ogni anno si paga una quota per il mantenimento attivo del plugin) e accesso a vita (si paga una quota più grande, ma una sola volta).
Un punto sicuramente a suo favore?! Avere la licenza illimitata, ovvero, una volta che acquistiamo il tema Divi lo possiamo usare su tutti i siti che vogliamo, potenzialmente infiniti.
Solitamente, quando si acquista una licenza, essa viene estesa, in base al piano comprato, soltanto ad uno o più siti web.
Le caratteristiche generali di Divi, sono molto simili a quelle di Elementor.
Io in primis ho iniziato utilizzando prima uno e poi l’altro e nel passaggio non ho avuto la minima difficoltà di orientamento.
Sicuramente alcune impostazioni sono diverse, ma alla fine se entri nell’ottica ed impari a lavorare con un editor a blocchi cambiare strumento non ti porterà grosse difficoltà.
Divi: come si installa?
Date le diverse funzionalità di Divi, in base all’utilizzo che ne farai sul tuo sito ci sono due procedure di installazione diverse. Infatti una volta acquistato il piano che fa per te, entrando nell’area riservata sul sito ufficiale, avrai la possibilità di scaricare due download distinti: uno per l’utilizzo di Divi come tema e l’altro per plugin.
Vediamo come si installa passo dopo passo in entrambi i casi.
P.S. se avrete WordPress configurato sulla lingua italiana, anche Divi verrà installato in italiano
Divi Tema: hai una nuova installazione ed hai deciso di utilizzarlo per sviluppare tutto il tuo sito, sia a livello di tema che a livello di costruzione delle pagine. Il download che dovrai scaricare è “Divi Theme”.
Il percorso che dovrai fare ora è:
Bacheca > Aspetto > Temi > Aggiungi nuovo > Carica tema
Una volta installato ed attivato, nella barra di sinistra comparirà una nuova voce “Divi” dove all’interno ci sono tutti gli strumenti per personalizzare il tuo nuovo tema!
Ricorda di inserire la chiave di licenza (che trovi nella tua area riservata sul sito ufficiale Divi) per rendere attive tutte le funzionalità.
Divi Plugin: hai un sito già creato e vuoi utilizzare Divi come costruttore di pagine. Il download che dovrai scaricare questa volta è “Divi Builder Plugin”.
Il percorso che dovrai fare in questo caso è:
Bacheca > Plugin > Aggiungi nuovo > Carica plugin
Ora quando andrai a creare o modificare una pagina, potrai scegliere se utilizzare il page builder Divi oppure no.
Qui di seguito trovi un breve video di presentazione di Divi pubblicato proprio dall’account ufficiale di Elegant Themes.
https://www.youtube.com/watch?v=q9XI0Lo-SWE
Siamo giunti alle conclusioni di questo articolo corposo e pieno di informazioni.
Abbiamo visto in generale cos’è un page builder e quali sono i due più conosciuti ed utilizzati su WordPress, entrando poi nel dettaglio di ognuno, anche se li vedremo entrambi molto meglio e in modo più approfondito successivamente.
Spero che l’articolo ti sia piaciuto e ti sia stato utile, fammelo sapere nei commenti 🙂
… e se hai dubbi, domande o vuoi affidarti a me per la creazione del tuo sito web scrivimi qui!
A presto, Francesca!
