Você deseja alterar a imagem com o clique de um botão com o página Builder Elementor ? Neste novo tutorial, mostraremos como fazê-lo.

Se você não tem ideia do que queremos falar hoje, convidamos você a assistir ao vídeo a seguir:

Então vamos voltar ao porquê de estarmos aqui.

Leia também: Como alterar uma imagem ao passar o mouse sobre o texto com o Elementor

Para concluir este tutorial, você precisará a versão Pro do Elementor, porque usaremos o código CSS personalizado que é compatível apenas com esta versão doElementor.

Vamos criar uma seção com 2 colunas, então no painel lateral, vamos definir o hauteur defende Altura Mínimae, em seguida, Altura mínima vamos clicar em VH e defina o controle deslizante para 100.

Vamos arrastar o widget Image para a coluna da esquerda e inserir uma imagem da nossa biblioteca.

Na coluna da direita, vamos inserir um Widget de título intitulado Escolha o melhor. Na guia Style vamos clicar em tipografia e modificar o Altura da linha em 1.

Veja também: Como alterar uma imagemge em passar o mouse sobre o texto com Elementor

Vamos adicionar abaixo do widget Title, um Widget Editor de texto.

Acima do widget Título, vamos colocar um widget Separador em sua guia Conteúdo, vamos pegar 270 para largura. Vamos clicar em Texto para Adicionar elemento e, em seguida, digite tendência como texto. Na guia Style, modifique a Graxa e a lacuna defende 2.

Descubra também: Como exibir texto acima de uma imagem com Elementor

Na seção Texto, clique em tipografia, vamos mudar a fonte, o Tamanho defende 18, a graxa defende 600.

Abaixo do widget Editor conteúdo, vamos registrar um Seção interna, exclua uma das colunas da Seção Interna e coloque na última um botão-widget

Vamos modificar o botão indo ao painel lateral e na aba Conteúdo, Clique em biblioteca de ícones defende ícone e insira o ícone Shopping Bag, vamos também limpar o conteúdo do botão em texto

Vamos para a aba Style do botão e em Raio da borda, Clique em % e aproveitar 50 para todos os raios do meio-fio e em Margens internas, vamos pegar 20.

Vamos personalizar a cor do botão alterando a cor deste último clicando em clássico para Tipo de plano de fundo e Vamos mudar a cor de acordo com a cor de destaque na imagem.

Em seguida, clique na aba avançado do nosso botão, então em posicionamento e Largura selecionar Em linha (automático). Na seção Avançado deGuia Avançado, vamos pegar 10 para o margem direita.

Vamos duplicar este botão 4 vezes e modificar as cores desses botões.

Em seguida, vamos duplicar nosso widget de imagem 4 vezes e modificar suas imagens.

NoAba Avançado, vamos pegar todas as imagens no campo classes CSS de cada uma de nossas imagens.

Então no campo Código CSS digite red-image para a imagem com realce em vermelho, green-image para a imagem com realce em verde e brown-image para a imagem com realce em marrom e assim por diante.

Vamos selecionar nosso Seção E noGuia Avançado, no campo Personalizadas CSS copie e cole o seguinte trecho de código:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Se você não tem esta seção, então você não tem a versão Pro, se você quiser continuar, você precisa atualizar sua versão)

Em seguida, vamos soltar um widget HTML em nossa página, copiar e colar o seguinte trecho de código na seção Código HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Vamos selecionar o primeiro botão, no campo Atributos Personalizados da Seção de atributos, copie e cole o seguinte trecho de código:

data-showme|IMAGE-ID-NAME

Vamos modificar a parte IMAGE-ID-NAME pelos IDs de seus botões, estes são os IDs red-image, green-image e blue-image, e assim por diante.

Então, para cada botão, vamos alterar o código IMAGE-ID-NAME para a cor do botão apropriado

Atualize seu trabalho e visualize-o no modo desktop, tablet e smartphone enquanto testa seus botões.

No modo smartphone, você pode, por exemplo, alinhar os botões no centro, reduzir as margens e muito mais.

Pronto, você acabou de fazer essa tarefa facilmente.

Obtenha o Elementor Pro agora!

Conclusão

Aí está ! É isso para este artigo que mostra como alterar uma imagem ao passar o mouse sobre um texto. 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.

...