Como criar tabelas de preços horizontais com Divi

As tabelas de preços horizontais são uma ótima maneira de promover produtos com muitos recursos. E, com o novo layout de cinco colunas do Divi, isso é surpreendentemente fácil de fazer. No entanto, como acontece com qualquer layout que tenha cinco ou mais colunas, o desafio é tornar o layout responsivo para que também tenha uma boa aparência no celular. Neste tutorial, vou mostrar como criar tabelas de preços horizontais que ficam bem em todos os dispositivos. E ainda mostrarei como é fácil duplicar suas tabelas de preços horizontais e usar novos recursos de design como “localizar e substituir” para alterar rapidamente o esquema de cores de cada uma de suas tabelas em alguns cliques.

Vamos começar.

Espiada

Começando

Para este tutorial, tudo que você precisa é Divi. E usaremos o Visual Builder. Como iremos construir as tabelas do zero, você precisará criar uma nova página, implantar o construtor visual e então selecionar a opção “Build Layout from Scratch”.

Depois disso, você está pronto para começar. Vamos fazê-lo!

Configurando a linha de cinco colunas para suas tabelas de preços horizontais

Para começar, vamos dar um layout de cinco colunas para a seção que já está esperando por nós no construtor visual.

Antes de começarmos a adicionar qualquer módulo, vamos atualizar as configurações da seção para ter uma largura personalizada sem qualquer preenchimento superior ou inferior.

Largura: 1200px
Alinhamento de Seção: Centro
Preenchimento personalizado: 0 px superior, 0 px inferior

Em seguida, vá para as configurações de linha para dar rapidamente uma cor de fundo para sua linha e também para as três colunas do meio da seguinte maneira:

Cor de fundo: # 00cbc9
Cor de fundo da coluna 2: # 00cbc9
Cor de fundo da coluna 3: #eeeeee
Cor de fundo da coluna 4: #eeeeee

Em seguida, atualize o tamanho da seguinte forma:

Tornar esta linha com largura total: SIM
Largura da calha: 1
Equalize a altura das colunas: SIM

Precisaremos voltar às configurações de linha em breve para atualizar o espaçamento, mas por enquanto vamos começar a adicionar as sinopses a cada uma de nossas colunas para conteúdo.

Preenchendo as colunas com módulos de conteúdo

O Título do Produto

Na primeira coluna, adicione um módulo de texto com o seguinte cabeçalho na caixa de conteúdo (sob a guia de texto):

<h2>Starter</h2>

Isso servirá como o local para o título do seu plano ou produto que você está apresentando. Neste exemplo, seria algum tipo de plano “inicial”.

Em seguida, atualize as seguintes configurações de design:

Estilo da fonte do título 2: TT
Cor do texto do título 2: #ffffff
Tamanho do texto do título 2: 38px
Preenchimento personalizado (desktop): 90% superior, 90% inferior, 10% esquerdo
Preenchimento personalizado (tablet): 30% superior, 30% inferior

Adicionar Blurbs para títulos de categoria de recurso

Na segunda coluna, adicione um módulo de sinopse. Em seguida, exclua o texto de preenchimento na caixa de conteúdo e deixe o texto do Título sozinho. Em seguida, escolha usar um ícone em vez de uma imagem e atualize o ícone com um de sua escolha.

Vá para a guia de design e atualize o resto das configurações da seguinte maneira:

Cor do ícone: # 00cbc9
Posicionamento de imagem / ícone: esquerda
Tamanho do texto do título: 16px
Preenchimento personalizado: 2vw inferior
Largura da borda da linha inferior: 4 px
Cor da borda inferior: #cccccc

Uma vez que este design de sinopse será usado como um título de categoria de recurso nas colunas 2, 3 e 4, você pode copiar o módulo de sinopse e colá-lo na segunda e terceira colunas.

Eu percebo que o espaçamento não parece muito bom agora. E você pode ficar tentado a adicionar algum espaçamento no nível do módulo, mas para este projeto, acho mais fácil fazer ajustes de espaçamento no nível da coluna (nas configurações de linha). Veremos isso mais tarde.

Adicionar módulos de texto para uma lista de descrições de recursos

Próximo Adicione um módulo de texto sob a sinopse na segunda coluna. Em seguida, adicione o seguinte código html da tabela na caixa de conteúdo:

• a descrição do recurso vai aqui.
• a descrição do recurso vai aqui.
• a descrição do recurso vai aqui.
• a descrição do recurso vai aqui.

