Ir para o conteúdo principal

Como adicionar um efeito de rollover com detalhes para imagens Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Não é segredo que as páginas "Quem Somos" são ótimas para gerar cliques no seu site. É também este tipo de página que incidirá sobre a parte humana do negócio por trás do site. Sabendo disso, reconhecemos que é importante prestar atenção em como estruturamos as páginas, o tipo de informação que compartilhamos e como criamos interações.

Uma das coisas que você pode fazer para aprimorar a experiência da página é fornecer uma seção de membros da equipe que coloque seus funcionários no centro das atenções. Além disso, você pode adicionar um efeito bioflash às fotos dos membros da equipe usando apenas as opções Divi integradas.

Isso economizará espaço na página em que você está trabalhando e criará uma interação flutuante entre você e seus visitantes.

Neste tutorial, mostraremos a você, passo a passo, como chegar lá. Depois de obter a abordagem, você pode personalizar o estilo de design para atender às suas próprias necessidades.

Vamos!

exame

Antes de mergulhar no tutorial, vamos ver o resultado em diferentes tamanhos de tela.

escritório

divi-bio-pair-efeito-desktop-gif.gif

Móvel

divi-bio-pair-efeito-mobile-gif.gif

Vamos começar a recriar

Adicione uma nova seção

espaçamento

Crie uma nova página ou abra uma existente e adicione uma nova seção usando os seguintes valores de preenchimento personalizados:

  • Melhor preenchimento: 100px
  • Preenchimento inferior: 100px

efeito de bio pairar

Adicionar linha 1

Estrutura da coluna

Quando terminar de adicionar o preenchimento personalizado à sua seção, você poderá fechar as configurações da seção e adicionar uma nova linha usando uma única coluna.

efeito de bio pairar

Adicione um módulo de texto

Adicionar conteúdo H2

Adicione um título de módulo de texto à coluna com um tamanho de H2 de escolha.

efeito de bio pairar

Configurações de texto H2

Em seguida, acesse as configurações de texto H2 e faça algumas alterações na aparência da cópia.

  • Cabeçalho 2 Fonte: Cinzel
  • Título 2 Estilo da Fonte: Small Caps
  • Título 2 Alinhamento de texto: centro
  • Tamanho do texto do título 2: 70px

efeito de bio pairar

Adicione um módulo de divisão

visibilidade

Continue adicionando um novo módulo de separação logo abaixo do título do Módulo de Texto.

  • Mostrar divisor: sim

efeito de bio pairar

Cor do separador

Vá para a guia Design, abra as configurações de cor e altere a cor do seu divisor de acordo:

  • Cor do separador: # 333333

efeito de bio pairar

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

dimensionamento

Então vamos reduzir o tamanho do divisor e centralizá-lo.

  • Largura: 26%
  • Alinhamento do módulo: centro

efeito de bio pairar

Adicione a linha 2

Estrutura da coluna

Logo abaixo da linha anterior que você adicionou, continue e adicione uma nova linha usando três colunas de tamanho igual.

efeito de bio pairar

dimensionamento

Sem adicionar mais módulos, abra os parâmetros de linha e faça algumas alterações nos parâmetros de dimensionamento.

  • Use uma largura personalizada: Sim
  • Unidade: PX
  • Largura personalizada: 2000px
  • Use uma largura de medianiz personalizada: Sim
  • Largura da calha: 1
  • Equalizar alturas de coluna: sim

efeito de bio pairar

espaçamento

Em seguida, acesse as configurações de espaçamento e adicione valores personalizados de margem e preenchimento.

  • Margem superior: 50px
  • Margem inferior: 50px
  • Top Padding: 10px
  • Preenchimento inferior: 10px
  • Preenchimento à esquerda: 5px
  • Estofado à direita: 5px
  • Coluna 1, 2 e 3 Padding à esquerda: 5px
  • Coluna 1, 2 e 3 Preenchimento à direita: 5px

efeito de bio pairar

Caixa de sombra

Também damos à nossa linha um pouco de profundidade adicionando uma caixa de sombra com os seguintes parâmetros:

  • Box Blur Force Blur: 80px
  • Espalhe a força da sombra da caixa: -14px
  • Cor da sombra: rgba (0,0,0,0,3)

efeito de bio pairar

Adicione um módulo de imagem à coluna 1

Carregar uma imagem em um módulo de imagem

É hora de começar a adicionar módulos! Para alcançar o efeito de transbordamento biológico, precisaremos de dois módulos no total. um módulo de imagem e um módulo de anúncio. O módulo Imagem conterá a imagem do membro da equipe que você deseja apresentar.

O módulo Blurb, por sua vez, será usado para adicionar o ícone no canto inferior esquerdo e a biografia do flyby. Adicione um módulo de imagem à primeira coluna usando uma imagem quadrada.

efeito de bio pairar

filtros

