Widget de tabela de preços Elementor: Tutorial gratuito + 5 layouts

Uma página de preços é onde os visitantes decidem se devem entregar seu dinheiro A tabela tem que ler limpo, fazer planos comparáveis em um relance, e apontar o leitor em qualquer opção que você realmente quer que eles escolham Widget de tabela de preços Elementor de Complementos Mestres para Elementor cobre tudo isso, grátis, sem código.

Este tutorial cobre a compilação completa: instalar o plugin, soltar o widget em uma seção e trabalhar através dos 6 painéis que controlam o conteúdo (layout, cabeçalho, preço, recursos, botão CTA e emblema de fita para o plano destacado) Você também obtém 5 layouts integrados, dicas de ferramentas por recurso, downloads digitais fáceis no botão e controle de tipografia completo.

Depois de acompanhar, você terá uma tabela de preços que fica correta em qualquer tema do WordPress, acumula corretamente no celular e converte melhor do que o bloco de preços padrão do Elementor.

O que este guia cobre:

• O que é o widget Elementor Pricing Table
• Por que uma boa tabela de preços é importante
• Como adicionar uma tabela de preços no Elementor (passo a passo)
• Os 6 painéis de configuração explicados
• Estilizando sua tabela de preços
• Dicas de design que realmente convertem
• 5 casos de uso para o widget
• Grátis vs Pro: o que você ganha
• Perguntas frequentes

O que é o widget da tabela de preços do elementor?

É um widget de arrastar e soltar que constrói uma tabela de preços do WordPress dentro do editor Elementor Você obtém um cabeçalho de plano, o preço com moeda e período de faturamento, uma lista de recursos, um botão de call-to-action e um emblema de fita opcional para o plano em destaque Sem código personalizado, sem códigos curtos, sem disputas de HTML.

O widget Master Addons Pricing Table está no plugin gratuito Os 5 layouts, fita, dicas de ferramentas por recurso e downloads digitais fáceis suportam todo o trabalho sem uma licença Pro. Instale o plugin e o widget aparecerá no painel Elementor na seção Master Addons, rotulada como Tabela de preços “MA.”

Por que uma boa mesa de preços é importante

Sua página de preços é tráfego de alta intenção As pessoas que chegam nela já estão pensando em comprar Uma tabela de preços desleixada silenciosamente custa-lhe receita real As razões habituais:

• Comparação fricção. Se os visitantes não puderem comparar os planos rapidamente, eles voltarão ao Google.
• Sem hierarquia visual. Quando cada plano parece idêntico, ninguém sabe qual deles você realmente deseja que eles escolham.
• Cta fraco. Um botão cinza “Learn More” perde para um “Start Free Trial” sempre confiante.

Um apropriado Tabela de preços do elementor lida com tudo isso Colunas lado a lado, um plano destacado com uma fita, uma cor de botão distinta e linhas de recursos que se alinham através de colunas O widget abaixo é fornecido com tudo isso.

Como adicionar uma tabela de preços no elementor (passo a passo)

Configuração completa abaixo Isso pressupõe Elementor já está instalado Se não, pegue a versão gratuita do diretório de plugins do WordPress primeiro.

Etapa 1: Instale complementos mestres para elementor

No administrador do WordPress, vá para Plugins → Adicionar novo e procure por “Master Addons for Elementor.” Instalar, ativar, feito. O instalando Master Addons doc tem a versão mais longa se alguma coisa te deixar excitado.

Passo 2: Crie uma seção com o número certo de colunas

Abra a página no Elementor Adicione uma nova seção e escolha a contagem de colunas com base em quantos planos você deseja mostrar Três colunas para Pessoal /Negócio /Desenvolvedor é a configuração mais comum Quatro colunas começam a parecer lotadas em tablets, e qualquer coisa acima de quatro praticamente força um scroll horizontal no celular.

Etapa 3: arraste o widget da tabela de preços MA para sua seção

No painel de widgets, procure por “Pricing Table.” Você verá “MA Pricing Table” com o emblema Master Addons. Arraste-o para a primeira coluna.

Passo 4: Revise o Layout Padrão

Elementor carrega um padrão totalmente preenchido no momento em que você solta o widget em. Planeje o título, preço, lista de recursos, botão, fita Vale a pena olhar antes de mudar as coisas para que você saiba o que cada campo realmente controla.

