Gutenberg e la nuova esperienza di Divi Builder

La stagione del cambiamento è alle porte. Il recente arrivo di WordPress 5.0 introduce un Block Editor completamente nuovo (aka Gutenberg). Inoltre, il rilascio della nostra nuova Divi Builder Experience non solo ha offerto una perfetta integrazione con Gutenberg, ma ha anche aggiornato l'intera esperienza di progettazione di siti Web con Divi.

Questi nuovi cambiamenti porteranno indubbiamente ad alcune preoccupazioni e confusione su come Divi e Gutenberg lavorano insieme e su come utilizzare al meglio Divi con tutti questi cambiamenti. Questo tutorial ha lo scopo di attutire il colpo del cambiamento guidandoti attraverso le opzioni disponibili e i passaggi necessari per ottenere la nuova esperienza Divi Builder installata e funzionante con successo su WordPress 5.0.

Per quelli di voi che non sono pronti per Gutenberg o la nuova Divi Builder Experience, non preoccupatevi. Discuterò le opzioni disponibili per far funzionare le cose come al solito. E per quelli di voi pronti ad avventurarsi nell'emozionante sconosciuto, questa guida vi aiuterà a trovare la strada.

Ecco cosa tratterò in questo tutorial:

• L'importanza di installare l'ultima versione di Divi durante l'aggiornamento a WordPress 5.0
• Come funziona il nuovo Divi Builder con Gutenberg per impostazione predefinita
• Come attivare il nuovo Divi Builder sul backend con WordPress 5.0 (metodo preferito)
• Modifica di una nuova pagina con la nuova interfaccia utente di Divi Backend Builder
• Utilizzo del classico Divi Builder con il nuovo Divi

L'importanza di installare l'ultima versione di Divi durante l'aggiornamento a WordPress 5.0

L'ultima versione di Divi è compatibile con WordPress 5.0. Quindi, se stai eseguendo l'aggiornamento a WordPress 5.0, assicurati di aggiornare anche Divi a 3.18+. Questa nuova versione risolve molti dei problemi di compatibilità con il nuovo editor di blocchi di Gutenberg. Se mantieni una versione precedente di Divi, avrai problemi ad accedere a Divi Builder e ad altre impostazioni della pagina fino all'aggiornamento.

Le ultime versioni di Extra, Bloom, Monarch e il plug-in Divi Builder sono compatibili anche con WordPress 5.0, quindi è meglio aggiornare anche queste durante l'aggiornamento.

Come funziona il nuovo Divi Builder con Gutenberg per impostazione predefinita

Una volta aggiornato a WordPress 5.0 e installato Divi 3.18 (ultima versione), sei pronto per iniziare a costruire il tuo sito web. Se aggiungi una nuova pagina, verrai accolto con un popup che ti consente di utilizzare Divi Builder o l'editor WordPress predefinito (ora Gutenberg). Basta fare clic su "Usa Divi Builder".

Noterai che verrai avviato direttamente nel Visual Builder sul front-end.

Se esci da Visual Builder e modifichi la pagina sul backend, vedrai che non è disponibile alcun Divi Builder classico. Avrai solo la possibilità di avviare Divi Builder sul front-end.

Questo perché WordPress 5.0 ha rimosso l'editor classico e lo ha sostituito con il Block Editor (Gutenberg). Pertanto, tutte le applicazioni connesse, incluso Classic Divi Builder, sono state rimosse. In breve, non esiste Divi Builder classico senza l'editor WordPress classico.

Come attivare il nuovo Divi Builder sul backend con WordPress 5.0 (metodo preferito)

Per accedere al nuovo Divi Builder sul backend, bastano pochi clic. Dalla dashboard di WordPress, vai a Divi > Opzioni del tema. Una volta lì, fai clic sulla scheda Costruttore. Sotto le opzioni del Builder, fai clic sulla scheda Avanzate. Lì troverai le opzioni per abilitare l'ultima esperienza di Divi Builder e per abilitare l'editor classico (WordPress). Dovrai abilitare entrambe queste opzioni per goderti il ​​nuovo Divi Builder sul backend . Quindi fare clic su Salva modifiche.

Nota: l'opzione per abilitare l'editor classico nelle opzioni del tema di Divi sostituisce la necessità di utilizzare il plug-in dell'editor classico fornito dai collaboratori di WordPress a coloro che non sono pronti a utilizzare Gutenberg.

