10 principais diferenças entre Divi 4 e Divi 5 (alfa público)

Publicados: 2024-10-21

Com a introdução do Divi 5 Public Alpha, o tema Divi passou por uma transformação significativa. Embora o Divi 4 tenha uma base sólida, ele enfrentou desafios de desempenho, dívida técnica e uma estrutura desatualizada. O Divi 5 aborda essas limitações com uma revisão completa à medida que os padrões da web evoluem, oferecendo melhorias substanciais em desempenho, flexibilidade e experiência do usuário.

A nova estrutura do Divi 5 melhora a velocidade e o desempenho do Visual Builder, tornando-o mais escalonável e preparado para o futuro. Construído para resistir ao teste do tempo, o Divi 5 oferece viabilidade a longo prazo e garante que seus sites possam se adaptar facilmente aos desenvolvimentos futuros do WordPress. Quer você seja freelancer, agência web ou proprietário de uma pequena empresa, o Divi 5 oferece uma plataforma mais rápida e poderosa que torna a construção de sites mais fácil e rápida do que nunca.

Baixar Divi 5 Alfa Público

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

Baixar Divi 5 Alfa Público

Índice
  • 1Por que a transição para o Divi 5 é importante
  • 2 10 principais diferenças entre Divi 4 e Divi 5
    • 2.1 1. Reescrita da Arquitetura Central
    • 2.2 2. Chega de códigos de acesso
    • 2.3 3. Desempenho e velocidade aprimorados no Visual Builder
    • 2.4 4. Edição com um clique
    • 2.5 5. Extensibilidade para desenvolvedores
    • 2.6 6. Ferramentas de Design Responsivo
    • 2.7 7. Encaixe e gerenciamento do painel
    • 2.8 8. Breadcrumbs para fácil navegação
    • 2.9 9. Modo claro e escuro
    • 2.10 10. Gerenciamento de predefinições
  • 3 Divi 5 ajuda a projetar e construir sites com mais rapidez

Por que a transição para o Divi 5 é importante

Página inicial do Divi 5 Public Alpha, outubro de 2024

O lançamento do Divi 5 Public Alpha marca um momento crucial na evolução do tema Divi. À medida que a tecnologia da web continua a avançar, a necessidade de um tema mais flexível, escalável e de alto desempenho cresceu significativamente. O Divi 4 estabeleceu uma base sólida para milhões de sites, mas estava começando a mostrar sinais de limitações técnicas, como desempenho mais lento e complexidade de código devido a anos de adições de recursos.

Divi 5 não é apenas uma atualização – é uma reescrita completa da estrutura do tema. Ao construir o Divi 5 do zero, a equipe da Elegant Themes entregou uma solução que aborda as limitações do passado e ao mesmo tempo posiciona o Divi para avanços futuros. Essa revisão significa tempos de carregamento mais rápidos, experiências de edição mais suaves e uma plataforma configurada para o futuro.

Se você criou sites com o Divi 4, a transição para o Divi 5 desbloqueará novas possibilidades e uma nova interface simplificada. Enquanto estiver na fase Alfa Pública, encorajamos você a baixar o Divi 5, dar uma volta e nos contar sua opinião. Durante esta fase, nem todos os recursos estão disponíveis, mas você terá uma boa ideia do que vem com o Divi.

Baixar Divi 5 Alfa Público

10 principais diferenças entre Divi 4 e Divi 5

Divi 5 introduz mudanças significativas que melhoram o desempenho, a escalabilidade e a experiência geral de web design. Vamos mergulhar nas diferenças mais críticas que diferenciam o Divi 5 de seu antecessor, o Divi 4.

1. Reescrita da arquitetura principal

Divisão 4

Com o tempo, a arquitetura do Divi 4 cresceu e se adaptou à medida que novos recursos foram adicionados. Embora isso tenha permitido a adição de muitos novos recursos, também levou a uma base de código mais complexa. À medida que a estrutura do Divi 4 se expandia, sua estrutura original ficou sobrecarregada por dívidas técnicas – código antigo e ineficiente que precisava ser mantido para compatibilidade com versões anteriores. Essa configuração complexa às vezes resultava em desempenho mais lento, especialmente no Visual Builder. O processamento de shortcode (mais sobre isso em breve) adicionou outra camada, causando atrasos na renderização do conteúdo e tempos de carregamento de página mais longos.

Desafios

  • Desenvolvimento recurso por recurso, levando a dívida técnica
  • Desempenho mais lento, pois o Builder e o front-end tiveram que processar códigos de acesso e carregar grandes quantidades de código desnecessário
  • Maior complexidade do código devido à evolução da base de código

Divisão 5

Com o lançamento do Divi 5 Public Alpha, toda a estrutura foi reescrita do zero. Em vez de corrigir código antigo, o Divi foi reconstruído com uma estrutura modular moderna. Cada módulo (texto, galeria de imagens, etc.) agora funciona de forma independente, o que significa que apenas os componentes necessários são carregados quando você trabalha no Visual Builder ou renderiza uma página da web. Ao incorporar esta abordagem modular, a velocidade e a eficiência são melhoradas, facilitando a adição de recursos no futuro, sem desacelerar o sistema. A base de código mais limpa do Divi 5 não apenas garante melhor desempenho agora, mas também fornece uma base escalonável para desenvolvimento no futuro.

Benefícios

  • Uma experiência do Visual Builder muito mais rápida e responsiva
  • Código mais limpo e de fácil manutenção
  • Desempenho de front-end simplificado com tempos de carregamento de página mais rápidos
  • Maior escalabilidade e flexibilidade para atualizações e recursos futuros

O núcleo reconstruído do Divi 5 está no centro de suas melhorias de desempenho, permitindo que os usuários trabalhem com mais eficiência e garantindo que os sites construídos com Divi sejam sólidos e preparados para o futuro.

2. Chega de códigos de acesso

Divisão 4

No Divi 4, os shortcodes eram a espinha dorsal do sistema, responsáveis ​​por representar cada módulo e suas configurações. Quando você adiciona um módulo à página, o Divi gera um shortcode associado, que o WordPress posteriormente interpreta e converte em conteúdo. Por exemplo, ao desabilitar o tema Divi, o backend da sua página web teria uma série de códigos de acesso que continham o conteúdo da página:

Códigos de acesso Divi 4

Embora esse método tenha sido geralmente eficaz, ele adicionou uma sobrecarga significativa durante a renderização da página. Quanto mais conteúdo você adiciona, mais códigos de acesso são criados, retardando o processo de carregamento e exibição da página da web.

Desafios

  • A análise de shortcode adicionou etapas extras ao processamento de conteúdo, aumentando o tempo de carregamento da página.
  • À medida que o tamanho da página crescia, também crescia o número de códigos de acesso, o que poderia afetar o desempenho.
  • Se houver um conflito ou problema com os códigos de acesso, isso poderá danificar o layout da página.
  • Desativar o tema Divi deixou uma bagunça, dificultando a decifração do conteúdo da página

Divisão 5

O Divi 5 elimina completamente os códigos de acesso, passando para uma estrutura mais modular. Isso significa que em vez de gerar e analisar códigos de acesso, o Divi 5 trabalha diretamente com os componentes da página, carregando-os apenas quando necessário. Isso aumenta o desempenho e alinha o Divi com o futuro do WordPress e seu editor de blocos. O Divi 5 aumenta o desempenho atual ao fazer essa transição e garante compatibilidade com versões futuras do WordPress.

Benefícios

  • Renderização de página mais rápida, pois não há necessidade de processar códigos de acesso.
  • Conteúdo mais estável e confiável, reduzindo as chances de problemas de layout ou quebra de conteúdo.
  • Compatibilidade preparada para o futuro com atualizações do WordPress e seu ecossistema baseado em blocos.

Ao remover os códigos de acesso, o Divi 5 oferece uma plataforma mais rápida e estável, melhorando a experiência de construção e a velocidade da página no front-end.

3. Desempenho e velocidade aprimorados no Visual Builder

Divisão 4

Como já mostramos, o acúmulo de dívida técnica e o uso de códigos de acesso afetaram a velocidade do Visual Builder e o desempenho do front-end dos sites Divi. Além disso, a forma como o Divi 4 gerenciava CSS e JavaScript desacelerou ainda mais essas interações. Como resultado, o Visual Builder pode ficar lento, especialmente em sites maiores e mais complexos.

Cada mudança no Builder exigia o reprocessamento de códigos de acesso e recursos adicionais para carregar e renderizar a página. Isso também se aplica ao front-end, onde arquivos CSS e JavaScript maiores e conteúdo com muitos códigos curtos causam tempos de carregamento de página mais longos, afetando negativamente a experiência do usuário e o SEO.

Desafios

  • Um Visual Builder mais lento, especialmente em sites maiores.
  • Tempos de carregamento de página mais longos devido a arquivos CSS e JavaScript pesados.
  • O processamento de códigos de acesso exigia etapas extras, reduzindo o desempenho geral.

Divisão 5

A estrutura reconstruída do Divi 5 coloca a velocidade e o desempenho em primeiro lugar. A nova estrutura carrega componentes conforme necessário, em vez de recarregar a página inteira. Além disso, o tamanho dos arquivos CSS e JavaScript foi drasticamente reduzido com a eliminação de estilos e scripts não utilizados, ajudando a reduzir o tempo de carregamento da página. Ao fazer alterações no Visual Builder do Divi 5, os elementos são renderizados novamente apenas específicos para a seção em que você está trabalhando, proporcionando uma experiência mais rápida e responsiva.

Benefícios:

  • Atraso reduzido e interações mais rápidas ao adicionar módulos ou fazer alterações no design.
  • Arquivos CSS e JavaScript mais enxutos levam a tempos de carregamento mais rápidos no front-end, especialmente para sites complexos.
  • Experiência do usuário aprimorada, taxa de rejeição reduzida e classificações de SEO aprimoradas.

Com essas melhorias de desempenho, o Divi 5 oferece um salto significativo em relação ao Divi 4 em relação à velocidade de carregamento da página e à experiência de criação de páginas da web.

4. Edição com um clique

Divisão 4

No Divi 4, fazer alterações em um módulo exigia navegar pelos ícones e opções nas configurações do módulo. Embora esse método funcionasse, muitas vezes tornava o processo de design mais lento, pois os usuários tinham que localizar o ícone de configurações e alternar entre diferentes guias de configurações para fazer ajustes. Essa etapa extra adicionou tempo, especialmente ao trabalhar rapidamente ou fazer várias edições em vários módulos.

Desafios

  • Clicar em pequenos ícones dentro dos módulos para acessar as configurações demorava mais.
  • Processo de edição mais lento, principalmente ao fazer alterações frequentes em vários módulos.
  • Uma interface menos intuitiva para usuários novos ou menos experientes.

Divisão 5

Com o Divi 5, o processo de edição é completamente reestruturado com a introdução da edição com um clique. Em vez de procurar pequenos ícones ou navegar por várias guias para fazer alterações, os usuários podem clicar em qualquer lugar diretamente no módulo que desejam editar. A partir daí, as configurações do módulo são reveladas instantaneamente, tornando todo o processo mais intuitivo. Seja revisando texto, adicionando imagens ou ajustando cores, a edição com um clique permite alterações mais rápidas e um fluxo de trabalho mais intuitivo.

Benefícios

  • Acesso instantâneo às configurações do módulo com um único clique.
  • Uma interface mais intuitiva, adequada tanto para desenvolvedores iniciantes quanto experientes.
  • Maior produtividade devido ao tempo gasto em edições de design.

Com edição com um clique, o Divi 5 oferece uma experiência Visual Builder mais fácil de usar, permitindo aos usuários criar sites Divi mais rápido do que nunca.

5. Extensibilidade para desenvolvedores

Divisão 4

No Divi 4, os desenvolvedores terceirizados tinham acesso limitado à API do Divi, o que tornava as personalizações e integrações mais desafiadoras. Embora fosse possível criar módulos personalizados ou adicionar funcionalidades, os desenvolvedores tiveram que contornar a estrutura existente. Isso limitou o que os desenvolvedores poderiam fazer com o Divi, dificultando a implementação de módulos personalizados avançados ou integrações perfeitas com plug-ins e ferramentas de terceiros.

Desafios

  • O acesso limitado à API restringia o que os desenvolvedores poderiam construir ou personalizar.
  • Muitas vezes eram necessárias soluções alternativas mais complexas para criar módulos ou funcionalidades personalizadas.
  • Menos oportunidades para integrações profundas com ferramentas de terceiros ou sistemas externos.

Divisão 5

O mais novo lançamento do Divi melhora drasticamente a capacidade de extensão da plataforma graças a uma API mais flexível e robusta. Os desenvolvedores terceirizados podem acessar as mesmas ferramentas e recursos que a equipe de desenvolvimento da Divi usa, permitindo uma personalização muito mais profunda e integrações mais sofisticadas. Esta abordagem aberta permitirá que os desenvolvedores criem módulos, recursos e integrações personalizados que funcionem dentro do ecossistema Divi. Seja adicionando novas funcionalidades, integrando-se com sistemas de terceiros ou criando fluxos de trabalho personalizados, a estrutura amigável ao desenvolvedor do Divi 5 torna mais fácil personalizar o Divi para atender às suas necessidades.

Benefícios

  • Divi 5 oferece maior flexibilidade para construir soluções mais complexas.
  • Uma abordagem simplificada para integrações de terceiros permite uma conectividade mais suave com ferramentas e serviços externos.
  • O acesso às mesmas ferramentas de desenvolvedor que a equipe Divi incentiva a inovação e a criação de plug-ins e recursos de cortadores de grama.

A extensibilidade aprimorada do Divi 5 abre um mundo de possibilidades para desenvolvedores, tornando-o uma plataforma mais versátil e adaptável para desenvolvedores.

6. Ferramentas de design responsivo

Divisão 4

A criação de designs responsivos no Divi 4 exigiu várias etapas para ajustar os designs para telas menores. Se você quisesse ajustar seu layout para dispositivos móveis, teria que pesquisar várias configurações e guias. Embora esse processo fosse funcional, ele adicionou etapas extras ao seu fluxo de trabalho, tornando a edição responsiva mais lenta e menos intuitiva.

Desafios

  • São necessárias etapas extras para acessar opções de edição responsivas.
  • Ajustar os estados fixos e de foco envolveu a navegação por várias configurações.
  • Fluxo de trabalho mais lento para fazer ajustes responsivos em diferentes tamanhos de tela.

Divisão 5

No Divi 5, você obterá um processo de edição responsivo mais simplificado, tornando as ferramentas mais acessíveis e intuitivas. As opções de design responsivo e os estados de foco e aderência não são diretamente integrados ao painel de configurações, eliminando as etapas extras necessárias no Divi 4. Os usuários podem alternar rapidamente entre diferentes visualizações de dispositivos (desktop, tablet e celular) e fazer ajustes em tempo real em todos os dispositivos. vários módulos simultaneamente. Esteja você ajustando o preenchimento e a margem, ajustando o tamanho da fonte ou adicionando movimentos flutuantes aos botões, o Divi 5 oferece uma maneira mais rápida e eficiente de projetar de forma responsiva.

Benefícios

  • As ferramentas de edição responsivas são mais acessíveis no painel de configurações principal.
  • É mais fácil acessar configurações específicas do dispositivo para alterações de design mais rápidas.
  • Uma maneira mais fácil de gerenciar configurações instantâneas e fixas.

7. Encaixe e gerenciamento de painel

Divisão 4

