Por padrão, os elementos de uma página se empilham um abaixo do outro. Os controles desta página quebram essa fila: tiram o elemento do fluxo, definem quem fica por cima de quem, recortam a forma e animam a chegada.
Position
Na aba Advanced, a seção Layout traz Position com três valores.
- Default — o elemento ocupa lugar na fila e empurra os seguintes.
- Absolute — o elemento sai da fila e se posiciona em relação ao container que o contém. Os demais elementos passam a ignorá-lo.
- Fixed — o elemento sai da fila e se posiciona em relação à janela, permanecendo no lugar durante a rolagem.
Escolhido Absolute ou Fixed, aparecem Horizontal Orientation e Vertical Orientation, que definem a partir de qual borda o deslocamento é contado, e os campos Offset de cada eixo.
O container que serve de referência precisa ter posição própria. Um container do Elementor já vem preparado para isso, de modo que um elemento absoluto dentro dele se orienta pelas bordas dele, e não pela página inteira.
Demonstração
Os três rótulos acima estão no mesmo container e nenhum deslocou o outro. A orientação de cada um foi contada a partir de uma borda diferente.
Z-Index
Ainda na aba Advanced, o campo Z-Index decide quem fica por cima quando dois elementos ocupam o mesmo espaço. Números maiores ficam à frente. O campo aceita valores negativos, o que joga o elemento para trás do irmão sem z-index declarado.
Três retângulos com z-index 1, 2 e 3. Invertida a ordem dos números, a pilha inverte sem que nada mude de lugar.
Margens negativas
Os campos Margin da aba Advanced aceitam valores negativos. Uma margem superior negativa puxa o elemento para cima do anterior, e é o caminho mais direto para fazer um título montar sobre uma imagem sem recorrer a posicionamento absoluto. A diferença é que o elemento continua no fluxo, e portanto continua empurrando o que vem depois.
Máscara
A seção Mask da aba Advanced recorta o elemento numa forma. Está disponível para qualquer elemento, e não apenas para imagens, porque o controle é registrado na base comum a todos os widgets.
O campo Shape traz vinte formas prontas: mancha, círculo, losango, flor, heptágono, hexágono em duas orientações, octógono, oval em duas orientações, paralelogramo para cada lado, pentágono, cápsula em duas orientações, esboço, trapézio para cima e para baixo, e triângulo.
O campo Image aceita um arquivo próprio no lugar da forma pronta, e Size, Position e Repeat se comportam como os campos equivalentes de um fundo. Numa imagem usada como máscara, o que é opaco fica visível e o que é transparente é recortado.
O mesmo bloco de cor recortado de quatro maneiras. O quarto usa um recorte com borda esmaecida, que é o que acontece quando a máscara é uma imagem com transparência gradual em vez de uma forma sólida.
Animação de entrada
A seção Motion Effects da aba Advanced traz Entrance Animation, que anima o elemento quando ele aparece na tela durante a rolagem. As opções estão agrupadas em Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed e Specials.
Abaixo dela, Animation Duration escolhe entre lento, normal e rápido, e Animation Delay aceita um atraso em milissegundos. Atrasos crescentes aplicados a elementos vizinhos produzem entrada em cascata.
Na mesma seção há Hover Animation, que anima a passagem do cursor sobre o elemento, com efeitos de crescer, encolher, pulsar, balançar e flutuar.
O que exige licença paga
O primeiro controle da seção Motion Effects é um anúncio: os efeitos ligados à rolagem e ao movimento do mouse — deslocamento em velocidade diferente, rotação, transparência progressiva, inclinação que acompanha o cursor — pertencem à versão paga. A animação de entrada e a de passagem descritas acima não pertencem, e funcionam nesta instalação.
Também exige licença paga o campo Sticky, que faz um elemento grudar no topo durante a rolagem.
Ordem de aplicação
Quando os quatro recursos aparecem no mesmo elemento, convém montá-los nesta ordem: primeiro o tamanho, depois a posição, depois a máscara, e a animação por último. A máscara recorta o elemento já dimensionado, e a animação move o resultado inteiro. Definir a animação antes de acertar a posição costuma exigir refazer os deslocamentos.