Como criar sobreposições de foco exclusivas para depoimentos com Divi

Os depoimentos são um grande negócio para muitos sites. Eles mostram experiência e os visitantes geralmente procuram por eles se quiserem descobrir a credibilidade de uma empresa ou pessoa. É por isso que é importante pensar na forma como você apresenta visualmente os depoimentos em seu site.

Com o Divi, você pode exibir seus depoimentos exatamente da maneira que deseja. Para inspirar você, mostraremos como criar uma maneira impressionante e única de apresentar depoimentos usando sobreposições de foco.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado final.

Adicionar nova seção

Vamos começar! Adicione uma nova página ou abra uma existente e adicione uma nova seção regular.

Adicionar nova linha 1

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione alguns valores de espaçamento personalizados também.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Coluna 2 Preenchimento esquerdo: 2vw (desktop), 3vw (tablet e telefone)
• Coluna 2 Preenchimento direito: 11vw (desktop), 3vw (tablet e telefone)

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

É hora de começar a adicionar os vários módulos! Comece com um Módulo de imagem na primeira coluna. Faça upload de uma imagem de retrato de sua escolha.

Alinhamento de imagem

Abra as configurações de imagem e altere o alinhamento da imagem.

• Alinhamento de imagem: esquerda

Dimensionamento

Altere as configurações de dimensionamento a seguir.

• Largura: 78% (desktop), 70% (tablet e telefone)
• Alinhamento do Módulo: Esquerda

Adicionar Módulo de Texto Hover Overlap à Coluna 1

Adicionar conteúdo

Logo abaixo do Módulo de Imagem, adicione um Módulo de Texto. Coloque os detalhes da pessoa na caixa de conteúdo.

Fundo Padrão

Continue adicionando uma cor de fundo.

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

Hover Background

Adicione outra cor de fundo ao pairar.

• Cor de fundo: # 0f1bff

Configurações de texto padrão

Em seguida, altere as configurações de texto.

• Cor do texto: #ffffff
• Tamanho do texto: 0px
• Altura da linha de texto: 0 px

Configurações de texto flutuante

Faça alguns ajustes para as configurações de texto ao pairar.

• Tamanho do texto: 19px
• Altura da linha de texto: 2em

Configurações de texto de cabeçalho padrão

As configurações de texto do título também precisam ser modificadas.

• Peso da fonte do cabeçalho 3: ultra negrito
• Estilo da fonte do título 3: maiúsculas
• Cor do texto do título 3: #ffffff
• Tamanho do texto do título 3: 0 px
• Altura da linha do título 3: 0em

Hover Heading Text Settings

Adicione valores diferentes ao passar o mouse.

• Tamanho do texto do título 3: 35px
• Altura da linha do título 3: 1.1em

Espaçamento

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

• Margem superior: -100px
• Margem esquerda: 50px
• Margem direita: 50px
• Top Padding: 40px
• Preenchimento inferior: 60px

Alterar a orientação do texto

Volte para as configurações de texto e altere a orientação do texto.

• Orientação do Texto: Centro

Sombra de caixa padrão

Em seguida, adicione uma sombra de caixa padrão ao módulo de texto. Esta sombra da caixa fará parte do design geral.

• Posição horizontal da sombra da caixa: 1000px
• Posição vertical da sombra da caixa: -400 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 250px
• Cor da sombra: rgba (175,175,175,0,13)

Hover Box Shadow

Para criar o efeito especial de sobreposição de foco, adicione também uma sombra de caixa de foco.

• Posição horizontal da sombra da caixa: -73px
• Posição vertical da sombra da caixa: -49px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 10px
• Cor da sombra: rgba (255,182,12,0.53)

Transições

Para criar uma transição suave, altere a duração da transição na guia avançada.

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

Adicionar Módulo de Texto de Depoimento à Coluna 2

Adicionar conteúdo

Na segunda coluna, a primeira coisa de que precisaremos é um Título do Módulo de Texto. Vá em frente e adicione um resumo do depoimento.

Configurações de texto de título

Em seguida, altere as configurações do texto do título.

• Fonte do título 3: Goudy Bookletter 1911
• Alinhamento de Texto Título 3: Esquerda
• Tamanho do texto do título 3: 3,5vw (desktop), 40px (tablet), 30px (telefone)
• Altura da linha do título 3: 1.1em

Espaçamento

