Ir para o conteúdo principal

3 maneira diferente de personalizar o módulo de depoimento em Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

A única coisa que os visitantes sempre procuram em um site são os depoimentos. Eles representam credibilidade e influenciam o processo de tomada de decisão de clientes em potencial ao visitar seu website.

Além de garantir que você tenha histórias fortes para compartilhar, seu apelo visual também desempenha um papel importante. Neste tutorial, mostraremos a você maneiras fantásticas do 3 de personalizar o módulo de depoimento Divi usando apenas as opções internas.

exame

Antes de mergulhar no tutorial, vamos ver o resultado final em diferentes tamanhos de tela.

escritório

exemplo modificação do módulo 1 testimonial.jpg

exemplo módulo de modificação 2 testimony.jpg

exemplo módulo de modificação 3 testimonial.jpg

Móvel

exemplo móvel.jpg

Recriar o Exemplo # 1

primeiro exemplo testimonial divi.png

Adicione uma nova seção

Vamos começar com o primeiro exemplo! Crie uma nova página e adicione uma seção regular.

adicionar uma seção no divi.jpg

Adicione uma nova linha

Estrutura da coluna

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

adicione uma nova coluna em divi.jpg

dimensionamento

Sem adicionar mais módulos, abra os parâmetros de linha e faça algumas alterações nos parâmetros de dimensionamento.

  • Faça com que esta linha de largura total: Sim
  • Use uma largura de medianiz personalizada: Sim
  • Largura da calha: 1

definição de dimensionamento divi.jpg

Adicione um módulo de imagem à coluna 1

Carregar uma imagem

É hora de começar a adicionar módulos! O primeiro módulo que vamos precisar é de um módulo Image na coluna 1. Vá em frente e faça o download de uma imagem quadrada de sua escolha.

baixar uma foto divi.jpg

filtros

Em seguida, vá para as configurações de filtro e jogue com os diferentes efeitos.

  • Saturação: 40%
  • Contraste: 126%

image configuration.jpg

Adicione um módulo de botão à coluna 1

Adicione uma cópia

O segundo e último módulo que precisaremos na coluna 1 é um módulo de botão. Adicione uma cópia de escolha.

faça uma cópia de um image.jpg

Configurações de botão

Em seguida, vá para as configurações do botão e mude a aparência do seu botão.

  • Use estilos personalizados para o botão: Sim
  • Tamanho do texto do botão: 14px
  • Cor 1: # 5400ff
  • Cor 2: # 00fff6
  • Direcção do Gradiente: 100deg
  • Largura da borda do botão: 0px
  • Peso da fonte: Ultra Bold
  • Estilo da fonte: maiúscula

configurações do botão divi.jpg

espaçamento

Adicione também valores de espaçamento personalizados.

  • Top Padding: 10px
  • Preenchimento inferior: 10px
  • Preenchimento à esquerda: 30px
  • Estofado à direita: 30px

configuração de preenchimento interno.jpg

Caixa de sombra

E termine com um tom de caixa sutil.

  • Força de desfoque de sombra de caixa: 80px
  • Cor da sombra: rgba (0,0,0,0,3)

configuração de sombra divi.jpg

Adicione um módulo de depoimento à coluna 2

Adicionar conteúdo

Na segunda coluna, o único módulo que precisaremos é de um módulo de depoimentos. Adicione conteúdo aos diferentes campos e à área de conteúdo.

adicione um testimonial module.jpg

Cor de fundo

Em seguida, adicione uma cor de fundo ligeiramente transparente.

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

configuração de imagem de fundo.jpg

Configurações para o ícone do depoimento

Altere também as configurações do ícone do depoimento.

  • Cor do ícone do depoimento: # 0c0c0c
  • Cor do fundo do ícone do testemunho: rgba (245,245,245,0)

configuração da seção do testimonial icon.jpg

Configurações de texto do corpo

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

  • Fonte do corpo: Verdana
  • Altura do corpo: 1.7em

módulo de parâmetro de texto do corpo testimonial.jpg

espaçamento

Continue adicionando valores personalizados de margem e preenchimento diferentes nas configurações de espaçamento.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

  • Margem superior: 15vw (desktop e tablet), 0vw (telefone)
  • Margem inferior: 50px (tablet e telefone)
  • Margem esquerda: -10vw (desktop e tablet), 0vw (telefone)
  • Margem direita: 5vw
  • Preenchimento superior: 70px
  • Preenchimento inferior: 70px
  • Preenchimento à esquerda: 50px
  • Estofado à direita: 50px

espaçamento configuração divi module testimonial.jpg

fronteira

Adicione também uma borda esquerda.

  • Largura da borda esquerda: 7px
  • Cor da borda esquerda: # 5400ff

configuração da borda esquerda divi.jpg

Caixa de sombra