Dopo aver abilitato l'ultima versione di Divi Builder e l'editor classico da Opzioni tema, sei pronto per iniziare a creare le tue pagine con la nuova esperienza Divi Builder.

Modifica di una nuova pagina con la nuova interfaccia utente di Divi Backend Builder

Con il nuovo Divi Builder abilitato nell'editor classico di WordPress, vedrai il familiare pulsante "Usa il Divi Builder". Fare clic su questo pulsante normalmente per distribuire Divi Builder.

Quindi seleziona come vuoi iniziare a progettare la tua pagina dalle tre opzioni che compaiono.

Ora sei pronto e funzionante con la nuova esperienza Divi Builder in pieno effetto. Noterai che il nuovo Divi Backend Builder è simile al classico Backend Divi Builder con alcune nuove potenti funzionalità a portata di mano.

Ecco alcune importanti funzionalità dell'interfaccia utente dell'editor di pagine che ti aiuteranno a comprendere un po' meglio la nuova esperienza.

Il pulsante "Costruisci sul front-end"

Il pulsante "Crea sul front-end" ha sostituito il tradizionale pulsante "Usa Visual Builder", ma la funzionalità è la stessa. Distribuirà Divi Builder sul front-end per un'esperienza di costruzione visiva completa come prima. Il motivo principale per la formulazione di questo pulsante è perché tecnicamente non esiste più un visual builder separato. C'è solo un Divi Builder a cui ora si accede dal back-end e dal front-end.

Le modalità di visualizzazione ora disponibili sul backend

Il nuovo Divi Builder ha portato il Visual Builder e tutte le sue funzionalità nel backend. Ora non devi andare avanti e indietro con la modifica della tua pagina. Per attivare l'esperienza del visual builder sul back-end puoi alternare le diverse modalità di visualizzazione nella parte superiore del Builder. Per impostazione predefinita, la modalità di visualizzazione wireframe è attiva, il che ha senso perché si avvicina molto al look and feel del classico generatore di backend che siamo abituati a vedere. Tuttavia, puoi alternare le diverse modalità di visualizzazione (desktop, tablet e smartphone) per modificare visivamente la tua pagina (come hai fatto con Visual Builder) sul backend senza dover lasciare la pagina.

La nuova interfaccia utente di Divi Builder

Oltre ad avere la capacità di attivare diverse modalità di visualizzazione sul back-end, l'interfaccia utente di Divi Builder funziona perfettamente sul back-end durante la modifica della pagina. Ad esempio, quando si modificano le impostazioni di un elemento sul backend, la modale delle impostazioni può essere spostata in qualsiasi posizione all'interno dell'intera finestra del browser, fornendo lo spazio necessario per apportare modifiche sul backend mentre si vedono le modifiche in tempo reale.

Torna al Divi Builder classico

Se non sei ancora pronto per la nuova esperienza Divi Builder, puoi comunque utilizzare Classic Divi Builder proprio come prima. L'ultima versione di Divi ha incorporato un modo estremamente semplice per distribuire il Divi Builder classico che si trova nella parte inferiore dell'interfaccia utente di Divi Builder nel back-end durante la modifica della pagina. Lì vedrai un collegamento che ti consentirà di tornare al Divi Builder classico con un semplice clic.

Nota: puoi anche passare al Divi Builder classico in Opzioni tema. Fare clic sulla scheda Builder e quindi sulla scheda delle opzioni avanzate. Lì puoi trovare l'opzione per abilitare o disabilitare l'ultima esperienza di Divi Builder. Disabilita semplicemente questa opzione per mantenere il Divi Builder classico come prima. Ma ricorda, per vedere il Classic Divi Builder sul back-end, devi assicurarti e abilitare anche l'opzione Editor classico.

Le nuove funzionalità di Divi Builder

Il nuovo Divi Backend Builder include anche tutte le nuove potenti funzionalità che in precedenza erano disponibili solo su Visual Builder. E se ciò non bastasse, con questo nuovo Divi Builder otterrai anche alcuni nuovissimi aggiornamenti di prestazioni e usabilità. Questi aggiornamenti includono:

• Un'esperienza di costruzione più veloce che mai utilizzando l'utilizzo della cache
• Una rappresentazione accurata al 100% della tua pagina in tutte le modalità di visualizzazione utilizzando React Portal
• La possibilità di copiare e incollare tra le pagine in Visual Builder proprio come puoi fare in Classic Builder.