Continue adicionando alguns valores de espaçamento personalizados.

• Margem superior: 7vw (desktop), 100px (tablet), 50px (telefone)

Adicionar Módulo de Texto de Descrição à Coluna 2

Adicionar conteúdo

Adicione outro Módulo de Texto com todo o depoimento logo abaixo do título Módulo de Texto.

Configurações de texto

Depois de adicionar o depoimento, vá em frente e altere as configurações de texto.

• Altura da linha de texto: 2.2em
• Orientação do Texto: Esquerda

Espaçamento

Adicione alguma margem superior personalizada também.

• Margem superior: 4vw (desktop), 50px (tablet e telefone)

Adicionar nova linha

Estrutura da Coluna

Agora que terminamos a primeira linha, vamos adicionar a segunda usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Margem superior: 100px
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Coluna 1 Preenchimento esquerdo: 11vw (desktop), 3vw (tablet e telefone)
• Coluna 1 Preenchimento direito: 2vw (desktop), 3vw (tablet e telefone)

Clonar Módulos de Texto da Linha Anterior e Colocar na Coluna 1

Volte para a linha anterior e clone os dois módulos na coluna 2. Depois de fazer isso, coloque as duplicatas na primeira coluna da nova linha.

Alterar a orientação do texto

Altere a orientação do texto de ambos os módulos.

• Orientação do texto: direita

Adicionar Módulo de Imagem à Coluna 2

Enviar Imagem

Em seguida, adicione um Módulo de imagem à segunda coluna e carregue uma nova imagem de retrato.

Alinhamento de imagem

Altere o alinhamento da imagem do módulo.

• Alinhamento de imagem: direita

Dimensionamento

Continue alterando as configurações de dimensionamento.

• Largura: 78% (desktop), 70% (tablet e telefone)
• Alinhamento do Módulo: Direito

Espaçamento

Adicione alguns valores de espaçamento personalizados também.

• Margem superior: 50 px (tablet e telefone)

Adicionar Módulo de Texto Hover Overlap à Coluna 2

Adicionar conteúdo

O último módulo que precisamos para finalizar este design é um Módulo de Texto abaixo do Módulo de Imagem. Adicione os detalhes da pessoa na caixa de conteúdo.

Fundo Padrão

Em seguida, adicione uma imagem de plano de fundo ao módulo.

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

Hover Background

Altere a cor do plano de fundo ao pairar.

• Cor de fundo: # 690cff

Configurações de texto padrão

Altere as configurações de texto a seguir.

• Cor do texto: #ffffff
• Tamanho do texto: 0px
• Altura da linha de texto: 0 px
• Orientação do Texto: Centro

Configurações de texto flutuante

Faça alguns ajustes ao pairar.

• Tamanho do texto: 19px
• Altura da linha de texto: 2em

Configurações de texto de cabeçalho padrão

Altere também as configurações de texto do título.

• Peso da fonte do cabeçalho 3: ultra negrito
• Cor do texto do título 3: #ffffff
• Tamanho do texto do título 3: 0 px
• Altura da linha do título 3: 0em

Hover Heading Text Settings

Com alguns pequenos ajustes ao pairar.

• Tamanho do texto do título 3: 35px
• Altura da linha do título 3: 1.1em

Espaçamento

Continue acessando as configurações de espaçamento e adicione alguns valores personalizados.

• Margem superior: -80px
• Margem esquerda: 50px
• Margem direita: 50px
• Top Padding: 40px
• Preenchimento inferior: 60px

Sombra de caixa padrão

Adicione uma sombra de caixa padrão ao Módulo de Texto.

• Posição horizontal da sombra da caixa: -1000px
• Posição vertical da sombra da caixa: -420 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 250px
• Cor da sombra: rgba (175,175,175,0,13)

Hover Box Shadow

E mude a sombra da caixa ao pairar.

• Posição horizontal da sombra da caixa: -73px
• Posição vertical da sombra da caixa: -49px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 10px
• Cor da sombra: rgba (12.255.238,0.53)

Transições

Por último, mas não menos importante, crie uma transição suave alterando a duração da transição.

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

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado final!

Pensamentos finais

Esperamos que esta postagem tenha inspirado você a criar seções de depoimentos impressionantes usando sobreposições de foco! Eles realmente ajudam você a adicionar outra dimensão ao seu site sem ter que gastar muito tempo codificando ou descobrindo coisas. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!