pixelFacebook

O novo editor de back-end do Divi é um novo recurso que traz o poder do construtor visual para o back-end. O novo editor de backend tem uma interface familiar (como o construtor clássico), mas com todos os novos recursos que não estavam disponíveis para o construtor clássico antes. 

Entendemos que qualquer alteração (grande ou pequena) requer alguns ajustes em seu fluxo de trabalho normal. 

Neste tutorial, vou dar um resumo prático de todos os novos recursos agora disponíveis no editor de back-end da Divi. Eu acho que você ficará surpreso com as melhorias e animado para testá-las em seu próximo projeto.

Aqui está um detalhamento dos recursos que abordaremos neste tutorial:

  1. Nova interface do editor da página
  2. Rapidez
  3. Modos de visualização com renderização de página 100% precisa
  4. Estrutura do menu do novo construtor
  5. Configurações do construtor
  6. Copie e cole elementos Divi entre páginas
  7. Pesquisa filtrada
  8. Acesso rápido
  9. Gerenciador de cores e sugestões de cores mágicas
  10. Localizar e substituir
  11. Estender Estilos
  12. Arrastar e soltar upload de arquivo
  13. Conteúdo Dinâmico
  14. Opções de foco
  15. Edição em massa e multisseleção

Acessando o novo Divi Backend Editor

nova experiência do Divi Builder (Divi 3.18) inclui os novos recursos do Divi Backend Editor discutidos neste artigo. Foi lançado para integrar-se suavemente com o recente lançamento do WordPress 5.0. Para mais informações sobre como acessar o novo Divi Builder Experience com o WordPress 5.0, confira este post .

Agora vamos para esses recursos incríveis!

# 1 Nova interface do editor do Backend Divi

O novo backend do Divi Builder tem alguns novos elementos que você pode precisar para se familiarizar primeiro. Na maioria das vezes, as coisas parecerão muito familiares, mas existem algumas diferenças importantes.

  • O botão “Use o Visual Builder” foi substituído por um botão “Build on the Front End”. Esta é apenas uma mudança na redação. O botão permitirá que você crie sua página no front end como o Visual Builder já fez no passado.
  • Os modos de exibição agora disponíveis no back-end (mais sobre isso depois).
  • A interface do usuário New Divi Builder, cujo padrão é o modo de visualização de estrutura de arame.
  • Link para alternar de volta para o Classic Divi Builder. Isso permite que você vá e volte para o construtor Divi clássico e o novo construtor Divi.

# 2 velocidade

A velocidade é um daqueles recursos que é difícil de mostrar em um post, mas é tão importante para o fluxo de trabalho que pensei em mencioná-lo aqui. Alguns de vocês podem ter evitado usar o Visual Builder no passado, porque não foi tão rápido quanto o Classic Backend Builder. Mas agora você pode desfrutar de uma experiência de construção visual muito mais rápida no backend e na extremidade frontal, possibilitada pelo aproveitamento do cache . Vá e confira por si mesmo!

# 3 modos de visualização com renderização de página 100% precisa

Os modos de visualização no novo Divi Backend Editor é onde você pode alternar rapidamente do modo de exibição de estrutura de arame padrão para outros modos de visualização (desktop, tablet, smartphone e zoom out) que proporcionam uma experiência de construção visual no back-end.

Aqui está o que cada modo de visualização parece quando você alterna entre cada um deles.

Modo de exibição de estrutura de arame

Isso essencialmente substitui o construtor de backend Divi clássico com todos os recursos do Visual Builder embutidos. Essa também é uma excelente visão segura de edição de páginas com muita customização ou código customizado que tornaria certos elementos difíceis de editar em um dos modos visuais . Por exemplo, se você tiver elementos sobrepostos, pode ser difícil acessar o menu de configurações de um elemento. Então, tudo que você precisa fazer é alternar para o modo de exibição de estrutura de arame, abrir as configurações modais para esse elemento e, em seguida, alternar novamente para editar o elemento visualmente.

Modo de visualização de zoom out

