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 Master Addons Pro adiciona um painel de transformação a cada elemento: transladar, 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 pixels, de -1000 para 1000.
- Girar: gire-o no eixo X, Y ou Z, de -180 a 180 graus.
- Escala: aumente ou encolha em cada eixo independentemente, de 0 a 5.
- 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.
- A Master Addons Pro licença, porque Transforms é uma extensão Pro.
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 estão em pixels, 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 A escala Y permanece em seu padrão de 1, a menos que você a altere, então defina ambos para um alargamento uniforme.
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 simples com uma pequena folha de estilo, 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 sob a guia Avançado Ative Transforms habilitados e use o controle Girar ou Escalar; a tela visualiza a mudança ao vivo enquanto você arrasta a seção Transform do próprio Elementor na guia Avançado oferece controles semelhantes gratuitamente.
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 X, Y e Z, escale X e Y, incline X e Y, inverta horizontal e inverta vertical, cada um disponível nos estados normal e de hover. Os controles deslizantes respondem, portanto os valores podem diferir por dispositivo.
A extensão Transforms é gratuita?
No. Transforms é uma extensão Pro em Master Addons Elementor também tem uma seção Transform livre na guia Avançado com controles semelhantes, e a página de extensão Transforms compara os dois.
Embrulhando #
O Transforma extensão entrega-lhe o kit de ferramentas de transformação CSS dentro do painel Elementor: mover, girar, dimensionar, inclinar e inverter 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.