Tipo de estilo de lista não ordenado: quadrado
Recuo do item da lista não ordenado: 4px
Preenchimento personalizado: 20 px superior, 20 px inferior, 5% à esquerda, 5% à direita

Agora, como fizemos para as sinopses, copie o módulo de texto e cole-o em cada um dos módulos das sinopses nas colunas 3 e 4.

Adicionando o preço e o botão à última coluna

Na última coluna (coluna cinco), usarei um módulo de tabela de preços para obter o design do texto de preços com o cifrão. Isso é tudo de que realmente precisamos do módulo de tabelas de preços, então irei eliminar o resto do conteúdo e elementos de design, deixando o texto de preços e o cifrão. Eu poderia usar o botão que está incluído no módulo de tabelas de preços, mas era um pouco mais difícil de fazer mágica responsiva no tablet (você verá o que quero dizer mais tarde). Portanto, usarei um módulo de botão também.

Vá em frente e adicione o Módulo de tabelas de preços à quinta coluna. Exclua uma das duas tabelas incluídas por padrão clicando no ícone da lixeira à direita de uma delas.

Em seguida, elimine a cor de fundo adicionando um código de cores completamente transparente.

Cor de fundo: rgba (255,255,255,0)

Em seguida, atualize o seguinte:

Cor de fundo do cabeçalho da tabela: rgba (255,255,255,0)
Cor do texto de moeda e frequência: #ffffff
Moeda e frequência do tamanho do texto: 30px
Cor do texto do preço: #ffffff
Largura da borda: 0 px
Margem personalizada (tablet): -100% direita
Margem personalizada (smartphone): 0% certo
Preenchimento personalizado: 0 px superior, 10 px inferior, 0 px à esquerda, 0 px à direita

Agora vá para as configurações de mesa individuais clicando no ícone de engrenagem à esquerda do menu de exibição de mesa individual.

Agora exclua o conteúdo padrão para Título, Subtítulo e Conteúdo. Isso deixará apenas o Texto da moeda e do preço.

Agora eu sei o que você está pensando neste momento. O que fazer com a linha limite sob o texto do preço? Bem, há um pequeno trecho de CSS personalizado para isso. Vá para a guia avançada e adicione o seguinte CSS à caixa de entrada Preço superior:

Topo de preços:

border: none;

Agora é assim que você descobriu com sucesso a tabela de preços apenas para o texto de preços e o símbolo de moeda!

Para o botão, adicione um módulo de botão no módulo de tabelas de preços e atualize o seguinte:

Alinhamento do botão: Centro
Cor do Texto: Claro
Margem personalizada (tablet): -100% direita
Margem personalizada (smartphone): 0% certo

A margem personalizada corresponderá à margem que adicionamos ao módulo de tabelas de preços para obter um módulo de largura total no tablet. Como o layout de cinco colunas no tablet colocará a quinta coluna no lado esquerdo de um layout de duas colunas, puxar o módulo em -100% para a direita forçará o módulo a toda a largura da linha.

Adicionando o Design de Seta e Espaçamento de Coluna Responsivo

Adicionando a seta por camadas de gradientes

Para criar o efeito de desenho da seta na primeira coluna, iremos sobrepor dois fundos gradientes. O primeiro fundo gradiente será adicionado no nível da coluna. Adicionaremos o próximo mais tarde no nível do módulo.

Para adicionar o fundo gradiente, vá para as configurações de linha e adicione o seguinte:

Coluna 1 Gradiente de fundo cor esquerda: rgba (255,255,255,0)
Cor certa do fundo gradiente da coluna 1: #eeeeee (deve corresponder à cor de fundo da coluna 2)
Direção do gradiente: -245deg
Posição inicial: 75%
Posição final: 0%

Salve as configurações e vá para as configurações do módulo de texto na coluna um. É aqui que adicionaremos a segunda camada de gradiente de fundo para completar a seta. Atualize o seguinte:

Coluna 1 Gradient Background Cor esquerda: #eeeeee
Cor direita do fundo gradiente da coluna 1: rgba (255,255,255,0)
Direção do gradiente: 245 graus
Posição inicial: 25%
Posição final: 0%

Observe que os valores são igualmente opostos. Por exemplo, a ordem das cores mudou, os 245 graus mudaram de negativo para positivo e os 75% agora são 25% (a diferença). É assim que você consegue que os lados da ponta da seta sejam perfeitamente simétricos.

Espaçamento entre linhas e colunas

