Como fazer um controle deslizante de comparação de imagem no WordPress

Como fazer um controle deslizante de comparação de imagem no WordPress

Etapa 1: Instale e ative os complementos elemento para elementar

Antes da instalação, verifique se o WooCommerce e o Elementor estão ativados no seu painel.

Faça o download do plug -in : visite a página do plug -in do elemento ADDONS e faça o download do plug -in.

Vá para o seu painel WordPress → Plugins → Adicione novo → Upload do plug -in.

Carregue o arquivo baixado e clique em "Instalar agora".

Depois de instalado, clique em "Ativar" para ativar o plug -in.

Para instalar os complementos elemento, assista abaixo do vídeo tutorial de vídeo:

Etapa 2: Crie ou edite uma página com Elementor :

Vá para as páginas> Adicione novo se estiver iniciando fresco ou edite uma página existente ou adicione um controle deslizante a qualquer página, conforme necessário.

Clique em Editar com o Elementor para iniciar o Elementor Page Builder.

Etapa 3: Adicione o widget de comparação de imagem

No editor do Elementor, procure widgets de addons elemento na barra lateral ou pesquise comparação de imagens no painel do widget.

Arraste e solte o widget de comparação de imagens em qualquer lugar da página.

Etapa 4: Envie suas imagens

Aqui, você pode ver o widget de comparação de imagem recém -adicionado na imagem abaixo.

Use a barra lateral esquerda para editar a seção Compare Images, adicionando imagens na seção Imagem.

Incluí imagens de amostra para sua referência.

Etapa 5: Personalize o controle deslizante

Você pode editar e personalizar as configurações usando a barra lateral esquerda.

Você pode modificar e personalizar as configurações usando o menu no lado esquerdo.

Etapa 6: publique a página

Depois de satisfeito com suas configurações, clique em Publicar para tornar o seu slider de comparação de imagens ao vivo.

Quando estiver feliz com seus ajustes, clique em "Publicar" para tornar visível o seu controle deslizante de comparação de imagens para outras pessoas.

Você pode visualizar a página clicando na "página de exibição".

Você pode ver o controle deslizante de comparação de imagem ao vivo do seu lado.

Shop Mania WooCommerce Theme

Você está procurando um tema bonito e repleto de recursos para aprimorar sua loja WooCommerce?

É altamente recomendável o tema da Mania Shop para uma experiência de compra perfeita e visualmente atraente.

Seu design elegante, opções de personalização fáceis e compatibilidade com a WooCommerce tornam a Shop Mania uma ótima opção para lojas com o objetivo de melhorar a satisfação do cliente e aumentar as conversões. Você pode conferir aqui.

Recursos da mania da loja:

• Sites prontos para imaginar: importe facilmente sites de demonstração e personalize-os para atender às necessidades da sua loja.
• Vários modelos de carrinho de produtos: Escolha entre cinco modelos de carrinho de alta qualidade para combinar com o design da sua loja.
• Visualização rápida: permita que os usuários visualizem os detalhes do produto sem sair da página atual.
• Barra lateral off-canvas: exiba produtos e widgets adicionais sem desordem a página inicial.
• Carrinho flutuante: aprimore a experiência do usuário com um conveniente carrinho de compras flutuante.
• Efeitos do mouse do produto: inclui efeitos de zoom, desbotamento, troca de imagem e deslizamentos para exibições interativas de produtos.
• Estilos de cabeçalho móvel: designs de cabeçalho otimizados adaptados para uma experiência móvel perfeita.
• Layouts de produtos únicos personalizáveis: layouts de galeria flexíveis, incluindo opções de grade e controle deslizante.
• Cheques avançados e estilos de carrinho: check-out personalizados e páginas de carrinho para uma experiência suave e sem distração.