Gutenberg e a experiência do novo Divi Builder

A estação da mudança está chegando. A recente chegada do WordPress 5.0 introduz um Editor de Bloco completamente novo (também conhecido como Gutenberg). E o lançamento de nossa nova experiência Divi Builder não só oferece uma integração suave com Gutenberg, mas também atualizou toda a experiência de projetar sites com Divi.

Essas novas mudanças irão, sem dúvida, trazer algumas preocupações e confusão sobre como Divi e Gutenberg trabalham juntos e como usar melhor o Divi com todas essas mudanças. Este tutorial tem o objetivo de suavizar o golpe da mudança, guiando você pelas opções disponíveis e as etapas necessárias para que a nova experiência Divi Builder seja instalada e executada com êxito no WordPress 5.0.

Para aqueles que não estão prontos para Gutenberg ou a nova experiência Divi Builder, não se preocupe. Vou discutir as opções disponíveis para você manter as coisas funcionando normalmente. E para aqueles que estão prontos para se aventurar no emocionante desconhecido, este guia irá ajudá-los a encontrar o caminho.

Aqui está o que estarei abordando neste tutorial:

• A importância de instalar a versão mais recente do Divi ao atualizar para o WordPress 5.0
• Como o novo Divi Builder funciona com Gutenberg por padrão
• Como ativar o novo Divi Builder no back-end com WordPress 5.0 (método preferido)
• Editando uma nova página com a nova interface do Divi Backend Builder
• Usando o Classic Divi Builder com o novo Divi

A importância de instalar a versão mais recente do Divi ao atualizar para o WordPress 5.0

A última versão do Divi é compatível com WordPress 5.0. Portanto, se você estiver atualizando para o WordPress 5.0, certifique-se de atualizar também o Divi para 3.18+. Esta nova versão aborda muitos dos problemas de compatibilidade com o novo editor de blocos de Gutenberg. Se você mantiver uma versão mais antiga do Divi, terá problemas para acessar o Divi Builder e outras configurações de página até fazer a atualização.

As versões mais recentes do Extra, Bloom, Monarch e do plug-in Divi Builder também são compatíveis com o WordPress 5.0, portanto, é melhor atualizá-los também durante a atualização.

Como o novo Divi Builder funciona com Gutenberg por padrão

Depois de atualizar para o WordPress 5.0 e instalar o Divi 3.18 (versão mais recente), você está pronto para começar a construir seu site. Se você adicionar uma nova página, será saudado com um pop-up que permite usar o Divi Builder ou o editor padrão do WordPress (agora Gutenberg). Basta clicar em “Usar Divi Builder”.

Você perceberá que será lançado direto no Visual Builder no front end.

Se você sair do Visual Builder e editar a página no back-end, verá que não há nenhum Classic Divi Builder disponível. Você só terá a opção de iniciar o Divi Builder no front end.

Isso ocorre porque o WordPress 5.0 removeu o Editor clássico e o substituiu pelo Editor de Bloco (Gutenberg). Portanto, todos os aplicativos conectados, incluindo o Classic Divi Builder, foram removidos. Resumindo, não há Classic Divi Builder sem o Classic WordPress Editor.

Como ativar o novo Divi Builder no back-end com WordPress 5.0 (método preferido)

Para acessar o novo Divi Builder no backend, basta alguns cliques. No painel do WordPress, navegue até Divi> Opções de tema. Uma vez lá, clique na guia Builder. Nas opções do Construtor, clique na guia Avançado. Lá você encontrará as opções para habilitar a experiência mais recente do Divi Builder e habilitar o Editor Clássico (WordPress). Você precisará habilitar essas duas opções para aproveitar o novo Divi Builder no back-end . Em seguida, clique em Salvar alterações.

Nota: A opção de habilitar o Editor Clássico nas Opções de Tema do Divi substitui a necessidade de usar o plugin Editor Clássico fornecido pelos colaboradores do WordPress para aqueles que não estão prontos para usar o Gutenberg.

