Gli editor di testo, i builder di pagina e Gutenberg

Se sei proprio all’asciutto circa la costruzione di contenuti web, allora è doverosa una breve spiegazione sugli editor di testo e la loro evoluzione, ovvero i builder di layout, chiamati anche costruttori di pagina.

Uno strumento come WordPress è stato creato con l’intenzione di rendere accessibile la pubblicazione di contenuti internet anche per i non esperti.

Tutti, in un ufficio o a casa, sanno utilizzare a livello base uno strumento come Word o simile, ed è per questo che l’editor di WordPress nasce sullo stesso filone.

Vengono proposte all’utente delle funzioni simili per la gestione del testo, inserimento di immagini ed altri.

Questo è l’editor di testo prima della versione di WordPress 5 e come vedi potrai trovare una certa somiglianza fra questi strumenti e quelli di Word.

Con esso è possibile:

• Trasformare il testo utilizzando i boldati, italici ecc…
• Inserire link ad altre pagine o a risorse esterne
• Inserire delle titolazioni.
• Inserire immagini e altri media all’interno del testo.

Questo strumento può andare benissimo per la creazione ed impaginazione di testo.

Un contenuto verticale racchiuso nello stesso contenitore, nello stesso blocco, come se fosse un foglio da stampare.

Ma il web è anch’esso così? No, direi che fra la creazione di un documento word e una pagina web, al giorno d’oggi, ci sono moltissime differenze.

Guardiamo subito un esempio prendendo la preview di un sito demo.

Già al primo sguardo puoi capire come un impaginato di questo tipo è impossibile da creare se pensi al semplice editor di testo visto prima.

Anche se questa grafica fosse per un progetto di stampa come una brochure, sarebbe impossibile da creare con Words, ma si necessita di un’applicazione in grado di farti posizionare gli elementi dove desideri, inserire grafiche, titolazioni e molto altro.

Infatti, nel web esiste molto di più. Ci sono le animazioni e la pagina è interattiva.

L’utente può passare il mouse sopra diversi elementi, cliccare i bottoni, compilare moduli e molto ancora.

Non per ultimo, il mondo web ha ancora un ulteriore difficoltà da risolvere.

È quella che non tutti i monitor hanno le stesse dimensioni, così come questa pagina può essere vista da un computer desktop, un portatile, un tablet ed un mobile.

Pertanto l’impaginato che vedi ora, non sarà lo stesso di quando visiti questo sito con un tablet.

Puoi vedere come tutti gli elementi scivolino uno sotto l’altro a seconda dell’ampiezza dello schermo.

Tieni presente che questa non è una magia che avviene in automatico.

È lavoro fatto dagli sviluppatori di questo tema che, secondo certe regole e criteri, fanno in modo che i blocchi si comportino e si impaginino in diversa maniera.

Ok, arrivato a questo punto ti domanderai:

Ma come posso creare, tramite l’editor di testo di WordPress, una pagina del genere?

La risposta è data dai costruttori di pagina. Chiamati anche Layout builder.

Ce ne sono di più o meno famosi e alcuni temi premium hanno sviluppato il loro builder personalizzato.

Vediamo lato amministrazione cosa abbiamo al posto dell’editor per costruire la pagina che abbiamo appena visto.

Il primo è builder che utilizza Avada, chiamato Fusion Builder.

Come puoi vedere a colpo d’occhio, abbiamo una gabbia di contenuti.

Una gabbia basata su righe e colonne.

Per esempio, vediamo che come primo elemento abbiamo uno slider inserito all’interno del suo contenitore.

All’interno del secondo contenitore abbiamo 3 colonne con del testo: office line, emergency e working hours, che danno appunto questo risultato.

Subito sotto troviamo la sezione dedicata all’about us, strutturata con un contenitore e due righe.

Nella prima il titolo e del testo, nella seconda le 3 colonne Quality Garantee, emergency collouts e 20 years experience.

E di tutto questo abbiamo il pieno controllo.

Possiamo decidere gli ingombri come per esempio la suddivisione delle colonne, prendere gli elementi e spostarli con il semplice trascinamento del modulo.

Inoltre possiamo accedere ai singoli moduli per inserirne i contenuti e controllare tutte le impostazioni che il tema ci fornisce.

Si possono aggiungere moduli dove desideriamo e ogni builder ha a disposizione una serie di moduli fra cui poter scegliere.

Ce ne sono veramente molti che variano dal contenuto testuale, all’inserimento di immagini, slider, tabelle per i prezzi, box per le testimonianze e molti altri…. Ogni tema con i suoi.

Notiamo anche il pulsante per poter tornare al editor normale di WordPress.

Se lo premi e vedi tutto questo …. Non ti spaventare.

