Como construir uma lista de preços ou menu no Elementor (3 maneiras)

Como construir uma lista de preços ou menu no Elementor (3 maneiras)

Principais conclusões

  • Uma lista de preços Elementor é uma lista com um preço por linha, para menus, taxas de serviço e listas de peças; é um widget diferente de uma tabela de preços, que tem um preço por cartão.
  • O widget de Lista de Preços do próprio Elementor faz parte do Elementor Pro, com título, descrição, preço e imagem opcional por item.
  • O widget Master Addons Dynamic Table constrói uma lista de preços como uma tabela HTML real: uma linha de cabeçalho com larguras de coluna, um repetidor de corpo onde cada item inicia uma nova linha, linhas listradas e um modo responsivo para telefones.
  • Um widget de tabela de preços é a ferramenta errada para um menu, porque dez pratos significariam dez cartões, mas é o certo para dois ou três pacotes de serviços com uma lista de recursos cada.
  • Os preços em uma lista devem estar alinhados à direita em sua própria coluna para que o olho possa defini-los e as descrições devem permanecer em uma linha por item.
  • Uma lista de preços baseada em tabela é texto simples na página, portanto, cada nome de prato e preço é legível por mecanismos de pesquisa e leitores de tela.

Uma lista de preços Elementor é uma lista de itens com um preço em cada linha: um menu de restaurante, taxas de serviço de um salão, uma lista de peças da oficina Não é uma tabela de preços Uma tabela de preços tem um preço por cartão e vende planos; uma lista de preços tem um preço por linha e informa Elementor coloca seu widget Lista de Preços no Elementor Pro, então no plugin gratuito você precisa de outra rota.

Este guia mostra três maneiras de construir uma e quando cada uma se encaixa A Rota 1 é o widget da Lista de Preços do Elementor Pro. A Rota 2 é o widget Tabela Dinâmica de Adições Mestres, que transforma um menu em uma tabela limpa com uma coluna de preço A Rota 3 é cartões de preços para o caso em que o “list” é dois ou três pacotes com recursos, que é um trabalho de tabela de preços, afinal.

Lista de preços vs tabela de preços

Uma lista de preços tem muitos itens e um preço cada; uma tabela de preços tem poucos planos e uma lista de recursos cada Um O menu em um restaurante é uma lista de preços Os três planos de hospedagem em um site SaaS são uma tabela de preços Misturá-los é a razão usual de um menu construído no Elementor parece errado: dez pratos como dez cartões de preços é uma parede de caixas, e três planos como uma lista esconde os recursos que os vendem.

Três cartões de tabela de preços Elementor para planos Starter, Growth e Agency, mostrando o formato do cartão que se adapta aos planos em vez de menus
Uma tabela de preços: poucos planos, uma lista de recursos cada Dez pratos neste formato seriam dez desses cartões.

Então a primeira pergunta é quantos itens você tem e se cada um precisa de uma lista de recursos Mais de quatro itens com um preço e uma descrição de uma linha: lista de preços Dois a quatro itens com vários recursos cada: tabela de preços.

Rota 1: widget de Lista de Preços do Elementor Pro

Elementor Pro tem um widget de Lista de Preços feito para menus Cada item em seu repetidor tem um título, uma descrição, um preço, uma imagem opcional e um link, e o widget desenha um separador pontilhado ou sólido entre o título e o preço A guia Estilo controla o espaçamento da lista, o estilo separador e o tamanho da imagem Ele precisa do Elementor Pro, portanto, no plugin gratuito, o widget não aparece no painel.

Se você já paga pelo Pro, este é o caminho mais curto para um menu clássico O que ele não faz são colunas: cada item é uma linha com o preço empurrado para a direita, então uma lista que precisa de uma coluna de tamanho ou quantidade, ou três preços por item (pequeno, médio, grande), não se encaixa Fonte: Página de ajuda do widget Lista de Preços da Elementor.

Rota 2: um menu com o widget Tabela Dinâmica

