Revisão do Oxygen Builder V 4.0 - Design, Recursos e Fluxo de Trabalho

Publicados: 2022-04-10

O Oxygen Builder 4.0 está aqui, e neste artigo vamos dar uma olhada em todos os novos recursos, mudanças e fluxo de trabalho que vêm com a nova versão. Oxygen é um construtor de páginas WordPress bem conhecido e amado que substitui completamente o sistema de temas.

construtor de oxigênio-4-0-1024x576-1

Nos últimos dois anos, ele está na versão três e viu grandes adições, como grade CSS, uma adição completa do MetaBox e otimizações de velocidade adicionais, tanto no front-end quanto no back-end. As pessoas adoram porque ele tem uma tonelada de poder em uma interface de usuário relativamente bem projetada, bem, também vou colocar um código incrivelmente limpo para um site de carregamento rápido que é ótimo para Core Web Vitals.

Os recursos principais com a quarta iteração do Oxygen Builder são os seguintes:

Interface de usuário totalmente nova

Há uma coleção crescente de plug-ins de terceiros que redesenham ou reformulam o construtor de back-end do Oxygen. A equipe por trás da ferramenta deve ter percebido que sua interface do usuário estava ficando um pouco desatualizada, então esse é o recurso principal desta versão.

imagem-3-1024x591-1
Interface do Construtor Oxygen 4.0

Na captura de tela acima, podemos ver que o painel "adicionar elementos" foi recriado para mostrar mais elementos em uma tela, os pontos de interrupção foram adicionados à sua própria posição na barra superior e outras funções da barra superior, como desfazer redo, alternância de folha de estilo e muito mais foram movidos.