Por fim, adicione uma sombra de caixa sutil para moldar o módulo de testemunho.

  • Força de desfoque de sombra de caixa: 80px
  • Espalhe a força da sombra da caixa: -10px
  • Cor da sombra: rgba (0,0,0,0,49)

módulo de configuração de sombra testimonial.jpg

Clone os dois módulos e coloque as duplicatas nas colunas 3 e 4

Quando terminar de editar os módulos nas colunas 1 e 2, você poderá cloná-los e colocar as duplicatas nas duas colunas restantes.

clone dois módulos divi.jpg

Mude a imagem

Não se esqueça de mudar a imagem do seu segundo testemunho.

editar a imagem divi.jpg

Alterar o fundo gradiente

Altere também o fundo gradiente do botão.

  • Cor 1: # ff001d
  • Cor 2: # 3700ff
  • Direcção do Gradiente: 100deg

modificar o plano de fundo do módulo degradé divi testimonial.jpg

Mude a cor da borda do testemunho

E associe a cor da borda ao fundo gradiente do novo botão.

  • Cor da borda esquerda: # ff001d

módulo de testemunho divi

Recriar o Exemplo # 2

exemplo 2 criação de um testimonial section.png

Adicione uma nova seção

Vamos ao segundo exemplo! Adicione uma nova seção regular à sua página.

seleção de uma nova seção divi.jpg

Adicione uma nova linha

Estrutura da coluna

Sem fazer alterações na seção, adicione uma nova linha usando a seguinte estrutura de coluna:

escolha um layout para o módulo de depoimento divi.jpg

dimensionamento

Continue abrindo os parâmetros de linha e alterando os parâmetros de dimensionamento.

  • Faça com que esta linha de largura total: Sim
  • Use uma largura de medianiz personalizada: Sim
  • Largura da calha: 1

módulo de espaçamento testimonial divi.jpg

espaçamento

Em seguida, adicione valores de preenchimento personalizados à linha e às colunas.

  • Preenchimento à esquerda: 200px (área de trabalho), 30px (tablet), 25px (telefone)
  • Preenchimento à direita: 200px (área de trabalho), 30px (tablet), 25px (telefone)
  • Coluna 1 Padding à esquerda: 5px (desktop), 0px (tablet e telefone)
  • Coluna 1 Preenchimento à direita: 2.5px (desktop), 0px (tablet e telefone)
  • Coluna 2 Padding à esquerda: 2.5px (desktop), 0px (tablet e telefone)
  • Coluna 2 Preenchimento à direita: 2.5px (desktop), 0px (tablet e telefone)
  • Coluna 3 Padding à esquerda: 2.5px (desktop), 0px (tablet e telefone)
  • Coluna 3 Preenchimento à direita: 5px (desktop), 0px (tablet e telefone)

personalização da linha marginal divi.jpg

Adicione um módulo de vídeo à coluna 1

Link de vídeo

O primeiro módulo que precisaremos na coluna 1 é um módulo de vídeo. Associe este vídeo ao seu vídeo de depoimento.

adicionar um módulo video.jpg

Sobreposição de imagem

Adicione também uma sobreposição de imagem.

para configurar a sobreposição de imagem em divi.jpg

Adicione um módulo de depoimento à coluna 1

Adicionar conteúdo

O segundo e último módulo necessário na coluna 1 é um módulo testemunhal. Comece adicionando os detalhes do testemunho.

adicione um módulo de depoimento à coluna 1.jpg

Desativar o ícone do depoimento

Em seguida, desative o ícone do depoimento nas configurações do item.

  • Mostrar ícone do depoimento: não

desabilitando o clone no depoimento divi.jpg

Cor de fundo

Adicione um fundo branco e depois.

  • Cor de fundo: #ffffff

definir o fundo color.jpg

Configurações de texto do corpo

Altere também as configurações de texto do corpo.

  • Texto colorido no corpo: # 000000
  • Espaçamento entre letras do corpo: -0.5px
  • Altura do corpo: 1.7em

configurar a cor do módulo de fonte testimonial.jpg

espaçamento

E adicione margem personalizada e preencha os valores nas configurações de espaçamento.

  • Margem inferior: 30px (tablet e telefone)
  • Preenchimento: 50px
  • Preenchimento inferior: 50px
  • Preenchimento à esquerda: 80px
  • Estofado à direita: 80px

configurar o padding.jpg

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

fronteira

Também damos aos cantos arredondados do módulo na parte inferior esquerda e direita '30px'.

bordas arredondadas configuration.jpg

Caixa de sombra

Finalmente, para dar profundidade, damos ao módulo Testimonial uma sombra sutil de caixa.

  • Força de desfoque de sombra de caixa: 80px
  • Espalhe a força da sombra da caixa: -10px
  • Cor da sombra: rgba (0,0,0,0,3)

criação de testemunhos de módulo de fronteiras divi.jpg

Clone os módulos três vezes e coloque as duplicatas nas colunas restantes

