Elementor 3.0: Quais são os novos recursos?

Blair2004 Tutoriais do WordPress Nov 30, 2020

Uma nova atualização principal do Elementor foi lançada. Mudamos da versão 2.x para Versão 3.0. Esta nova versão vem com uma nova maneira de criar sites usando WordPress e Elementor. Tentaremos converter esses novos recursos.

Quais são as principais adições ao Elementor 3.0?

Elementor 3.0 vem com 3 adições principais que são: Design System Features, New Theme Builder e melhorias significativas de desempenho.

Características do sistema de design

Você já se perguntou como as grandes empresas se saem para ter um desempenho tão bom, não importa a plataforma em que estejam? Tudo o que eles criam parece consistente e tem o mesmo design. Isso é possível graças ao que se denomina "Sistema de Design". De acordo com UnxDesign.cc, o Sistema de Design é:

A única fonte de verdade que agrupa todos os elementos que permitirão às equipes projetar, realizar e desenvolver um produto. Portanto, um Sistema de Design não é uma entrega, mas um conjunto de entregas. Vai evoluir constantemente com o produto, as ferramentas e as novas tecnologias.

UX Collective

Implementar um sistema de design, manter toda a sua equipe consistente em torno de uma linguagem de design e também revolucionar a forma como sua equipe trabalha e garantir um fluxo de trabalho mais rápido.

Os recursos do sistema de design do Elementor 3.0 incluem:

  • Cores Globais
  • Novo painel de configurações do site
  • Fontes globais

Vamos ver em profundidade como isso o ajudará a construir melhores sites profissionais.

Cores Globais

Elementor 3.0 adiciona uma nova maneira de trabalhar com cores de sites. Esse novo método é denominado Cores globais.

As Cores Globais ajudam você a mudar a cor de um local e ter essa cor atualizada em todos os lugares em que é usada.

Você começará a escolher as cores globais básicas para o seu site. Em seguida, vá para qualquer estilo de cor no Elementor e defina-o como uma das quatro cores. Observe que você pode adicionar quantas cores personalizadas na Lista global.

É agora que as variáveis ​​CSS entram. Volte para Global Colors e altere uma das cores. O esquema de cores de todo o seu site muda de acordo com a nova cor global. Você já experimentou algo tão mais fácil?

Você também será capaz de projetar uma Cor Global diferente de dentro da entrada de controle ou criar uma nova Cor Global, tudo usando o mesmo seletor de cores dentro da entrada de controle.

Configurações do site

Criar as primeiras configurações de design para um site consome muito tempo. Você terá que fazer malabarismos entre o código do tema, Customizer, functions.php. Razões suficientes para justificar suas dores de cabeça.

As novas configurações do site mostram várias ferramentas de configuração. Dessa forma, você continuará realizando todas essas tarefas em um único lugar.

Para começar, em qualquer página que você editar com Elementor, no painel do lado esquerdo, clique no ícone superior esquerdo. Isso fará com que você alterne para o painel Configurações globais.

Nesse painel de configurações globais, você encontrará:

  • Layout: Para definir as configurações de layout padrão do Elementor, como largura de conteúdo padrão ou layout de página padrão.
  • Identidade do site: personalize suas identidades entre sites, como logotipo, título, slogan e até mesmo Favicon.
  • Estilo do tema: personalize os elementos HTML não relacionados ao Elementor (geralmente definidos pelo tema) para tipografia, botões e campos de formulário.
  • Lightbox: defina o estilo padrão dos Lightboxes do Element ou
  • Cores e fontes globais: permitem configurar as cores e fontes globais que se aplicam ao seu site.

Fontes globais

As cores e a tipografia fazem parte dos componentes de construção de qualquer website. Usando a mesma lógica do recurso Cores globais, este é um novo método de trabalhar com os estilos de texto do seu site.

Com as fontes globais, todas as configurações de tipografia podem ser aplicadas globalmente. Agora você pode definir todas as configurações de tipografia do seu site globalmente, incluindo família da fonte, tamanho e escala da fonte, espessura da fonte, transformação da fonte, estilo da fonte, decoração da fonte, altura da linha, espaçamento entre letras e até mesmo configurações responsivas. Você também poderá definir essas configurações para cada widget que contém um texto e personalizar suas próprias fontes globais.

Com uma tipografia projetada corretamente, você poderá aplicar essas alterações globalmente.

Todo o site visualizado e organizado em um só lugar

Embora o conhecido Theme Builder tenha se tornado o líder do setor em termos de uma visão geral completa do design do site, esta nova IU vai ainda mais longe. O novo Theme Builder agora oferece uma visão geral de um site inteiro de uma forma muito intuitiva.

Esse Theme Builder fornece uma visão geral do site, incluindo todas as partes do site: cabeçalho, rodapé, modelo de página global, modelo de postagem global e muito mais. Cada parte do site pode ser visualizada, tornando a tarefa de projetar um site completo muito mais fácil.

Melhorias de desempenho

Enquanto um aplicativo cresce, é óbvio que o desenvolvedor deve se preocupar com o desempenho. As atualizações feitas no Elementor 3.0 são feitas para garantir uma boa infraestrutura de código que resultou em melhorias de desempenho notáveis.

Tem havido muita limpeza de elemento DOM, o que torna a renderização do Elementor mais rápida. Isso definitivamente deve melhorar as classificações de velocidade da página e a experiência geral dos usuários em seu site.

Concretamente, o que mudou em termos de velocidade de página?

O Elementor 3.0 fornece melhorias significativas para os processos de renderização do lado do servidor e para a maneira como o Elementor renderiza valores CSS dinâmicos. Isso permite que você incorpore elementos e valores dinâmicos em todo o seu site. Por exemplo, você pode criar um modelo para as postagens do site e decidir que deseja exibir a imagem em destaque de cada postagem como plano de fundo atrás do título da postagem.

Em segundo plano, quando Elementor prepara uma postagem para ser enviada ao navegador, ele analisa a postagem em busca de valores dinâmicos, recupera-os e, se eles incluírem algum valor CSS, ele imprime esse CSS.

Com o Elementor 3.0, o tempo gasto neste processo foi substancialmente reduzido. Graças aos valores dinâmicos que são armazenados para cada uma de suas postagens. Uma vez armazenada essa lista, sempre que alguém visita a postagem, o Elementor vai direto para essa lista, tornando o processo mais rápido. Os valores dinâmicos afetados por essa otimização incluem imagens de fundo, cores e muito mais. Essa melhoria traz uma redução notável das cargas do servidor.

Resumo da atualização do Elementor 3.0

Como mencionamos acima, esta versão vem com guloseimas interessantes que devem realmente impactar seu trabalho do dia-a-dia. Nós atravessamos :

Os recursos do sistema de design que ajudam você a trabalhar de forma mais consistente e eficiente.

O novo Theme Builder é uma ferramenta visual poderosa para gerenciar todas as partes do seu site a partir de um único lugar.

Melhorias de desempenho para uma melhor experiência do usuário.

Elementor 3.0 certamente o levará ao topo como um criador profissional de web. Se ainda não o fez, atualize agora para Elementor Pro. Você também deve considerar a leitura de nossa postagem explicando por que Elementor é certamente o melhor construtor de páginas gratuito no WordPress.