Como criar guias de depoimento personalizadas com Divi (download GRATUITO!)

Para muitas empresas, os depoimentos são um dos principais argumentos para conseguir novos clientes. Isso significa que prestar um pouco mais de atenção aos depoimentos em seu site nunca será desperdiçado. Dentro da Divi, existem muitas maneiras diferentes de compartilhar depoimentos, usando o Módulo de Depoimento Divi, por exemplo. Mas se você está procurando uma abordagem mais interativa, vai adorar este tutorial. Vamos mostrar como criar guias personalizadas de depoimentos dentro do Divi. Assim que alguém passar o Módulo Blurb à esquerda, um depoimento correspondente aparecerá à direita. Os efeitos de transição neste design também são contínuos, o que ajuda a dar uma sensação extra de personalização ao seu site. 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 layout personalizado das guias de depoimento GRATUITAMENTE

Para colocar as mãos no layout de guias de depoimentos personalizados e gratuitos, 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 à página em que está trabalhando. Abra as configurações da seção e adicione uma cor de fundo.

• Cor de fundo: #ffefdb

Espaçamento

Vá para a guia de design da seção e adicione alguns valores de margem e preenchimento personalizados.

• Margem superior: 5%
• Margem inferior: 5%
• Margem esquerda: 5%
• Margem direita: 5%
• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Fronteira

Inclua também alguns cantos arredondados.

• Todos os cantos: 20px

Adicionar linha # 1

Estrutura da Coluna

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

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione alguma margem inferior.

• Margem inferior: 3%

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2

É hora de adicionar módulos, começando com um Módulo de Texto contendo algum conteúdo H2.

Configurações de texto H2

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

• Fonte do título 2: Montserrat
• Cabeçalho 2 Peso da fonte: Semi negrito
• Tamanho do texto do título 2: 31px
• Cabeçalho 2 espaçamento entre letras: -1 px

Adicionar Módulo Divisor à Coluna

Visibilidade

Logo abaixo do Módulo de Texto, estamos adicionando 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 do módulo e altere a cor da linha para branco.

• Cor da linha: #ffffff

Dimensionamento

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

• Peso do divisor: 10px
• Largura: 14%
• Altura: 10px

Fronteira

E complete as configurações do módulo adicionando alguns cantos arredondados às configurações de borda.

• Todos os cantos: 10px

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha. Use a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e equalize as alturas das colunas nas configurações de dimensionamento.

• Equalize Alturas de Coluna: Sim

Configurações da coluna 2

Cor de fundo

Em seguida, abra as configurações da coluna 2 e aplique uma cor de fundo.

• Cor de fundo: # fffbf9

Espaçamento

Vá para a guia de design da coluna e aplique um pouco de preenchimento superior e inferior em telas menores.

• Enchimento superior:
  • Desktop: Nenhum
  • Tablet e telefone: 300px
• Padding Inferior
  • Desktop: Nenhum
  • Tablet e telefone: 300px

Fronteira

Inclua também alguns cantos arredondados.

• Todos os cantos: 10px

Adicione o Módulo Blurb # 1 à Coluna 1

Adicionar conteúdo

É hora de adicionar módulos, começando com um primeiro Módulo Blurb na coluna 1. Adicione algum conteúdo de sua escolha.

Carregar imagem de proporção 1: 1

Faça upload de uma imagem com proporção de 1: 1 a seguir.

Cor de fundo

Em seguida, aplique a seguinte cor de fundo:

• Cor de fundo: # d5d6ea

Configurações de imagem

Faça alterações nas configurações de imagem também.

• Posicionamento de imagem / ícone: esquerda
• Cantos arredondados da imagem: 100 px

Configurações de texto do título

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

• Fonte do título: Montserrat
• Peso da fonte do título: Semi negrito
• Espaçamento entre letras de título: -1px

Configurações do corpo do texto

Também estamos alterando as configurações do corpo do texto.

• Fonte do corpo: Lato
• Tamanho do corpo do texto: 13px

Espaçamento

A seguir, adicionaremos algum espaço ao redor do conteúdo do nosso módulo aplicando os seguintes valores de preenchimento:

• Enchimento superior: 5%
• Estofamento inferior: 5%
• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Fronteira

Adicione alguns cantos arredondados também.

• Todos os cantos: 10px

Animação

Por padrão, há um efeito de animação aplicado à imagem do Módulo Blurb. Estamos removendo esta animação nas configurações de animação.