Uma vez que um plano está configurado da maneira que você quiser, clique com o botão direito do mouse no widget e escolha Duplicar (ou copiar-colar) para construir os outros planos Muito mais rápido do que iniciar cada cartão do zero, e garante que as linhas de recursos se alinhem através de colunas.

Os 6 Painéis de Configuração Explicados

A guia Conteúdo possui seis painéis dobráveis O que cada um faz e a configuração dentro dele que realmente importa:

1. Conteúdo de preços (coletor de layout)

Este painel escolhe um dos 5 variações de layout da tabela de preços. Cada layout organiza o cabeçalho, o preço e o botão de maneira um pouco diferente. A outra coisa que mora aqui é o “Destaque esta tabela” switch. Ligue-o para o plano que você deseja que os visitantes escolham. Essa alternância adiciona a ênfase visual e desbloqueia as configurações da faixa na parte inferior da guia Conteúdo.

2. Cabeçalho

O nome do plano (Pessoal, Empresarial, Desenvolvedor) e uma legenda opcional (“Para freelancers solo,”Para equipes pequenas”).Você pode alterar a tag HTML do título H3 geralmente está certo, a menos que a seção acima da tabela já use H3, caso em que movê-lo para H4 para que sua hierarquia de cabeçalho permaneça limpa A cor de fundo do cabeçalho é independente do resto do cartão, para que você possa listrar a barra superior de uma cor diferente, se quiser.

3. Preços

Símbolo da moeda, valor do preço, preço original (strikethrough para descontos), e período de faturamento O campo de preço original é útil quando você está executando uma promo Coloque o preço de venda no valor principal e o preço normal no campo original, e o widget renderiza o strikethrough automaticamente Nenhum CSS necessário.

4. Recursos

Adicione quantas linhas de recursos quiser Cada linha leva texto de recursos, um ícone (marca de seleção, cruz, qualquer coisa da biblioteca de ícones) e uma dica de ferramenta opcional As dicas de ferramentas são subutilizadas na maioria das tabelas de preços Se um recurso precisa de um esclarecimento de 10 palavras (“Inclui 3 assentos de equipe” → “Os assentos extra são $ 5/mo cada”), use uma dica de ferramenta em vez de amontoá-la no texto principal.

Dica de alinhamento: Mantenha a mesma ordem de lista de recursos em todos os três planos As pessoas digitalizam tabelas de preços horizontalmente, linha por linha Se a linha 3 for “Unlimited users” no plano Pessoal, mas “24/7 support” no Business, você quebra esse padrão de digitalização e os visitantes desistem na metade.

Rodapé 5. (O botão de chamada para ação)

Texto do botão, URL, alternância nofollow, alternância new-tab, além de uma linha opcional de texto secundário abaixo do botão (“14-day money-back garant”).Se você vender através do Easy Digital Downloads, a opção EDD Add-to-Cart está neste painel Alternar e o botão se torna um gatilho buy-now em vez de um link simples.

6. fita (crachá de plano em destaque)

A fita só aparece no plano onde você alternou “Destaque esta tabela” de volta no painel 1. texto da fita comum é “Popular” ou “Best Value.” Você pode alterar o alinhamento (canto superior esquerdo, canto superior direito, centro superior) e cor Mantenha a fita curta Duas palavras máx. Fitas longas envolvem desajeitadamente no celular.

Estilizando sua tabela de preços de elementor

Mude para a guia Estilo Você obtém um painel para cada uma das seis seções de conteúdo, além de um painel Geral para o próprio cartão (raio da borda, sombra, fundo) Cada painel cobre configurações de tipografia, cor, espaçamento e borda.

O que realmente mudar:

• Fundo do cartão e raio da borda. Combine seu site. 8 O raio de 12 px funciona para a maioria dos designs modernos. plano (raio 0) para uma aparência mais corporativa.
• Fundo do plano em destaque. Torne o plano destacado visualmente distinto. Uma cor sólida da marca no cartão apresentado ao lado dos cartões brancos é o movimento mais simples e funciona quase sempre.
• Tipografia preços. O preço deve ser o maior texto do cartão, maior que o nome do plano. 400 lê 6px é típico Qualquer coisa menor e todo o cartão como cópia de marketing genérica.
• Botão. Combine o botão primário do seu site O plano em destaque recebe um botão preenchido sólido Outros planos recebem botões delineados Essa lacuna visual guia o olho para o seu plano preferido sem precisar de uma seta ou um “escolha este rótulo”.