Quando terminar de editar os dois módulos na coluna 1, clone-os duas vezes e coloque as duplicatas nas duas colunas restantes.

módulos testimonial divi blogpascher.jpg

Editar links de vídeo, conteúdo e superposições de imagem

Lembre-se de alterar o link de vídeo, o conteúdo e as sobreposições de imagens de seus novos depoimentos.

modificar links vídeos módulos depoimentos exemplo 2.jpg

Recriar o Exemplo # 3

crie o exemplo 3 divi module testimonials.png

Adicione uma nova seção

Vamos ao terceiro exemplo! Adicione uma nova seção regular à sua página.

seleção de uma seção divi.jpg

Adicione uma nova linha

Estrutura da coluna

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

escolha uma coluna duplicada layout.jpg

Coluna 1 cor de fundo

Em seguida, vá para as configurações de segundo plano e adicione uma cor de segundo plano à primeira coluna.

  • Coluna 1 Cor de fundo: # f9f9f9

configuração das configurações da linha divi.jpg

Coluna 2 cor de fundo

A segunda coluna precisará de um fundo branco.

  • Coluna 2 Cor de fundo: #ffffff

configuração de cores em divi.jpg

dimensionamento

Em seguida, vá para os parâmetros de dimensionamento e remova a largura da calha.

  • Use uma largura de medianiz personalizada: Sim
  • Largura da calha: 1

configuração do módulo de espaçamento testimonial divi example 3.jpg

espaçamento

Adicione valores de espaçamento personalizados a seguir.

  • Melhor preenchimento: 0px
  • Parte inferior do estofado: 0px
  • Preenchimento à esquerda: 0px
  • Estofado à direita: 0px
  • Preenchimento superior da coluna 1: 100px
  • Preenchimento inferior da coluna 1: 100px
  • Coluna 1 Padding left: 50px
  • Coluna 1 Padding à direita: 50px
  • Preenchimento superior da coluna 2: 100px
  • Preenchimento inferior da coluna 2: 100px
  • Coluna 2 Padding left: 50px
  • Coluna 2 Padding à direita: 50px

configuração de espaçamento de colunas em divi.jpg

fronteira

E dê a cada um dos limites '20px'.

con fi guração das fronteiras em divi.jpg

Caixa de sombra

Por último mas não menos importante, dê à sua linha uma sombra de caixa.

  • Força de desfoque de sombra de caixa: 80px

exemplo de testemunho do módulo de configuração de sombra 3.jpg

Adicione um módulo de depoimento à coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! O primeiro módulo que precisaremos na coluna 1 é um módulo testemunhal. Adicione o conteúdo.

adicione um módulo de depoimento divi example 3.jpg

Carregar uma imagem

Continue fazendo o upload de uma imagem nas configurações da imagem.

baixar uma imagem divi builder module testimonial.jpg

Desativar o ícone do depoimento

Em seguida, desative o ícone do depoimento.

  • Mostrar ícone do depoimento: não

desativar o ícone testimonial divi example 3.jpg

Desativar cor de fundo

Além disso, desative a cor do plano de fundo.

  • Use a cor de fundo: Não

desativar o background color.jpg

Configurações de texto do corpo

Continue indo até a guia Design e fazendo algumas alterações nas configurações de texto do corpo.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

  • Polícia Corporal: Fatface Abril
  • Texto colorido no corpo: # 000000
  • Tamanho do texto do corpo: 20px

corpo texto parâmetros módulo testimonial divi.jpg

Adicione um módulo de texto à coluna 1

Adicionar conteúdo

O segundo módulo que precisaremos na coluna 1 é um módulo de texto. Adicione a cópia do depoimento à área de conteúdo.

adicione um módulo de texto à coluna 1 divi example 3.jpg

espaçamento

Em seguida, vá para a guia Design e adicione as margens superior e inferior personalizadas.

  • Margem superior: 50px
  • Margem inferior: 50px

exemplo de testemunho do módulo de configuração de localização 3.jpg

Adicione um módulo de imagem à coluna 1

Baixe o logotipo da empresa

O terceiro e último módulo que precisaremos na primeira coluna é um módulo de imagem. Você pode usar este módulo para adicionar o logotipo da empresa associada ao testemunho.

módulo de testemunho divi

Clone todos os módulos e coloque duplicatas na coluna 2

Quando terminar de editar todos os módulos na coluna 1, você poderá copiá-los e copiá-los. Depois de ter feito, coloque as duplicatas na segunda coluna.

módulo de testemunho divi

Alterar a imagem e a cópia do testemunho

Não se esqueça de alterar o conteúdo do depoimento com as imagens.

mudar o ícone e o conteúdo do depoimento divi.jpg

finalmente

Isso é tudo para este tutorial, espero que lhe permita propor várias variantes

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
2 ações
ação2
chilrear
Enregistrer
Whatsapp