No Divi 4, os usuários tiveram que mover os modais para evitar o bloqueio da visualização do design. Isso resultou em uma visão obstruída das configurações de design de um módulo e do painel de camadas, dificultando a multitarefa ou a navegação rápida por diferentes módulos ou elementos de design. Isso também gerou mais confusão, especialmente ao trabalhar em projetos complexos que exigiam ajustes constantes em diversas configurações.

Desafios

  • Os usuários só podiam editar um painel por vez, limitando a multitarefa.
  • Mover e reposicionar frequentemente o modal de configurações retardava o fluxo de trabalho.
  • Aumento da confusão na tela à medida que os usuários navegavam manualmente pelas diferentes configurações.

Divisão 5

O Divi 5 apresenta encaixe multipainel, melhorando significativamente a experiência geral do usuário. Este sistema permite aos usuários abrir vários painéis simultaneamente e navegar facilmente entre eles. Isso torna muito mais fácil realizar multitarefas, pois os usuários podem alternar entre configurações de módulo, camadas, configurações de página e muito mais sem fechar ou reabrir painéis. Com o Divi 5, você pode personalizar o espaço de trabalho para que funcione melhor de acordo com seu estilo de design e, ao mesmo tempo, reduzir a desordem.

Benefícios

  • Os usuários podem manter vários painéis abertos para fácil acesso e edição mais rápida.
  • Alterne entre painéis e arraste-os para seções com guias, aumentando a produtividade e acelerando o processo de design.
  • O sistema de painéis acoplados elimina a necessidade de mover painéis constantemente, criando um espaço de trabalho mais limpo e organizado.

Com o encaixe multipainel do Divi 5, os usuários podem gerenciar as configurações com mais eficiência, permitindo iterações de design mais rápidas e uma experiência de edição mais suave e intuitiva.

8. Breadcrumbs para fácil navegação

Divisão 4

No Divi 4, não havia navegação estrutural integrada para ajudar os usuários a acompanhar onde estavam trabalhando em um layout. A falta de navegação rápida dificultou a movimentação entre as seções, especialmente ao trabalhar em layouts grandes e complexos. Como resultado, os usuários tinham que rolar manualmente, abrir a visualização do wireframe ou utilizar o painel de camadas para encontrar elementos específicos, retardando o processo de design.

Desafios

  • Nenhuma navegação estrutural significava uma navegação mais lenta pelas estruturas da página.
  • Os usuários dependiam da rolagem manual ou da troca de visualizações para encontrar e editar seções.
  • Fluxo de trabalho menos eficiente ao gerenciar layouts complexos com múltiplas camadas.

Divisão 5

O Divi 5 introduz a navegação estrutural, tornando muito mais fácil navegar por estruturas de páginas complicadas. Este novo recurso exibe um caminho claro da seção atual, linha e hierarquia de módulos, permitindo que os usuários alternem rapidamente entre os diferentes elementos do design. Seja editando módulos aninhados ou alternando entre seções, a localização atual melhora a experiência geral do usuário, fornecendo uma visão geral mais clara de sua localização na página.

Benefícios

  • Os usuários podem mover-se rapidamente entre seções, linhas e módulos com um único clique.
  • A localização atual reduz a necessidade de rolagem manual ou abertura de diferentes visualizações, acelerando o processo de design.
  • Uma abordagem mais clara e organizada para navegar em layouts complexos, tornando a edição de páginas mais intuitiva.

Com a navegação estrutural no Divi 5, os usuários podem navegar pelos layouts de página com mais eficiência, melhorando a velocidade e a facilidade de trabalhar em designs maiores e mais complexos.

9. Modo claro e escuro

Divisão 4

O Divi 4 não incluiu uma opção de modo escuro, limitando sua interface a um modo claro padrão. Embora funcional, essa interface a tornou menos adaptável para usuários que preferiam trabalhar em ambientes com pouca luz ou para aqueles que preferiam o modo escuro para reduzir o cansaço visual durante sessões prolongadas de design. A ausência de um modo escuro fez com que o Divi parecesse menos personalizável em sua interface do que ferramentas de software mais modernas que oferecem opções de modo claro e escuro.

