Crie uma página de produto.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma página para um produto. Uma foto fica ao lado do nome, do preço e do botão Buy now, seguida de três funcionalidades, uma lista de especificações e um apelo à ação de vendas. Use-a para qualquer coisa que venda. Para comparar vários planos, adicione-lhe uma tabela de preços.

O vídeo constrói a página de um produto de hardware chamado Insight Hub.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A biblioteca de média tem uma foto do produto.
  • 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 da sua coluna. É por isso que a coluna da direita se constrói do botão para cima.

Passo 1: adicione o produto

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout.
  2. Clique em + na secção e escolha Row; vem com duas colunas iguais.
  3. Clique em + na coluna da esquerda e escolha Image. Clique em Select Image, marque a foto do produto e clique em Insert selected. Escreva o Alt attribute no painel SEO e clique em Save.
  4. Clique em + na coluna da direita e escolha Button. Defina Title como "Buy now", Link como a sua loja, Type como Primary e Size como Large e clique em Save.
  5. Clique novamente em + na coluna da direita e escolha Text; fica por cima do botão. Escreva o preço como Heading 2 e clique em Save.
  6. Clique mais uma vez em + e escolha Text; fica no topo. Escreva o nome do produto como Heading 2, adicione uma linha de descrição e clique em Save. O tema imprime o título da página como Heading 1 da página. Para fazer deste cabeçalho o Heading 1, veja Crie páginas amigas de SEO.

Passo 2: adicione as funcionalidades

  1. Paire o cursor sobre a secção e clique em Add Section Below. Dê à secção nova a classe Align text center.
  2. Clique em + na secção e escolha Row. Clique no seu ícone de grelha (Column layout), escolha a predefinição 1/3 + 1/3 + 1/3 e clique em Save.
  3. Clique em + na primeira coluna e escolha Text. Escreva o nome da funcionalidade como Heading 3, adicione uma linha e clique em Save.
  4. Clique em + na mesma coluna e escolha Icon; fica por cima do texto. Escolha o conjunto Font Awesome Free Solid, pesquise plug e clique no ícone. Defina Size como Very Large (3x), abra Icon utilities, defina Style como Circle e clique em Save.
  5. Repita para a segunda coluna com cloud e a terceira com battery-full.

Passo 3: adicione as especificações

  1. Adicione uma terceira secção com Add Section Below. Abra o seu More > Settings, escolha um Background cinzento claro no painel Style e clique em Save.
  2. Clique em + na secção e escolha Text. Escreva "Specifications" como Heading 2, depois uma especificação por linha, e clique em Save.

Passo 4: adicione o apelo à ação

  1. Adicione uma quarta secção e abra o seu More > Settings. Escolha Align text center em HTML classes e depois o Background roxo e o Font color branco no painel Style. Clique em Save.
  2. Clique em + na secção e escolha Button. Defina Title como "Talk to sales", Link como /contact, Type como Light e Size como Large e clique em Save.
  3. Clique novamente em + e escolha Text; fica por cima do botão. Escreva "Insight Hub from 249 euro" como Heading 2 e adicione uma linha. Defina Font color como branco 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:

  • Tabela de especificações: insira uma tabela com o botão Table na barra de ferramentas de texto em vez de uma linha por especificação.
  • Galeria: substitua a foto única por um Image carousel de fotos do produto.
  • Planos: ligue o preço a uma tabela de preços.

O que vê

A foto do produto preenche a metade esquerda, com o nome, o preço e o botão Buy now à direita. Seguem-se três funcionalidades centradas, cada uma com um ícone em círculo sobre o seu nome e linha. As especificações ficam numa faixa cinzenta e uma faixa roxa fecha a página com Talk to sales.

Se não vir a página como mostrada

  • O nome, o preço e o botão estão por ordem errada. Entraram de cima para baixo e os elementos novos ficam no topo da sua coluna. Arraste-os para o lugar pela pega de arrasto na sua barra de controlos.
  • Os ícones não têm círculo. Style está no painel Icon utilities, não em General. Abra as definições do ícone, abra Icon utilities e defina Style como Circle.
  • O cabeçalho continua escuro sobre roxo. O elemento Text não tem Font color próprio. Abra o seu painel Style e defina Font color como branco.
  • 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?