A te sembrerà codice illegibile, ma altro non sono che degli shortcode tramite i quali il builder funziona.

Parleremo di shortcode nelle lezioni future, quindi non affrettiamo i tempi e non entriamo ora nel dettaglio dei builder in quanto questo argomento è trattato all’interno del corso sui Temi avanzati.

Lo scopo di questa lezione è capire l’editor di WordPress, i costruttori di pagine e Gutenberg.

Ora, hai visto cosa WordPress forniva con il suo pacchetto base, ovvero l’editor di testo.

Ma hai anche visto di quali potenti strumenti sono forniti i temi avanzati di WordPress.

Se vuoi sapere quali sono i migliori temi che puoi trovare sul mercato, clicca il link che trovi sotto a questo video per andare all’articolo Migliori Temi WordPress che trovi sul nostro blog.

Con la versione di WordPress 5, però, ci sono stati dei cambiamenti possiamo definire epocali, in quanto il caro vecchio editor di base è stato mandato in pensione per fare spazio a Gutenberg, che è il nome del nuovo editor che possiamo definire un mix fra quello vecchio e un costruttore di pagina.

Alla base di Gutenberg troviamo il concetto di blocco.

Ogni blocco è un modulo con delle sue impostazioni ben precise.

L’unione di più blocchi crea una pagina.

Anche la grafica e la gestione della sidebar è stata cambiata come aspetto, ma le sue funzioni sono rimaste pressoché invariate.

Questa evoluzione è stata pensata perché i realizzatori di WordPress hanno realizzato come, rispetto a tanti anni fa quando questo CMS è stato rilasciato per la prima volta, le necessità del web sono cambiate.

Anche un semplice articolo può avere un aspetto e un gusto completamente differente se impaginato con i giusti strumenti ed inoltre con Gutenberg è più facile fare interagire testo, immagini, titolazioni, liste ecc…

Ora ci sono gli strumenti giusti per dare, anche ad un semplice articolo, un impaginato di tutto rispetto.

Ma quindi? Cosa bisogna utilizzare? Un tema avanzato o semplicemente Gutenberg.

L’utilizzo di un tema avanzato, se si vuole ottenere con il minimo sforzo un sito web professionale e accattivante è senza ombra di dubbio necessario.

Come abbiamo accennato, i builder dei temi avanzati hanno una facilità e una rapidità di utilizzo eccezionale.

Basta guardare le diverse demo dei temi che consigliamo e che utilizziamo per i nostri clienti per capire come con il solo Gutenberg questo risultato sia inarrivabile.

Detto questo però Gutenberg sarà lo strumento con il quale creeremo gli articoli.

Attenzione articoli e non pagine. Per questo c’è un motivo ben preciso che ora ti spiego.

Ti ricordi cosa abbiamo visto quando ho disattivato il builder?

Trovavi una serie di shortcode, di codice specifico per il builder che stiamo utilizzando, interpretabile appunto solo da questo builder.

E se quindi un giorno decidessimo di cambiare tema?

Visto che un builder non legge il codice di un altro, allora dovremmo procedere nel rifare tutte le pagine con il builder del nuovo tema.

Visto che le pagine di un sito, e sottolineo pagine, non sono mai un numero così elevato, non è un grosso problema, ma per quanto riguarda gli articoli il discorso è molto differente.

Un sito, se costantemente seguito e aggiornato, può arrivare ad avere decine e decine di articoli nel giro di pochi mesi.

Pensa se utilizzassi il builder per la costruzione degli articoli e poi volessi cambiare tema… rifare centinaia di articoli quello comporterebbe un lavoro enorme.

Invece se per questi utilizziamo Gutenberg, visto che fa parte del core di WordPress, allora anche  se decidessi di cambiare tema, queste pagine rimarrebbero invariate.

Per questo motivo Gutenberg è l’asso nella manica per creare articoli di livello superiore.

Se invece hai già utilizzato WordPress e decidessi di usare ancora il vecchio editor, nessun problema.

Puoi installarti il plugin classic editor la cui funzione è appunto quella di disattivare Gutenberg.

Personalmente penso che Gutenber sia di gran lunga superiore, pertanto ti consiglio di utilizzare il vecchio editor se e solo se, hai già un vecchio sito e non hai tempo oggi di imparare questo nuovo strumento.

Ti aspetto nel prossimo video per scendere nel dettaglio dell’utilizzo di questo nuovo strumento di WordPress.

Ci sono builder eccezionali come quello di Divi, costruito ad hoc proprio per questo tema.

Abbiamo il builder che troviamo in Enfold, anche esso di facile utilizzo e ricco di funzionalità… cosi come altri quali Avada, Salient, ecc...