Para uma análise mais profunda das decisões visuais que movem a agulha de conversão, consulte nosso Dicas da tabela de preços do elementor postagem.

Dicas de design de mesa de preços que realmente convertem

Padrões que se sustentam nas páginas de preços reais:

• Três planos, não quatro. Pessoal /Negócios /O desenvolvedor funciona porque três opções mantêm a decisão simples Quatro planos retardam as pessoas e uma parcela não trivial delas sai sem escolher nada.
• Ancore o plano do meio. Coloque seu plano de destino na coluna do meio e marque-o como em destaque Os visitantes comparam o plano barato com ele e decidem que o meio é melhor Eles comparam o plano caro com ele e decidem que o meio é suficiente.
• Preço primeiro, depois recursos. As pessoas digitalizam de cima para baixo Coloque o preço perto do topo do cartão para que eles vejam o número antes da lista de recursos.
• Etiquetas curtas. “Unlimited projects” beats “Você pode criar um número ilimitado de projetos sem quaisquer restrições.” Use tooltips para a versão longa.
• Um CTA por cartão. Um botão por plano Não coloque “Saiba mais” ao lado de “Compre agora” no mesmo cartão Essa divisão mata a conversão porque os visitantes escolhem o clique de menor compromisso todas as vezes.
• Nota de devolução do dinheiro perto do botão. Uma pequena linha de “14-day money-back garant ” sob o CTA reduz a ansiedade de compra Campo livre no painel Footer.

5 Casos de Uso para o Widget da Tabela de Preços do Elementor

1. Página de preços SaaS. Planos de três níveis com uma faixa no plano do meio O caso de uso padrão e aquele para o qual o widget está sintonizado.
2. Preço serviço. Freelancers e agências usam o mesmo widget para pacotes de serviços (Básico /Padrão /Prêmio).Swap “por mês” para “per project” no campo período de faturamento.
3. Planos de sites de associação. Combine-o com um recurso como restringir conteúdo para acesso ao portão por nível.
4. Preços cursos. Único curso, coorte única, acesso da vida Coloque a fita na opção da vida, uma vez que essa é geralmente a venda de maior margem.
5. Comparação do plano WooCommerce. Para produtos digitais ou caixas de assinatura, o widget funciona como uma comparação de planos acima do botão de compra.

Se você precisar comparar muitos recursos em muitos planos (não apenas 3-6 marcadores por cartão), o Tabela de comparação de complementos mestres widget é o melhor ajuste Ele lida com páginas com recursos pesados com 15 + linhas sem olhar apertado.

Grátis vs Pro: o que você obtém

O widget Tabela de preços MA fica no plugin gratuito Master Addons Todos os 5 layouts, a faixa de opções, dicas de ferramentas, ícones e integração EDD funcionam sem uma licença Pro. O Pro desbloqueia outros widgets e o conjunto de recursos mais amplo em torno dele.

Se você só precisa da tabela de preços, livre é suficiente Se você quiser o completo Mais de 80 bibliotecas de widgets, Construtor de temas, Construtor de pop-ups e Kits de modelos, verifique Preços Master Addons Pro. Para um lado a lado com o outro pacote complementar principal do Elementor, consulte Complementos mestres versus complementos finais.

Prefere assistir? aqui está um passo a passo rápido no Elementor:

Perguntas frequentes

Embrulhando

Uma página de preços construída com o Widget da tabela de preços do elementor a partir de Master Addons lida com os casos que importam para a maioria dos sites WordPress: três planos, uma opção em destaque, botões limpos e controle de estilo completo do painel Elementor Nenhum código necessário Se você quiser detalhes sobre cada configuração, o documentação oficial da tabela de preços tem a referência completa.

Combine a tabela de preços com uma seção forte de call-to-action acima dela e você terá uma página de preços que funciona Para mais ideias de widgets focadas em conversão, o Guia de widgets de marketing de elementor é uma boa próxima leitura.

Leitura relacionada: Dicas de design da mesa de preços | Widget FlipBox do elementador | Biblioteca de ícones Master Addons