O redesenho completo do Divi 5 fornece velocidade, desempenho e simplicidade de uso inigualáveis. Com um Visual Builder simplificado e um back-end totalmente reconstruído, construir sites com o Divi 5 é mais rápido e direto do que nunca. O Divi 5 permitirá que você, independentemente do nível de experiência, desenvolva ótimos sites em tempo recorde sem sacrificar tempo ou criatividade.
Venha conferir a nova interface do usuário do Divi 5 durante este período de Alpha Público. Lembre-se de que esta iteração ainda está em desenvolvimento ativo. Embora você possa encontrar certas falhas, os conselhos abaixo permitirão que você maximize sua produtividade enquanto testa e desenvolve com o Divi 5.
10 melhores maneiras de criar um site mais rápido com Divi 5
Desde o lançamento do Divi 5 Public Alpha, muitos ajustes e melhorias foram implementados.
1. Use a edição com um clique
No Divi 4, você deve clicar no ícone de configurações para modificar seções, linhas e módulos. Com o Divi 5, a edição com um clique eliminou tudo isso. O módulo pode ser editado clicando em qualquer lugar nele, o que acelera e reduz a frustração do processo de design.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agoraPor exemplo, para alterar um módulo de texto, basta um único clique em qualquer lugar do módulo para acessar suas configurações instantaneamente.
2. Para realizar ações rápidas, clique com o botão direito
O menu de contexto do botão direito do mouse no Divi 5 oferece um novo atalho valioso para seu processo de design. Qualquer módulo, seção ou linha pode ser clicado com o botão direito para criar um menu de ação rápida com algumas atividades usadas com frequência. Esta ferramenta permite que você conclua operações rapidamente sem abrir vários painéis ou vasculhar opções, seja para copiar estilos de módulo, duplicar configurações ou excluí-las.
Por exemplo, suponha que você criou um botão com estilo único. Usando a opção de ações rápidas, você pode clicar com o botão direito, copiar o estilo do botão e aplicá-lo a todos os módulos de botão nos quais você deseja ter o mesmo estilo.
3. Encaixe vários painéis com guias para várias tarefas
O encaixe multipainel, que permite abrir e controlar muitos painéis simultaneamente, é outro novo recurso fantástico do Divi 5. Você podia visualizar muitos painéis em versões anteriores (camadas + configurações de módulo, por exemplo), mas só podia movê-los pela tela sem obstruir sua visão. Para manter a tela livre de desordem, você pode tabular painéis no Divi 5.
Quando você pode documentar vários painéis lado a lado, é simples modificar vários aspectos do seu design de uma só vez. A interface do Divi 5 permite que você organize os painéis na tela como quiser, criando o espaço de trabalho ideal para suas necessidades. Suponha, por exemplo, que você prefira ter todos os painéis no lado esquerdo da tela. Para criar um espaço de trabalho que seja adequado para você, você pode destacar e deslocar os painéis para a esquerda e, em seguida, tabular outros painéis.
4. Use o Canvas Scaling a seu favor no design responsivo
O Divi 5 oferece uma abordagem completamente nova para a criação de páginas da web responsivas. Graças ao dimensionamento de tela, você pode dimensionar rapidamente seu espaço de trabalho e ver como seu site aparecerá em telas diferentes sem nunca sair do Visual Builder. Você também pode redimensionar rapidamente a tela de design, o que permite alterar o layout, o preenchimento e as margens.
Considere o seguinte cenário: você está trabalhando em um layout móvel e quer alterar a distância entre as partes. Para ajustar a escala da tela, clique e arraste a borda da tela para o tamanho desejado. A partir daí, você pode ajustar rapidamente as margens e o preenchimento para garantir que seu design fique nítido em telas pequenas.
5. Aplique efeitos Hover e Sticky imediatamente
Adicionar efeitos hover e sticky aos seus designs agora é mais fácil do que nunca com o Divi 5. Em iterações anteriores do Divi, os usuários tinham que ir para a aba de design do módulo e inserir as configurações. No entanto, o Divi 5 permite que você aplique esses efeitos diretamente do menu de configurações. Graças a esse método inovador, criar designs dinâmicos e cativantes sem interferir no seu fluxo de trabalho agora é mais simples do que nunca.
O Divi 5 torna fácil e rápido aplicar efeitos de hover aos botões e manter seu cabeçalho no topo da tela enquanto os usuários navegam. Por exemplo, suponha que você queira adicionar uma cor diferente ao hover ao criar uma chamada para ação. Para aplicar as alterações em questão de segundos, escolha o estado hover em um menu suspenso nas configurações.
6. Para uma navegação mais eficaz, use breadcrumbs
Um novo recurso de breadcrumb no Divi 5 torna mais fácil e rápido para os usuários acessarem módulos e configurações. Graças aos breadcrumbs, você pode navegar entre layouts sem se perder. Eles servem como um guia visual que indica sua localização exata dentro das configurações.
Ao trabalhar em uma seção, você não precisa voltar pelos menus ou perder seu lugar. Para agilizar o processo de design, cada breadcrumb oferece um link clicável que permite que você retorne a uma predefinição anterior rapidamente.
7. Copie e cole estilos em todos os módulos para economizar tempo
O Divi 5 simplifica a cópia e colagem de estilos de módulos entre várias partes. Isso economiza tempo e garante consistência em todo o seu site, permitindo que você aplique as mesmas configurações de design rapidamente em vários módulos. O Divi 5 simplifica estilos de qualquer módulo, linha ou seção e, em seguida, os usa em todo o seu design.
Por exemplo, suponha que você queira que todos os botões em uma página da web tenham o mesmo design. Você pode aplicar o estilo clicando com o botão direito para abrir o Quick Actions Menu, copiando o estilo e, em seguida, clicando com o botão direito para colá-lo em todos os botões da página.
8. Ao criar layouts complexos, use a visualização Wireframe
A visualização wireframe no Divi 5 elimina os componentes de design visual de uma página, revelando um modelo de layout claro e descomplicado. Nessa visualização, você pode se concentrar inteiramente na estrutura, livre de distrações visuais como cores e fontes. É benéfico para layouts complexos quando você precisa fazer ajustes estruturais rapidamente.
Com esta versão simplificada, você pode se concentrar em organizar seções, linhas e módulos. A visualização wireframe permite que você gerencie a estrutura de um projeto complexo sem se preocupar com a estética.
9. Use conteúdo de formato longo na visualização de camadas
A Layers View delineia as seções, linhas e módulos da sua página. Isso simplifica a visualização rápida de toda a estrutura do seu layout. Você pode encontrar facilmente uma parte ou módulo específico no painel Layers em vez de navegar pelo Visual Builder.
Qualquer elemento no layout pode ser selecionado e editado imediatamente na Layers View sem a necessidade de clicar nele no Builder. Isso é especialmente útil para peças que estão aninhadas profundamente dentro de outros módulos ou ocultas, como linhas dentro de várias camadas de seções.
10. Esteja aberto para aprender coisas novas
O Divi 5 oferece uma abordagem totalmente diferente para usar o Visual Builder. Há uma curva de aprendizado associada a todas essas atualizações significativas. No começo, é normal se sentir um pouco sobrecarregado, principalmente se você estiver acostumado com iterações anteriores do Divi. A boa notícia é que cada modificação que fizemos no Builder é simples de usar, então se familiarizar com a UI ajudará você a criar sites com o Divi de forma mais rápida e eficaz.
Encerrando
A interface do Divi 5 foi projetada para melhorar a produtividade, mas os usuários devem experimentá-la encaixando vários painéis, usando atalhos de clique com o botão direito e revisitando designs existentes.
O Divi 5 Migrator pode ajudar a ajustar designs. Ele começa com recursos simples, como dimensionamento de tela e ferramentas de efeitos hover e sticky. À medida que você se sentir mais confortável com o Divi 5, você naturalmente incorporará mais recursos ao seu processo de design. Experimente diferentes configurações, brinque com a nova interface e refine técnicas para tornar seu fluxo de trabalho mais suave e eficiente.
