Para um determinado tipo de negócio, como um serviço de edição de fotos, adicionar uma comparação de imagens pode ser uma ferramenta útil para descrever seu serviço. Você pode adicionar a comparação de imagens à página inicial, página de destino ou qualquer página onde fale sobre o serviço que oferece.
Elementor na verdade, não oferece nenhum widget ou funcionalidade para adicionar comparação de imagens, mas você pode obtê-lo usando um complemento. Existem módulos adicionais Elementor que oferecem um widget para adicionar uma comparação de imagens. Três dos quais são: Complementos essenciais, Complementos felizese JetElements.
Neste artigo, mostraremos como adicionar comparação de imagens em Elementor usando JetElements.
JetElements em si é um complemento premium para o Elementor desenvolvido pela Crocoblock. Faz parte da família JetPlugins. O complemento vem com um widget chamado Comparação de imagens que você pode usar para adicionar comparação de imagens à página Elementor.
Como adicionar comparação de imagens no Elementor
Certifique-se de ter o complemento JetElements instalado e ativado antes de começar. Se você é novo no Elementor, pode ler nosso artigo anterior para aprender como usar o Elementor.
Vamos adicionar diretamente o widget Comparação de imagens neste artigo.
Antes de começar, você pode preparar duas imagens para comparar. Por exemplo, você pode preparar uma imagem anterior e uma imagem posterior. Quando estiver pronto, basta arrastar o widget Comparação de imagens na caixa de edição Elementor.
Por padrão, o widget JetElements Image Compare cria duas comparações de imagens. Se você precisar apenas criar uma comparação de imagens (duas imagens para comparar), poderá excluir uma das comparações de imagens existentes.
Leia também: Elementor: Como adicionar animação Lottie
Para adicionar a imagem antes e depois, abra a comparação de imagens existente (clicando nela) para editar a conteúdo. Basta selecionar a imagem anterior no antes da foto seção e selecione a imagem depois na depois da foto seção. Como você pode ver, você também pode substituir os rótulos de cada seção.
Quando a seleção de imagens estiver concluída, você poderá abrir o bloco Configurações para definir a posição inicial do separador. Se você quiser adicionar mais de uma comparação de imagens, você pode definir as configurações do carrossel.
Em seguida, você pode estilizar sua comparação de imagens alternando para a guia Style. Você pode abrir cinco blocos de ajuste para estilizar sua comparação de imagens. Mas se você precisar apenas adicionar uma comparação de imagens, basta abrir os três primeiros blocos.
- geral
Você pode abrir este bloco para definir o preenchimento, sombra da caixa, tipo de borda e raio da borda.
- O rótulo
Você pode abrir este bloco para estilizar os rótulos de comparação (o rótulo “antes” e “depois”). Você pode definir coisas como alinhamento horizontal, alinhamento vertical, cor do texto, cor de fundo, tipografia (família da fonte, estilo da fonte, tamanho da fonte), etc…
- Handle
Você pode abrir este bloco para estilizar a alça. Você pode definir coisas como alinhamento de alça, largura de controle, altura de controle, cor de alça (seja estado normal ou em foco) e assim por diante.
Se você adicionar mais de uma comparação de imagens, também poderá abrir os blocos Setas Carrossel et Carrossel de pontos para estilizar setas e pontos de navegação.
É isso. Você pode clicar no botão PUBLICAR / ATUALIZAR para publicar /edit sua página assim que terminar de editá-la.
Obtenha o Elementor Pro agora !!!
Conclusão
Aqui ! É isso neste artigo que mostra como adicionar comparação de imagens no Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