O Widget de tabela dinâmica constrói uma tabela HTML real no painel Elementor: um repetidor de cabeçalho para as colunas e um repetidor de corpo para as células Para uma lista de preços que significa uma coluna Dish, uma coluna Descrição e uma coluna Preço, com cada item de menu em sua própria linha O widget está no plugin Master Addons e não precisa do Elementor Pro.

Lista de preços Elementor construída com o widget Master Addons Dynamic Table: um menu de restaurante de seis linhas com colunas Dish, Description and Price e um preço alinhado à direita
Um menu de seis itens como Tabela Dinâmica: três colunas, linhas listradas, preços alinhados corretamente.

Configure as colunas

  1. Largar o Tabela Dinâmica widget na página e abra o Cabeçalho repetidor.
  2. Adicione três células de cabeçalho: Prato, Descrição, Preço. Em cada um, ligue Largura personalizada e defina 28, 56 e 16 por cento para que a descrição fique com o quarto e a coluna de preços permaneça estreita.
  3. Defina o alinhamento do cabeçalho Price para a direita.

Adicionar os itens

  1. Abrir o Corpo repetidor. Cada entrada é uma célula Adicione o primeiro nome do prato e ligue Comece Nova Linha por isso.
  2. Adicione a descrição como a próxima célula e o preço como a terceira, com a célula de preço alinhada à direita.
  3. Repita para cada item: uma nova linha começa no nome do prato e depois mais duas células. Seis itens são dezoito células.

Uma célula pode carregar um ícone ou uma imagem em vez de texto, que é como um menu obtém uma pequena foto ao lado de um prato ou um ícone de folha nas linhas vegetarianas As células também podem abranger colunas, de modo que um título de curso como “Mains” pode sentar-se em uma linha própria em toda a largura.

Estilo como um menu

Na guia Estilo, defina o fundo do cabeçalho para uma cor escura e o texto do cabeçalho para branco, ative Linhas Listradas assim, cada segunda linha é tingida, e dê à tabela uma borda de um pixel em um cinza claro Mantenha o corpo do texto no mesmo tamanho que seus parágrafos e torne a coluna de preço em negrito se quiser que o olho caia nos números O modo responsivo do widget empilha cada linha em um bloco nos telefones, com o cabeçalho da coluna impresso ao lado de cada valor, para que um menu de três colunas permaneça legível sem rolagem lateral.

Rota 3: pacotes de serviços como cartões de preços

Algumas listas de “price” são realmente dois ou três pacotes: um serviço único e um plano mensal, ou um nível básico e um premium do mesmo trabalho Cada pacote tem algumas coisas incluídas, e o leitor está escolhendo entre elas Isso é uma tabela de preços, e o Widget de tabela de preços faz em um cartão por pacote com o preço grande e as inclusões como lista.

Seção de lista de preços de serviço de um kit de modelos Master Addons com dois pacotes, On-demand a 20 dólares por hora e Maintenance a 99 dólares por hora, cada um com recursos incluídos e excluídos
Dois pacotes de serviços do kit de modelos Klyro: uma linha por pacote, inclusões e exclusões marcadas, preço e botão à direita.

A seção acima, do Biblioteca de modelos, mostra a forma: uma linha larga por pacote com o nome e a descrição à esquerda, os itens incluídos e excluídos em duas colunas e o preço com um botão à direita É uma lista de preços em espírito e uma tabela de preços em estrutura, e a regra de ouro mantém: poucos itens, vários recursos cada, então cartões Mais designs de cartões estão na postagem de modelos de tabela de preços.

Regras de design da lista de preços

  • Preços em coluna própria, alinhados à direita. O leitor verifica os preços como uma coluna Um preço dobrado após a descrição em cada linha não pode ser digitalizado.
  • Uma linha por descrição. “Óleo de manjericão, migalha de massa fermentada” é suficiente Um parágrafo por prato transforma a lista em uma página.
  • Agrupe por curso ou categoria com uma linha de rumo de largura total e mantenha os grupos na ordem que um cliente encomendaria.
  • Mostrar a moeda uma vez no cabeçalho ou no primeiro preço, ou mantenha o símbolo em cada preço; misturar os dois parece um erro.
  • Mantenha-o texto. Um menu carregado como uma imagem não pode ser pesquisado, lido em voz alta ou atualizado sem um designer Uma tabela no Elementor é texto.
  • Verifique em um telefone. Uma tabela de três colunas com 390 pixels de largura precisa do modo empilhado ligado, e o preço ainda deve vir logo após o nome do prato.

