A versão 3.33 do Elementor traz grandes melhorias e novidades que focam na melhoria da flexibilidade, do controle e da eficiência na criação e utilização da ferramenta. Confira os detalhes!
Antes de começarmos, é importante lembrar que o Editar V4 ainda está em fase de desenvolvimento e, por isso, ainda não é recomendável utilizá-lo nos seus principais projetos, pois ainda pode sofrer com instabilidades ou bugs.
Editor V4: Mais Flexibilidade e Controle
Nesta versão, o Editor V4 ganha ainda mais funcionalidades baseadas em uma arquitetura orientada para classes CSS, nos prometendo maior escalabilidade, que possibilita trabalhar desde projetos menores até grandes marcas globais com flexibilidade e maior controle.
Gerenciador de Variáveis
O primeiro recurso de destaque é o Gerenciador de Variáveis. Ele centraliza a visualização, criação e o gerenciamento de variáveis de design para o tamanho, o tipo e a cor das fonts. O que facilita o trabalho principalmente para quem trabalha com design systems.
Confira um resumo dos benefícios;
- Gestão centralizada e estruturada das variáveis;
- Criação rápida de novas variáveis;
- Atualizações em tempo real no canvas;
- Validação automática para nomes únicos e corretos;
- Barra de pesquisa para encontrar variáveis facilmente.
CSS Personalizado com Controle Total (Pro)
O segundo destaque fica por conta do CSS personalizado, que foi completamente concebido para o Editor V4 e está disponível apenas na versão Pro.
CSS isolado por elemento
O código CSS pode ser isolado por elemento. O que ajuda na hora de estilizar somente o necessário sem mexer ocasionalmente em outros componentes do site.
Classes Globais
Se preferir, pode utilizar as classes globais, diferente do isolado, ao alterar um estilo, você modifica todos os elementos da mesma classe no site. Aqui, a consistência e uniformidade são o foco.
Estilização específica de estados
Animações para os estados hover, focus e active, podem ser configuradas diretamente no painel
Editor Dev Friendly
Funcionalidades de autocompletar, comentário e campo de código expansível ajudam na rotina de desenvolvimento.
Controle de responsividade
Defina propriedades e regras de responsividade para diferentes tamanhos de dispositivos, Desktop, Tablet e Mobile.
Visualize as alterações em tempo real
Veja as alterações instantaneamente no canvas e certifique-se de que está tudo certo antes de publicá-las.
Novo Controle de Modo de Mesclagem (Blend Mode)
Para adicionar ainda mais flexibilidade no design, essa versão também permite que você defina como os elementos interagem visualmente com o que está atrás deles usando modos de mesclagem CSS nativos.
O que possibilita a criação de efeitos visuais alternativos como sobreposições, contrastes e texturas.
Atualizações na Barra Superior
Um último detalhe que podemos comentar é uma sútil mudança na barra superior de navegação, mas que causa bastante impacto para quem utiliza o editor constantemente,
Ela foi redesenhada para facilitar a navegação, tornando-a mais rápida e intuitiva.
Como principais mudanças podemos citar:
- As Configurações do site agora ficam agrupadas no menu Elementor (E).
- As Notas e a Central de Ajuda também foram agrupadas no menu Elementor.
- As Configurações da página e histórico estão no lado esquerdo da barra superior.
- o Item de Estrutura da página foi reposicionado próximo ao de Pré-visualização.
Conclusão e experiência
Definitivamente esta versão do Elementor traz novas possibilidades de criação e design. Por outro lado, cada passo do editor V4 que nos leva a evolução é um passo a mais que precisamos dar também em direção à curva de aprendizado. O que pode causar uma certa dificuldade na utilização dos atomic widgets.
Falando em atomic widgets, um ponto interessante de se comentar é que o V4 está se aproximando da usabilidade do Figma, trabalhando também com a adição de atributos e, em alguns momentos, até alguns ícones de propriedades me trouxeram a impressão de similaridade, despertando a sensação de tendência para os editores amigáveis do tipo drag-and-drop.