O design que criamos é inteiramente em escala de cinza. Para adicionar esse tom de cinza à nossa imagem, vá para as configurações de filtro e remova toda a saturação.

  • Saturação: 0%

efeito de bio pairar

Adicione o módulo Blurb à coluna 1

Adicionar conteúdo

Continue adicionando um novo módulo Blurb logo abaixo do módulo de imagem na coluna 1. Adicione o nome do membro da equipe ao campo de título e insira informações adicionais sobre o membro da equipe na área de conteúdo.

efeito de bio pairar

Escolha um ícone

A próxima coisa que faremos é escolher um ícone de escolha que mostre aos visitantes que há mais do que apenas uma imagem.

efeito de bio pairar

Cor de fundo padrão

Então vamos escolher uma cor de fundo transparente completa.

  • Cor de fundo: rgba (255,255,255,0)

efeito de bio pairar

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Cor de fundo no viaduto

E nós vamos mudar essa cor pairando.

  • Cor de fundo: rgba (255,255,255,0.88)

efeito de bio pairar

Configurações de ícone padrão

Queremos um ícone visível que ajude os visitantes a entender que eles podem sobrevoar o site. Altere as configurações do ícone para obter esse ícone.

  • Cor do ícone: #ffffff
  • Ícone do círculo: sim
  • Cor do círculo: # 000000
  • Localização do ícone: esquerda
  • Use o tamanho da fonte do ícone: Sim
  • Tamanho da fonte do ícone: 50px

efeito de bio pairar

Parâmetro do ícone de sobrevoo

No entanto, não queremos que o ícone apareça em foco. É por isso que usamos uma cor completamente transparente.

  • Cor do ícone: rgba (255,255,255,0)
  • Cor do círculo: rgba (255,255,255,0)

efeito de bio pairar

Configurações de título padrão

Em seguida, vá para as configurações de texto do título e faça algumas alterações.

  • Título da polícia: Cinzel
  • Fonte do título: Negrito
  • Estilo da fonte do título: Small Caps
  • Título do texto de cor: # 000000
  • Tamanho do título de texto: 0px

efeito de bio pairar

Passe o mouse sobre as configurações de texto do título

Altere o tamanho do texto ao passar o mouse.

  • Tamanho do título de texto: 30px

efeito de bio pairar

Configurações de texto do corpo padrão

Altere também as configurações de texto do corpo.

  • Polícia Corporal: Open Sans
  • Texto colorido no corpo: # 000000
  • Tamanho do texto do corpo: 0px
  • Altura do corpo: 1.8em

efeito de bio pairar

Parâmetro do sobrevoo do corpo

E, novamente, altere o tamanho do corpo do texto que está passando.

  • Tamanho do texto do corpo: 14px

efeito de bio pairar

Espaçamento padrão

Por último, mas não menos importante, precisaremos criar uma sobreposição entre o módulo Blurb e o módulo de imagem usando uma margem superior negativa.

  • Margem superior: -3.7vw (desktop), -9vw (tablet e telefone)
  • Margem inferior: 1.5vw (tablet), 2vw (telefone)

efeito de bio pairar

Espaçamento estacionário

Altere a margem personalizada e preencha os valores em rollover.

  • Margem superior: -11,38vw
  • Top Padding: 20px
  • Preenchimento inferior: 20px
  • Estofado à direita: 50px

efeito de bio pairar

Clone os dois módulos duas vezes e coloque as duplicatas nas colunas restantes.

Nós terminamos de criar nosso primeiro efeito de flutuação biológica. Para economizar tempo, podemos simplesmente clonar os dois módulos na coluna 1 duas vezes e colocar as duplicatas nas duas colunas restantes.

efeito de bio pairar

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Modifique a imagem e o conteúdo do módulo Blurb

Não se esqueça de alterar a imagem no módulo Imagem e a cópia no módulo Blurb para finalizar a seção dos membros da equipe!

efeito de bio pairar

exame

Agora que passamos por todas as etapas, vamos dar uma olhada no resultado em diferentes tamanhos de tela pela última vez.

escritório

efeito de bio pairar

Móvel

efeito de bio pairar

Últimos pensamentos

Neste artigo, mostramos a você como criar um efeito biológico de hover para as fotos dos membros da equipe usando apenas as opções Divi integradas. Enfatizamos como é importante criar boas páginas, porque elas são um dos sites mais visitados.

Usar efeitos flyover orgânicos para as fotos dos membros da equipe não apenas melhorará a qualidade da sua página, mas também criará interação com seus visitantes. Se você tiver dúvidas ou sugestões, não se esqueça de deixar um comentário na seção de comentários abaixo!

Este artigo contém comentários 2
  1. Bom Dia,
    Obrigado por este tutorial, está muito bem explicado.
    No entanto, eu tenho um problema com pairando sobre o mouse, meu tremor hover não é fluido. Você sabe o que é isso?

    obrigado

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
2 ações
ação2
chilrear
Enregistrer
Whatsapp