Como adicionar efeitos avançados de foco ao módulo Blurb da Divi usando o arquivo Hover.css

No tutorial de hoje do Divi, mostraremos como adicionar alguns efeitos de foco avançados aos módulos do Blurb do Divi usando o Hover.css. É claro que, pronto para uso, Divi tem tudo que você precisa para criar sinopses impressionantes para qualquer tipo de página que você possa imaginar. Mas em nossa comunidade, sabemos que há muitos designers sempre procurando levar o Divi (e às vezes além) seus limites para tornar o site de um cliente muito diferente da concorrência. Portanto, este tutorial se destina a todos vocês que gostam de aproveitar as vantagens dos recursos avançados do Divi.

Vamos dar uma olhada no que estaremos criando hoje.

Antevisão: O Resultado Final

No final desta postagem (e depois de guiá-lo pelo hover.css), mostraremos como obter o seguinte resultado:

Claro, isso é apenas a ponta do iceberg em termos do que é possível fazer com o hover.css, mas ajudará você a começar.

A inspiração

Nós nos inspiramos no XD Web Design, que usa os efeitos hover.css para diferentes sinopses em seu site. Em postagens anteriores, houve solicitações de comentários que mostraram interesse em como recriar certos módulos do Blurb. Embora não vamos recriá-los exatamente, mostraremos os fundamentos da adição desses efeitos para que você possa experimentá-los facilmente depois.

Como adicionar efeitos avançados de foco ao módulo Blurb da Divi usando o arquivo Hover.css

Inscreva-se no nosso canal no Youtube

Obtenha Hover.css em seu site

Antes de entrar em qualquer outra coisa, vamos apresentá-lo ao hover.css primeiro. Hover.css consiste em muitos efeitos que você pode usar em qualquer tipo de elemento em seu site. Existem duas maneiras principais de adicionar os efeitos hover.css ao seu site; adicionando o arquivo CSS ou escolhendo os efeitos que deseja ter e simplesmente usando esse CSS dentro do Divi Builder.

Como precisaremos fazer alguns pequenos ajustes nas linhas de código CSS para elementos dentro dos módulos, mostraremos como adicionar manualmente as poucas linhas de código CSS de que você precisará para criar o resultado final. Se, no entanto, preferir ter todos os efeitos em seu site, você também pode fazer isso simplesmente adicionando o arquivo CSS ao diretório do WordPress.

Baixe Hover.css

Agora, para começar, você precisará do arquivo hover.css, que pode ser encontrado no site de Ian Lunn. Alternativamente, você também pode clicar aqui para ser enviado diretamente para os arquivos no Github. Depois de baixar o arquivo, descompacte-o.

Licença de Compra

A próxima coisa que você precisa levar em consideração é o fato de que hover.css não é gratuito. Se você usa seu site para fins comerciais, comprar a licença é uma obrigação. Você tem dois tipos de possibilidades de compra:

• A Licença de Desenvolvedor ($ 14 e válida para 1 projeto)
• A Licença de Equipe ($ 18 e válida para projetos ilimitados)

Dependendo de sua necessidade, você pode comprar sua licença e usar os efeitos em seu (s) site (s).

A lista de pausas

Continuando, vamos dar uma olhada nos diferentes efeitos de foco que estão à sua disposição com o arquivo hover.css. Você tem um monte deles que pertencem a várias categorias. Existem sete categorias no total:

• Transições 2D
• Transições de fundo
• Ícones
• Transições de fronteira
• Transições de sombra e brilho
• Speach Bubbles
• Cachos

Cada um desses efeitos contém uma série de efeitos que podem dar aquele toque extra aos seus módulos do Blurb ou qualquer outro tipo de módulo em seu site.

Instalando

Embora você possa instalar o hover.css incluindo-o diretamente no seu tema filho, você também pode usar partes dele. É isso que faremos neste tutorial. Vamos pegar o código CSS de um efeito específico e adicioná-lo diretamente ao nosso Divi Builder. O motivo pelo qual estamos fazendo isso é que, em alguns casos (onde queremos que um efeito se aplique a um elemento de um módulo apenas), você terá que modificar ligeiramente o código que está sendo fornecido.

Vá para a pasta baixada descompactada e encontre o arquivo hover.css.

Abra este arquivo com um editor de código, como o Notepad ++, e você verá todos os efeitos sendo alinhados um após o outro. Os nomes usados ​​no arquivo CSS são os mesmos do site. Você pode ir ao site e ver de qual animação você gosta. Depois, você pode voltar ao arquivo CSS e apenas procurar o nome.

Criando seu módulo interativo do Blurb

Agora que mostramos como usar hover.css com facilidade, é hora de mostrar como recriar um Módulo Blurb interativo usando os efeitos fornecidos. Como um lembrete, vamos dar uma olhada no resultado final:

Adicionar uma linha de três colunas

A primeira coisa que você precisa fazer é adicionar uma linha de três colunas a uma nova seção em uma nova página ou página existente. Mostraremos como adicionar o primeiro módulo do Blurb e depois disso, você também pode adicionar módulos do Blurb às outras colunas, repetindo as mesmas etapas.

Tornar a linha de largura total

A próxima coisa que você precisa fazer é tornar a largura total da linha. Para fazer isso, abra as configurações de linha e vá para a guia Design. Na guia Design; habilite a opção 'Tornar esta linha com largura total' na subcategoria Dimensionamento.

Aplicar Preenchimento de Coluna

