Elementor 2.5.0: Novos Posicionamentos, Colunas e Textos

O Elementor 2.5.0 chegou com posicionamento relativo e absoluto de elementos, widgets inline, Flexbox em colunas e otimização de desempenho do Editor.

Conheça o Layout Flexível (Flexible Layout)

O Elementor é um editor baseado em grade, o que significa que todos os layouts são construídos de acordo com uma determinada grade ou estrutura horizontal e vertical. Até agora, você poderia arrastar widgets diferentes e encaixá-los, de acordo com a coluna e a seção para os quais você os arrastava.

Agora o Elementor 2.5.0 está expandindo nossas opções de posicionamento e oferecendo vários métodos avançados de posicionamento, especialmente para os entusiastas de websites com visual moderno e flexível:

Componentes inline no Elementor 2.5.0

Sempre sonhamos em colocar 2 botões lado a lado na mesma coluna? Ou duas imagens lado a lado sem ter que criar colunas específicas. Agora podemos !

Antes, cada widget do Elementor ocupava 100% da coluna. Agora, você pode definir o widget como “Inline“, o que significa que o widget ocupará a largura mínima que ele possui.

Isso permite, por exemplo, colocar um ícone ao lado de um título, tudo dentro da mesma coluna.

Além disso, você também tem a opção de definir qualquer largura personalizada, para que o widget se encaixe exatamente no lugar que você quiser.

Depois de escolher Inline Width, você também terá a opção de definir um alinhamento vertical específico por widget.

Importante: Para definir vários widgets inline, cada widget deve ser definido como inline separadamente.

Componentes com Posicionamento Absoluto no Elementor 2.5.0

Selecione qualquer widget, escolha “Posição: Absoluta” e você poderá arrastar o widget para qualquer local da página, independentemente da grade. Aponte para qualquer lugar na tela e simplesmente arraste o widget para lá.

Importante: O posicionamento absoluto não é o método recomendado para a criação de layouts de página da web. Dito isto, é útil em muitas situações onde você deseja posicionar os vários elementos da página com mais liberdade mas não deve ser usado aleatoriamente.

Não gosta de arrastar? Você também pode definir a posição absoluta usando as escalas X e Y. No painel, você encontrará vários controles adicionais: Orientação Horizontal e Orientação Vertical. Isso define o ponto de referência para a posição absoluta. Saiba mais sobre isso aqui.

O posicionamento absoluto também pode ser definido separadamente para dispositivos móveis, tablets e computadores.

Componentes com Posicionamento Fixo no Elementor 2.5.0

Você gosta de usar posicionamento Sticky para widgets? Então você vai adorar esta nova opção que virá nativa no Elementor 2.5.0.

Defina seu widget para ter uma posição fixa e colocá-lo em uma posição personalizada. Agora, seu elemento rolará ao lado da rolagem da tela de seus usuários no seu website.

Confuso entre Sticky e Fixo?

Sticky é um efeito de rolagem relativo à seção em que ele é colocado. A posição fixa, no entanto, é relativa à janela de visualização do usuário.

Alinhamento Vertical e Horizontal da Coluna do Elementor 2.5.0

Você já construiu uma seção de serviços com diferentes colunas de altura que não estão alinhadas corretamente?

Agora adicionamos várias opções para alinhamento vertical e horizontal dentro de colunas. Chega de CSS para ajustar isso! É um recurso que esperei por muito tempo.

Sobre o Alinhamento Vertical do Elementor 2.5.0

O alinhamento vertical já existia nas versões anteriores do Elementor, mas agora temos ainda mais opções de alinhamento baseado no Flexbox:

  • Topo: Os itens são alinhados no topo da seção;
  • Meio: Os itens são alinhados no meio da seção;
  • Inferior: Os itens são alinhados no rodapé da seção;
  • Espaço Entre Widgets: Os widgets começam e terminam na borda da coluna, com espaço igual entre eles
  • Espaço ao redor: Os widgets são igualmente espaçados e as bordas têm metade do tamanho do espaço entre os widgets.
  • Espaço uniforme:- Widgets têm espaço igual entre, antes e depois deles.

Alinhamento Horizontal do Elementor 2.5.0

Esse novo recurso amplia a capacidade do posicionamento in-line e permite alinhar horizontalmente os widgets inline colocados na mesma linha.

  • Começo: Os itens são alinhados no começo do bloco;
  • Centro: Os itens são alinhados no centro do bloco;
  • Fim: Os itens são alinhados no fim do bloco;
  • Espaço entre Widgets: — O mesmo que o controle vertical;
  • Espaço ao redor: — O mesmo que o controle vertical;
  • Espaço uniformemente: — igual ao controle vertical;

Até então não havia muito controle sobre o alinhamento horizontal, apenas direita, esquerda, centro e justificado.

Novidades no Modo Responsivo do Elementor 2.5.0

No Elementor 2.5.0 foram alguns aprimoramentos responsivos amplamente solicitados:

Mostrar / ocultar colunas por dispositivo: Agora você pode definir seu comportamento responsivo não apenas para seções, mas também para colunas. Escolha em qual dispositivo mostrar cada uma de suas colunas e obtenha mais flexibilidade de design usando essa opção.

Suporte responsivo para animação de entrada: Precisa de uma animação de entrada de slide na área de trabalho, mas uma animação diferente no celular? Sem problemas com o Elementor 2.5.0!

Basta escolher sua animação de entrada por dispositivo e personalizar totalmente as animações do seu site.

Observe que o controle de animação de entrada foi movido para um novo local, que costumava ser “Efeitos de rolagem” e agora é chamado de “Efeitos de movimento”. Esta nova seção contém a animação de entrada e controles Sticky.

Layout aprimorado do editor de textos

Quer dividir seu widget do Text Editor em colunas? No Elementor v2.5.0 você poderá definir colunas para o texto dentro do widget. Um sonho realizado!

Além disso, você pode especificar as colunas por dispositivo e definir seu padding entre as colunas. Apenas mais um pequeno, mas significativo, ajuste neste layout!

Mais melhorias do Elementor 2.5.0

  • A equipe de desenvolvedores e de infraestrutura trabalhou muito para melhorar o desempenho. O tempo de carregamento do editor foi reduzido em pelo menos 50%.
  • Lembrar última guia usada: Quando você edita a guia de um widget no painel e, em seguida, alterna para um widget diferente, o editor se lembrará da guia usada por último. Então, quando você editar novamente o widget, o painel exibirá a última guia, exatamente onde você a deixou;
  • Agora você pode adicionar sombra de texto para as legendas do widget de imagem.

O Elementor 2.5.0 é uma das mais aguardadas atualizações do plugin que mudou o modo como construímos websites no WordPress.

Um abraço!