Baixe uma demonstração gratuita e avançada do cliente Hover / Click Design for Divi

As pessoas se relacionam com outras pessoas. É por isso que em quase todos os sites que você visita, você verá rostos aparecerem. De clientes anteriores a membros da equipe e muito mais; quanto mais cedo você mostrar aos clientes e pessoas por trás de sua empresa, maiores serão suas chances de convencê-los de que sua empresa, marca ou produto é a escolha certa. Neste post, vamos nos concentrar em mostrar seus clientes de uma forma bonita e avançada. Você também poderá baixar o arquivo JSON 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 Client Showcase Hover / Click Design GRATUITAMENTE

Para colocar suas mãos no design de foco / clique da vitrine do cliente gratuito, primeiro você precisa baixá-lo 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

A primeira coisa que você precisa fazer é adicionar uma nova seção regular à página em que está trabalhando.

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Antes de adicionar qualquer módulo, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

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

Espaçamento

Remova o preenchimento padrão superior e inferior da próxima linha.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Configurações da coluna 2

Continue abrindo as configurações da segunda coluna.

Espaçamento

Adicione alguns valores de preenchimento personalizados à coluna.

• Enchimento superior: 9vw
• Preenchimento inferior: 9vw
• Preenchimento esquerdo: 8vw
• Preenchimento direito: 8vw

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H3 e parágrafo

Depois de concluir as configurações de linha e coluna, continue adicionando um Módulo de texto à coluna 1. Adicione as informações do cliente à caixa de conteúdo.

Fundo Gradiente

Vá para as configurações de fundo a seguir e aplique o seguinte fundo gradiente:

• Cor 1: rgba (43.135.218,0)
• Cor 2: rgba (0,0,0,0,55)
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Faça upload de uma imagem de plano de fundo também.

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Lato
• Cor do Texto: #dbdbdb
• Tamanho do texto: 1vw (desktop), 1.8vw (tablet), 2.3vw (telefone)
• Altura da linha de texto: 1,5vw (desktop), 2vw (tablet), 2,5vw (telefone)

Configurações de texto do título 3

Faça algumas alterações nas configurações de texto H3 também.

• Fonte do título 3: Playfair Display
• Peso da fonte do cabeçalho 3: negrito
• Cor do texto do título 3: #ffffff
• Tamanho do texto do título 3: 3vw (desktop), 4vw (tablet), 5vw (telefone)
• Altura da linha do título 3: 1,6em

Espaçamento

Continue acessando as configurações de espaçamento e estilizando a forma e a posição do módulo de acordo:

• Margem superior: 9vw
• Margem inferior: 9vw
• Margem esquerda: 7vw (desktop), 16vw (tablet), 17vw (telefone)
• Margem direita: 7vw (desktop), 16vw (tablet), 17vw (telefone)
• Preenchimento superior: 32vw (desktop), 55vw (tablet), 49vw (telefone)
• Preenchimento inferior: 3vw (desktop), 6vw (tablet e telefone)
• Preenchimento esquerdo: 2vw (desktop), 4vw (tablet), 5vw (telefone)
• Preenchimento direito: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Sombra da caixa

Também estamos adicionando uma sombra de caixa colorida.

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 7vw
• Cor da sombra: # ffcf0f

ID CSS

Conclua as configurações do módulo adicionando um ID CSS.

• ID CSS: foto-display-1

Clonar Módulo de Texto Cinco Vezes

Depois de concluir o primeiro Módulo de Texto, vá em frente e clone-o 5 vezes.

Alterar o conteúdo e a imagem de fundo de cada duplicata

Altere o conteúdo e a imagem de fundo em cada duplicata.

Alterar a cor da sombra da caixa de cada duplicado

Junto com a sombra da caixa.

• Cor da sombra: # 9f89ed

Alterar o ID CSS de cada duplicado e adicionar classe CSS

Cada Módulo de texto na coluna 1 precisa de um ID CSS exclusivo. O primeiro Módulo de Texto na coluna contém o ID CSS 'photo-display-1', o segundo precisa do 'photo-display-2', o terceiro 'photo-display-3' e assim por diante. Adicione uma classe CSS a cada Módulo de Texto duplicado também (certifique-se de não adicionar uma ao Módulo de Texto original).