Depois de habilitar o Divi Builder e o Editor Clássico mais recentes em Opções de tema, você está pronto para começar a construir suas páginas com a experiência do Novo Divi Builder.

Editando uma nova página com a nova interface do Divi Backend Builder

Com o novo Divi Builder habilitado no WordPress Classic Editor, você verá o conhecido botão “Use o Divi Builder”. Clique neste botão normalmente para implantar o Divi Builder.

Em seguida, selecione como deseja começar a projetar sua página a partir das três opções que aparecem.

Agora você está pronto para usar a nova experiência Divi Builder em pleno vigor. Você notará que o novo Divi Backend Builder se parece com o Classic Backend Divi Builder, com alguns novos recursos poderosos ao seu alcance.

Aqui estão alguns recursos de IU do editor de página notáveis ​​que o ajudarão a entender a nova experiência um pouco melhor.

O botão “Construir no Front-End”

O botão “Construir no Front End” substituiu o botão tradicional “Usar o Construtor Visual”, mas a funcionalidade é a mesma. Ele implantará o Divi Builder no front-end para uma experiência de construção visual completa como antes. A principal razão para o texto deste botão é porque, tecnicamente, não há mais um construtor visual separado. Há apenas um Divi Builder que agora é acessado no backend e no front end.

Os modos de visualização agora disponíveis no back-end

O novo Divi Builder trouxe o Visual Builder e todos os seus recursos para o back-end. Agora você não precisa ir e voltar com a edição de sua página. Para ativar a experiência do construtor visual no backend, você pode alternar os diferentes modos de visualização na parte superior do Construtor. Por padrão, o modo de visualização do wireframe está ativo, o que faz sentido porque ele se aproxima muito da aparência do construtor de backend clássico que estamos acostumados a ver. No entanto, você pode alternar entre os diferentes modos de visualização (desktop, tablet e smartphone) para editar sua página visualmente (como você fez com o Visual Builder) no backend sem ter que sair da página.

A nova interface do Divi Builder

Além de ter a capacidade de alternar diferentes modos de visualização no back-end, a interface do Divi Builder funciona perfeitamente no back-end ao editar sua página. Por exemplo, ao editar as configurações de um elemento no back-end, o modal de configurações pode ser movido para qualquer local dentro de toda a janela do navegador, dando a você o espaçamento necessário para fazer edições no back-end enquanto vê suas alterações em tempo real.

Volte para o Classic Divi Builder

Se você ainda não estiver pronto para a nova experiência Divi Builder, ainda poderá usar o Classic Divi Builder como antes. A versão mais recente do Divi incorporou uma maneira extremamente simples de implantar o Classic Divi Builder encontrado na parte inferior da interface do Divi Builder no backend ao editar sua página. Lá você verá um link que permitirá que você volte para o Classic Divi Builder com um simples clique.

Observação: você também pode alternar para o Classic Divi Builder em Opções de tema. Clique na guia Builder e, em seguida, na guia de opções avançadas. Lá você pode encontrar a opção de ativar ou desativar a experiência Divi Builder mais recente. Simplesmente desative esta opção para manter o Classic Divi Builder como antes. Mas lembre-se, para ver o Classic Divi Builder no backend, você deve certificar-se e habilitar a opção Classic Editor também.

Os novos recursos do Divi Builder

O novo Divi Backend Builder também inclui todos os novos recursos poderosos que estavam disponíveis anteriormente apenas no Visual Builder. E se isso não bastasse, você também está recebendo algumas atualizações de desempenho e usabilidade totalmente novas com este novo Divi Builder. Essas atualizações incluem:

• Uma experiência de construção mais rápida do que nunca usando o aproveitamento de cache
• Uma descrição 100% precisa de sua página em todos os modos de visualização usando React Portal
• A capacidade de copiar e colar entre páginas no Visual Builder, assim como você faz no Classic Builder.

