Como criar efeitos de flutuação de acompanhamento de botão de mídia social exclusivos com Divi

O módulo Social Media Follow da Divi permite que você estilize e adicione links importantes às suas redes sociais em qualquer lugar do seu site. E se você quiser sujar as mãos com alguns dos poderosos efeitos de foco embutidos do Divi, você também pode criar alguns efeitos de foco criativos para seus botões de acompanhamento de mídia social.

Neste tutorial, vou mostrar a você alguns efeitos exclusivos de foco do botão de acompanhamento de mídia social que podem surpreendê-lo.

Confira!

Espiada

Aqui está uma prévia dos efeitos de foco que criaremos.

Parte 1: Movendo as sombras das caixas para destacar seus botões de acompanhamento de mídia social

Fronteiras para pontos

Pontos nas Fronteiras

Sombras saltitantes 1

Sombras saltitantes 2

Comece a construir efeitos de flutuação da parte 1

Parte 2: Mudança de cor, tamanho e forma ao pairar

Alterar tamanho e cor

Mudança de tamanho, cor e forma

Comece a construir efeitos de flutuação da parte 2

Parte 3: efeitos de filtro

Comece a construir o efeito de flutuação da parte 3

Parte 4: ícones grandes com combinação de tela e efeitos de filtro

Comece a construir o efeito de flutuação da parte 4

Começando

Inscreva-se no nosso canal no Youtube

Para iniciar este tutorial, tudo que você realmente precisa é o Divi Theme instalado e ativo. Em seguida, crie uma nova página e dê um título a ela. Em seguida, clique para usar o Divi Builder e selecione a opção Usar um layout predefinido. No modal pop-up Carregar da Biblioteca, selecione o Pacote de Layout do Desenvolvedor de Aplicativos. Em seguida, clique para usar os. Para iniciar o design de nossos botões de acompanhamento de mídia social, usaremos o layout da página inicial do desenvolvedor de aplicativos.

Publique sua página e clique no botão para construir no front end.

Agora exclua todas as seções da página, exceto a seção que contém os botões de acompanhamento de mídia social na parte inferior da página.

Isso servirá como um modelo inicial para criar nossos efeitos de foco.

Vamos salvar a seção na Biblioteca Divi para que possamos adicionar uma nova versão desses designs de botões de acompanhamento de mídia social quando necessário.

Você também pode duplicar a seção várias vezes em sua página. Isso permitirá que você crie diferentes efeitos de foco, começando com a seção predefinida.

Agora você está pronto para começar a criar os efeitos de foco.

Vamos começar.

Nº 1: Movendo sombras de caixa para destacar seus botões de acompanhamento de mídia social

Fronteiras para pontos

Para este efeito de foco, vamos adicionar uma sombra de caixa ao redor do botão que encolhe e flutua acima do botão ao passar o mouse. Para fazer isso, abra o módulo de acompanhamento de mídia social e clique em para abrir as configurações da rede social do Facebook.