Este modo de visualização permite que você edite sua página visualmente de uma perspectiva mais ampla. Ele permite que você veja o design geral da sua página sem ter que carregá-lo em um novo navegador. Ele permite que você mova elementos maiores (como seções ou linhas) muito mais facilmente. Além disso, se você estiver usando recursos como multiselect e localizar e substituir para fazer ajustes de design em toda a página, isso permitirá que você veja essas alterações em tempo real sem precisar rolar muito.

Modo de visualização da área de trabalho

Essa visualização é onde você fará a maior parte da edição do seu construtor visual no backend. O modo de exibição abrange toda a largura do construtor. E como a visualização do construtor abrange quase toda a largura do navegador, você pode ter uma representação precisa da área de trabalho da página no back-end.

Modo de visualização de tablets

A visualização de tablet mostra a aparência da sua página com largura de 768px (uma orientação de retrato comum para tablets).

Modo de visualização do smartphone

O modo de visualização do smartphone oferece uma representação precisa da sua página com 479 pixels de largura (uma orientação de retrato comum para smartphones)

A nova estrutura de menu inclui todas as opções como antes, em um local conveniente e compacto. Há também uma nova opção de Configurações do Construtor na extrema direita que não estava disponível no backend até agora (mais sobre isso abaixo).

# 5 Configurações do Construtor

As novas configurações do construtor agora estão disponíveis no criador de backend. Este poderoso recurso permite que você personalize sua Builder Experience para se adequar ao seu próprio fluxo de trabalho.

Todas essas opções serão úteis para configurar como você deseja que o Divi funcione por padrão. Aqui estão algumas das opções que podem surpreendê-lo.

Personalizar a barra de ferramentas de configurações do construtor com as opções de modo flutuante, modo de clique e modo de grade

Ao editar uma página no back-end em um dos modos de visualização visual (como o modo de visualização da área de trabalho), você pode adicionar ou remover itens da barra de ferramentas com essa opção. Você pode até mesmo adicionar o Modo Hover (a interação padrão), o Modo de Clique e o Modo de Grade à sua barra de ferramentas para que você altere a maneira como interage com o Divi na hora.

No modo de focalização (o modo de interação padrão), passar o mouse sobre módulos, linhas e seções revela seus controles e esses controles podem ser clicados.

No modo de clique, os controles são exibidos quando você clica em um elemento, e não quando você passa o mouse sobre ele. Depois que um elemento é clicado, seus controles permanecem visíveis até você clicar em outra coisa ou sair. O modo de clique também destaca elementos em foco, o que pode ser muito útil para identificar pequenos módulos em uma página.

No modo de grade, todos os controles de módulo, linha e seção da página são exibidos de uma só vez.

Existe até uma opção para definir o modo de interação padrão também nas configurações do Construtor.

Otimizar o fluxo de criação de página

Você pode otimizar o fluxo de criação de páginas para atender às suas necessidades. Por exemplo, em vez de ser solicitado a escolher seu método de criação de página toda vez que você criar uma nova página, você pode definir o fluxo de criação de página para sempre começar a criar uma nova página do zero.

Agora, quando você criar uma nova página e implantar o Divi Builder, você irá direto para a edição da página a partir do zero, poupando-lhe algum tempo valioso durante o desenvolvimento de um novo site.

Você também pode ler mais sobre essas configurações do Construtor na postagem do blog do recurso .

# 6 Copiar e colar elementos Divi entre páginas

Agora você pode copiar elementos Divi ou Estilos inteiros de uma página e colá-los em uma página completamente diferente. Isso economiza uma tonelada de tempo ao construir seu site. Em vez de salvar seu elemento na biblioteca divi e importá-lo para uma nova página, tudo o que você precisa fazer é copiá-lo e colá-lo!

A Pesquisa filtrada é uma das maravilhosas melhorias de eficiência de design que costumavam estar disponíveis apenas no Visual Builder.

Isso permite que você digite consultas de pesquisa no topo de suas configurações modais para encontrar uma determinada opção mais rapidamente. E você pode selecionar certos filtros para mostrar estilos modificados, estilos responsivos, estilos de foco e conteúdo ativo. Você pode até combinar consultas de pesquisa com filtros para uma pesquisa mais segmentada.

