Principais conclusões
- O widget Tabela de preços de complementos mestre fornece cinco modelos de tabela de preços de elementor como um dropdown de layout: padrão, conteúdo de alinhamento esquerdo, tabela arredondada, tabela com imagem BG e padrão Skew BG.
- A mudança do menu suspenso Layout mantém o nome do plano, o preço, os recursos e o botão no lugar, para que um conjunto de conteúdo possa ser visualizado em todos os cinco designs em menos de um minuto.
- A Master Addons Template Library tem seções de preços prontas, incluindo designs escuros, de dois planos, quatro planos e switch de cobrança, que importam do editor para qualquer página do Elementor.
- Cada exemplo de tabela de preços nesta página segue a mesma ordem: nome do plano, para quem é, preço e período, três a sete linhas de recursos, um botão e uma linha de confiança opcional.
- Uma tabela de preços escura lê melhor com um acento brilhante apenas no plano destacado; os exemplos abaixo usam verde, ciano ou rosa para esse único cartão.
- Uma troca mensal e anual em uma seção de preços precisa de dois conjuntos de cartões e do widget Alternar conteúdo do Master Addons Pro.
Um modelo de tabela de preços Elementor salva você a parte do trabalho que leva mais tempo: as decisões de design Os layouts de widget abaixo dão-lhe uma forma de cartão em um clique, e as seções prontas dão-lhe um bloco de preços inteiro com cabeçalho, interruptor e cartões já dispostos De qualquer forma você substitui os nomes, preços e recursos do plano e manter o design.
Esta página coleta doze exemplos de tabelas de preços construídos com Adições Mestres para Elementor. Os cinco primeiros são os próprios layouts do widget com as configurações exatas usadas, para que você possa reproduzir cada um Os próximos sete são seções da Biblioteca de Modelos, escolhidas para cobrir as formas comuns da página de preços: três planos, dois planos, quatro planos, escuro, claro e um switch de cobrança.
Índice
Como usar esses modelos
Existem dois tipos de modelo nesta página Os exemplos 1 a 5 são layouts de widgets: solte o Widget de tabela de preços em um contêiner, escolha o layout do menu suspenso e copie as configurações listadas em cada exemplo Os exemplos 6 a 12 são seções completas: abra o Biblioteca de modelos, importe a seção e edite o texto no lugar.
As configurações listadas para cada layout são as que alteram o visual Todo o resto está em seu padrão As cores são dadas como valores hexadecimais para que você possa colá-las na guia Estilo, e todas as cinco placas de layout usam o mesmo conteúdo: um plano de $ 29 com três recursos e um botão “Get started”.
Os cinco layouts de widgets da Tabela de Preços
1. Padrão
O layout padrão é aquele para começar O cabeçalho é centrado, o preço fica sob o nome e os recursos e o botão seguem no corpo Funciona para qualquer contagem de planos e é a escolha mais segura para uma linha de três colunas.
- Layout: Padrão
- Esquema de cores do cabeçalho: personalizado, gradiente de #6938EF a #B497FF a 135 graus
- Cor do título e preço: #FFFFFF; subtítulo e período: #E4DBFF
- Ícone do recurso: verifique, #6938EF; texto do recurso: #1A1033
- Botão: fundo #F1EEFF, texto #6938EF, raio 6 px
- Informações adicionais: “Cancelar a qualquer momento”, #6B7280
2. conteúdo de alinhamento esquerdo
O Conteúdo de Alinhamento à Esquerda move o nome, o preço e os recursos para a borda esquerda Ele lê mais rápido quando os nomes dos planos são longos ou quando o cartão fica ao lado de um parágrafo de texto, e corresponde às páginas de preços de estilo editorial, onde todo o resto é deixado alinhado.
- Layout: Conteúdo Alinhado Esquerdo
- Todas as cores como em Padrão
- Alinhamento do botão: esquerdo, com estofamento esquerdo de 24 px no rodapé
Tabela 3. rondada
Rounded Table coloca o preço dentro de um grande círculo no cabeçalho, o que torna o número a primeira coisa que alguém vê Ele precisa de um cabeçalho mais alto, então dê-lhe a mesma contagem de recursos em cada carta ou a linha parecerá irregular O sublinhado amarelo nas linhas de recursos faz parte do layout.
- Layout: Mesa arredondada
- Gradiente do cabeçalho como em Padrão; gradiente circular de #F50A7F a #FF6FB1 a 135 graus, ou deixá-lo na tonalidade padrão
- Apresenta texto: #1A1033, sublinhe a cor #FFD600 (padrão de layout)
4. tabela com imagem BG
Tabela com imagem BG preenche todo o cartão com uma imagem, gradiente, vídeo ou apresentação de slides, com o cabeçalho e recursos flutuando no topo Ele se adapta a um plano em destaque ou uma página de preços para um produto visual O painel de recursos precisa de um fundo semitransparente escuro para que o texto permaneça legível em qualquer foto.
- Layout: Tabela com Imagem BG
- Fundo: Imagem, centro da posição, capa de tamanho
- Apresenta antecedentes: rgba(20, 10, 45, 0,6); apresenta texto: #FFFFFF
- Gradiente do cabeçalho como em Padrão, com 70% de opacidade para que a foto apareça
Padrão 5. skew BG
O padrão Skew BG corta o cabeçalho em um ângulo e adiciona duas listras brancas, o que dá ao movimento do cartão sem imagem. Use uma cor de destaque; um gradiente luta com as listras. É o layout mais frequentemente escolhido para uma única carta em uma página de destino.
- Layout: Padrão de BG distorcido
- Esquema de cores do cabeçalho: Personalizado, sólido #6938EF
- Raio do cartão: 20 px; fundo do cartão #FFFFFF
- Recurso sublinhado no botão como em padrão
6. Três planos com cartão do meio destacado
A linha de preços padrão do SaaS: três widgets de Tabela de Preços em um contêiner de três colunas, o do meio levantado O cartão elevado usa Mesa de Destaque, uma fita que lê “Most popular”, um botão rosa sólido em vez do contorno e o switch de Venda com $ 69 como preço original e $ 49 como atual Os cartões externos usam a cor mais clara do corpo para que o do meio fique para frente.
- Recipiente: três recipientes para crianças com 31,5% de largura, folga 28 px, Alinhar Itens: Esticar
- Cartão do meio: Destaque Tabela ativada; fita “Mais popular”, vertical 18, horizontal -10; fundo do botão #F50A7F, texto #FFFFFF
- Cartões externos: fundo do corpo #F6F5FA; cartão do meio: #FFFFFF com sombra 0 24px 60px rgba(105, 56, 239, 0,28)
Tabela de preços 7. dark de quatro planos
Quatro planos em um fundo preto, com um único acento de limão na borda e na etiqueta do plano destacado Os recursos são idênticos entre os cartões, o que é uma escolha deliberada: a diferença entre os planos é apenas preço e o leitor deve escolher por orçamento Os botões usam o widget de botão criativo, portanto, os efeitos de hover vêm desse widget em vez de CSS personalizado.
Use este modelo quando os planos diferirem por limites em vez de recursos O texto de recurso em negrito no primeiro cartão e o texto regular nos outros é a única hierarquia visual, portanto, mantenha-o dessa maneira.
Preços 8. dark SaaS com um plano personalizado
A partir do kit de modelos Finix, esta seção mostra como lidar com um plano sem um preço fixo O terceiro cartão imprime “Custom” onde o número estaria e troca o texto do botão por “Talk para nós” Uma descrição de uma linha sob cada preço explica para quem o plano é, e uma nota de rodapé sob a linha cobre o faturamento e o desconto anual em uma frase.
Os círculos concêntricos fracos atrás dos cartões são uma imagem de fundo de seção, não parte do widget Substitua a imagem ou remova-a e os cartões permaneçam como estão.
Tabela de preços leve de dois planos
Dois planos são uma decisão sim ou não, então esse layout torna impossível perder o cartão pago: todo o cartão é preenchido com a cor de destaque e o botão inverte para escuro. Ícones de verificação cinza nos recursos básicos de marca do cartão que não estão incluídos, o que permite que ambas as cartas mantenham as mesmas quatro linhas.
Use isso quando houver um nível gratuito e um nível pago. Com três ou mais planos, o cartão colorido fica muito alto.
10. Cartões de preços com interruptor de cobrança
Esta seção tem o toggle mensal e anual já construído O switch é o widget Toggle Content do Master Addons Pro, e cada estado carrega uma linha de preços salva Os cartões imprimem “billed monthly” ou “billed annual” sob o preço para que o leitor saiba qual estado está mostrando Importe-o, abra Modelos > Modelos salvos e edite as duas linhas de preços lá Para construir a mesma coisa do zero, incluindo o modelo de captura do tipo Seção, siga o guia de alternância mensal e anual.
11. Comparação de quatro planos com ticks de recursos
Quando os planos diferem por recursos em vez de limites, os ticks e as cruzes permitem que o leitor escaneie uma coluna Passando cerca de sete linhas, a tabela comparação este trabalho faz melhor do que cartões Todos os quatro cartões carregam as mesmas sete linhas na mesma ordem, e o ícone muda por plano O plano destacado é preenchido com a cor de acento, com um botão branco, e fica em terceiro lugar em vez de segundo porque a página espera que a maioria dos leitores escolha o nível superior.
12. Preços escuros com alternância mensal e anual
Uma seção escura com cartões de luz é o reverso do exemplo 7, e faz com que os cartões a coisa mais brilhante na página A alternância fica entre o título e os cartões, a nota por usuário sob cada nome de plano define expectativas, e “Nenhum cartão de crédito exigido” sob cada botão remove a última objeção As formas decorativas nos cantos são elementos de fundo de seção.
Como importar uma seção de preços
- Abra a página no Elementor e clique no ícone de modelo de complementos mestres no editor ou abra modelos > Modelos de complementos mestres.
- Pesquise “pricing”, visualize a seção e clique em Importar. As seções construídas com widgets Pro precisam do Master Addons Pro ativo.
- A secção aterra onde estava o seu cursor Edite o texto de cada cartão no painel; o design fica.
- Para seções com alternância, edite as duas linhas de preços em Modelos > Modelos salvos.
O guia de importação de modelos cobre o botão do editor, a tela Importar páginas e o que acontece com a cópia importada.
Quer todos os cinco layouts sem importar nada? O Widget de tabela de preços os tem em uma queda e o Biblioteca de modelos tem as seções completas mostradas acima.
Perguntas frequentes
Elementor tem modelos de tabela de preços?
A biblioteca de modelos do Elementor tem blocos de preços para usuários Pro, e seu widget Tabela de Preços também é Pro No Elementor gratuito, os modelos de preços vêm de um complemento: o widget Tabela de Preços Master Addons tem cinco layouts, e sua Biblioteca de Modelos tem seções completas de preços.
Quantos planos um modelo de tabela de preços deve ter?
Três é o número mais seguro, e quatro funciona quando um plano é um nível personalizado ou empresarial Os exemplos acima mostram dois, três e quatro planos; passado quatro, cartões lado a lado parar de encaixar em uma tela de laptop.
Posso alterar o layout após a construção da mesa?
Sim. o dropdown de Layout no widget Tabela de Preços de Complementos Mestres alterna entre os cinco designs e mantém o nome do plano, preço, recursos e botão no lugar Somente as configurações de estilo que pertencem a um layout, como o círculo ou a inclinação, mudam.
Como faço uma tabela de preços obscura no Elementor?
Defina o fundo da seção para preto ou azul marinho escuro, dê a cada cartão um corpo cinza escuro com uma borda mais clara de um pixel e use uma cor de destaque para a borda, etiqueta e botão do cartão destacado. Os exemplos 7, 8, 10 e 12 acima mostram quatro versões disso.
Os exemplos da tabela de preços respondem?
Sim. os cartões empilham em uma coluna em telefones Coloque o plano destacado em primeiro ou segundo lugar na ordem de contêiner para celular, mantenha listas de recursos em cerca de cinco linhas e verifique a tabela no ponto de interrupção móvel no modo responsivo do Elementor antes de publicar.
Pensamentos finais
Os doze modelos vêm por duas rotas Os cinco layouts de widget cobrem a forma do cartão e tomam uma mudança suspensa cada As sete seções da biblioteca cobrem as formas da página: três planos com um meio destacado, quatro planos escuros, SaaS com um nível personalizado, luz de dois planos, um interruptor de cobrança, ticks e cruzes de quatro planos e escuro com cartões claros Cada um mantém a ordem que funciona: nome, para quem é, preço, uma pequena lista de recursos, um botão.
Comece com o layout ou seção mais próxima de seus planos no Página do widget da tabela de preços, altere o texto e verifique-o no telefone antes de entrar no ar.
Leitura relacionada
- Design da tabela de preços: 10 dicas com exemplos
- Biblioteca de modelos de complementos mestres
- Kits de modelo de elemento
- Modelos de seção Elementor
- Preços Tabela documentação widget
- Como adicionar uma alternância mensal e anual a uma tabela de preços de elementadores
- Tabela de preços do elementor versus tabela de comparação: qual usar
- Como construir uma lista de preços ou menu no Elementor
