5 dicas para navegar na interface do Divi 5 como um profissional

Com o lançamento do Public Alpha do Divi 5, os usuários agora podem explorar as poderosas melhorias que estão surgindo nos bastidores do Elegant Themes. Divi 5 é uma atualização importante, oferecendo uma base renovada para maior velocidade, estabilidade e escalabilidade. Quer você seja um profissional experiente ou esteja apenas começando no Divi, este novo Visual Builder permitirá que você crie sites com mais eficiência, com menos etapas e tempos de carregamento mais rápidos. Envolva-se com esta nova atualização do Elegant Themes e navegue como um profissional.

Descubra mais sobre o Divi 5 Public Alpha e como fazer o download.

Baixar Divi 5 Alfa Público

5 dicas para dominar a interface Divi 5

Navegar na interface do Divi 5 pode ser emocionante para usuários novos e experientes. A interface atualizada oferece uma nova abordagem para a construção de sites com design moderno e funcionalidade aprimorada. Aqui estão algumas dicas que compartilhamos para ajudá-lo a se familiarizar com a interface:

1. Acesse elementos rapidamente por meio da visualização de camadas

O painel de camadas não é novo no Divi 5. Temos a visualização de camadas no Divi 4. No entanto, ele recebeu uma interface de usuário aprimorada com acesso mais fácil na barra lateral esquerda. É também um dos principais painéis encaixáveis ​​que você deseja manter à vista durante suas construções. É uma virada de jogo no gerenciamento de layouts complexos, especialmente quando os elementos se sobrepõem ou se tornam difíceis de selecionar. Também é útil pesquisar/filtrar por diferentes elementos que você procura, encontrando rapidamente vários elementos em páginas grandes.

Abra o painel Camadas à esquerda da tela para visualizar todos os elementos do layout, independentemente de sua posição ou visibilidade na tela. Você pode selecionar qualquer camada diretamente a partir daí, mesmo quando oculta atrás de outro módulo ou seção.

Dica profissional

Sempre mantenha a visualização das camadas visível como um dos painéis encaixados. É muito útil e conveniente para ser ignorado.

Exemplo prático

Digamos que você queira atualizar todos os botões de CTA da sua página com novo conteúdo. No Divi 5, você pode usar o painel de camadas para pesquisar o elemento (botão) desejado e exibi-los todos. Então, com um único clique em cada botão, você pode atualizar as configurações no painel de configurações, que aparecerá imediatamente. Esse fluxo de trabalho contínuo é uma virada de jogo para lidar com designs complexos e com muito conteúdo.

2. Acelere as edições com painéis encaixáveis ​​e um clique

Os painéis encaixáveis ​​​​do Divi 5 e os recursos de edição com um clique permitem que você mantenha vários painéis de configurações abertos enquanto faz alterações rápidas com um único clique. Isso permite ajustes rápidos e uma navegação mais suave pelos módulos, sem abrir e fechar repetidamente os painéis.

Dica profissional

Mantenha os painéis relevantes encaixados na lateral da tela para acesso rápido, especialmente ao trabalhar em várias seções ou módulos simultaneamente. Isso reduz o número de cliques necessários e acelera seu fluxo de trabalho.

Exemplo prático

Continuando com o exemplo da nossa primeira dica, você precisa ajustar o texto dos botões de todos os módulos. Ao encaixar as camadas e os painéis de botões no mesmo lado, você pode alternar facilmente entre eles para edições rápidas com um clique, evitando o incômodo de reabrir os painéis sempre que precisar fazer ajustes ou mover o cursor de um extremidade da tela para a outra. Esta configuração é ideal ao trabalhar em múltiplas seções que precisam de atualizações.

3. Simplifique a navegação com a localização atual do painel de configurações

A localização atual no painel de configurações é um recurso exclusivo do Divi 5. A localização atual permite que os usuários naveguem para qualquer um dos elementos pais de um elemento filho no Divi diretamente do painel de configurações. Um elemento pai é basicamente o contêiner do elemento filho. Aqui está uma ilustração simples da estrutura pai e filho dos elementos Divi.

Até mesmo os módulos têm elementos filhos (como um acordeão ou formulário de contato), e as seções têm “Página” como pai, o que torna a localização atual ainda mais útil. Anteriormente, no Divi 4, você teria que confiar na visualização de camadas ou tentar encontrar o elemento pai clicando dentro do construtor.

Quando você abre as configurações de qualquer módulo no Divi 5, uma trilha de navegação aparece na parte superior do painel de configurações. Esta trilha mostra sua localização atual e permite voltar ao elemento pai com um único clique. Abaixo está um exemplo do que é a localização atual quando um item de acordeão é selecionado. Você verá “Acordeão” como um dos links no menu de navegação porque é o pai imediato do item de acordeão selecionado.