Por exemplo, você pode digitar a palavra “fonte” na barra de pesquisa do modal modal para mostrar todas as opções de design relacionadas à fonte. Em seguida, você pode adicionar o filtro “estilos modificados” em combinação com sua consulta de pesquisa para revelar todas as opções de fonte que modificaram estilos.

É uma maneira rápida e fácil de inspecionar as opções de design de seus próprios projetos, bem como muitos dos designs de layout prontos disponíveis. Outros filtros incluem Estilos responsivos (valores definidos para tablet e smartphone), Estilos de passagem (valores configurados para passar o mouse), Conteúdo ativo (conteúdo e / ou configurações ativas na guia de conteúdo).

# 8 Acesso Rápido

O acesso rápido é um recurso fácil de ignorar, mas é uma significativa economia de tempo de desenvolvimento. Esse recurso funciona apenas em um dos modos de visualização do construtor visual. Ao abrir as configurações de um módulo, você pode passar o mouse sobre elementos do módulo no construtor visual para revelar destaques de borda azul e botões de acesso rápido. Quando clicados, esses novos botões de acesso rápido levarão você diretamente para as configurações de design relevantes para esse elemento em particular no módulo.

Por exemplo, observe como é fácil navegar para as configurações de estilo de um título em um módulo de texto.

Esse recurso também funciona da maneira oposta. O Acesso Rápido também facilita a identificação de elementos relevantes na página nas configurações do módulo. À medida que você pesquisa (ou passa o mouse) pelas opções, o Divi indica a qual elemento do módulo cada grupo de opções pertence com uma borda de destaque azul.

Observe como o elemento de texto do cabeçalho é destacado ao passar o mouse sobre o grupo de opções “Título do texto” nas configurações do módulo.

# 9 Gerenciador de cores e sugestões de cores mágicas

O recurso Gerenciador de cores e Sugestões de cores mágicas é extremamente conveniente ao alterar a cor de um elemento nas configurações modais. Por exemplo, você pode rapidamente alternar o uso de cores recentes, bem como a paleta de cores salva. E você pode abrir a grade de sugestão de cores mágicas para revelar uma linha de cores sugeridas para cada uma das cores em sua paleta de cores salvas ou recentes.

# 10 Localizar e substituir

Localizar e substituir permite substituir qualquer valor em toda a sua página por um valor completamente novo em segundos. Simplesmente clique com o botão direito em uma configuração e escolha a opção Localizar e substituir. Isso permitirá que você pesquise toda a página, ou uma parte específica da sua página, por valores específicos e substitua esses valores por algo novo. Isso significa que você pode alterar o esquema de cores, as fontes e mais da página inteira em questão de segundos.

Por exemplo, se a sua página for estilizada com a mesma cor verde, você pode clicar com o botão direito do mouse em qualquer opção de cor usando essa cor (como a cor do texto do cabeçalho) para localizar um valor de cor diferente.

No pop-up Localizar e substituir, você pode optar por substituir a cor em toda a página por uma cor azul. Então, se você selecionar “replace all”, o valor da cor será substituído em todas as ocorrências dessa cor, independentemente do elemento que estiver sendo usado.

Isso altera o esquema de cores da página inteira em segundos.

# 11 Estender Estilos

Estender Estilos permite estender uma opção de estilo específica ou os estilos de todo o elemento para outros elementos em toda a sua página.

Para Estender Estilos em Divi, simplesmente clique com o botão direito em qualquer elemento, opção ou grupo de opções, e escolha a opção Estender Estilos. Você pode então escolher onde e para quais elementos você gostaria de estender os estilos. Você pode estender estilos para módulos específicos em locais específicos ou estender estilos para todos os módulos em toda a página, usando a segmentação por local e elemento.

Por exemplo, digamos que você projetou um módulo contador de números e deseja estender todos os estilos desse módulo para os outros módulos contadores de números nessa linha. Simplesmente clique com o botão direito do mouse no módulo do contador de números e selecione “Estender Est. Contador de Número”. Em seguida, nos estilos de extensão modal, selecione para estender os estilos por toda a linha.

