O bloco Tabela de preços permite criar tabelas de preços visualmente atraentes e avançadas para apresentar seus produtos ou serviços. Seja para apresentar 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 o nome do plano, o preço com o símbolo da moeda, o período de cobrança, a descrição, o preço normal/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 completa de preços 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 de tabela de preços à sua página SeedProd:
Passo 1: Adicione 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
Depois de adicioná-lo, clique no bloco Tabela de preços para abrir suas configurações. A guia Conteúdo está organizada em uma área de configurações principais para o cabeçalho e os botões do plano, 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, Empresarial). Ele aparecerá em destaque na parte superior 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 uma lista suspensa de moedas comuns, incluindo dólar ($), euro (€), libra (£), rúpia (₹), iene (¥) e muitas outras. Selecione Personalizar para inserir qualquer símbolo necessário no campo Símbolo personalizado.
- Posição do símbolo da moeda: defina se o símbolo da moeda aparece antes ou depois do valor do preço.
- Período: insira o texto do período de cobrança que aparece após o preço (por exemplo, /mês, /ano, /usuário). Deixe em branco para mostrar o preço sem um período.
- Mostrar preço normal: ative para exibir um preço original ou normal acima do preço atual — útil para mostrar uma taxa com desconto. Quando ativado, insira o valor do preço normal e uma etiqueta de preço normal (por exemplo, “Normalmente”) que o precede.
- Descrição: Insira um slogan ou uma breve descrição do plano (por exemplo, “Perfeito para iniciantes”). Suporta formatação básica de rich text, 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–100 px) 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 combinar com 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 duplicar e excluir. Clique no texto de um item para expandir suas configurações individuais.
- Texto: Insira o texto da característica do item. Suporta formatação básica de rich text, incluindo negrito, itálico, sublinhado e links.
- Ícone: escolha um ícone para exibir junto com o 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 recursos.
Etapa 3: Personalizar o design
Na guia Avançado, você pode ajustar a tipografia, as cores, os botões e a aparência geral da sua Tabela de Preços. A guia Avançado está 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, o tamanho, a espessura e o estilo da fonte para o texto do nome do plano.
- Cor do nome do plano: defina a cor do texto do nome do plano.
- Tipografia do preço normal: defina a tipografia para o texto do preço normal (original) quando a opção Mostrar preço normal estiver ativada.
- Cor do preço normal: defina a cor do texto do preço normal.
- Descrição Tipografia: Defina a tipografia para o texto da descrição do plano.
- Descrição Cor: 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–100 px) dentro da área do cabeçalho.
Botões:
- Cor do botão superior: defina a cor de fundo do botão de chamada à ação superior.
- Tamanho do botão superior: Escolha o tamanho do botão superior — Pequeno, Médio, Grande, Extragrande ou 2X Grande.
- Botão superior antes do ícone de texto: adicione um ícone que aparece antes do texto do rótulo do botão usando o seletor de ícones.
- Botão superior após o ícone de texto: adicione um ícone que aparece após o 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 chamada à ação inferior.
- Tamanho do botão inferior: Escolha o tamanho do botão inferior — Pequeno, Médio, Grande, Extragrande 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.
- Botão inferior após o ícone de texto: adicione um ícone que aparece após o texto do rótulo do botão inferior.
Preço:
- Tipografia do preço: defina a família, o tamanho, a espessura e o estilo da fonte para o número principal do preço.
- Cor do preço: defina a cor do número principal do preço.
- Tipografia do sobrescrito do preço: defina a tipografia do símbolo da moeda quando exibido como um sobrescrito ao lado do preço.
- Superscrito superior do preço: Ajuste a posição vertical do símbolo da moeda em superscrito em relação ao número do preço.
Lista de recursos:
- Lista de recursos Tipografia: defina a família, o tamanho, a espessura e o estilo da fonte para todo o texto dos itens de recursos.
- Lista de recursos Cor: defina a cor do texto dos itens do 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–100 px) entre cada item da 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–100 px) 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–100 px).
- 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, direito, inferior, esquerdo). Alterne o ícone de sincronização para aplicar o mesmo valor a todos os lados de uma só vez.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco Tabela de preços (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre a tabela e os elementos ao redor na página.
- Preenchimento: ajuste o espaçamento interno do seu bloco Tabela de preços (superior, direito, inferior, esquerdo). Isso cria um 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 Tabela de Preços. Este ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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, plano-de-dados|pro).
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculte o bloco Tabela de preços nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco da tabela de preços em dispositivos tablet.
- Ocultar no celular: Oculte o bloco 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 é exibida. As opções incluem saltar, aparecer gradualmente, ampliar, girar e muito mais. 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 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 completa de preços que permita aos visitantes comparar planos rapidamente. Experimente diferentes fundos de cabeçalho, cores de botões e tipografia para criar uma seção de preços que combine com sua marca e impulsione as conversões.