Consulta l'articolo New Divi Builder Experience per ulteriori informazioni sulle nuove potenti funzionalità disponibili.

Utilizzo del classico Divi Builder con il nuovo Divi

Come accennato in precedenza, puoi passare all'utilizzo di Divi Builder classico utilizzando il collegamento fornito nel nuovo editor di pagine di Divi Backend Builder o disabilitando l'ultima versione di Divi Builder all'interno delle opzioni del tema. Una volta effettuato il passaggio, l'editor della pagina di backend avrà un aspetto quasi identico a prima con alcune modifiche minori. Noterai che il vecchio pulsante "Usa Visual Builder" ora legge "Crea sul front-end" ma la funzione è sempre la stessa di prima. Avrai anche la possibilità di passare al nuovo Divi Builder facendo clic su un collegamento fornito nella parte inferiore di Divi Builder nel backend.

Tieni presente che al Classic Divi Builder mancheranno ancora tutte le nuove funzionalità ora disponibili nel backend nel New Divi Builder.

Riepilogo e FAQ

Devo aggiornare Divi o passare a WordPress 5.0?

Per quelli di voi che non sono pronti per Gutenberg o la nuova Divi Builder Experience, non preoccupatevi.

Non è necessario eseguire l'aggiornamento a WordPress 5.0, ma in tal caso sarà necessario aggiornare anche Divi per tutte le correzioni di compatibilità che abbiamo incluso per il supporto WP 5.
Quindi, se non vuoi *dovere* aggiornare Divi in ​​questo momento, non devi nemmeno aggiornare WordPress adesso.

In che ordine devo eseguire gli aggiornamenti?

Non è necessario farlo in un ordine particolare, ma dovrai assicurarti e aggiornare Divi se aggiorni WordPress 5.0.

Come funzionerà la nuova esperienza Divi sulle versioni precedenti di WordPress?

Proprio come prima, tuttavia, il nuovo Divi include il New Divi Builder nel back-end con tutte le nuove funzionalità che una volta erano disponibili solo su Visual Builder.

E i bug?

Stiamo attivamente osservando eventuali bug che sono sorti a causa della natura del cambiamento significativo apportato da Gutenberg e stiamo rilasciando versioni di correzione dei bug (praticamente ogni giorno) per garantire che le cose siano il più stabili possibile.

Ora che Guteberg è qui, devo usare Visual Builder?

No, ora puoi utilizzare il nuovo Divi Builder sul backend che include tutte le nuove funzionalità che una volta erano disponibili solo su Visual Builder.
(Vedi sopra: Come attivare il nuovo Divi Builder sul backend con WordPress 5.0 (metodo preferito))

Dov'è il vecchio (familiare) classico generatore di backend Divi?

Il nuovo Divi Builder sul back-end ha tutte le caratteristiche e le sensazioni familiari del Divi Builder classico oltre a tutte le funzionalità di tipo "Visual Builder" e altro ancora. Tuttavia, il nuovo Divi Builder ti consente di tornare al Divi Builder classico in qualsiasi momento dall'editor di pagine di backend.

(Vedi sopra: torna al Divi Builder classico)

Posso usare Gutenberg e Divi Builder contemporaneamente?

Sono entrambi "costruttori di pagine", quindi dovresti scegliere l'uno o l'altro. Tuttavia, stiamo lavorando a interessanti integrazioni (in arrivo) in cui puoi utilizzare i tuoi moduli Divi preferiti all'interno di Gutenberg o utilizzare qualsiasi blocco Gutenberg registrato all'interno di Divi Builder.

Pensieri finali

Il lancio di Gutenberg da solo è un po' travolgente per la maggior parte. L'editor di pagine WordPress che tutti conosciamo è completamente diverso! Ma, per fortuna, il rilascio della nostra nuova esperienza Divi Builder si integra perfettamente con Gutenberg, consentendoti di mantenere l'interfaccia utente familiare che hai imparato ad amare. E con tutte le potenti funzionalità ora disponibili sul backend, Divi Builder è più veloce e affidabile che mai.

Non vedo l'ora di sentire i tuoi pensieri sulla nuova Divi Builder Experience con Gutenberg nei commenti qui sotto.

Saluti!