Confira o artigo New Divi Builder Experience para mais informações sobre os novos recursos poderosos disponíveis.

Usando o Classic Divi Builder com o novo Divi

Conforme mencionado acima, você pode mudar para o Classic Divi Builder usando o link fornecido no novo editor de página do Divi Backend Builder ou desabilitando o Divi Builder mais recente nas opções de tema. Depois de fazer a mudança, o editor de página de backend terá quase a mesma aparência de antes, com algumas pequenas alterações. Você notará que o antigo botão “Usar o Construtor Visual” agora diz “Construir no Front End”, mas a função ainda é a mesma de antes. Você também terá a opção de mudar para o novo Divi Builder clicando em um link fornecido na parte inferior do Divi Builder no backend.

Lembre-se de que o Classic Divi Builder ainda não terá todos os novos recursos agora disponíveis no back-end do New Divi Builder.

Recapitulação e perguntas frequentes

Devo atualizar o Divi ou atualizar para o WordPress 5.0?

Para aqueles de vocês que não estão prontos para Gutenberg ou a nova experiência Divi Builder, não se preocupe.

Você não precisa atualizar para o WordPress 5.0, mas se precisar, você também precisará atualizar o Divi para todas as correções de compatibilidade que incluímos para o suporte WP 5.
Portanto, se você não deseja * ter * que atualizar o Divi agora, também não precisa atualizar o WordPress agora.

Em que ordem devo fazer as atualizações?

Você não precisa fazer isso em uma ordem específica, mas precisará certificar-se e atualizar o Divi se atualizar o WordPress 5.0.

Como a nova experiência Divi funcionará em versões anteriores do WordPress?

Assim como antes, no entanto, o Divi mais recente inclui o novo Divi Builder no back-end com todos os novos recursos que antes estavam disponíveis apenas no Visual Builder.

E quanto a bugs?

Estamos ativamente atentos a quaisquer bugs que tenham surgido devido à natureza da mudança significativa que Gutenberg traz, e estamos lançando lançamentos de correção de bugs (basicamente diariamente) para garantir que as coisas sejam o mais estáveis ​​possível.

Agora que Guteberg está aqui, preciso usar o Visual Builder?

Não, agora você pode usar o novo Divi Builder no back-end, que vem com todos os novos recursos que antes estavam disponíveis apenas no Visual Builder.
(Veja acima: Como ativar o novo Divi Builder no back-end com WordPress 5.0 (método preferencial))

Onde está o antigo (familiar) construtor de back-end Divi clássico?

O novo Divi Builder no back-end tem todos os recursos familiares e sensação do Classic Divi Builder, além de todos os recursos do tipo “Visual Builder” e muito mais. No entanto, o novo Divi Builder permite que você volte para o Classic Divi Builder a qualquer momento a partir do editor de página de backend.

(Veja acima: volte para o Classic Divi Builder)

Posso usar o Gutenberg e o Divi Builder ao mesmo tempo?

Ambos são “construtores de páginas”, então você precisa escolher um ou outro. No entanto, estamos trabalhando em integrações empolgantes (em breve) onde você pode usar seus módulos Divi favoritos dentro do Gutenberg, ou usar quaisquer blocos Gutenberg registrados no Divi Builder.

Pensamentos finais

O lançamento de Gutenberg sozinho é um tanto opressor para a maioria. O editor de páginas do WordPress com o qual estamos familiarizados é completamente diferente! Mas, felizmente, o lançamento de nossa nova experiência Divi Builder se integra perfeitamente ao Gutenberg, permitindo que você mantenha a interface de usuário familiar que você aprendeu a adorar. E com todos os recursos poderosos agora disponíveis no back-end, o Divi Builder está mais rápido e confiável do que nunca.

Estou ansioso para ouvir sua opinião sobre a nova experiência do Divi Builder com Gutenberg nos comentários abaixo.

Saúde!