Os layouts de grade são arrumados, e arrumado pode ficar chato Uma imagem que se inclina para fora de sua coluna, ou um cartão que cresce ligeiramente sob o cursor: pequenas transformações como estas separam uma página projetada de uma empilhada Transforma extensão em Complementos Mestres para Elementor coloca o kit de ferramentas de transformação CSS completo em cada elemento: traduzir, girar, dimensionar, inclinar e inverter, com configurações separadas para estados normais e de pairar.
O que a extensão Transforms faz #
Uma vez habilitado, cada elemento Elementor recebe um Transforma seção sob seu Avançado guia. Virar Transformações Habilitadas para Sim e seis controles aparecem, cada um aplicando uma transformada CSS ao elemento sem tocar no fluxo de layout real:
- Traduzir: mova o elemento ao longo dos eixos X e Y, em porcentagem de seu próprio tamanho.
- Girar: gire-o de qualquer ângulo.
- Escala: aumente ou encolha-o em cada eixo de forma independente.
- Inclinação: incline-o para uma aparência diagonal e dinâmica.
- Flip Horizontal/Flip Vertical: espelhe-o com um clique.
O Normal e Pairar as guias contêm valores separados, para que um elemento possa ficar em repouso e se transformar quando o cursor pousar nele, com uma duração de transição que você controla.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Transforms é uma extensão gratuita, portanto nenhuma licença Pro é necessária.
Como ativar a extensão Transforms #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. Transforms fica no Widgets Animação grupo com crachá Hot, entre Entrada Animação e Revelar. Clique em sua alternância para que fique roxo e depois bata Salvar alterações e aguarde o verde “Configurações salvas com sucesso no aviso de”.
Abra o painel Transformas em um elemento #
Selecione o elemento no editor Elementor, um widget Imagem na demonstração e abra o Avançado guia. Expandir o Transforma seção com o emblema MA roxo e interruptor Transformações Habilitadas para Sim. Os seis controles de transformação aparecem sob as guias Normal e Hover, cada abertura com seu ícone de lápis.
Mova e dimensione o elemento #
Clique no lápis ao lado Traduzir e dois controles deslizantes se abrem: Traduzir X e Traduzir Y. A demonstração empurra a imagem 71 no eixo X, e ela desliza em direção à borda da seção na tela à medida que o controle deslizante se move Os valores são relativos ao próprio tamanho do elemento, e cada eixo tem sua própria configuração responsiva por dispositivo.
O Escala o controle funciona da mesma maneira Definir a Escala X para 1,4 na demonstração amplia a imagem além de sua coluna, sobrepondo o limite da seção para o tipo de enquadramento de fuga que uma grade simples não pode fazer Deixe a Escala Y vazia e segue X, ou defina ambos para alongamento independente.
Gire e Skew trabalhar da mesma maneira Abra o controle, arraste o controle deslizante, ea tela mostra o ângulo como você vai.
Adicione uma transformação de hover #
Mudar para o Pairar tab e os mesmos controles se aplicam apenas enquanto o cursor estiver no elemento, além de dois extras: Virar Horizontal e Vertical Flip torne-se interruptores Sim/Não e a Duração da Transição (ms) o controle deslizante controla a rapidez com que a mudança é animada A demonstração liga o Flip Horizontal com uma transição de 400 ms, de modo que a imagem se espelha suavemente ao passar o mouse e se encaixa quando o cursor sai.
O resultado na página #
Publique e verifique o front-end A imagem fica deslocada e ampliada após sua coluna exatamente como disposto no editor, e pairando ela joga o flip com a facilidade de 400 ms As transformadas são CSS puro, então nada de cargas extras e o layout em torno do elemento nunca reflui.
Uma coisa a lembrar: transformadas são apenas visuais O elemento ainda ocupa seu ponto original no layout, então um elemento fortemente traduzido pode sobrepor seus vizinhos Isso geralmente é o ponto, mas verifique tablet e celular, onde o mesmo deslocamento cobre mais da tela.
Onde os transformados ganham seu lugar #
- Imagens de fuga. Uma foto dimensionada e deslocada além da borda da coluna fornece uma profundidade de seção de herói.
- Hover feedback. Cartões que levantam, inclinam ou crescem ligeiramente sob o cursor são lidos como clicáveis.
- Acentos girados. Emblemas, selos e rótulos ficam mais naturalmente em um ligeiro ângulo.
- Seções distorcidas. Alguns graus de inclinação em uma divisória ou botão quebram a monotonia do retângulo.
- Ativos espelhados. Vire uma seta ou ilustração em vez de exportar uma segunda imagem.
Vídeo Tutorial #
Assista a cada controle em ação, desde habilitar a extensão até o hover flip na página publicada.
Perguntas frequentes #
Como faço para girar ou escalar um elemento no Elementor?
Habilite a extensão Transforms na guia Extensões de complementos mestre, selecione o elemento e abra Transforms na guia Avançado. Ative Transforms habilitados e use o controle Girar ou Escalar; a tela visualiza a alteração ao vivo enquanto você arrasta o controle deslizante.
Posso aplicar uma transformação diferente no hover?
Sim. O painel tem separador Normal e Hover Defina valores de repouso em Normal, paire valores em Hover, e use o controle deslizante Duração de Transição para controlar a rapidez com que o elemento anima entre os dois estados.
As transformações quebram meu layout de página?
No. CSS transforma são apenas visuais, de modo que o elemento mantém seu espaço original no layout e conteúdo circundante nunca reflui Um elemento transformado pode sobrepor vizinhos por design, então visualizar tablet e celular para confirmar os deslocamentos ainda olhar para a direita.
Quais transformadas a extensão inclui?
Traduza X e Y, gire, dimensione X e Y, distorça, vire horizontal e vire vertical, cada um disponível nos estados normal e hover. Cada controle responde, portanto os valores podem diferir por dispositivo.
A extensão Transforms é gratuita?
Sim. Transforma navios com a versão gratuita de Master Addons para Elementor, no grupo Animation Widgets da guia Extensões A página de preços cobre o que os planos Pro adicionam.
Embrulhando #
A extensão Transforms entrega a você o kit de ferramentas de transformação CSS dentro do painel Elementor: mova, gire, dimensione, incline e vire qualquer coisa, com estados de pairar e transições suaves incluídos Comece com uma imagem de fuga ou um elevador de pairar e construa a partir daí Ele emparelha naturalmente com o Extensão Animação Entrada para elementos que chegam em movimento, e a formação completa de Widgets e extensões Master Addons cobre o resto.