Interface Divi 4

Desafios

  • Sem modo escuro, limitando a adaptabilidade da interface do usuário.
  • Maior cansaço visual para usuários que trabalham em condições de pouca luz.
  • Uma experiência de UI menos flexível em geral, especialmente para aqueles que preferem temas escuros.

Divisão 5

Divi 5 apresenta opções de modo claro e escuro, proporcionando aos usuários maior flexibilidade e controle sobre seu ambiente de trabalho. Os usuários agora podem alternar entre os modos claro e escuro com base na preferência pessoal ou na iluminação ambiental, garantindo uma experiência de design mais confortável e personalizável. Seja trabalhando durante o dia ou tarde da noite, a nova opção de modo escuro ajuda a reduzir o cansaço visual e melhora a usabilidade, tornando o Divi 5 mais adaptável às diferentes necessidades do usuário.

Benefícios

  • Os modos claro e escuro permitem que os usuários personalizem seu ambiente de trabalho para atender a diferentes preferências.
  • O modo escuro ajuda a reduzir o cansaço visual, especialmente durante longas sessões de edição em ambientes com pouca luz.
  • Uma experiência de usuário mais moderna e adaptável em diversas condições de trabalho.

10. Gerenciamento de predefinições

Divisão 4

No Divi 4, o gerenciamento de predefinições era um processo manual. Ao aplicar predefinições ou fazer ajustes, os usuários frequentemente enfrentavam atrasos devido à estrutura do Divi, que exigia que o sistema recarregasse e processasse as alterações. Isso não apenas tornou a edição das predefinições mais lenta, mas também afetou a eficiência geral do fluxo de trabalho, especialmente ao gerenciar vários elementos com estilos consistentes em uma página ou em todo o site.

Predefinições Divi 4

Desafios

  • Tempos de resposta mais lentos ao editar ou aplicar predefinições.
  • É necessário mais esforço manual para aplicar predefinições em vários módulos.
  • Fluxo de trabalho menos eficiente, especialmente ao trabalhar em grandes projetos.

Divisão 5

Divi 5 apresenta um sistema de gerenciamento predefinido mais rápido e eficiente com a ajuda de uma nova estrutura baseada em classes. Este sistema permite aos usuários criar e gerenciar predefinições mais rapidamente, aplicando estilos consistentes em módulos com apenas alguns cliques. Predefinições integradas e classes reutilizáveis ​​facilitam o processo de design, permitindo alterações globais e reduzindo a necessidade de edições repetitivas. Este novo sistema baseado em classes garante que quaisquer atualizações em uma predefinição sejam aplicadas instantaneamente em todos os elementos, economizando tempo e proporcionando uma experiência de design mais coesa.

Predefinições Divi 5

Benefícios

  • O sistema baseado em classes permite aplicações e atualizações mais rápidas de predefinições em vários módulos.
  • Predefinições prontas para acelerar o processo de design.
  • Os designers podem manter a consistência do site com apenas alguns cliques.

Com o sistema de gerenciamento de predefinições aprimorado do Divi 5, os usuários se beneficiam de edição mais rápida, consistência de design aprimorada e fluxo de trabalho aprimorado, facilitando a implementação e manutenção de estilos coesos em seu site.

Divi 5 ajuda a projetar e construir sites com mais rapidez

Divi 5 é mais do que apenas uma atualização incremental – representa uma transformação completa da plataforma. Ao abordar as deficiências do Divi 4 e eliminar problemas como dívida técnica e uma estrutura curta baseada em código, o Divi 5 foi projetado para oferecer uma experiência mais rápida e responsiva para designers e desenvolvedores. Com uma estrutura modular mais parecida com o editor Gutenberg baseado em blocos do WordPress, a estrutura é muito mais escalável e adaptável a mudanças futuras com o WordPress.

Baixar Divi 5 Alfa Público