O bloco Tabela de Preços permite criar tabelas de preços visualmente atraentes e avançadas para exibir seus produtos ou serviços. Quer você esteja apresentando planos de assinatura, níveis de serviço ou pacotes de produtos, este bloco oferece controle total sobre como cada plano é exibido.
Cada tabela de preços inclui um nome de plano, preço com símbolo de moeda, período de faturamento, descrição, preço regular/original opcional, uma lista de recursos e até dois botões de call-to-action. Use vários blocos de Tabela de Preços lado a lado para criar uma seção de preços completa que ajude os visitantes a comparar planos e tomar uma decisão de compra.
Adicionando o Bloco Tabela de Preços às Suas Páginas
Siga estas etapas para adicionar um bloco Tabela de Preços à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Tabela de Preços na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Tabela de Preços para abrir suas configurações. A guia Conteúdo é organizada em uma área de configurações principal para o cabeçalho do plano e botões, seguida por uma seção Lista de Recursos para os itens de recursos do plano.
Cabeçalho do Plano:
- Nome do Plano: Insira o nome do seu plano de preços (por exemplo, Básico, Pro, Enterprise). Isso aparece em destaque no topo da tabela de preços.
- Preço: Insira o preço numérico do plano (por exemplo, 29). O símbolo da moeda e o período são definidos separadamente.
- Símbolo da Moeda: Escolha o símbolo da moeda a ser exibido em um menu suspenso de moedas comuns, incluindo Dólar ($), Euro (€), Libra (£), Rúpia (₹), Iene (¥) e muitas outras. Selecione Personalizado para inserir qualquer símbolo que você precise no campo Símbolo Personalizado.
- Posição do Símbolo da Moeda: Defina se o símbolo da moeda aparece Antes ou Depois do número do preço.
- Período: Insira o texto do período de faturamento que aparece após o preço (por exemplo, /mês, /ano, /usuário). Deixe em branco para exibir o preço sem um período.
- Mostrar Preço Regular: Ative para exibir um preço original ou regular acima do preço atual — útil para mostrar uma taxa com desconto. Quando ativado, insira o valor do Preço Regular e um Rótulo do Preço Regular (por exemplo, “Normalmente”) que o precede.
- Descrição: Insira uma curta frase ou descrição para o plano (por exemplo, “Perfeito Para Iniciantes”). Suporta formatação básica de texto rico, incluindo negrito, itálico, sublinhado e links.
Botões:
- Mostrar Botão Superior: Ative para exibir um botão de call-to-action acima da lista de recursos. Quando ativado, insira o Texto do Botão Superior, o Link do Botão Superior e, opcionalmente, marque Abrir em Nova Janela para o link. Defina o Raio da Borda do Botão Superior (0–100px) para controlar o arredondamento dos cantos do botão.
- Mostrar Botão Inferior: Ative para exibir um segundo botão de call-to-action abaixo da lista de recursos. Quando ativado, insira o Texto do Botão Inferior, o Link do Botão Inferior e, opcionalmente, marque Abrir em Nova Janela. Defina o Raio da Borda do Botão Inferior para corresponder ao seu design.
Lista de Recursos:
- Itens de Recursos: Cada recurso aparece como uma linha arrastável. Arraste os itens para reordená-los. Passe o mouse sobre um item para revelar os botões de duplicar e excluir. Clique no texto de um item para expandir suas configurações individuais.
- Texto: Insira o texto do recurso para o item. Suporta formatação básica de texto rico, incluindo negrito, itálico, sublinhado e links.
- Ícone: Escolha um ícone para exibir ao lado do texto do recurso usando o seletor de ícones. O padrão é um ícone de marca de seleção.
- Adicionar Novo Item: Clique no botão na parte inferior da lista de recursos para adicionar uma nova linha de recurso.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode ajustar a tipografia, cores, botões e a aparência geral da sua Tabela de Preços. A aba Avançado é organizada em cinco seções de estilo, seguidas pelos controles padrão de espaçamento e visibilidade.
Cabeçalho:
- Tipografia do Nome do Plano: Defina a família da fonte, tamanho, peso e estilo do texto do nome do plano.
- Cor do Nome do Plano: Defina a cor do texto do nome do plano.
- Tipografia do Preço Regular: Defina a tipografia do texto do preço regular (original) quando a opção Mostrar Preço Regular estiver ativada.
- Cor do Preço Regular: Defina a cor do texto do preço regular.
- Tipografia da Descrição: Defina a tipografia do texto da descrição do plano.
- Cor da Descrição: Defina a cor do texto da descrição.
- Cor de Fundo: Defina a cor de fundo da área do cabeçalho (nome do plano, preço e descrição).
- Preenchimento: Defina o espaçamento interno (0–100px) dentro da área do cabeçalho.
Botões:
- Cor do Botão Superior: Defina a cor de fundo do botão de call-to-action superior.
- Tamanho do Botão Superior: Escolha o tamanho do botão superior — Pequeno, Médio, Grande, X Grande ou 2X Grande.
- Ícone Antes do Texto do Botão Superior: Adicione um ícone que aparece antes do texto do rótulo do botão usando o seletor de ícones.
- Ícone Depois do Texto do Botão Superior: Adicione um ícone que aparece depois do texto do rótulo do botão usando o seletor de ícones.
- Cor do Botão Inferior: Defina a cor de fundo do botão de call-to-action inferior.
- Tamanho do Botão Inferior: Escolha o tamanho do botão inferior — Pequeno, Médio, Grande, X Grande ou 2X Grande.
- Ícone Antes do Texto do Botão Inferior: Adicione um ícone que aparece antes do texto do rótulo do botão inferior.
- Ícone Depois do Texto do Botão Inferior: Adicione um ícone que aparece depois do texto do rótulo do botão inferior.
Preço:
- Tipografia do Preço: Defina a família da fonte, tamanho, peso e estilo do número do preço principal.
- Cor do Preço: Defina a cor do número do preço principal.
- Tipografia de Sobrescrito de Preço: Defina a tipografia para o símbolo da moeda quando exibido como sobrescrito ao lado do preço.
- Superior do Sobrescrito de Preço: Ajuste a posição vertical do sobrescrito do símbolo da moeda em relação ao número do preço.
Lista de Recursos:
- Tipografia da Lista de Recursos: Defina a família de fontes, tamanho, peso e estilo para o texto de cada item de recurso.
- Cor da Lista de Recursos: Defina a cor do texto dos itens de recurso.
- Cor do Ícone: Defina a cor dos ícones exibidos ao lado de cada item de recurso.
- Espaço Entre: Defina o espaçamento (1–100px) entre cada item de recurso na lista.
- Alinhamento: Defina o alinhamento horizontal da lista de recursos — Esquerda, Centro ou Direita.
- Cor de Fundo: Defina uma cor de fundo para a área da lista de recursos.
- Preenchimento: Defina o espaçamento interno (0–100px) dentro da área da lista de recursos.
Bloco:
- Raio da Borda: Defina o arredondamento dos cantos de todo o bloco da tabela de preços (0–100px).
- Estilo da Borda: Defina o estilo da borda do bloco — Sólida, Pontilhada ou Tracejada.
- Cor da Borda: Defina a cor da borda do bloco.
- Largura da Borda: Defina a espessura da borda por lado (Superior, Direita, Inferior, Esquerda). Ative o ícone de sincronização para aplicar o mesmo valor a todos os lados de uma vez.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Tabela de Preços (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre a tabela e os elementos circundantes na página.
- Preenchimento: Ajuste o espaçamento interno do seu bloco de Tabela de Preços (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo da tabela e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Tabela de Preços. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-plano|pro).
Visibilidade do Dispositivo:
- Ocultar em Desktop: Oculte o bloco de Tabela de Preços em telas de desktop.
- Ocultar em Tablet: Oculte o bloco de Tabela de Preços em dispositivos tablet.
- Ocultar em Celular: Oculte o bloco de Tabela de Preços em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando a Tabela de Preços entra na visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras. Adicionar uma animação sutil pode ajudar a chamar a atenção para seus planos de preços no momento certo.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Tabela de Preços e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Tabela de Preços à sua página! Coloque vários blocos de Tabela de Preços lado a lado em um layout de coluna para criar uma seção de preços completa que permite aos visitantes comparar planos rapidamente. Experimente com fundos de cabeçalho, cores de botões e tipografia para construir uma seção de preços que corresponda à sua marca e impulsione conversões.