Como projetar um gráfico de comparação de produtos criativos com Divi

Um gráfico de comparação de produtos pode ser uma forma extremamente eficaz de promover novos produtos junto com seus recursos atualizados. O aspecto visual de um gráfico é mais atraente para os usuários do que um simples texto. E a estrutura de uma comparação lado a lado permite que os usuários vejam a diferença entre cada característica do produto com facilidade.

Neste tutorial, vou mostrar como criar um gráfico de comparação de produtos criativos com Divi. E este layout de design pode ser usado para comparar praticamente qualquer coisa. Por exemplo, posso ver que este é um layout perfeito para estudos de caso também.

Vamos começar.

Espiada

Aqui está uma prévia do gráfico de comparação que irei construir neste tutorial.

O que você precisa para este tutorial

Para este tutorial, você precisa do seguinte:

• Tema Divi (instalado e ativo)
• Duas imagens (cerca de 800 por 450 pixels) para servir como imagens do produto no gráfico de comparação.

Criação de suas imagens de título e produto

Para começar, crie uma nova página, implante o Visual Builder e, em seguida, escolha construir sua página do zero.

Em seguida, adicione um layout de uma coluna à linha da sua seção.

Antes de adicionar um módulo, vamos para a configuração da seção e atualizamos o seguinte:

Cor de fundo: # 222222
Cor do gradiente de fundo à esquerda: rgba (242,90,71,0.14)
Cor do gradiente de fundo à direita: rgba (255,255,255,0)
Tipo de gradiente: radial
Colocar gradiente acima da imagem de fundo: SIM

Salvar configurações. Agora abra as configurações de sua linha e dê a ela uma largura personalizada de 100%.

Em seguida, adicione um módulo de texto à linha de uma coluna com as seguintes configurações:

Para o conteúdo, digite este html:

<h2>Compare</h2>
VS

Fonte do texto: Montserrat
Peso da fonte do texto: ultra negrito
Estilo da fonte do texto: TT (maiúsculas)
Cor do texto do texto: rgba (255,255,255,0.3)
Tamanho do texto do texto: 3vw
Altura da linha de texto: 1.8em
Orientação do Texto: Centro

Em seguida, atualize as opções de design do cabeçalho h2 e dê ao seu módulo uma margem inferior personalizada para criar o efeito de sobreposição.

Fonte do título 2: Montserrat
Cor do texto do título 2: rgba (255,255,255,0,3)
Título 2 Tamanho do texto: 13vw
Cabeçalho 2 espaçamento entre letras: 1vw
Margem personalizada: -13vw inferior

Parte do seu texto ficará oculto por enquanto, mas aparecerá assim que adicionarmos o outro conteúdo.

Dois criam nossa segunda linha, duplicam a primeira linha e, em seguida, excluem o módulo de texto dentro da linha duplicada. Em seguida, atualize a estrutura da coluna para uma linha de duas colunas.

Vá em frente e atualize suas configurações de linha da seguinte forma:

Largura de calha personalizada: 1
Preenchimento personalizado da coluna 1: 2vw à direita
Preenchimento personalizado da coluna 2: 2vw à esquerda

É aqui que colocaremos as imagens dos nossos dois produtos que pretendemos comparar. Na coluna esquerda de nossa linha, adicione sua imagem usando o módulo de imagem. Para este exemplo, estou usando uma imagem png de 800 x 459 pixels. Em seguida, atualize as configurações do módulo de imagem da seguinte forma:

Largura: 70%
Alinhamento do Módulo: Direito
Preenchimento personalizado: 40px inferior

Em seguida, copie o módulo e cole-o na coluna certa. Mude a imagem e ajuste o alinhamento do módulo à esquerda.

Sob o módulo de imagem na coluna da esquerda, adicione um módulo de texto com o seguinte conteúdo de texto: “Produto Antigo”.

Em seguida, vá para o módulo de texto na primeira linha acima e copie os estilos de texto.

Em seguida, passe o mouse sobre o novo módulo de texto com o texto “Produto Antigo” e cole os estilos de texto no módulo clicando com o botão direito.

Isso irá corresponder aos estilos de texto que precisamos muito mais rápido. Agora tudo o que precisamos fazer é
atualize o tamanho e o alinhamento do texto:

Tamanho do texto do texto: 16px
Orientação do texto: direita

Agora vá para a guia avançada e coloque o seguinte CSS personalizado na caixa de entrada Elemento principal:

text-align:right !important;

Isso é necessário porque o Divi ajustará o alinhamento do texto à esquerda nos smartphones por padrão. Este snippet CSS substituirá isso e garantirá que fique alinhado corretamente no smartphone também.

Salvar configurações. Em seguida, copie o módulo de texto e cole-o sob a imagem na coluna da direita. Altere o conteúdo do texto para “Novo Produto” e atualize a orientação do texto para “Esquerda”.

Aqui está o que temos até agora.

Criação do gráfico de comparação de produtos

Para criar nosso gráfico de comparação, vamos usar uma sequência de duas linhas de coluna, cada uma separada por uma linha de uma coluna. As duas linhas da coluna conterão nossas barras coloridas. E a linha de uma coluna exibirá o nome do recurso associado aos valores da barra.

Crie uma nova linha de duas colunas e atualize as configurações de linha da seguinte maneira:

Largura personalizada: 100%
Largura da calha: 1
Preenchimento personalizado: 0px inferior
Preenchimento personalizado da coluna 1: 2vw à direita
Preenchimento personalizado da coluna 2: 2vw à esquerda

