Widget de tabela de preços Elementor: Grátis, com 5 layouts prontos
Tabela de preços é um widget gratuito Master Addons para construir placas de plano em Elementor Escolha um dos 5 layouts, em seguida, preencha o cabeçalho, preço, lista de recursos, botão e fita Cada recurso pode ter seu próprio ícone e dica de ferramenta, o preço pode mostrar o preço original para uma venda, e o botão pode vincular em qualquer lugar ou agir como um botão de compra Easy Digital Downloads Coloque um widget em cada coluna e você tem uma página de preços.
Cabeçalho, preço, características, botão e fita
Cada parte do cartão tem suas próprias configurações O cabeçalho leva um ícone, um título, uma legenda e um dos três fundos gradiente, ou suas próprias cores O preço tem um símbolo de moeda de uma lista ou um personalizado, um interruptor de venda com um preço original, e um período de faturamento O rodapé segura o botão, seu link ou item Easy Digital Downloads, e uma linha curta de texto extra, como uma nota de devolução do dinheiro.
- Ícone de cabeçalho, título, tag HTML, predefinições de legenda e gradiente.
- Símbolo da moeda, preço de venda com o preço original e período de faturamento.
- Botão com um link ou item Easy Digital Downloads, além de texto extra do rodapé.
Listas de recursos interativos com ícones e dicas de ferramentas
Cada linha de recursos leva texto, um ícone opcional e uma dica de ferramenta opcional que abre acima, abaixo, à esquerda ou à direita do recurso Use a dica de ferramenta para detalhes que iriam aglomerar a lista, como “Os assentos extra custam US $ 5 por mês”.
- Os ícones tornam as listas de recursos mais rápidas de digitalizar.
- As dicas de ferramentas explicam limites ou termos técnicos sem adicionar confusão.
- Estile o texto do recurso, ícones, divisórias e alinhamento na guia Estilo.
Formatação de preços, planos e fitas destacadas
Tamanho e alinhamento vertical do símbolo da moeda, a parte fracionária do preço e o preço original separadamenteLigar a Tabela de Destaque para o plano que você deseja que as pessoas escolham, em seguida, adicione uma Fita com texto como “Popular” e defina seu alinhamento, posição e rotação.
- Tamanho e posição separados para a moeda, centavos e preço original.
- Destaque Mesa para fazer um plano se destacar.
- Uma fita com texto, alinhamento, posição e rotação próprios.
Tabela de preços Elementor Pro vs tabela de preços Master Addons
O widget Tabela de Preços do próprio Elementor está apenas no Elementor Pro. Veja como os dois se comparam.
| Tabela de preços Elementor Pro | Tabela de preços de complementos mestres | |
|---|---|---|
| Preço | Licença Elementor Pro | Grátis |
| Layouts | Um | 5 |
| Dicas de ferramentas de recursos | Não | Sim |
| Venda e preço original | Sim | Sim |
| Fita | Sim | Sim |
| Botão Fácil Downloads Digitais | Não | Sim |
| Predefinições de gradiente de cabeçalho | Não | 3 |
Comparando muitos recursos entre planos? O Tabela Comparação widget (Pro) lida melhor com longas listas de recursos do que cartões separados.
Dicas de design da mesa de preços
Alguns hábitos tornam uma tabela de preços mais fácil de ler e de comprar.
- Mostrar três planos Mais opções retardam a decisão.
- Coloque o plano que você quer vender no meio e destaque-o.
- Faça do preço o maior texto do cartão.
- Mantenha os rótulos dos recursos curtos e mova os detalhes para as dicas de ferramentas.
- Use um botão por cartão e adicione uma nota de devolução do dinheiro no texto do rodapé, se oferecer uma.
Nosso dicas de tabela de preços entrar em mais detalhes.
Como adicionar uma tabela de preços no Elementor
Construa um plano primeiro e depois copie-o para os outros para que as linhas de recursos se alinhem.
- Adicione um contêiner ou seção com uma coluna por plano Três planos são a configuração mais comum.
- Pesquise no painel de widgets por “Pricing Table” e arraste o widget Master Addons para a primeira coluna.
- Escolha um layout e preencha o cabeçalho, preço, recursos e botão de rodapé.
- Estile o cartão na guia Estilo, duplique o widget nas outras colunas e altere os detalhes do plano.
- Ligue a mesa de destaque e uma faixa para o plano que você deseja que os visitantes escolham.
Mantenha as linhas de recursos na mesma ordem em todas as colunas As pessoas leem tabelas de preços linha por linha, portanto, uma ordem mista torna os planos difíceis de comparar.
5 layouts de tabela de preços
O dropdown de Layout no Conteúdo de Preços altera a forma como o cartão é construído Todos os cinco são gratuitos, e seu texto e preços permanecem os mesmos quando você alterna entre eles.
- Padrão
- Conteúdo Alinhado Esquerdo
- Mesa arredondada
- Tabela com Imagem BG
- Padrão de BG distorcido
Alterne entre eles enquanto edita para ver qual deles se encaixa na sua página.
Perguntas frequentes para tabela de preços
Posso destacar meu plano de preços mais recomendado?
Sim. Ative a Tabela de Destaque no Precificação do Conteúdo desse plano, depois abra a seção Fita, ligue Mostrar e adicione texto como “Popular” Você pode alinhar, mover e girar a fita e estilizar suas cores.
O botão do rodapé funciona com plugins de comércio eletrônico?
Sim. ligue a integração Easy Digital Downloads na seção Rodapé e escolha seu item EDD para tornar o botão um botão de compra. Para WooCommerce ou qualquer outro checkout, aponte o link do botão na página do produto ou checkout.
Quão personalizável é a aparência da lista de recursos?
Very. características obter sua própria cor de texto, tipografia, alinhamento, largura e linhas divisórias, e cada linha pode ter seu próprio ícone e dica de ferramenta.
Posso adicionar um padrão de fundo ou imagem ao cabeçalho da tabela de preços?
Sim. Escolha uma das três predefinições de gradiente na seção Cabeçalho ou escolha Personalizado e defina seu próprio plano de fundo de cabeçalho na guia Estilo. A tabela com imagens BG e layouts de padrão Skew BG adicionam uma imagem ou padrão atrás da tabela.
A tabela de preços responde em dispositivos móveis?
Sim. Cada plano é um widget, então coloque-os em colunas e Elementor empilhar as colunas em telefones Use o modo responsivo para reduzir o tamanho do preço ou preenchimento em telas pequenas.
Posso mostrar um preço de venda ou riscar um preço original?
Sim. Ligue a Venda na seção Preços e insira o Preço Original O widget mostra ao lado do seu preço atual para que os visitantes vejam o desconto.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
