Como criar um depoimento de layout de grade no Divi

Os layouts de grade são ideais para conter grandes quantidades de informações. É uma ótima ilustração de como os depoimentos podem ajudar. Felizmente, apresentar os depoimentos em uma grade no Divi é tão simples quanto colocá-los em um módulo separado para cada depoimento. Neste tutorial, aprenderemos como usar o módulo de depoimentos do Divi para construir um layout de grade de depoimentos. Para ajudá-lo a tomar uma decisão informada, mostraremos dois layouts em potencial.

O que estamos esperando ?

Visualização do projeto

O que vamos fazer neste guia é mostrado abaixo. Estou utilizando o Print Shop Layout Pack gratuito para criar uma área de depoimentos no meu site.

Primeiro layout de grade

Por enquanto, mostraremos os dois layouts em detalhes, embora o segundo faça uso de módulos do primeiro.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Criar linha

Primeiro, crie uma linha de 3 colunas.

Em seguida, clique no íon de engrenagem para abrir as configurações de linha.

Ative a opção de design no menu. Usando a opção Custom Gutter Width, defina Gutter Width como 1.

• Usar largura personalizada: sim
• Largura da calha: 1

Na seção Espaçamento, defina o preenchimento superior e inferior para 0 pixels cada. Termine a linha. Depois de terminarmos esta linha, vamos cloná-la e criar uma segunda.

• Preenchimento: 0px superior e inferior

Adicionar módulo de depoimento

Em seguida, precisamos adicionar um módulo de depoimento.

Conteúdo do depoimento

O conteúdo do depoimento deve ser adicionado em seguida. Isso inclui o nome, título e empresa do autor, bem como o conteúdo do corpo e uma fotografia do autor. Para minhas amostras, estou utilizando os nomes dos campos e o conteúdo do corpo padrão.

• Autor: nome do autor’s
• Cargo: título person’s
• Empresa: nome da empresa
• Conteúdo do corpo: o depoimento
• Imagem: a imagem em destaque

Projeto de Módulo de Testemunho

Ícone de cotação

Altere a cor do ícone de cotação para #fd335a e a cor de fundo para branco para obter o efeito desejado. Também é possível usar a cor do ícone para o nome da pessoa. Todos os módulos terão a mesma estrutura.

• Cor: #fd335a
• Cor de fundo: #ffffff

Imagem

A imagem é o próximo item da lista. A largura da borda da imagem deve ser definida como 4px e a cor da borda deve ser alterada para #000645. Para cada módulo, a borda corresponderá ao limite do módulo. Cada um deles será atualizado de forma independente por nossa equipe.

• Largura da borda da imagem: 4px
• Cor da borda da imagem: #000645

Texto de corpo

Selecione Roboto Mono no menu suspenso Body Text que aparece quando você faz isso. O restante das configurações também deve ser deixado em seus padrões.

• Fonte do corpo: Roboto Mono

Texto do autor

O Texto do Autor pode ser encontrado depois disso. Altere a fonte para Oswald, o peso para Semi Bold, o estilo para TT e a cor para #fd335a para os retoques finais.

• Fonte: Oswald
• Estilo: semi ousado
• Estilo: TT
• Cor do texto: #fd335a

Texto da posição

Em seguida, você desejará alterar a fonte do seu cargo para Roboto Mono. O restante das configurações também deve ser deixado em seus padrões.

• Fonte da posição: Roboto Mono

Texto da empresa

Em seguida, em "Texto da empresa", selecione Roboto Mono como sua fonte padrão. Mantenha as configurações padrão.

• Fonte da empresa: Roboto Mono

Fronteira

Na seção final, clique em Border. Para corresponder à borda da imagem, altere a largura para 24px e a cor da borda para #000645. Feche as definições de configuração do módulo. Também é possível alterar a cor da borda para cada módulo separadamente.

• Largura: 24px
• Cor: #000645

Duplicar o módulo

Em seguida, você precisa copiar o módulo duas vezes e movê-lo para as outras colunas dessa linha.

Visualização final

Veja como nossa grade está organizada. Se todos os depoimentos forem do mesmo tamanho, essa técnica funciona perfeitamente.

Aqui está uma abordagem de design diferente. Para o conteúdo de vários tamanhos, é o ideal.

Considerações finais

Isso conclui nossa análise da capacidade do módulo de depoimentos do Divi de construir um layout de grade de depoimentos. Usando as opções de linha e módulo do Divi, você pode construir uma grade com uma variedade de diferentes configurações de linha e coluna. Expandindo o que demonstramos aqui, poderíamos facilmente fazer uma grade muito maior. Módulos Divi de outros tipos também podem se beneficiar dessas técnicas.