O preenchimento personalizado das colunas 1 e 2 cria o espaço de que precisamos no meio de nossos gráficos de barras que iremos adicionar.

Na coluna da esquerda, adicione um módulo divisor e atualize as configurações da seguinte forma:

Cor do gradiente de fundo à esquerda: rgba (81,91,214,0,25)
Cor do gradiente de fundo à direita: rgba (255,255,255,0,15)
Direção do gradiente: 90 graus
Posição inicial: 35%
Cor: # 515bd6
Peso do divisor: 23px (este valor deve ser igual ao valor da altura do divisor, que é 23px por padrão, para que o divisor tenha a mesma largura do plano de fundo do módulo)
Preenchimento personalizado: 70% à esquerda (empurra o divisor para a direita 75%, resultando em um valor de gráfico de barras de 25% da direita)

Salvar configurações.

Agora copie o Módulo Divisor para a coluna direita da mesma linha. Em seguida, atualize as seguintes configurações:

Cor do gradiente de fundo à esquerda: rgba (255,255,255,0,15)
Cor do gradiente de fundo à direita: rgba (242,90,71,0.25)
Posição inicial: 70%
Cor: # f25a47
Preenchimento personalizado: 30% à direita (empurra o divisor 30% para a esquerda, resultando em um valor de gráfico de barras de 70% da esquerda).

Agora que sua primeira linha de barras está no lugar, precisamos adicionar uma linha de uma coluna abaixo dela para colocar nosso rótulo de recurso do produto.

Crie uma linha de uma coluna com um preenchimento personalizado de 0 px na parte superior. Em seguida, adicione um novo módulo de propaganda e atualize as configurações do módulo de propaganda da seguinte maneira:

Conteúdo: “recurso”
Ícone de uso: SIM
Ícone: veja a captura de tela

Cor do ícone: rgba (255,255,255,0.3)
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 30px
Orientação do texto: centro
Fonte do corpo: Montserrat
Peso da fonte do corpo: Ultra negrito
Cor do corpo do texto: rgba (255,255,255,0.3)
Espaçamento entre letras do corpo: 2px
Margem personalizada: -20px

Na guia avançada, você pode retirar a margem padrão abaixo do ícone do blurb adicionando o seguinte CSS personalizado na caixa CSS da imagem do Blurb:

margin-bottom: 0px;

Agora que você tem seu primeiro exemplo funcional de recurso de comparação de produto, tudo que você precisa fazer é duplicar as duas linhas que compõem o recurso de comparação (a linha com as duas barras / divisórias e a linha com o módulo sinopse). Acho que é mais fácil usar ctrl + c (ou command + c) para copiar cada linha e, em seguida, ctrl + v (ou command + v) para colá-las uma abaixo da outra. Em seguida, basta atualizar o preenchimento personalizado para as divisórias duplicadas para mostrar diferentes valores do gráfico de barras.

Você também pode ajustar a posição inicial e final do gradiente, dependendo do valor de preenchimento personalizado escolhido. Por exemplo, se você fornecer ao divisor da coluna esquerda um preenchimento de 60% à esquerda, poderá ajustar a posição inicial do gradiente para 30% (exatamente a metade da distância do preenchimento).

Para um toque final, você pode adicionar um fundo divisor à sua seção. Para este exemplo, vou adicionar o seguinte:

Divisor superior: veja a captura de tela
Cor do divisor: rgba (255,255,255,0,05)
Altura do divisor: 19vw

Aqui está o resultado final.

Também gosto da aparência do design quando mudo a cor do plano de fundo da seção para # 000314.

Tornando o Design Responsivo

No Divi, qualquer linha de duas colunas será empilhada automaticamente uma em cima da outra em dispositivos móveis. É claro que isso vai quebrar o design no celular. Para corrigir isso, precisaremos fazer duas coisas. Primeiro, precisamos adicionar um pequeno snippet de CSS personalizado no personalizador de tema.

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

Este código ajustará a largura da coluna de qualquer linha com a classe CSS “desabilitar quebra” para 50%. Isso garantirá que manteremos nossa estrutura de duas colunas em dispositivos móveis para que o design não quebre. Não se esqueça de publicar suas alterações.

Assim que o CSS estiver instalado, precisamos adicionar a classe CSS a qualquer linha que tenha uma estrutura de duas colunas.

Para começar, vamos adicionar a classe CSS à linha de duas colunas que contém nossas imagens de dois produtos. Abra as configurações de linha e vá para a guia avançada. Em seguida, digite “disable-break” na caixa de entrada CSS Class.

Em seguida, clique com o botão direito na opção Classe CSS e clique em “Copiar Classe CSS”.

Agora tudo o que você precisa fazer é clicar com o botão direito em cada linha que possui uma estrutura de duas colunas (todas as linhas com as divisórias / barras) e clicar em “Colar classe CSS”.

Agora suas colunas manterão a estrutura de duas colunas em dispositivos móveis e manterão o design consistente.

Pensamentos finais

Criar um gráfico de comparação de produtos no Divi é simples, uma vez que você aprende algumas técnicas de design. O truque é configurar suas linhas de duas colunas com largura de 100% e largura de medianiz de 1. Depois disso, você pode usar o módulo divisor para construir alguns designs de gráfico de barras exclusivos. E se você quiser manter seu layout de duas colunas no celular, tudo o que você precisa é de um pequeno trecho de CSS personalizado. Eu esperaria que esse layout de gráfico de comparação pudesse ser usado de muitas maneiras diferentes. Sinta-se à vontade para compartilhar algumas ideias com a Divi Nation.

Estou ansioso para ouvir de você nos comentários.

Saúde!