Elementor Before After Image Slider: Widget de comparação gratuito
Comparação de Imagens é um widget gratuito de Master Addons que empilha uma imagem antes e uma depois em um quadro com uma alça entre eles Os visitantes arrastam ou deslizam a alça para revelar a mudança Adicione uma etiqueta em cada lado, escolha Horizontal (esquerda e direita) ou Vertical (superior e inferior), defina onde a alça começa e estilize a alça, etiquetas e sobreposição Nem o Elementor livre nem o Elementor Pro têm um controle deslizante antes e depois, portanto, esse widget preenche essa lacuna no Elementor livre.
Como adicionar um controle deslizante antes e depois no elementor
Você precisa do Elementor e do plugin gratuito Master Addons do WordPress.org.
- Verifique se a comparação de imagens está ativada em Complementos mestres, widgets.
- No editor Elementor, procure por Comparação Imagem e arraste-o para a página.
- Na guia Antes escolha a primeira imagem e rótulo e faça o mesmo na guia Depois.
- Em Configurações, defina a Proporção Visível e escolha Horizontal ou Vertical.
- Mantenha o Move Handle no Mouse Drag/Swipe para telefones ou use uma opção Pro em páginas focadas na área de trabalho.
- Estile a alça e as etiquetas na guia Estilo e, em seguida, teste o controle deslizante em um telefone.
Para dicas e exemplos de design, leia o guia deslizante antes e depois. Cada configuração está listada no Configurações de widgets de comparação de imagens.
Arraste e deslize antes do controle deslizante
Carregar o Antes e Depois imagens, cada uma com sua própria Resolução de Etiquetas e Imagens. Em Configurações, Proporção visível (%) define onde a alça começa, Orientação é Horizontal (o padrão) ou Vertical e Sobreposição mostra ou esconde os rótulos. Mover alça é Arrastar/Deslizar do Rato no 'plugin' gratuito O Master Addons Pro adiciona o Movimento do Rato, onde a pega segue o cursor, e o Click do Rato.
- Arraste e deslize o trabalho em telas de desktop e touch.
- Inicie a alça descentralizada para destacar o resultado.
- Use imagens com as mesmas dimensões de pixel para que os dois lados se alinhem.
Sobreposição personalizável e etiquetas transparentes
Ligar Sobreposição para mostrar as etiquetas Antes e Depois nas imagens A secção de estilo Sobreposição tem fundos Normal e Hover A Etiqueta a seção estiliza cada lado separadamente com cor, tipografia, borda, raio de borda, margem e preenchimento, para que você possa alterar “Antes de” e “Depois de” para “Old” e “New” ou quaisquer outras palavras.
- Texto de etiqueta personalizado em qualquer idioma.
- Estilos separados para os rótulos antes e depois.
- Um fundo de sobreposição diferente no hover.
Estilo profissional de alça e contêiner
O Manusear a seção define a cor e o tamanho do guidão, a largura e a altura do guidão e a cor do ícone, a borda e o raio da borda para Normal e Hover. Estilo Layout adiciona uma borda, preenchimento e margem ao redor de todo o controle deslizante Border Radius e Box Shadow no contêiner são opções Master Addons Pro.
- Combine a cor da alça com sua marca.
- Uma barra fina com uma caixa de alça redonda para um visual limpo.
- Cantos arredondados e uma sombra no contêiner com Pro.
Comparação de imagens: Free vs Pro
Elementor não tem widget antes e depois em seu plugin gratuito ou Pro. Aqui está o que o widget gratuito Master Addons inclui e o que o Pro adiciona.
| Característica | Grátis | Master Addons Pro |
|---|---|---|
| Imagens antes e depois com etiquetas | Sim | Sim |
| Orientação horizontal e vertical | Sim | Sim |
| Ponto de partida da Relação Visível | Sim | Sim |
| Mouse Arrastar/Deslizar alça | Sim | Sim |
| Alças Mouse Move e Mouse Click | Não | Sim |
| Manuseie, rotule e sobreponha o estilo | Sim | Sim |
| Raio de borda do contêiner e sombra de caixa | Não | Sim |
Para a maioria dos controles deslizantes antes e depois a versão gratuita é suficiente O Pro faz sentido quando você quer que a alça siga o cursor ou precisa de cantos arredondados e uma sombra sem CSS personalizado Para fixar notas em uma imagem em vez disso, veja Hotspot de imagem (Pro).
Perguntas frequentes para comparação de imagens
O widget Comparação de Imagens é gratuito?
Sim. O widget é gratuito com arrastar e deslizar, etiquetas, ambas as orientações e estilo de alça Master Addons Pro adiciona alças Mouse Move e Mouse Click e raio de borda do contêiner e sombra de caixa.
Funciona em telefones?
Sim, com o identificador gratuito de Arrastar/Deslizar do Rato Os visitantes deslizam para mover a divisória A opção Pro Mouse Move depende do hover, por isso não funciona em telas sensíveis ao toque.
Elementor tem um controle deslizante antes e depois?
Não. Nem o Elementor nem o Elementor Pro gratuitos incluem uma comparação de imagens ou widget antes e depois, então você precisa de um complemento como este.
Quando devo usar a orientação Vertical?
Use Vertical para imagens altas, como retratos de corpo inteiro, fachadas de edifícios ou capturas de tela longas A imagem anterior fica na parte superior e a imagem posterior abaixo, com uma alça para cima e para baixo.
O uso de duas imagens de alta resolução irá desacelerar minha página?
Pode, se as imagens forem muito grandes Utilize a configuração Resolução de Imagem sabiamente (por exemplo, “Large” em vez de 'Full') e otimize sempre as suas imagens para a web antes de carregar O elemento em si é leve, mas o tamanho do ficheiro de imagem é o principal fator para o desempenho.
Posso comparar mais de duas imagens?
No. Cada widget compara duas imagens Para mais pares, adicione um widget por par ou mostre várias imagens no Carrossel de Imagem.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