Volte para as configurações de linha e vamos ajustar o espaçamento de nossa linha e colunas, atualizando o seguinte:

Preenchimento personalizado: 0px superior, 0px inferior, 0px esquerdo, 0px direito
Preenchimento 2 personalizado: 5% superior, 5% inferior, 2% esquerdo, 2% direito
Preenchimento 3 personalizado: 5% superior, 5% inferior, 2% esquerdo, 2% direito
Preenchimento 4 personalizado: 5% superior, 5% inferior, 2% esquerdo, 2% direito
Preenchimento 5 personalizado: 10% superior, 10% inferior

Você pode estar se perguntando por que eu não usei apenas uma largura de calha 2 e acabei com isso. Bem, isso é porque eu queria maximizar o espaço dentro das colunas que contêm texto o máximo possível para melhorar a legibilidade em todos os dispositivos. Em cada pequeno espaço, podemos economizar matéria. É por isso que as margens entre as colunas são criadas com porcentagens de preenchimento à esquerda e à direita.

Duplicando a tabela para novas tabelas e esquemas de cores

Obviamente, você desejará ter várias tabelas horizontais de preços para os usuários compararem. Para criar a segunda tabela de preços, duplique toda a seção que contém a primeira tabela que você criou.

Em seguida, abra as configurações de linha e passe o mouse sobre a cor de fundo e clique em localizar e substituir.

Em “Dentro”, escolha “Esta seção”.
Em “Substituir largura”, adicione a cor: # f84f51
Em seguida, marque a caixa para Substituir todos os valores encontrados na seção (não apenas a cor de fundo).

Em seguida, clique em Substituir e observe a mágica acontecer. Esta é uma maneira rápida e fácil de alterar todas as instâncias da cor anterior por uma nova cor.

Não se esqueça de salvar as configurações de linha antes de sair para salvar as alterações.

Agora você tem uma nova mesa com um novo esquema de cores.

Repita este processo novamente para adicionar outra tabela com a cor: # bdc958

Fazendo uma mesa em destaque

Para fazer com que uma de suas mesas pareça destacada e se destaque um pouco, você pode adicionar uma sombra de caixa à seção que segura a mesa, bem como alterar a cor cinza usada para fundos de coluna e gradientes para uma bela cor branca.

Para fazer isso, vá para as configurações da seção para a segunda seção (a do meio) e atualize o seguinte:

Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 0 px
Força do desfoque de sombra da caixa: 80 px

Para substituir a cor de fundo cinza, vá para as configurações de linha e encontre a cor de fundo da coluna 2 (#eeeeee). Clique com o botão direito e clique em “localizar e substituir”. A atualização é o seguinte:

Em “Dentro”, escolha “Esta seção”.
Em “Substituir largura”, adicione a cor: #ffffff
Em seguida, marque a caixa para Substituir todos os valores encontrados na seção (não apenas a cor de fundo).
Em seguida, clique em “Substituir”.

Usando Find and Replace para testar fontes

Se quiser usar uma fonte diferente em sua tabela, você pode facilmente testar outras fontes usando o recurso “Localizar e substituir”. Eu propositalmente deixei a fonte padrão para todos os módulos para tornar esse processo mais tranquilo. Para alterar a fonte de toda a sua página de tabelas, tudo o que você precisa fazer é abrir as configurações do módulo de texto na primeira coluna de qualquer seção da tabela (na verdade, pode ser qualquer módulo usando a fonte padrão em sua página). Em seguida, clique com o botão direito do mouse na Fonte do Título 2 em uso e selecione “Localizar e Substituir”. Em seguida, atualize o seguinte:

Em “Dentro”, mantenha “Esta Página”.
Em “Substituir largura”, selecione uma fonte (estou usando Roboto Condensed).
Em seguida, marque a caixa para Substituir todos os valores encontrados na seção (ou você não poderia marcá-la para substituir todas as fontes h2).
Em seguida, clique em “Substituir”.

Agora todas as fontes foram alteradas em toda a página.

É isso! Agora, as tabelas de preços horizontais estão completas.

Vamos verificar o resultado.

O ajuste de cinco colunas no tablet e smartphone também funciona perfeitamente.

Pensamentos finais

O layout de cinco colunas do Divi, junto com os poderosos recursos de design disponíveis no Visual Builder, permitem que você faça algumas belas tabelas de preços horizontais. E ajustar as cores e fontes usando Localizar e Substituir economiza muito tempo, melhorando ainda mais o processo de design. Espero que você ache o tutorial informativo e inspirador.

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

Saúde!