Todos os módulos do contador de números herdarão os estilos desse módulo.

Você também pode estender estilos de opções de design específicas (ou grupos de opções). Por exemplo, digamos que você tenha adicionado uma borda a um dos seus Módulos de Contador de Números e o que estender esses estilos de borda aos outros módulos na sua linha. Basta clicar com o botão direito do mouse no grupo de opções de estilos de borda e selecionar “Estender estilos de borda”.

No modal Estender estilos, selecione para estender os estilos de borda para todos os contadores de números em toda a linha.

Isso estenderá os estilos de linha para todos os módulos do contador de números nessa linha.

# 12 Arrastar e soltar upload de arquivo

Com o recurso Arrastar e soltar upload de arquivo , você pode arrastar e soltar arquivos do seu computador diretamente no construtor de backend. O Divi detecta os tipos de arquivos que você está enviando e os transforma automaticamente em vários módulos diferentes, ou os aplica à página de maneiras criativas.

Por exemplo, você pode arrastar várias imagens para o Divi Builder para criar automaticamente uma galeria de imagens na parte inferior de sua página. Basta destacar as imagens desejadas no seu computador e, em seguida, arrastá-las para o construtor. É isso aí. Divi faz o resto!

Confira algumas outras maneiras legais de usar o recurso de upload de arquivos arrastar e soltar para aumentar a produtividade .

# 13 Conteúdo dinâmico

O Conteúdo Dinâmico permite transformar qualquer módulo Divi em um elemento dinâmico que extrai seu conteúdo dinâmico do banco de dados via post meta, campos personalizados e muito mais.

Por exemplo, você pode usar facilmente conteúdo dinâmico para exibir o título da página no cabeçalho principal do seu layout Divi. Basta abrir o modal de configurações de texto e clicar no ícone de conteúdo dinâmico que aparece ao passar o mouse sobre a caixa de conteúdo. Em seguida, selecione “título da página” na lista de opções de conteúdo dinâmico disponíveis.

Crie seus próprios campos personalizados.

Em seguida, adicione esse campo personalizado como conteúdo dinâmico ao layout da página.

# 14 Opções de focalização

As opções de focalização também estão disponíveis no novo construtor de backend do Divi. Você pode implantar uma opção de foco em um elemento específico clicando no ícone suspenso que aparece ao passar o mouse sobre uma opção dentro das configurações modais.

Digamos que você queira alterar a cor do plano de fundo de um módulo de texto ao passar o mouse, implantar as opções de foco para a cor do plano de fundo e alterar a cor do plano de fundo na guia suspenso. Agora, quando você vai e volta entre as guias padrão e de foco, você pode ver o efeito de foco em tempo real.

# 15 Bulk Editing e Multiselect

A edição em massa e o Multiselect permitem que você selecione vários elementos (módulos, linhas, seções) em sua página para editá-los todos de uma vez.

Digamos que você queira adicionar uma borda a todos os módulos de texto em uma linha específica. Simplesmente segure a tecla de controle (ou comando) e clique em todos os módulos que você deseja editar em massa. Em seguida, adicione o estilo de borda desejado nas configurações de elemento modal. Tudo o que você alterar será aplicado a todos os módulos de uma só vez.

A edição em massa e o multiselect funcionam em todos os modos de visualização, incluindo o modo de visualização de estrutura de arame. Isso é útil para mover ou copiar e colar vários elementos de uma só vez para reorganizar seu layout com muito mais facilidade. Simplesmente segure o controle / comando e selecione os itens do seu layout e então você pode arrastá-los para onde quiser. Ou uma vez, selecionado, clique com o botão direito do mouse em um dos elementos para usar copiar e colar.

Pensamentos finais

O novo Divi Backend Builder herdou alguns recursos incríveis com a nova atualização do Divi 3.18. Portanto, se você estiver usando o construtor de backend Classic para construir seus sites ou se precisar apenas ser lembrado do poder do Divi, espero que este artigo lance alguma luz sobre tudo o que você pode estar perdendo. Sinta-se à vontade para compartilhar alguns de seus recursos favoritos conosco!

Estou ansioso para ler seus comentários.

Aproveite!