Crie uma tabela de preços.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma tabela de preços: três planos lado a lado, cada um um painel com um preço, uma lista de funcionalidades e um botão de largura total, com o plano do meio em destaque. Use-a numa página de preços ou dentro de uma página de produto. Para a página de produto completa à volta, siga Crie uma página de produto.

O vídeo constrói três planos para uma ferramenta de relatórios.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A página está aberta no construtor. Para uma nova, vá a Content > Add content > Landing Page (/node/add/landing_page) e clique em Save.
  • Os elementos novos ficam no topo do seu contentor, por isso em cada painel o botão entra antes do preço.

Passo 1: adicione a secção e as colunas

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout.
  2. Paire o cursor sobre a secção e abra More > Settings. Em HTML classes escolha Align text center. Abra o painel Style, escolha um Background cinzento claro e clique em Save.
  3. Clique em + na secção e escolha Row; vem com duas colunas iguais.
  4. Clique no ícone de grelha da fila (Column layout), escolha a predefinição 1/3 + 1/3 + 1/3 e clique em Save.

Passo 2: construa o primeiro plano

  1. Clique em + na primeira coluna e escolha Panel no separador Content.
  2. Paire o cursor sobre o painel e abra More > Settings. Defina o Title como "Starter", mantenha o Type em DXPR e clique em Save.
  3. Clique em + no painel e escolha Button. Defina Title como "Choose plan", Link como /signup e Type como Primary. Ligue Block button para preencher a coluna e clique em Save.
  4. Clique novamente em + no painel e escolha Text; fica por cima do botão. Escreva o preço como Heading 2, adicione as funcionalidades uma por linha e clique em Save.

Passo 3: construa os outros planos

  1. Repita o Passo 2 na segunda coluna para "Professional". No painel Style do painel escolha o Background roxo e defina o Type do botão como Success, para o plano se destacar.
  2. Repita o Passo 2 na terceira coluna para "Enterprise", com "Custom pricing" como preço.

Dica

A coluna do meio atrai o olhar. Ponha lá o plano que mais quer vender.

Passo 4: adicione o cabeçalho

  1. Clique em + na secção e escolha Text; fica por cima da fila.
  2. Escreva "Choose your plan" como Heading 2, adicione uma linha como "Simple monthly pricing. Cancel any time." e clique em Save.

Passo 5: guarde e pré-visualize

  1. Clique em Save na barra de ferramentas do construtor.
  2. Abra o menu de vista (o ícone de olho) e escolha Preview.

Para ir mais longe

Não mostrado no vídeo:

  • Quatro planos: escolha a predefinição 1/4 + 1/4 + 1/4 + 1/4 e construa uma quarta coluna.
  • Distintivo de mais popular: adicione um elemento Text no topo do painel em destaque com "Most popular" a negrito.
  • Anual e mensal: adicione uma linha Text por cima da fila como "Monthly | Annual (save 20%)". A linha é estática; um interruptor real precisa do elemento HTML com o seu próprio script.
  • Vistos de funcionalidade: cole um visto antes de cada linha de funcionalidade ou adicione um elemento Icon por cima da lista.

O que vê

"Choose your plan" fica centrado por cima de três planos numa faixa cinzenta. Cada painel mostra o seu nome na barra de título, o preço, três funcionalidades e um botão Choose plan de largura total. O plano do meio destaca-se em roxo com um botão verde.

Se não vir os planos como mostrados

  • Um painel abre sem diálogo de definições. Os painéis abrem vazios, sem diálogo. Paire o cursor sobre o painel e abra More > Settings para definir o seu Title.
  • Um Type de painel como Primary não mostra cor. O seu tema não dá estilo a esse tipo de painel. Mantenha Type em DXPR e escolha um Background no painel Style do painel, como no Passo 3.
  • Os botões só têm a largura do texto. Block button está desligado. Abra as definições de cada botão e ligue-o.
  • As suas mudanças desapareceram depois de recarregar. Saiu da página antes de clicar em Save na barra de ferramentas do construtor. Se Save mostra um erro, veja As mudanças não guardam.

E a seguir?