Aqui está o que foi feito:

  • Aprimoramento: os valores herdados de pontos de interrupção maiores agora são mostrados nos campos do Painel de Propriedades (#3665)
  • Aprimoramento: Os modais agora animam usando a mesma animação AOS com a qual animam (#3550)
  • Aprimoramento: agora você pode fazer upload de capturas de tela personalizadas para páginas de conjunto de design, blocos e seções individuais (#3574)
  • Aprimoramento: agora você pode clicar duas vezes no nome de um elemento no Painel de Propriedades para renomeá-lo (#3547)

Uma ótima maneira de manter a estrutura do seu site fácil de navegar.

  • Aprimoramento: Adicionado indicação visual para saber se um campo do Painel de Propriedades é estilizado por meio de classe ou id (#3548)
  • Aprimoramento: campo de pesquisa adicionado para o painel de seletores (#4037)

Se você tiver uma tonelada de classes CSS gerenciadas no Oxygen, isso permitirá que você as encontre mais rapidamente e faça alterações globais no site.

  • Aprimoramento: atalhos de teclado adicionados para duplicar, salvar, excluir, copiar, colar (#3951)

Este é um aprimoramento incrivelmente bem-vindo que permite duplicar, salvar, excluir, copiar e colar elementos em uma instância do construtor. Embora eles não tenham adicionado um menu do botão direito do mouse, eles disseram o estágio para isso e adicionaram muitos dos recursos por meio do atalho de teclado que você esperaria em um menu.

Você encontrará outras várias alterações na interface do usuário em todo o construtor, como a maneira como as margens e os preenchimentos são tratados. Agora é muito mais como uma experiência de ferramentas de desenvolvimento:

screenshot-2022-01-11-at-12-43-25-add-new-post-isotropic-wordpress

Você também notará que as cores reais dentro do construtor mudaram e agora estão muito focadas em vários tons de cinza.

screenshot-2022-01-11-at-12-43-37-add-new-post-isotropic-wordpress

No geral, descobrimos que a nova interface do usuário e os aprimoramentos adicionais de facilidade de uso tornam a ferramenta uma maneira mais eficiente e fácil de criar sites que a versão 3.0. Todas essas mudanças são super bem-vindas e, para alguns usuários, pode até remover a necessidade de comprar o Hydrogen Pack (já que agora existem atalhos de teclado).

imagem-2-1024x884-1
Nova animação de carregamento

Corrigir IDs duplicados do repetidor

Uma correção incrivelmente bem-vinda - os repetidores não duplicam mais os IDs nas postagens individuais que eles exibem. Este foi um dos maiores problemas com o 3.0 e causou problemas de SEO, além de simplesmente não seguir as melhores práticas.

screenshot-2022-01-11-at-12-44-00-add-new-post-isotropic-wordpress

Aqui está a marcação real - você pode ver que cada ID tem um número depois, permitindo que você estilize células específicas e remova IDs repetidos, o que não é bom para SEO.

Suporte PHP8

Este foi um pedido massivo no grupo do Facebook, e a ferramenta agora suporta a versão oito do PHP. A versão 3.0 simplesmente não funcionaria ou carregaria nesta nova versão do PHP. Agora podemos utilizar os aprimoramentos de velocidade que isso traz.

Veja por que o PHP 8 é ótimo:

php-benchmarks-2021_wp-5-6-1024x759-1
Muito mais rápido

Melhorias na velocidade de carregamento do construtor

Há também alguns aprimoramentos que afetam diretamente a velocidade de carregamento do construtor, como a remoção do carregamento de SVGs duplicados e uma atualização para o AngularJS 1.8.2, a versão mais recente suportada (#4031).

Leia: Teste de tempo de carregamento do back-end do Oxygen Builder

Nova maneira de armazenar dados

Anteriormente, as páginas e modelos de oxigênio eram armazenados no back-end como códigos curtos. Isso era ótimo para a segurança, mas não era a maneira mais eficiente de fazer as coisas. Com a versão 4.0, as novas páginas são armazenadas como JSON, o que é muito mais rápido e eficiente. Há compatibilidade com versões anteriores com sites criados com 3.0, portanto, não há necessidade de se preocupar com alterações significativas.

imagem-4-1024x373-1
Shortcodes antigos vs novo formato JSON

Após a atualização, se você renunciar aos códigos curtos, eles serão convertidos no novo formato JSON.

imagem-1024x90-1

Elementos e alterações adicionais do WooCommerce

Isso vem junto com a nova versão do construtor de núcleo. Oxigênio WooCommerce 2.0. Existem dois novos elementos, incluindo um minicarrinho e um componente de vendas cruzadas/vendas adicionais.

captura de tela-2022-01-04-at-5-33-41-pm-1024x948-1
Novo mini carrinho

A adição de várias novas condições específicas do Woo é ótima e permitirá que você personalize ainda mais seu site, dependendo de situações específicas de comércio eletrônico.

Além disso, se você estiver familiarizado com temas, agora você pode substituir os modelos do WooCommerce de uma pasta pré-designada, em vez de ter que fazer um plug-in personalizado e redirecionar para onde o Connors procurará essas substituições de modelo.

Notas sobre o oxigênio V4.0

Há algumas coisas que queríamos abordar nesta postagem do blog. A primeira é que as versões alfa e beta nunca devem ser usadas em sites de produção porque algo provavelmente vai quebrar. Você deve esperar até que o RC (ou release candidate), ou a versão real 4.0 seja lançada. Vemos uma tonelada de postagens no Facebook dizendo que seu site foi quebrado após a atualização para a versão 4.0, e isso é esperado se você estivesse usando alfa ou beta.

Porque a interface do usuário mudou, assim como o CSS, o que significa que as coisas parecerão quebradas se você não limpar o cache do navegador e regenerar o CSS - então definitivamente faça isso!

A palavra final de cautela é que plug-ins de terceiros podem quebrar devido a esta nova versão. Eles fazem as coisas um pouco diferente em termos de adição de componentes e estilos CSS, mas esperamos que a maioria dos desenvolvedores terceirizados de construtores de oxigênio tenham seus plug-ins compatíveis quando o RC for lançado.

Leitura adicional:

  • Uma revisão detalhada do construtor de oxigênio (perspectiva da agência)
  • Como migramos os sites do Oxygen Builder
  • Divi Builder VS Oxygen Builder - Quem ganha em 2021?

Conclusão

A quarta versão do Oxygen Builder traz consigo uma experiência de usuário muito necessária e aprimoramentos de interface, como atalho de teclado para copiar e colar elementos, um novo design mais fácil, suporte a PHP8 e melhorias no WooCommerce. Esta versão deve preparar o terreno para ferramentas nativas adicionais, como um menu de clique com o botão direito do mouse e outras melhorias de velocidade de back-end.

Inscreva-se e compartilhe
Se você gostou deste conteúdo, assine nosso resumo mensal de notícias do WordPress, inspiração de sites, ofertas exclusivas e artigos interessantes.
Cancele a inscrição a qualquer momento. Não fazemos spam e nunca venderemos ou compartilharemos seu e-mail.