Elementor 3.0: Design System para WordPress

O Elementor 3.0 introduz um Design System completo que agora está incorporado ao Elementor Core.

Para aqueles que não conhecem o termo Design System, o Sistema de criação de sites que agrupa todos os elementos que permitirão que as equipes projetem, realizem e desenvolvam um site.

Você tem todos os componentes de design do site integrados – para que toda a equipe seja sincronizada e o site seja 100% consistente o tempo todo.

Elementor 3.0: Design System para WordPress

Como funciona o Design System do Elementor 3.0

Como você pode ver ao longo deste artigo, a equipe de desenvolvimento do Elementor fez alterações significativas e adicionou várias telas de configuração que ajudarão você a criar o sistema de design do site, incluindo:

  • Cores globais;
  • Tipografia Global;
  • Configurações globais (incluindo Identidade do site, Configurações do Lightbox e mais);
  • Site Editor (um recurso do Elementor Pro que será introduzido em breve).

Ao contrário de outras versões beta, este beta inclui duas fases. Esta é a primeira fase e a próxima ocorrerá em algumas semanas.

Antes de começar o teste, verifique se você está usando:

  • Elementor Core v3 Beta1
  • Elementor Pro v2.10.3

Configurações Globais do Site com Elementor 3.0

A turma do Elementor promete acabar com a confusão no design do seu site ao oferecer uma nova abordagem de customização de website sem ser pelo Customizer.

Para isso foi adicionado um novo painel Configurações, mostrando muitas ferramentas de configuração do site.

Configurações Globais do Site com Elementor 3.0

Dessa forma, você pode ficar dentro da Elementor e ter um local para definir todas as configurações do seu site.

Configurações Globais do Site com Elementor 3.0

Se der certo, vai ser ótimo!

Dentro de qualquer página que você editar com Elementor, vá para o painel esquerdo e clique no ícone superior esquerdo. Você mudará para o painel Configurações globais.

A partir do painel Configurações globais, você pode acessar muitas das novas configurações do seu site que fazem parte do Elementor 3.0, incluindo o logotipo, o Favicon, as configurações da Lightbox e os padrões de layout.

Dentro do painel Configurações globais, você encontrará:

  • Personalize sua identidade entre sites, como logotipo, título, slogan e até Favicon;
  • Cores e tipografia globais;
  • Defina as configurações de layout padrão do Elementor, como largura do conteúdo padrão ou layout da página padrão;
  • Defina todo o estilo padrão das Lightbox do Elementor;
  • Configurações globais que permitem definir opções de estilo padrão para vários elementos, como planos de fundo, títulos, botões, imagens e campos de formulário.
  • E muito mais …

Gerenciador Global Colors (Cores Globais)

Desde o começo o Elementor oferecia cores padrão como forma de definir a paleta de cores do seu site na Biblioteca de Cores. Porém, no fim das contas, você não tinha controle completo sobre onde cada uma das quatro cores padrão apareceu.

Com o Elementor 3.0 essa regra mudou e todas as cores do seu site foram para um método novo e aprimorado chamado: Global Colors (Cores Globais).

Gerenciador Global Colors (Cores Globais)

O Global Colors usa variáveis ​​CSS para oferecer um fluxo de trabalho mais eficiente.

Você começa escolhendo as quatro cores globais básicas do seu site. Depois, você entra em qualquer estilo de cor no Elementor e o define como uma das quatro cores.

Você também pode adicionar quantas cores personalizadas à Lista Global e nomeá-las como quiser.

Agora a mágica das variáveis ​​CSS entra em ação. Volte para Global Colors e altere uma das cores.

O esquema de cores de todo o site muda de acordo com a nova Global Color.

Você também poderá atribuir uma Cor Global diferente de dentro do controle ou criar uma nova Cor Global, todas usando o mesmo seletor de cores dentro do controle.

Diferenças do Global Colors e o Theme Style

Você está confuso sobre a diferença entre o Global Colors e o Theme Style que foi lançado no início deste ano?

O Theme Style aplica definições de estilo de fallback para tags HTML como <h1>, <body>, <form> e assim por diante. Eles não são específicos do Elementor, mas o mais geral possível.

Essa é a configuração da linha de base do site, que entra em ação apenas como substituto, se nenhuma definição tiver sido definida.

Global Color é outra camada de estilo que fica em cima do estilo do tema.

Ele fornece os blocos de construção para o design do seu site. Use essas Cores Globais nos locais apropriados, e você estará no caminho de ter uma maneira inteligente de gerenciar suas cores e criar seu sistema de design (o mesmo vale para todos os recursos de Estilo Global, incluindo Tipografia Global).

O Theme Style e a Global Color são recursos muito necessários, portanto, preste atenção nos dois.

Você está pensando em oferecer serviços de rebranding e redesign de sites? Esse recurso é perfeito para fazer alterações no esquema de cores de um site sem precisar tocar em nenhum código ou arquivo CSS, tudo em um só lugar no editor.

Gerenciador Global Typography (Tipografia Global)

Cores e tipografia são os alicerces do trabalho de um web designer. Usando a mesma lógica do Global Colors, o Elementor 3.0 criou um método totalmente novo de lidar com os estilos de texto do seu site.

Semelhante às cores padrão, até agora a Elementor oferecia fontes padrão definidas nos bastidores e que não podiam ser designadas para elementos específicos.

Gerenciador Global Typography (Tipografia Global)

Agora será apresentado um novo método: Global Typography (Tipografia Global), novamente usando variáveis CSS para oferecer uma maneira mais inteligente de gerenciar fontes e estilos de texto.

Você pode escolher praticamente todos os atributos para todas as configurações de tipografia do seu site:

  • Família de fontes;
  • Tamanho e escala da fonte;
  • Espessura da fonte;
  • Transformar;
  • Estilo do Texto;
  • Decoração;
  • Altura da linha;
  • Espaçamento entre letras;
  • Configurações para celular.

Você ainda poderá aplicar essas configurações a todos os widgets que contêm texto e personalizar suas próprias fontes globais além da lista básica.

Depois de definir a tipografia do seu site, você poderá fazer alterações que afetam todas as áreas de texto definidas com a Tipografia Global.

Você também pode ver exatamente qual tipografia global foi aplicada.

Isso permitirá que os Web Designers que usam o Elementor possam:

  • Adicione mais cores globais;
  • Ajuste seus nomes e valores;
  • Excluir configurações de tipografia global (exceto os quatro primeiros controles “Tipografia do sistema”);
  • Veja qual tipografia global está associada a cada controle preenchido, sem abrir o popover de tipografia;
  • Modifique as configurações de tipografia em um único local e faça com que isso afete todo o site.

Agora você pode atribuir estilos e cores de fonte a elementos da maneira mais inteligente possível.

Faça isso com qualquer elemento, do botão ao segundo plano de uma coluna, e você está no caminho de implementar seu próprio sistema de design.

Então, se você decidir alterar uma das cores ou configurações de tipografia do seu site, poderá fazê-lo uma vez e saber exatamente quais elementos serão afetados em seu site.

Como instalar o Elementor 3.0 Beta

Se você ainda não ativou o teste beta no Elementor, siga estas etapas:

Veja o Changlog completo do Elementor 3.0 Beta no Github.

Deixe uma resposta