Em seguida, copie a cor de fundo que está sendo usada para o ícone para a área de transferência (# 3b5998). Esta cor será usada para a sombra da caixa.

Agora abra a guia de design e atualize o seguinte:

Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 0 px (padrão), -46 px (pairar)
Força do desfoque de sombra da caixa: 0 px
Força de propagação da sombra da caixa: 5 px (padrão), -16 px (pairar)

Para a cor da sombra, cole a cor de fundo (# 3b5998) e diminua a opacidade em 50%. Isso lhe dará uma versão mais clara da cor de fundo do botão.

Cor da sombra: rgba (59,89,152,0.5)

Agora clique com o botão direito na categoria de estilo de sombra de caixa e selecione Copiar estilos de sombra de caixa.

Salve as configurações da rede social do Facebook e clique com o botão direito em cada uma das redes sociais e selecione Colar Estilos de Itens para cada uma. Isso aplicará os mesmos estilos de sombra de caixa ao restante dos botões.

No entanto, você ainda precisará atualizar a cor da sombra da caixa que é específica para cada um. Para isso, repita o mesmo processo que fizemos para a rede social Facebook. Abra as configurações específicas da rede social, copie a cor de fundo que está sendo usada, cole-a como a nova cor de sombra da caixa e diminua a opacidade em 50%.

Aqui estão as cores de sombra da caixa para cada uma das redes sociais restantes:

Cor da sombra da caixa do Twitter: rgba (0,172,237,0.5)
Cor da sombra da caixa do Instagram: rgba (234,44,89,0.5)
Cor da sombra da caixa de drible: rgba (234,76,141,0.5)
Cor da sombra da caixa do Youtube: rgba (168,36,0,0.5)

Assim que as cores das sombras da caixa forem atualizadas, verifique o resultado final.

Pontos nas Fronteiras

Você pode reverter facilmente o efeito de foco, alternando os valores padrão e de foco para a posição vertical da sombra da caixa e força de propagação.

Duplique a seção (se você quiser manter o design de “bordas em pontos”) e, em seguida, abra as configurações do módulo de acompanhamento de mídia social. Em seguida, abra as configurações da rede social do Facebook e atualize o seguinte:

Posição vertical da sombra da caixa: -46px (padrão), 0px (foco)
Força de propagação da sombra da caixa: -16px (padrão), 5px (foco)

Você precisará atualizar essas novas configurações de sombra de caixa para cada uma das redes sociais restantes. Você pode fazer isso manualmente ou pode usar o botão direito do mouse para copiar a posição vertical da sombra da caixa e a força de propagação e, em seguida, colá-los em cada uma das redes.

Uma vez feito isso, seu design final ficará assim.

Efeito de sombras saltitantes

Para a próxima versão deste design e efeito de foco, teremos a sombra da caixa (ponto) de cada um dos botões começando no mesmo local por padrão. Isso criará uma espécie de efeito de salto.

Para começar, você pode duplicar o design “pontos nas bordas” que construímos anteriormente. Abra as configurações do módulo de acompanhamento de mídia social e, em seguida, abra as configurações de rede social do Facebook. Atualize os seguintes estilos de sombra da caixa:

Posição horizontal da sombra da caixa: 140 px (padrão), 0 px (pairar)
Posição vertical da sombra da caixa: -70 px (padrão), 0 px (passar o mouse)

Para a rede social Twitter, atualize o seguinte:

Posição horizontal da sombra da caixa: 70 px (padrão), 0 px (pairar)
Posição vertical da sombra da caixa: -70 px (padrão), 0 px (passar o mouse)

Para a rede social Instagram, atualize o seguinte:

Posição horizontal da sombra da caixa: 70 px (padrão), 0 px (pairar)
Posição vertical da sombra da caixa: -70 px (padrão), 0 px (passar o mouse)

Para a rede social Dribble, atualize o seguinte:

Posição horizontal da sombra da caixa: -70 px (padrão), 0 px (passar o mouse)
Posição vertical da sombra da caixa: -70 px (padrão), 0 px (passar o mouse)

Para a rede social do Youtube, atualize o seguinte:

Posição horizontal da sombra da caixa: -140 px (padrão), 0 px (passar o mouse)
Posição vertical da sombra da caixa: -70 px (padrão), 0 px (passar o mouse)

Confira o resultado final.

Se você não quiser que o ponto apareça inicialmente, você pode definir a cor da sombra da caixa padrão como transparente e, em seguida, adicionar uma cor de sombra da caixa ao pairar. Isso lhe daria um design parecido com o seguinte:

Nº 2: Mudança de cor, tamanho e forma ao pairar

Para esta próxima série de efeitos de foco, vou mostrar como alterar facilmente a cor, o tamanho e / ou a forma dos botões de mídia social ao passar o mouse. Para começar, certifique-se de usar uma versão nova da seção de botão de seguimento de mídia social do layout da página inicial do desenvolvedor de aplicativos. Se você o salvou em sua biblioteca Divi, agora é um bom momento para adicioná-lo à sua página.

Mudança de cor

Alterar a cor de um botão de mídia social ao pairar é bastante simples. Para este exemplo, vamos começar com uma cor de fundo cinza escuro por padrão que se transforma na cor da rede social.

Para fazer isso, abra o módulo Social Media Follow e, em seguida, abra as configurações de rede do Facebook. Atualize o seguinte:

Cor de fundo: # 333333 (padrão), # 3b5998 (foco)

Em seguida, continue este processo para atualizar as quatro cores de fundo da rede social restantes da seguinte maneira:

Cor de fundo do Twitter: # 333333 (padrão), # 00aced (pairar)
Cor de fundo do Instagram: # 333333 (padrão), # ea2c59 (foco)
Cor de fundo do drible: # 333333 (padrão), # ea4c8d (pairar)
Cor de fundo do Youtube: # 333333 (padrão), a82400 (foco)

Aqui está o resultado.

Mudando o tamanho

Para alterar o tamanho do botão, podemos adicionar uma sombra de caixa ao pairar. Isso permite que o botão fique maior sem adicionar nenhum espaço real ao botão que afastaria os botões adjacentes ao passar o mouse.

Para fazer isso, abra as configurações de rede do Facebook e adicione os seguintes estilos de sombra de caixa:

Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 0 px
Força do desfoque de sombra da caixa: 0 px
Força de propagação da sombra da caixa: 0 px (padrão), 10 px (pairar)
Cor da sombra: # 3b5998 (deve ser da mesma cor que a cor de fundo flutuante do botão)

Para acelerar o processo de adicionar o mesmo design de sombra de caixa ao resto dos botões da rede social, clique com o botão direito na categoria de sombra de caixa da Rede do Facebook e clique em “Salvar estilos de sombra de caixa”.

Salve as configurações e clique com o botão direito em cada uma das redes sociais e selecione “Colar Estilos de Itens”.

Agora tudo o que você precisa fazer é atualizar a cor da sombra da caixa com a cor correta da rede social que corresponda à cor de fundo flutuante.

Para fazer essa atualização, faça o seguinte:

Cor da sombra da caixa do Twitter: # 00aced
Cor da sombra da caixa do Instagram: # ea2c59
Cor da sombra da caixa de drible: # ea4c8d
Cor da sombra da caixa do Youtube: # a82400

Aqui está o resultado final.

Mudando de forma

Para alterar a forma do botão ao passar o mouse, tudo o que você precisa fazer é ajustar a opção “Cantos arredondados”. Este módulo de acompanhamento de mídia social atualmente tem os cantos arredondados configurados para 40px, tornando os botões circulares. Se quisermos alterá-lo para quadrado, tudo o que você precisa fazer é ajustar os cantos arredondados para 0 px ao passar o mouse.

Para fazer isso, abra as configurações de rede do Facebook e atualize o seguinte:

Cantos arredondados (pairar): 4px nos quatro cantos

Em seguida, copie os estilos de borda e cole-os em cada rede restante.

Aqui está o design final.

# 3 Efeitos de filtro

Para este próximo efeito de foco, vou mostrar como usar alguns efeitos de filtro para alterar as cores dos botões de mídia social ao passar o mouse. Para começar, certifique-se de usar uma versão nova da seção de botão de seguimento de mídia social do layout da página inicial do desenvolvedor de aplicativos. Se você o salvou em sua biblioteca Divi, agora é um bom momento para adicioná-lo à sua página.

Efeitos de saturação e filtro de inversão ao pairar

Usar os efeitos de saturação e de filtro de inversão é uma maneira simples e poderosa de alterar o estilo dos botões de sua mídia social ao passar o mouse. Neste exemplo, vou mostrar como combinar saturação e inverter para criar botões cinza com ícones pretos que voltam à cor original ao passar o mouse.

Para fazer isso, abra as configurações do módulo de acompanhamento de mídia social e, em seguida, abra cada uma das configurações de rede social individual e atualize as seguintes opções de filtro:

Saturação: 0% (padrão), 100% (foco)
Inverter: 100% (padrão), 0% (foco)

Confira o resultado.

Nº 4 grandes ícones coloridos com combinação de tela e efeitos de filtro

Para este design final de foco de botão de mídia social, vamos começar completamente do zero. Portanto, crie uma nova seção com uma linha de uma coluna e adicione um módulo de acompanhamento de mídia social à linha.

Em seguida, abra as configurações de acompanhamento de mídia social e exclua a rede social padrão do Twitter, deixando apenas o item da rede social do Facebook.

Em seguida, atualize as configurações de acompanhamento de mídia social da seguinte forma:

Cor de fundo: #ffffff
Alinhamento do item: centro
Modo de mistura: tela

Em seguida, abra as configurações do item da rede social do Facebook e atualize o seguinte:

Cor de fundo: # 000000
Margem personalizada: 10 px à esquerda, 10 px à direita
Preenchimento personalizado: 10px superior, 10px inferior, 10px à esquerda, 10px à direita
Saturação: 0% (padrão), 100% (foco)
Inverter: 100% (padrão), 0% (foco)

Salvar configurações.

Em seguida, duplique o item da rede social do Facebook 4 vezes para que você tenha um total de 5 botões da rede social.

Agora abra cada um dos itens de rede social duplicados e atualize a rede social e a cor de fundo para # 000000.

Salvar configurações.

Agora, como temos o modo de mesclagem de tela em vigor, podemos adicionar uma cor de fundo à coluna da linha que contém nosso módulo de acompanhamento de mídia social. Qualquer cor de fundo que usarmos irá determinar a cor de nossos ícones de mídia social e cor de fundo flutuante.

Para fazer isso, abra as configurações de linha e atualize o seguinte:

Cor de fundo da coluna 1: # 0c71c3

Observe como as cores do ícone mudaram para esta cor de fundo.

Agora verifique o resultado até agora.

Para aumentar os ícones / botões, podemos usar um trecho de CSS personalizado. Para fazer isso, devemos primeiro adicionar um CSS ID ao módulo de acompanhamento de mídia social e, em seguida, adicionar algum CSS às configurações da página.

Abra o módulo de acompanhamento de mídia social e adicione o seguinte CSS ID na guia avançada.

ID CSS: ícones grandes

Em seguida, abra as configurações da página e adicione o seguinte css personalizado.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Este código aumenta o tamanho dos ícones para 50 px e a altura e largura dos botões para 100 px. A consulta de mídia garante que esse estilo seja aplicado apenas à área de trabalho.

Confira o resultado final.

Pensamentos finais

Espero que esses efeitos de foco do botão de acompanhamento de mídia social lhe dêem algumas ideias novas sobre como capturar seus visitantes com alguns designs exclusivos. A maioria desses exemplos são fáceis de criar, especialmente se você se familiarizar com como os efeitos de foco funcionam no Divi. Até a próxima vez, continue a dominar suas habilidades Divi e crie algo bonito para seu próximo projeto.

Estou ansioso para ouvir de você nos comentários.

Saúde!