Como alterar o estilo de vários elementos ao passar o mouse ou clicar em Divi
Publicados: 2020-09-04Eventualmente, no mundo do web design, codificadores e não codificadores procurarão adicionar personalizações e funcionalidades mais avançadas a seus sites Divi. Normalmente, isso envolve o uso de Javascript / JQuery para alterar o estilo dos elementos na página por diferentes motivos. Você pode querer que um formulário de contato apareça ao clicar em um botão. Ou você pode querer mudar uma imagem ao passar o mouse sobre um link.
Neste tutorial, mostraremos como alterar o estilo de vários elementos ao passar o mouse ou clicar no Divi. Primeiro, tiraremos vantagem das opções de design integradas do Divi para projetar um layout de seção. Em seguida, apresentaremos um trecho simples de jQuery que você pode usar em combinação com CSS personalizado para ajustar o estilo de qualquer elemento nessa seção ao passar o mouse ou clicar em um botão. Isso pode parecer complicado (especialmente para iniciantes), mas você pode se surpreender com o quão simples é fazer.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Aqui está o design do layout da seção sendo alterado ao passar o mouse sobre o botão.
E aqui está o mesmo design de layout de seção sendo alterado clicando no botão. Observe que o texto do botão também muda com o clique.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Parte 1: Projetando o Layout da Seção
Para começar, crie uma nova linha de duas colunas.
Configurações da seção
Antes de adicionar qualquer módulo, abra as configurações da seção e atualize o seguinte:
- Cor de fundo: #ffffff
- Estilo do divisor superior: veja a captura de tela
- Cor do divisor superior: #ffffff
- Altura do divisor superior: 5vw
- Estilo do divisor inferior: o mesmo
- Cor do divisor inferior: #ffffff
- Altura do divisor inferior: 5vw
- Acolchoamento: 6vw superior, 6vw inferior
Antes da Imagem
Na coluna esquerda da linha de duas colunas, adicione um novo módulo de imagem.
Em seguida, carregue a imagem que deseja mostrar. Para este tutorial, estamos usando uma imagem do Pacote de Layout do Gerenciamento de Aprendizagem (LMS) que tem aproximadamente 800 x 550 pixels.
Na guia de design, atualize o alinhamento e habilite a opção forçar largura total.
- Alinhamento de imagem: centro
- Forçar largura total: SIM
Depois da imagem
A seguir, vamos criar outra imagem que mostraremos quando passar o mouse / clicar em um botão.
Para criar a imagem, duplique o módulo de imagem anterior.
Em seguida, carregue uma nova imagem. A imagem deve ter o mesmo tamanho da outra imagem, pois ela substituirá a outra imagem ao passar o mouse / clicar.
Para esta imagem, vamos dar-lhe uma posição absoluta. Isso fará com que a imagem fique diretamente acima da outra imagem sem ocupar espaço real na página.
- Posição: Absoluta
Na guia Design, altere a opacidade nas opções de filtro para que a imagem fique completamente invisível.
- Opacidade: 0%
Adicionar Título de Texto
Na coluna certa, adicione um novo módulo de texto.
Em seguida, cole o seguinte HTML na área de conteúdo do corpo:
<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>
Observe que algumas das palavras no texto são agrupadas com tags span. Isso é para que possamos direcionar e estilizar essas palavras mais tarde com algum CSS personalizado.
Na guia de design, atualize as opções de estilo H3 da seguinte maneira:
- Fonte do título 3: Montserrat
- Peso da fonte do cabeçalho 3: ultra negrito
- Estilo da fonte do título 3: TT
- Tamanho do texto do título 3: 65 px (desktop e tablet), 40 px (telefone)
- Cabeçalho 3 espaçamento entre letras: 0,8em
- Altura da linha do título 3: 1,3em
Isso cuida do layout da seção que contém os elementos de design que alteraremos ao passar o mouse / clicar em um botão. Na próxima seção, adicionaremos o botão que usaremos para iniciar as mudanças de estilo.
Criar seção para botão
Crie uma nova seção regular abaixo da seção atual.
Em seguida, adicione uma linha de uma coluna à seção.
Adicionar botão
Na coluna, adicione um novo módulo de botão.
Altere o texto do botão para "Ver depois".
Vá para a guia de design e atualize o design do botão da seguinte forma:
- Use estilos personalizados para botão: SIM
- Tamanho do texto do botão: 16 px
- Cor do texto do botão: #ffffff
- Fundo do botão: # 4b4baf
- Fundo do botão (foco): # 67ddc1
- Largura da borda do botão: 0 px
- Espaçamento entre letras dos botões: 4px
- Fonte do botão: Montserrat
- Peso da fonte do botão: Semi negrito
- Estilo da fonte do botão: TT
Parte 2: Adicionando classes CSS aos elementos
Agora que nosso design está pronto, vamos realizar o resto das mudanças de design usando código customizado (CSS e JQuery). Mas antes de começarmos a adicionar nosso código personalizado, precisamos adicionar classes CSS a todos os elementos que desejamos alterar ao passar o mouse / clicar no botão.
Adicionar classe CSS à seção
Para adicionar uma classe CSS à seção, abra as configurações da seção e clique na guia avançado. Em seguida, insira a seguinte classe CSS:
- Classe CSS: et-change-style_section
Adicionar classe CSS a imagens
Em seguida, abra as configurações da primeira imagem na coluna à esquerda e adicione a seguinte classe CSS:
- Classe CSS: et-before-image
Esta será a imagem que é mostrada “antes” do botão passar / clicar.
Usando o modal de camadas, abra as configurações da segunda imagem (a que está sendo ocultada com o filtro de opacidade) e adicione a seguinte classe CSS:
- Classe CSS: et-after-image
Esta será a imagem que é mostrada “após” o mouse / clique do botão.
Adicionar classe CSS ao texto
Em seguida, adicione a seguinte classe CSS ao Módulo de texto na coluna da direita:
- Classe CSS: et-style-text
Adicionar classe CSS ao botão
Por último, adicione uma classe CSS personalizada ao botão na seção inferior da seguinte maneira:
- Classe CSS: botão de alternância et
Precisamos dessa classe para direcionar o botão para a funcionalidade de foco / clique no código posteriormente.
Parte 3: Adicionar código personalizado para alterar estilos ao passar o mouse ou clicar
Agora que todas as nossas classes CSS estão no lugar, podemos adicionar o código necessário para alterar o estilo de todos esses elementos ao passar o mouse / clicar no botão.
Adicionar Módulo de Código
Para adicionar o código, adicione um módulo de código sob o botão na seção inferior.
Colar código jQuery
Em seguida, cole o seguinte JQuery. Certifique-se de envolver o código em tags de script, pois estamos adicionando o código a um documento HTML (não a um arquivo JS).
(function($) {
$(document).ready(function(){
$('.et-toggle-button').hover(function(){
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
});
});
})( jQuery );
Se você der uma olhada no código, deverá reconhecer as classes CSS que adicionamos ao botão e à seção.
A classe de botão (“.et-toggle-button”) está sendo usada para direcionar o elemento que iniciará uma função ao passar o mouse.
Ao passar o mouse, a função encontrará o elemento com a classe de seção “.et-change-style_section” e alternar / adicionar uma nova classe (“.et-change-style-active”) quando o cursor estiver passando sobre o botão.
O botão também está sendo direcionado (por meio de “$ this”) para alternar uma nova classe (“.et-toggle-button_active”) no estado de foco.
A chave para alterar os estilos desses elementos ao passar o mouse é adicionar / alternar essas novas classes CSS adicionais na seção e no botão.
Por exemplo, uma vez que a seção com a classe “.et-change-style_section” receba essa classe adicional (“.et-change-style_active”), podemos usar CSS personalizado para alterar o estilo da seção originalmente fornecida a ela por meio as opções Divi integradas.
Alterando o estilo dos elementos com CSS personalizado
Abra o módulo de código e cole o seguinte CSS personalizado acima do JQuery Script, certificando-se de envolvê-lo nas tags de estilo necessárias.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Observe que a classe de seção inicial é combinada com a nova classe como o seletor. O CSS a seguir só se aplicará à seção quando essa nova classe for anexada. Quando não estiver anexado, o design original será exibido. Neste exemplo, a cor de fundo da seção mudará ao passar o mouse sobre o botão.
Em seguida, cole o seguinte CSS adicional dentro das tags de estilo.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
}
Como a seção pai recebe uma classe ao passar o mouse, você pode direcionar os elementos filho da seção (como as imagens) usando a mesma classe CSS. Mas porque é uma classe em um contêiner / seção pai, a Classe CSS deve preceder a classe do elemento que você está tentando alterar. Neste exemplo, a classe CSS (“.et-change-style_active”) fornecida à seção pai vem antes da classe dada às imagens secundárias (“.et-after-image” e “.et-before-image”).
O CSS da pós-imagem mostrará a imagem ao passar o mouse sobre o botão. E o CSS para a imagem anterior ocultará a imagem ao passar o mouse sobre o botão. O resultado é que a imagem inicial é alterada para uma nova ao passar o mouse sobre o botão.
Em seguida, cole o resto do CSS dentro das tags de estilo:
.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
color: #67ddc1;
}
.et-toggle-button_active {
transform: scale(1.1);
background-color: #67ddc1 !important;
}
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3 {
transition: all 0.3s;
}
Esses snippets CSS estão usando o mesmo conceito para alterar o estilo do elemento quando a seção (ou botão) tem a nova classe.
Resultado Final (Hover)
Depois de adicionar o código, salve as alterações e abra a página para ver o resultado. Observe como os elementos que visamos estão sendo alterados ao passar o mouse sobre o botão.
Alterar estilos ao clicar em vez de pairar
Se você quiser alterar o estilo desses mesmos elementos ao clicar no botão (em vez de passar o mouse), tudo o que você precisa fazer é fazer algumas alterações no JQuery. A maior parte do código permanecerá o mesmo. A principal diferença é que o método “hover” é substituído por “click”. E adicionamos um trecho de código útil que altera o texto do botão ao clicar.
Para adicionar a funcionalidade de clique, substitua o JQuery atual pelo seguinte (novamente, certifique-se de que esteja dentro das tags de script):
(function($) {
$(document).ready(function(){
$('.et-toggle-button').click(function(e){
e.preventDefault();
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
if ($this.hasClass('et-toggle-button_active')){
$this.text('See Before');
} else {
$this.text('See After');
}
});
});
})( jQuery );
Aqui está o resultado final.
Pensamentos finais
Ser capaz de direcionar e alterar o estilo de vários elementos em uma página ao passar o mouse ou clicar em algo é uma habilidade útil em web design. Você pode usar esta técnica para uma variedade de casos de uso (antes e depois, CTAs, etc ...) Claro, ajuda saber um pouco de CSS e JS / JQuery. Mas, como você viu neste tutorial, você não precisa saber um tom de código para obter alguns resultados surpreendentes!
Estou ansioso para ouvir de você nos comentários.
Saúde!