• Animação de imagem / ícone: sem animação

ID CSS

Para criar o design da guia de depoimento, vamos precisar adicionar algum código no final deste tutorial. Para se preparar para isso, adicionaremos um ID CSS à guia avançada do módulo Blurb.

• ID CSS: testemunho-pessoa-1

Imagem do Blurb e CSS do título

Também estamos usando duas linhas de código CSS na guia avançada. Um para a imagem da sinopse e outro para o título da sinopse.

width: 25% !important;

margin-top: 25px;

Clone o módulo do Blurb três vezes

Depois de concluir o primeiro módulo do Blurb, você pode cloná-lo três vezes.

Alterar conteúdo e imagens

Certifique-se de alterar o conteúdo e as imagens de cada Módulo Blurb duplicado.

Alterar cores de fundo

Junto com as cores de fundo.

• Duplicado 1: # fffed6
• Duplicado 2: # d7ecd9
• Duplicado 3: # f5d5cb

Alterar IDs CSS

E, claro, os IDs CSS. Use numeração consecutiva.

• Duplicado 1: testemunha-pessoa-2
• Duplicado 2: testemunha-pessoa-3
• Duplicado 3: testemunha-pessoa-4

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

Adicionar citação à caixa de conteúdo

Para a segunda coluna. Lá, o primeiro módulo de que precisamos é um Módulo de Texto com um caractere de aspas.

Configurações de texto

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

• Fonte do texto: Playfair Display
• Cor do texto: #ffefdb
• Tamanho do texto: 200px
• Altura da linha de texto: 1em

Posição

Reposicione o módulo também.

• Posição: Absoluta
• Localização: Superior Esquerdo
• Deslocamento horizontal: 5%

Adicionar Módulo de Texto de Depoimento à Coluna 2

Adicionar conteúdo de depoimento

Passe para o próximo Módulo de Texto. Este será dedicado ao nosso primeiro depoimento. O depoimento que você coloca na caixa de conteúdo deve corresponder ao primeiro módulo do Blurb na coluna 1.

Configurações de texto

Altere as configurações de texto do módulo de acordo:

• Fonte do texto: Lato
• Cor do texto: # 000000
• Tamanho do texto: 20px
• Altura da linha de texto: 2.1em
• Alinhamento de Texto: Centro

Dimensionamento

Certifique-se de que a largura esteja definida como “100%” também.

• Largura: 100%

Espaçamento

Em seguida, adicione alguns valores de margem e preenchimento personalizados às configurações de espaçamento.

• Margem superior: 30%
• Preenchimento esquerdo: 10%
• Preenchimento direito: 10%

ID CSS

E adicione um ID CSS à guia avançada. O número no final deste ID CSS deve corresponder ao número no final do ID CSS do Módulo Blurb correspondente.

• ID CSS: testemunho-cópia-1

Clonar Módulo de Texto Três Vezes

Depois de concluir o primeiro Módulo de Texto de depoimento, você pode cloná-lo três vezes.

Alterar o conteúdo do depoimento

Certifique-se de alterar o conteúdo do testemunho nos módulos duplicados.

Alterar IDs CSS

Junto com os IDs CSS. Certifique-se de seguir uma ordem consecutiva.

• Duplicado 1: cópia-testemunho-2
• Duplicado 2: testemunho-cópia-3
• Duplicado 3: cópia-testemunho-4

Adicionar classe CSS ao primeiro módulo de texto de depoimento

E precisaremos adicionar uma classe CSS ao depoimento que queremos habilitar no início. Nesse caso, esse é o primeiro.

• Classe CSS: mostrar testemunho

Adicionar Módulo de Código Abaixo do Módulo Divisor (Linha 1)

Agora que temos todos os elementos no lugar, é hora de fazer a mágica acontecer. Adicione um novo Módulo de Código logo abaixo do Módulo Divisor na primeira linha da seção.

Adicionar código CSS

Insira as seguintes linhas de código CSS entre as tags de estilo, como você pode ver na tela de impressão abaixo.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

Adicionar código JQuery

Em seguida, coloque as seguintes linhas de código JQuery entre as tags de script, como você pode ver na tela de impressão abaixo e pronto!

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

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 criar um design de depoimento interativo para qualquer tipo de site que você construir. Mais especificamente, mostramos como criar guias personalizadas de depoimentos que são acionadas quando alguém passa o mouse sobre um dos módulos do Blurb à esquerda. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à 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.