Qual rota escolher

Se vocêUsarPorque
Tenha o Elementor Pro e um menu simples de um preçoRota 1, widget da lista de preçosFeito para o trabalho, separador pontilhado embutido.
Execute o Elementor grátis ou precise de uma coluna de tamanho ou quantidadeRota 2, Tabela DinâmicaColunas reais, linhas listradas, pilhas em telefones.
Tenha dois a quatro pacotes com recursos cadaRota 3, cartões de tabela de preçosPoucos itens, uma lista de recursos cada, um botão por pacote.
Precisa de preços que variam de acordo com o tamanho (pequeno, médio, grande)Rota 2, Tabela DinâmicaUma coluna por tamanho na mesma linha.

Precisa de um menu com coluna de preço e sem Elementor Pro? O Widget de tabela dinâmica constrói-o como uma tabela real no painel Elementor, com linhas listradas e um layout empilhado para telefones.

Perguntas frequentes

O widget da lista de preços Elementor é gratuito?

Não. O widget Lista de Preços faz parte do Elementor Pro e não aparece no painel do plugin gratuito No Elementor gratuito, uma lista de preços vem de um widget de tabela de complementos, como a Tabela Dinâmica de Complementos Mestres, ou de cartões de preços quando a lista é realmente alguns pacotes.

Qual é a diferença entre uma lista de preços e uma tabela de preços?

Uma lista de preços tem muitos itens com um preço cada e sem listas de recursos, como um menu Uma tabela de preços tem alguns planos com uma lista de recursos e um botão cada, como níveis de hospedagem Use uma lista para itens e uma tabela de cartões para planos.

Como faço um menu de restaurante no Elementor sem Pro?

Use o widget Tabela Dinâmica de complementos mestre: adicione células de cabeçalho de prato, descrição e preço com larguras personalizadas e, em seguida, adicione cada item como três células do corpo com Iniciar nova linha no primeiro Ative linhas listradas e o modo responsivo para que o menu seja empilhado em telefones.

Uma lista de preços pode ter mais de um preço por item?

Sim, com uma tabela Adicione uma coluna por tamanho ou opção, como Pequeno, Médio e Grande, e coloque cada preço em sua própria célula na linha do item O widget Lista de Preços do Elementor Pro mostra um preço por item.

Um menu deve ser uma imagem ou texto?

Texto. Um menu de imagem não pode ser pesquisado, lido por leitores de tela ou atualizado sem refazer a imagem, e ele desfoca em telefones retina Uma tabela ou widget de lista mantém cada prato e preço como texto na página.

Pensamentos finais

Uma lista de preços no Elementor é um preço por linha, e a rota depende do que você tem O widget Lista de Preços do Elementor Pro cobre um menu simples para usuários Pro A Tabela Dinâmica Master Addons cobre o mesmo menu no Elementor gratuito e adiciona colunas para tamanhos, quantidades ou cursos Dois ou três pacotes com recursos são uma tabela de preços, não uma lista, e o widget Tabela de Preços lida com eles como cartões.

Comece com o Página do widget Tabela Dinâmica para a rota do menu, ou o Página do widget da tabela de preços se a sua lista é realmente um conjunto de pacotes.

Foto de Roy Jemee
Roy Jemee
Sou Roy Jemee, Content Wrangler e Marketer da Pixar Labs, trabalhando em Master Addons para Elementor Escrevo os tutoriais, gravo os vídeos e mantenho a documentação atualizada, para que você sempre saiba como usar todos os recursos Eu também lido com suporte, então se você acertar um obstáculo, sou a pessoa que ajuda você a consertar respostas reais, de alguém que usa essas ferramentas todos os dias.

Deixe uma resposta

Seu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados *