8 Combinações de Exibição de Elementos no Módulo de Testemunho do Divi

O módulo de depoimentos do Divi inclui vários elementos opcionais que você pode usar ou desabilitar. Esses elementos são fáceis de usar e escolhê-los em diferentes combinações pode criar alguns designs interessantes. Neste post, veremos as combinações de exibição de 8 elementos no módulo de depoimentos do Divi para ajudá-lo a decidir quais elementos são melhores para suas necessidades.

Criaremos duas versões, uma com fundo branco e outra com fundo preto, de cada combinação.

Vamos começar!

Visão geral dos elementos do módulo de depoimento Divi

Vejamos os elementos dentro do módulo de depoimento. Cada elemento tem opções de estilo que veremos mais adiante. Além disso, cada um desses elementos pode ser usado ou não. Também os veremos usados ​​em várias combinações. Cada um dos elementos inclui configurações para tamanhos de tela e o estado de foco.

Autor do Módulo de Testemunho

Autor é o nome da pessoa que escreveu o depoimento. Ele aparece sob o conteúdo do corpo e é usado por padrão. Sua fonte é a maior por padrão. Caso não queira exibir o nome do autor, basta excluir o conteúdo fictício e deixar o campo em branco.

Cargo

Job Title é o título do trabalho do autor. É útil para empresas B2B (business to business) em que o cargo do autor é relevante para o depoimento. Este campo está em branco por padrão. Para usá-lo, basta adicionar texto ao campo. Ele aparece sob o nome do autor e é alinhado à esquerda.

Companhia

Empresa é o nome da empresa para a qual o autor trabalha. Isso também é útil para depoimentos B2B. Está em branco por padrão e aparece abaixo do nome do autor. A empresa é colocada à direita do Cargo se também for usado.

Contente

A área de conteúdo do corpo é um editor TinyMCE que pode usar HTML, CSS inline, mídia, etc. Inclui as guias Visual e Texto e todas as configurações padrão do TinyMCE. Ele aparece na maior área no meio do módulo. É extremamente versátil.

O exemplo abaixo mostra o conteúdo com um Título 2, conteúdo do corpo e uma imagem. Você pode incluir qualquer coisa que possa entrar em um editor TinyMCE, como vídeos, códigos de acesso, HTML, etc.

Imagem

A imagem exibe uma foto (ou logotipo) do autor. Ele é colocado à esquerda do conteúdo. É circular por padrão, mas você pode estilizar a borda.

Ícone de cotação

O ícone de cotação exibe uma aspa dentro de um círculo. Isso é ativado por padrão, mas você pode desativá-lo se quiser. Você pode ajustar o tamanho e alterar a cor do ícone e seu plano de fundo de forma independente.

Estilize o Módulo de Testemunho Divi

Agora, vamos ver algumas das opções de estilo. Vamos estilizar o módulo de depoimento Divi usando o estilo do Pacote de Layout de Aluguel de Scooter gratuito que está disponível no Divi. Vamos criar uma versão branca e uma preta. Ambos usarão o mesmo conteúdo e faremos alterações em ambos para as combinações de exibição do elemento.

Conteúdo do Módulo Meu Testemunho

Aqui está uma olhada no conteúdo do meu módulo de exemplo. Estou usando nomes genéricos e texto fictício. Estou adicionando um título e estilizando-o com CSS embutido e adicionando três imagens em miniatura. A imagem do autor é 1117×629. Usarei esse mesmo conteúdo para todas as combinações de exibição.

Para referência, aqui está o HTML inline com CSS que estou usando para o título. Adiciona preenchimento ao título. Quando estilizarmos o módulo preto, adicionaremos cor.

• Código:

  <h3 style="padding: 25px 0px 25px 0px;"><strong>Your content goes here.</strong></h3>

Opção de estilo branco do módulo de depoimento Divi

Primeiro, abra as configurações do módulo de depoimento e role para baixo até Background. Altere a cor para #f5f5f5.

• Plano de fundo: #f5f5f5

Ícone de cotação

Em seguida, vá para a guia design e altere a cor do ícone de cotação para #e02b20. Vamos deixar sua cor de fundo na configuração padrão.

• Cor do ícone de cotação: #e02b20

Habilite Usar tamanho de ícone de cotação personalizado e defina o tamanho da fonte do ícone para 36px.

• Use o tamanho do ícone de cotação personalizada: sim
• Tamanho da fonte do ícone: 36px

Imagem

Em seguida, role para baixo até Imagem. Altere a largura da borda para 3px, a cor para #e02b20 e altere o estilo para pontilhado.