• CSS ID: photo-display-2 (de 2 a 6)
• Classe CSS: photo-hide-first (todos os módulos de texto na coluna 1, exceto o primeiro)

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo H2

Depois de concluir todos os 6 módulos da coluna 1, você pode passar para a segunda coluna. Lá, o primeiro módulo de que precisaremos é um Módulo de texto com algum conteúdo H2.

Configurações de texto H2

Vá para a guia de design e modifique as configurações de texto H2 de acordo:

• Fonte do título 2: Playfair Display
• Cor do texto do título 2: # 636363
• Tamanho do texto do título 2: 3vw (desktop), 6vw (tablet e telefone)
• Cabeçalho 2 espaçamento entre letras: 0,1vw
• Altura da linha do título 2: 1,2em

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Adicione outro Módulo de Texto à coluna 2 com algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Lato
• Alinhamento de Texto: Justificar
• Tamanho do texto: 0,9vw (desktop), 2vw (tablet), 2,7vw (telefone)
• Altura da linha de texto: 2.1em

Espaçamento

Modifique os valores de margem nas configurações de espaçamento também.

• Margem superior: 2vw
• Margem inferior: 2vw
• Margem direita: 7vw

Adicionar Módulo Divisor à Coluna 2

Visibilidade

Passe para o próximo módulo, que é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Vá para a guia de design e altere a cor da linha.

• Cor da linha: # 636363

Espaçamento

Modifique os valores de margem em diferentes tamanhos de tela a seguir.

• Margem inferior: 7vw
• Margem esquerda: 14vw (desktop), 39vw (tablet), 38vw (telefone)
• Margem direita: 14vw (desktop), 39vw (tablet), 38vw (telefone)

Transformar, girar

Gire o Módulo Divisor.

• Esquerda: 90 graus

Transformar Traduzir

E reposicione-o usando alguns valores de conversão de transformação personalizados em diferentes tamanhos de tela.

• À direita: 2vw (desktop), 3vw (tablet e telefone)
• Parte inferior: -17.3vw (desktop), -43vw (tablet e telefone)

Adicionar Módulo de Texto # 3 à Coluna 2

Adicionar conteúdo

O próximo módulo de que precisamos é outro Módulo de Texto. Certifique-se de adicionar o nome do cliente correspondente à caixa de conteúdo (combine-o com o primeiro Módulo de texto na coluna 1).

Configurações de texto

Vá para a guia de design e modifique as configurações de texto de acordo:

• Fonte do texto: Lato
• Estilo da fonte do texto: maiúsculas
• Tamanho do texto: 1,3vw (desktop), 2,5vw (tablet), 3vw (telefone)
• Espaçamento entre letras do texto: 1px
• Altura da linha de texto: 1,2em

Espaçamento

Adicione um pouco de margem superior e inferior personalizada a seguir.

• Margem superior: 1em
• Margem inferior: 1em

ID CSS

Vá para a guia de design e adicione um ID CSS. Certifique-se de que o número seja igual ao do Módulo de texto correspondente na coluna 1.

• ID CSS: foto-clique-1

Clonar Módulo de Texto # 3 Cinco Vezes

Depois de concluir o primeiro módulo de texto do cliente, clone-o 5 vezes.

Alterar o conteúdo de cada duplicado (combinar com os módulos de texto na coluna 1)

Altere o nome do cliente em cada Módulo de Texto duplicado.

Alterar o ID CSS de cada duplicado

E combine o ID CSS de cada duplicata com o Módulo de Texto na coluna 1.

• ID CSS: foto-clique-2 (de 2 a 6)

Adicione o Módulo de Código # 1 à Coluna 2

Insira o código CSS

A última parte deste tutorial se concentra em fazer a funcionalidade de foco funcionar. Adicione um primeiro Módulo de Código à coluna 2 e insira as seguintes linhas de código CSS:

<style>
.photo-hide-first {
display: none;
}
</style>

Adicione o Módulo de Código # 2 à Coluna 2

Insira o código JQuery

Adicione outro Módulo de Código logo abaixo do anterior e insira o seguinte código jQuery para fazer a função de foco funcionar:

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

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

Neste post, mostramos como criar uma bela vitrine de cliente que você pode usar em qualquer site que criar. Combinamos as opções integradas do Divi com algum código jQuery para fazer a abordagem funcionar. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, certifique-se de 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.