Como adicionar um efeito de flutuação às biografias dos membros da equipe na divi

Não é segredo que as páginas sobre são ótimas para criar click-throughs em seu site. É também aquele tipo de página que enfatiza a parte humana da empresa por trás do site. Saber disso nos torna conscientes de que é importante prestarmos atenção à maneira como nos estruturamos sobre as páginas, que tipo de informação compartilhamos e como criamos interações. Uma das coisas que você pode fazer para elevar a experiência da página Sobre é fornecer uma seção de membros da equipe que coloque seus funcionários em destaque. Além disso, você pode adicionar um efeito de foco bio nas fotos dos membros da equipe usando apenas as opções integradas do Divi. Isso permitirá que você economize espaço na página em que está trabalhando e crie uma interação de foco entre você e seus visitantes.

Neste tutorial, mostraremos passo a passo como chegar lá. Depois de obter a abordagem, você poderá personalizar o estilo de design de acordo com suas necessidades.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Vamos começar a recriar

Inscreva-se no nosso canal no Youtube

Adicionar 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 personalizado:

• Enchimento superior: 100px
• Preenchimento inferior: 100px

Adicionar linha # 1

Estrutura da Coluna

Depois de adicionar o preenchimento personalizado à sua seção, você pode fechar as configurações da seção e adicionar uma nova linha usando apenas uma coluna.

Adicionar Módulo de Texto

Adicionar conteúdo H2

Adicione um título Módulo de texto à coluna com alguma cópia H2 de sua escolha.

Configurações de texto H2

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

• Fonte do título 2: Cinzel
• Estilo da fonte do título 2: Versalete
• Alinhamento de Texto do Título 2: Centro
• Tamanho do texto do título 2: 70 px

Adicionar Módulo Divisor

Visibilidade

Continue adicionando um novo Módulo Divisor logo abaixo do título Módulo de Texto.

• Mostrar divisor: Sim

Divider Color

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

• Cor do divisor: # 333333

Dimensionamento

A seguir, vamos diminuir o tamanho do divisor e centralizá-lo.

• Largura: 26%
• Alinhamento do Módulo: Centro

Adicionar linha # 2

Estrutura da Coluna

Logo abaixo da linha anterior que você adicionou, vá em frente e adicione uma nova linha usando três colunas de tamanhos iguais.

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e faça alguns ajustes nas configurações de dimensionamento.

• Usar largura personalizada: Sim
• Unidade: PX
• Largura personalizada: 2.000 px
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione margens personalizadas e valores de preenchimento.

• Margem superior: 50px
• Margem inferior: 50px
• Enchimento superior: 10 px
• Preenchimento inferior: 10 px
• Preenchimento esquerdo: 5 px
• Preenchimento direito: 5 px
• Preenchimento da coluna 1, 2 e 3 esquerdo: 5 px
• Coluna 1, 2 e 3 acolchoamento direito: 5 px

Sombra da caixa

Também estamos dando à nossa linha um pouco de profundidade, adicionando uma sombra de caixa a ela com as seguintes configurações:

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -14px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Imagem à Coluna 1

Carregar imagem para módulo de imagem

É hora de começar a adicionar módulos! Para alcançar o efeito de bio pairar, precisaremos de dois módulos no total; um Módulo de imagem e um Módulo Blurb. O Módulo de Imagem conterá a imagem do membro da equipe que você deseja mostrar. O Módulo Blurb, por outro lado, será usado para adicionar o ícone no canto inferior esquerdo e a biografia ao pairar. Adicione um Módulo de imagem à primeira coluna usando uma imagem de tamanho quadrado.

Filtros

O design que estamos criando é totalmente em tons de cinza. Para adicionar esta escala de cinza à nossa imagem, vá para as configurações de filtros e remova toda a saturação.

• Saturação: 0%

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

Continue adicionando um novo Módulo do 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 mais algumas informações sobre o membro da equipe na caixa de conteúdo.

Escolha o ícone

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

Cor de fundo padrão

Em seguida, escolheremos uma cor de fundo transparente inteira.

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

Hover Background Color

E vamos mudar essa cor ao pairar.

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

Configurações de ícone padrão

Queremos um ícone perceptível que ajude os visitantes a entender que podem passar o mouse sobre ele. Altere as configurações do ícone para obter um ícone como esse.

• Cor do ícone: #ffffff
• Ícone de círculo: Sim
• Cor do Círculo: # 000000
• Posicionamento do ícone: Esquerda
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 50px

Configurações do ícone de pairar

No entanto, não queremos que o ícone apareça ao passar o mouse. É por isso que usaremos uma cor completamente transparente.

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

Configurações de texto de título padrão

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

• Fonte do título: Cinzel
• Peso da fonte do título: negrito
• Estilo da fonte do título: Versalete
• Cor do texto do título: # 000000
• Tamanho do texto do título: 0 px

Hover Title Text Settings

Modifique o tamanho do texto ao pairar.

• Tamanho do texto do título: 30px

Configurações de corpo de texto padrão

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

• Fonte do corpo: Open Sans
• Cor do corpo do texto: # 000000
• Tamanho do corpo do texto: 0 px
• Altura da linha corporal: 1,8em

Hover Body Text Settings

E, novamente, altere o tamanho do corpo do texto ao pairar.

• Tamanho do corpo do texto: 14 px

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 a margem superior negativa.

• Margem superior: -3,7vw (desktop), -9vw (tablet e telefone)
• Margem inferior: 1,5 vw (tablet), 2vw (telefone)

Espaçamento de pairar

Altere a margem personalizada e os valores de preenchimento ao passar o mouse.

• Margem superior: -11,38vw
• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento direito: 50 px

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

Terminamos de criar nosso primeiro efeito de bio pairar. Para economizar tempo, podemos simplesmente clonar ambos os módulos na coluna 1 duas vezes e colocar as duplicatas nas duas colunas restantes.

Alterar imagem e conteúdo do módulo Blurb

Lembre-se de mudar a imagem no Módulo de Imagem e a cópia no Módulo Blurb para finalizar a seção do membro da equipe!

Antevisão

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

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como criar um efeito de foco de bio no foco para fotos de membros da equipe usando apenas as opções integradas do Divi. Mencionamos como é importante criar páginas boas, já que são um dos sites de páginas mais visitados. Usar efeitos de bio foco para fotos de membros da equipe não só permitirá que você leve sua página sobre para o próximo nível, mas também criará uma interação com seus visitantes. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!