A localização atual é especialmente útil ao projetar formulários de contato ou CTAs que usam vários elementos pais para criar um único design. Depois de projetar o módulo, você pode facilmente pular para o elemento de coluna ou linha para ajustar o design de acordo.

Exemplo prático

Digamos que você esteja criando um formulário de contato e queira incorporar a linha e a seção em seu design. Você pode fazer suas alterações e usar a localização atual para acessar os elementos pais necessários - tudo sem nunca fechar o painel.

4. Design responsivo sem esforço com dimensionamento de tela

No Divi 5, você pode dimensionar a tela em tempo real para simular a aparência do seu design em dispositivos móveis, tablets e desktops. Esta ferramenta permite redimensionar visualmente a tela sem sair do construtor, o que significa que você não precisa mais mudar para o modo de visualização ou redimensionar a janela do navegador manualmente. O construtor do Divi 5 se adapta automaticamente conforme você dimensiona a tela para exibir as alterações para aquele tamanho específico do dispositivo, facilitando o ajuste fino de designs responsivos.

Dica profissional

Use o Canvas Scaling para garantir que seus designs móveis tenham uma aparência perfeita. Ajuste o preenchimento, as fontes e o alinhamento na visualização móvel para que seu layout funcione perfeitamente em telas menores.

Exemplo prático

Depois de fazer ajustes no texto, agora você precisa garantir que o design fique bem no celular. Ao usar o Canvas Scaling, você pode ajustar facilmente o layout para visualizações em dispositivos móveis e tablets sem alternar entre diferentes dispositivos ou telas.

Para saber mais, veja como dominar a edição responsiva no Divi 5.

5. Simplificando diferentes camadas de interação em diferentes modos de visualização

Divi 5 agiliza o gerenciamento de efeitos de foco, elementos fixos e design responsivo. No Divi 4, você tinha que habilitar essas configurações para cada elemento manualmente e frequentemente alternar entre diferentes painéis, tornando demorada a aplicação e visualização dos efeitos. O Divi 5 simplifica esse processo ao disponibilizar camadas de interação diretamente no mesmo painel de configurações, reduzindo o número de etapas e cliques necessários para ajustar seu design.

Como funciona

No Divi 5, as opções de design para estados flutuantes, fixos e responsivos são incorporadas diretamente no painel de configurações de cada módulo. Você pode alternar rapidamente entre os estados padrão, flutuante e fixo clicando nas guias nas configurações do módulo. Essa interface intuitiva permite aplicar efeitos de design, como animações flutuantes ou comportamentos fixos, sem navegar por diferentes menus ou codificá-los manualmente.

Dica profissional

Alterne entre os modos flutuante e fixo para visualizar como seus elementos de design se comportarão entre dispositivos e durante interações. O Divi 5 torna mais fácil ver os efeitos em tempo real e ajustá-los rapidamente. Anteriormente, no Divi 4, você tinha que aplicar as alterações a cada recurso respectivo, o que tornava isso demorado.

Exemplo prático

Adicionamos um botão para consulta em nossa página inicial. Com as camadas de interação simplificadas do Divi 5, você pode alternar entre configurações responsivas, pairar e estados fixos diretamente no mesmo painel de configurações, garantindo que cada elemento se comporte perfeitamente em todos os dispositivos. Começaremos alterando a cor de fundo do botão da nossa página inicial e verificando seu comportamento nas configurações responsivas.

Continuaremos entrando no modo suspenso, alterando a cor de fundo do botão e revertendo para o modo desktop após fazer as alterações. Isso mostrará que o botão na versão desktop terá sua cor original (preta) antes que o cursor seja movido em sua direção.

Por último, ativaremos o modo sticky antes de verificar o comportamento do botão no modo sticky. Isso permite que você aplique e visualize rapidamente os efeitos enquanto rola em diferentes visualizações, sem sair do construtor ou ativar configurações separadas.

Saiba mais sobre como o Divi 5 simplifica os processos de design aqui.

Navegando no Divi 5 como um profissional

Ao dominar esses recursos essenciais da interface do Divi 5, você pode navegar em seus designs com mais eficiência e evitar frustrações comuns que podem retardar seu fluxo de trabalho. Seja usando o painel de camadas para gerenciar elementos sobrepostos ou aproveitando as vantagens da edição com um clique e do dimensionamento da tela para um design responsivo, essas dicas ajudarão você a aproveitar ao máximo o Divi 5.

Comece a experimentar essas ferramentas no Divi 5 Public Alpha e leve seus designs para o próximo nível. Para obter mais dicas e recursos sobre como começar a usar o Divi 5, confira nossa visão geral completa da interface e outras postagens do blog.

Baixar Divi 5 Alfa Público