A próxima coisa que você precisa fazer é adicionar algum preenchimento de coluna enquanto você ainda está na guia Design das configurações de linha. Role para baixo e adicione 5% ao preenchimento inferior da coluna 1.

Aplicar sombra da caixa e raio da borda à coluna

E a última coisa que você precisa fazer nas configurações de linha é ir para a guia Avançado. Na guia Avançado, role para baixo até o Elemento principal da coluna 1 e copie e cole as seguintes linhas de código CSS:

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

Depois de fazer isso, você pode fechar as configurações de linha.

Adicionar Módulo de Imagem

A próxima coisa que vamos fazer é adicionar um Módulo de Imagem à primeira coluna. Tecnicamente, isso não faz parte do Módulo do Blurb, mas em seu resultado final, parece que eles pertencem um ao outro. Principalmente porque estamos usando a coluna como uma espécie de caixa que reúne todos os módulos e os faz encaixar uns nos outros.

Faça upload de uma imagem e deixe o Módulo de Imagem como está por enquanto.

Adicionar Módulo Blurb

A próxima coisa que precisaremos adicionar à linha é o Módulo Blurb. Depois de adicionar o Módulo Blurb, você precisará fazer várias alterações nele. Comece adicionando o texto do cabeçalho, o texto do conteúdo e escolhendo o ícone e vá para a guia Design.

Ícone Personalizado

Na guia Design, a primeira coisa que você encontrará é a subcategoria Imagem e Ícone. Dentro dessa subcategoria, certifique-se de que as seguintes alterações se apliquem:

• Cor do ícone: #FFFFFF
• Ícone de círculo: SIM
• Cor do círculo: # 004370
• Posicionamento de imagem / ícone: topo
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 45 px (desktop), 40 px (tablet), 37 (telefone)

Personalizar o Texto do Cabeçalho

Role a mesma guia para baixo e faça as seguintes alterações na subcategoria Texto do cabeçalho:

• Tamanho da fonte do cabeçalho: 16 (desktop e tablet), 14 (telefone)
• Cor do texto do cabeçalho: # 004370
• Altura da linha de cabeçalho: 2,2em

Adicionar Margem Personalizada

Em seguida, você terá que adicionar a margem personalizada ao módulo Blurb:

• Topo: 25%
• Certo: 5%
• Esquerda: 5%
• Inferior: 5%

Adicionar margem inferior ao título do Blurb

Por último, mas não menos importante, vá para a guia Avançado e adicione '3px' à margem inferior do Título do Blurb:

Adicionando Efeitos Hover.css aos Módulos

A última parte desta postagem envolve a adição dos efeitos hover.css. Vamos adicionar os efeitos de foco ao Módulo de imagem e ao Módulo do Blurb primeiro e na próxima parte deste post adicionaremos um efeito de foco a apenas um elemento do Módulo do Blurb.

Adicione a classe CSS ao módulo de imagem

Abra as configurações de sua imagem e vá para a guia Avançado. Na guia Avançado, anote a classe CSS do efeito de foco que deseja usar. Neste caso, estamos aplicando o efeito cascata que tem 'hvr-ripple-out' como seu nome de classe CSS. Novamente; você pode encontrar esses nomes de classes no arquivo hover.css em sua pasta compactada.

Adicione a classe CSS ao módulo Blurb

Da mesma forma, abra as configurações do Blurb e vá para a guia Avançado. Nesse caso, vamos aplicar o efeito de redução de foco ao módulo completo. Então, digite 'hvr-shrink' no campo CSS Class.

Adicione o código CSS

Continuando, adicione as seguintes linhas de código CSS às configurações de sua página clicando no seguinte botão:

Continue colocando as seguintes linhas de código CSS no campo CSS personalizado:

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

Essas são quase exatamente as mesmas linhas de código CSS que você pode encontrar no arquivo hover.css. A única coisa que difere é a cor da borda que está sendo usada para o efeito de ondulação. É a mesma cor que está sendo usada no ícone do círculo.

Use efeitos Hover.css para elementos separados dentro do módulo Blurb

O terceiro efeito que adicionamos a esta sinopse é a linha que aparece depois de passar o mouse sobre o título da sinopse. O Módulo Blurb contém diferentes elementos. Portanto, não podemos simplesmente usar a classe hover.css na lista. Em vez disso, temos que atribuir um ID CSS ao módulo e usar a classe CSS atribuída especificamente ao Título do Blurb.

Adicione o CSS ID ao módulo do Blurb

Comece adicionando o CSS ID ao Módulo Blurb. Neste caso, estamos usando 'center'.

Adicione o código CSS

Continue copiando e colando as seguintes linhas de código no mesmo lugar onde você colocou o código CSS anterior:

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

O nome da classe que você usa no código difere de módulo para módulo. Se quiser que isso se aplique a apenas um módulo, você terá que usar a classe atribuída ao Título do Blurb desse módulo específico:

No entanto, se você quiser que o código se aplique a todas as sinopses, use as seguintes linhas de código CSS:

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

É isso! Agora você pode usar as mesmas etapas para obter o mesmo resultado. Continue clonando os módulos e usando-os também nas outras linhas.

Pensamentos finais

Neste tutorial Divi, mostramos principalmente como usar os muitos efeitos fornecidos por hover.css. Além disso, também mostramos como você pode usar os diferentes efeitos para criar Módulos Blurb interativos em seu site. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Art work / shutterstock.com