Como substituir logotipos de clientes por depoimentos ao passar o mouse / clicar com Divi

Procurando uma maneira de adicionar interação aos logotipos do cliente e depoimentos correspondentes? Com o recurso de conteúdo responsivo do Divi, agora é mais fácil do que nunca mostrar diferentes conteúdos no estado padrão de um módulo e ao pairar. No tutorial Divi de hoje, vamos demonstrar isso mostrando como substituir logotipos de clientes por depoimentos ao passar o mouse (desktop) e clicar (tablet e telefone). Usaremos o Módulo Blurb para nos ajudar a chegar lá! Você também poderá baixar o arquivo JSON do layout gratuitamente!

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

Baixe o layout dos logotipos do cliente GRATUITAMENTE

Para colocar as mãos no layout de logotipos do cliente gratuito, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Vamos começar a recriar!

Adicionar nova seção

Cor de fundo

Comece adicionando uma nova seção a uma página nova ou existente. Abra as configurações da seção e altere a cor de fundo.

• Cor de fundo: # 000000

Espaçamento

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

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px

Fronteira

Conclua as configurações da seção adicionando uma borda branca.

• Largura da borda: 1vw
• Cor da borda: #ffffff

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e aumente a largura máxima da linha.

• Largura máxima: 1500px

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2 responsivo

O primeiro módulo de que precisamos nesta linha é um Módulo de Texto com algum conteúdo H2 responsivo.

• Desktop: Passe o mouse sobre os logotipos do cliente para ver o que eles têm a dizer!
• Tablet e telefone: Clique nos logotipos do cliente para ver o que eles têm a dizer!

Configurações de texto H2

Vá para a guia de design do módulo e altere as configurações de texto H2 da seguinte forma:

• Fonte do Título 2: Work Sans
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2: 40 px (desktop), 30 px (tablet), 25 px (telefone)

Adicionar Módulo Divisor à Coluna

Visibilidade

O próximo e último módulo de que precisamos nesta linha é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Em seguida, mude a cor da linha do módulo.

• Cor da linha: #ffffff

Dimensionamento

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

• Peso do divisor: 4px
• Largura: 10%
• Alinhamento do Módulo: Centro

Espaçamento

Conclua as configurações do módulo adicionando alguma margem superior.

• Margem superior: 100px

Adicionar linha # 2

Estrutura da Coluna

Adicione outra linha logo abaixo da anterior e use a seguinte estrutura de coluna para ela:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento em diferentes tamanhos de tela. Certifique-se de equalizar as alturas das colunas também, isso ajudará na próxima etapa; centralizar o conteúdo da coluna.

• Equalize Alturas de Coluna: Sim
• Largura: 100% (desktop), 80% (tablet e telefone)
• Largura máxima: 1500px
• Altura mínima: 500px (desktop), automático (tablet e telefone)

Elemento Principal

Para centralizar o conteúdo da coluna de sua linha, você 1) precisa habilitar a opção 'Equalizar altura da coluna' (etapa anterior) e 2) adicionar a seguinte linha de código CSS ao elemento principal de sua linha:

align-items: center;

Adicionar Módulo Blurb à Coluna

Deixe o conteúdo padrão vazio

Agora, para substituir os logotipos do cliente ao pairar, usaremos os módulos do Blurb. Comece com o primeiro na coluna 1. Certifique-se de deixar o título padrão e o conteúdo do corpo vazios, mas continue habilitando a opção de foco em ambos.

Adicionar conteúdo ao passar o mouse

Insira algum conteúdo escrito de sua escolha em ambos os campos de foco.

Imagem Padrão

Continue fazendo upload do logotipo da empresa de sua escolha nas configurações de imagem e ícone.

Remover imagem ao passar o mouse

Substituiremos os logotipos do cliente ao pairar, removendo-os inteiramente em seu estado de foco.

Hover Background Color

Como você pode notar na visualização deste post, também estamos mudando a cor de fundo do módulo ao pairar. Não use uma cor de fundo padrão e adicione o seguinte código de cor ao passar o mouse:

• Cor de fundo: # 191919

Configurações de imagem / ícone

Vá para a guia de design do módulo e certifique-se de que o seguinte alinhamento de imagem / ícone se aplica:

• Alinhamento de imagem / ícone: centro

Configurações de texto

Como estamos usando uma cor de fundo de seção preta, vamos mudar a cor do texto do módulo nas configurações gerais de texto.

• Cor do Texto: Claro

Configurações de texto do título

Em seguida, modifique as configurações de texto do título de acordo:

• Nível do título do título: H3
• Fonte do título: Work Sans
• Tamanho do texto do título: 24px
• Altura da linha de título: 1,4em

Configurações do corpo do texto

Faça algumas alterações nas configurações do corpo do texto também.

• Fonte do corpo: Open Sans
• Cor do corpo do texto: # 8c8c8c
• Altura da linha corporal: 2,5em

Espaçamento Padrão

Em seguida, vá para as configurações de espaçamento e certifique-se de que não haja preenchimento personalizado no estado padrão do módulo.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 0px
• Preenchimento direito: 0 px

Espaçamento de pairar

Ao passar o mouse, no entanto, estamos criando alguns espaços em branco para nosso depoimento usando os seguintes valores:

• Enchimento superior: 20 px
• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Transição

Conclua as configurações do módulo removendo a duração de transição padrão. Isso permitirá que o depoimento apareça imediatamente ao passar o mouse / clicar no logotipo.

• Duração da transição: 0ms

Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes

Depois de concluir o primeiro módulo Blurb na coluna 1, você pode clonar o módulo duas vezes e colocar as duplicatas nas colunas restantes da linha.

Clonar linha inteira

Agora você pode clonar essa linha quantas vezes quiser, dependendo de quantos logotipos de cliente deseja exibir.

Alterar o conteúdo do Hover de cada duplicata do módulo do Blurb

Certifique-se de alterar o logotipo do cliente em cada módulo do Blurb duplicado.

Alterar logotipo de cada duplicata de módulo do Blurb

Altere também o conteúdo de foco de cada módulo duplicado e pronto!

Antevisão

Agora que já 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 usar o recurso de opções responsivas do Divi para substituir logotipos de clientes por depoimentos ao passar o mouse / clicar. Esta é uma excelente maneira de economizar espaço em suas páginas e criar design interativo em diferentes tamanhos de tela. Além de mostrar o tutorial, também compartilhamos o arquivo JSON gratuitamente no início deste post! Se você tiver alguma dúvida, sinta-se à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.