Como Criar uma Página Vibrant Hover Team para o Seu Próximo Projeto Divi

As páginas da equipe costumam ser subestimadas. Antes de comprar um produto ou contratar um serviço, muitos usuários navegam nas páginas da equipe ou sobre para ter uma ideia melhor da empresa e das pessoas por trás dela. Se a página da sua equipe deixar uma primeira impressão positiva, isso pode levar a taxas de conversão mais altas. Agora, existem muitas maneiras de criar belas páginas de equipe com Divi, mas se você está procurando inspiração para seu próximo projeto, você vai adorar este post. Vamos recriar uma página vibrante da equipe hover que ativa a biografia dos membros durante o hover.

Vamos lá!

Antevisão

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

Área de Trabalho

Móvel

Inscreva-se no nosso canal no Youtube

1. Comece com uma seção regular + linha de uma coluna para o título

Abra uma nova página e defina os atributos da página como 'página em branco'. Depois de fazer isso, entre no Divi Builder e adicione uma seção com uma linha de uma coluna.

Adicione um módulo de texto e divisor.

2. Adicionar conteúdo ao módulo de texto e estilizá-lo

Adicione algum conteúdo H1 ao módulo de texto.

Vá para a guia de design e defina o estilo das configurações de texto H1 de acordo:

• Fonte do título: Poppins
• Peso da fonte do cabeçalho: leve
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: Preto # 000000
• Tamanho do texto do título:
  • Desktop = 6vw
  • Tablet = 9vw
  • Telefone = 11vw
• Espaçamento entre letras do cabeçalho: -0,4vw

3. Estilize o divisor

Passe para o próximo módulo, que é o módulo divisor. Mude a cor do divisor para preto e modifique as configurações de dimensionamento.

• Cor divisória: Preto #oooooo
• Peso do divisor: 12 px
• Largura: 14%
• Alinhamento do Módulo: Centro

4. Crie o BIOS da equipe usando uma seção regular + linha de três colunas

Agora que completamos a seção do título, estamos prontos para começar a construir a biografia da equipe. Comece adicionando uma nova seção regular com uma linha de três colunas.

5. Ajuste as configurações de dimensionamento da linha

Permita que a linha ocupe toda a largura do contêiner da seção, modificando as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

6. Ajuste as configurações de espaçamento de linha

Adicione um pouco de preenchimento personalizado superior e inferior também.

• Preenchimento superior: 2vw
• Preenchimento inferior: 2vw

7. Adicione um módulo Image e Blurb à coluna um

Os dois módulos principais que usaremos para criar o efeito final são uma imagem e um módulo de sinopse. Primeiro, adicione o módulo de imagem e depois a sinopse.

8. Faça upload de uma imagem e estilize-a

A página da sua equipe de ajuda instantânea tem como objetivo mostrar os membros da equipe. Abra o módulo de imagem e adicione a foto de um deles. Usaremos uma de nossas imagens de estoque Divi. Certifique-se de que as dimensões da imagem sejam 612 px X 612 px.

Alinhamento

Vá para a guia de design e altere o alinhamento da imagem.

• Alinhamento de imagem: centro

Dimensionamento

Modifique as configurações de dimensionamento também.

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

Espaçamento

E adicione alguma margem superior negativa.

• Margem:
  • Desktop = -3vw
  • Tablet e telefone = -13vw

Fronteira

Para transformar a imagem em um círculo, vamos alterar as configurações da borda.

• Cantos arredondados: 20vw todos os quatro cantos
• Estilos de borda: todos os quatro lados
• Largura da borda: 12 px
• Cor da borda: branco #ffffff
• Estilo de borda: duplo

Sombra da caixa

Também estamos adicionando alguma profundidade à imagem, aplicando uma sombra de caixa sutil.

• Sombra da caixa: a primeira opção
• Força do desfoque de sombra da caixa: 50 px

Índice Z

Em uma das etapas anteriores, adicionamos alguma margem superior negativa. Para garantir que a imagem fique no topo da coluna, mesmo quando a ultrapassar, vamos aumentar o índice z nas configurações de visibilidade.

• Índice Z: 3

9. Adicionar conteúdo ao Blurb e estilizá-lo

Adicionar CSS personalizado às configurações da página

Antes de qualquer coisa, adicionaremos CSS customizado para eliminar a margem inferior padrão do ícone dentro da sinopse. Adicione as seguintes linhas de código CSS às configurações da página:

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Dê ao Blurb uma aula de CSS

Abra o módulo blurb a seguir e adicione a classe CSS correspondente.

• Classe CSS: blurb-icon

Adicionar conteúdo

Usaremos texto de espaço reservado, mas você pode inserir o nome real e a descrição de um membro da equipe.

Escolha o ícone

Escolha um ícone de adição a seguir.

• Ícone de uso: Sim
• Ícone: Sinal de mais dentro de um círculo

Estilo de Fundo

Passe para as configurações de plano de fundo, adicione uma cor de plano de fundo padrão branco e um plano de fundo gradiente ao pairar.

• Plano de fundo: branco #ffffff
• Hover Background: Gradient
• Gradient Color One: # 00ffa1
• Gradient Color Two: # 29c4a9
• Tipo de gradiente: Linear
• Direção do gradiente: 154deg
• Posição inicial: 0
• Posição final: 46%

Ícone de estilo

Aplique as seguintes configurações de ícone a seguir:

• Cor do ícone:
  • Padrão: # 29c4a9
  • Hover: Transparent rgba (255,255,255,0)
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone:
  • Desktop = 2vw
  • Tablet = 4vw
  • Telefone = 6vw

Alinhamento

Passe para as configurações de texto e altere o alinhamento do texto.

• Alinhamento de Texto: Centro

Estilo do Texto do Título

Em seguida, abra as configurações de texto do título e faça algumas alterações em diferentes tamanhos de tela.

• Título: H4
• Fonte do título: Poppins
• Fonte do Título: Negrito
• Cor do texto do título: branco #ffffff
• Tamanho do texto do título:
  • Desktop: 1.5vw
  • Tablet: 2,5vw
  • Telefone: 3,5vw

Estilo do corpo do texto

Faça o mesmo para as configurações do corpo do texto.

• Cor do corpo do texto: branco #ffffff
• Tamanho do corpo do texto:
  • Desktop = 0.8vw
  • Tablet = 1.9vw
  • Telefone = 2.6vw
• Altura da linha corporal:
  • Desktop = 2vw
  • Tablet + Telefone = 3vw

Dimensionamento

A seguir, vamos alterar as configurações de dimensionamento de nosso módulo de sinopse.

• Largura do conteúdo: 100%
• Largura: 81%
• Alinhamento do Módulo: Centro

Espaçamento

Aplicaremos alguns valores de margem e preenchimento personalizados em diferentes tamanhos de tela também.

• Margem superior:
  • Desktop = -4vw
  • Tablet + telefone = -9vw
• Margem inferior:
  • Desktop = 3.5vw
  • Tablet + telefone = 10vw
• Preenchimento superior e inferior:
  • Desktop = 7.1vw
  • Tablet = 30vw
  • Telefone = 28vw
• Preenchimento esquerdo e direito
  • Desktop = 2vw
  • Tablet + Telefone = 8vw

Fronteira

Transforme o módulo blurb em um círculo adicionando um raio de borda.

• Cantos arredondados: 50vw todos os quatro cantos

Sombra da caixa

E conclua o design do módulo do blurb adicionando uma sombra de caixa que aparece ao passar o mouse.

• Sombra da caixa: quinto estilo
• Posição horizontal da sombra da caixa: 0vw
• Posição vertical da sombra da caixa:
  • Desktop + Hover = -14vw
  • Tablet = -44vw
  • Phone = -46vw
• Força de propagação da sombra da caixa:
  • Desktop + Hover = -6vw
  • Tablet + telefone = -19vw
• Cor da sombra da caixa:
  • Hover = rgba (0,0,0,0,05)

10. Estilo Coluna Um

Agora que adicionamos todos os módulos de que precisamos para a coluna um, é hora de estilizar a coluna.

Fundo

Abra as configurações de fundo da coluna um e aplique o seguinte fundo gradiente:

• Estilo de fundo: gradiente
• Gradient Color One: # 00ffa1
• Gradient Color Two: # 29c4a9
• Tipo de gradiente: Liner
• Direção do gradiente: 282 graus

Fronteira

Vá para a guia de design e transforme a coluna em um círculo adicionando um raio de borda.

• Cantos arredondados: 50vw

Transbordar

Para garantir que a imagem apareça acima da coluna, vamos alterar os transbordamentos horizontais e verticais nas configurações de visibilidade.

• Excesso horizontal e vertical: visível

11. Excluir colunas vazias e duplicar a primeira coluna duas vezes

Concluímos a primeira coluna e todos os módulos dentro dela. Para nos poupar algum tempo, vamos remover as colunas vazias e clonar a primeira coluna duas vezes.

Apagar as Colunas Dois e Três

Volte para as configurações da linha principal e clique no ícone da lixeira para as colunas dois e três.

Duplicar coluna um duas vezes

Depois de excluir as colunas dois e três, a coluna um parecerá estranha por um segundo, mas tudo muda assim que você clonar a coluna duas vezes.

12. Altere o conteúdo e as cores da coluna dois

Agora é hora de definir o estilo das novas colunas para os outros dois membros da equipe.

Coluna dois

Abra as configurações da segunda coluna e altere o fundo gradiente

• Cor gradiente de fundo um: # 00eeff
• Cor do gradiente de fundo dois: # 309ce5

Faça upload de uma imagem diferente também.

Continue abrindo o módulo blurb e alterando o fundo gradiente.

• Hover Background Color One: # 00eeff
• Passe o mouse sobre a cor de fundo dois: # 309ce5

Altere a cor do ícone também.

• Cor padrão do ícone: # 309ce5

Coluna três

Abra as configurações da terceira coluna e altere o fundo gradiente.

• Cor gradiente de fundo um: # ff91ec
• Cor gradiente de fundo dois: # a500ff

Altere o fundo gradiente do blurb a seguir.

• Hover Background Color One: # ff91ec
• Passe o mouse sobre a cor de fundo dois: # a500ff

Junto com a cor do ícone.

• Cor padrão do ícone: # a500ff

Antevisão

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

Área de Trabalho

Móvel

É um embrulho!

Nesta postagem, mostramos como criar uma página vibrante de hover com opções coloridas de hover. Sinta-se à vontade para usar este design em seu próximo projeto Divi. Experimente para uma página de equipe ou um diretório de contribuidores. Deixe-nos saber se você tem alguma opinião nos comentários.