• Largura da borda da imagem: 3px
• Cor da borda: #e02b20
• Estilo da borda: pontilhado

Texto de corpo

Em seguida, role para baixo até Corpo de texto. Altere a Cor para preto e a Altura da Linha para 1,8 em.

• Cor: #000000
• Altura da linha: 1,8 em

Texto do autor

Role para baixo até Texto do autor. Altere a espessura para semi-negrito, a cor para preto e o tamanho para 24px.

• Peso da fonte: Semi negrito
• Cor: #000000
• Tamanho: 24px

Texto da posição

Para o texto de posição, defina a cor para preto.

• Cor: #000000

Texto da empresa

Para o Texto da empresa, defina a Cor para preto. Feche as configurações do módulo de depoimento.

• Cor do texto da empresa: #000000

Opção de estilo preto do módulo de depoimento Divi

Em seguida, duplique o módulo de depoimento e abra suas configurações.

Role até o editor de conteúdo do corpo e adicione o CSS embutido para alterar a cor do título para branco.

• HTML com CSS:

  <h3 style="color: white; padding: 25px 0px 25px 0px;"><strong>Your content goes here.</strong></h3>

Em seguida, role até o plano de fundo e altere a cor para preto.

• Plano de fundo: #000000

Texto de corpo

Em seguida, clique na guia de design e role para baixo até Corpo de texto. Defina a Cor para branco.

• Cor: #ffffff

Texto do autor

Role para baixo até Author Text e defina sua cor para branco.

• Cor: #ffffff

Texto da posição

Role até Posicionar texto e defina a Cor para branco.

• Cor: #ffffff

Texto da empresa

Por fim, role até Texto da empresa e altere a Cor da fonte para branco.

• Cor: #ffffff

Combinações de exibição no módulo Testimonial da Divi

Agora temos dois módulos de depoimentos que podemos usar para exibir várias combinações de elementos.

Combinação de Exibição do Módulo de Testemunho Divi 1

Nossa primeira combinação usa o nome do autor e o ícone de cotação. Essas são as configurações padrão do módulo de depoimentos.

Aqui está a versão de fundo preto. Eu simplesmente deixei os campos Cargo e Nome da Empresa vazios.

Combinação de Exibição do Módulo de Testemunho Divi 2

Para nossa segunda combinação, removi o Nome do autor e o ícone de citação, para que ele não exiba nenhum dos elementos. Isso só é ideal se a informação for fornecida no conteúdo do corpo.

Aqui está a versão com fundo branco.

Combinação de Exibição do Módulo de Testemunho Divi 3

Para nossa terceira combinação, removi o ícone de cotação e adicionei o nome da empresa.

Aqui está a versão de fundo preto.

Combinação de Exibição do Módulo de Testemunho Divi 4

Para nossa quarta combinação, removi o Nome do Autor e o Ícone de Citação e adicionei o Cargo e o Nome da Empresa.

Aqui está a versão com fundo branco.

Combinação de Exibição do Módulo de Testemunho Divi 5

Claro, não estamos limitados ao texto que adicionamos a qualquer um dos campos. Este exemplo usa o nome da empresa como o nome do autor. Também incluí o ícone de cotação.

Aqui está a versão de fundo preto.

Combinação de Exibição do Módulo de Testemunho Divi 6

Também podemos adicionar mais informações a cada linha. Para este, adicionei uma barra após o nome do autor e incluí o nome da empresa no mesmo campo. Também incluí o título do trabalho e o ícone de cotação.

Aqui está a versão com fundo branco.

Combinação de Exibição do Módulo de Testemunho Divi 7

Nossa sétima combinação mostra o ícone de cotação, o nome do autor e o cargo.

Aqui está a versão de fundo preto.

Combinação de Exibição do Módulo de Testemunho Divi 8

Nossa oitava combinação tem todos os elementos habilitados.

Aqui está a versão de fundo branco desta combinação.

Pensamentos finais

Essa é a nossa visão das combinações de exibição de 8 elementos no módulo de depoimentos do Divi. A seleção dos elementos é simples, por isso é fácil experimentar diferentes combinações para ver o que funciona melhor para qualquer situação. Eu recomendo usar qualquer uma dessas combinações ou experimentar a sua própria para ver o que funciona melhor para você. Qualquer que seja a combinação escolhida, certifique-se de incluir informações suficientes para adicionar credibilidade ao depoimento.

Nós queremos ouvir de você. Você usa alguma dessas ou outras combinações no módulo de depoimentos da Divi? Deixe-nos saber sobre sua experiência nos comentários.