Crie uma página de contacto.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma página de contacto: um mapa da sua morada, três formas de o contactar com um ícone cada e um formulário de contacto. Use-a para a página para que o seu menu liga como "Contact". Para pôr apenas um formulário dentro de outra página, siga Adicione formulários às páginas.

O vídeo constrói a página de contacto de um município.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • O seu formulário de contacto existe como bloco, por exemplo um webform aberto feito com o módulo Webform.
  • 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 secção ou coluna. Adicione os elementos de uma coluna por ordem inversa ou arraste-os para o lugar depois.

Passo 1: adicione o mapa

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout.
  2. Clique em + na secção e escolha Map no separador Content.
  3. Escreva a sua Address, defina Map height como 400 e clique em Save.

O mapa incorpora o Google Maps centrado na morada.

Passo 2: adicione os dados de contacto

  1. Paire o cursor sobre a secção e clique em Add Section Below. Abra o More > Settings da secção nova, escolha Align text center em HTML classes e depois um Background cinzento claro no painel Style. Clique em Save.
  2. Clique em + na secção e escolha Row; vem com duas colunas iguais. 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 "Visit us" como Heading 3, adicione a morada e o horário de abertura, 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 location-dot e clique no ícone. Defina Size como Extra Large (2x) e clique em Save.
  5. Repita na segunda coluna com "Call us" e o ícone phone, e na terceira com "Email us" e o ícone envelope.

Escolha o mesmo Size para os três ícones para a fila ficar alinhada.

Passo 3: adicione o formulário

  1. Adicione uma terceira secção com Add Section Below e dê-lhe a classe Align text center.
  2. Clique em + na secção e abra o separador Drupal Blocks.
  3. Escolha o bloco do seu formulário de contacto e clique em Save no seu diálogo de definições; o formulário aparece na secção.
  4. Clique novamente em + na secção e escolha Text; fica por cima do formulário. Escreva "Send us a message" como Heading 2, adicione uma linha e clique em Save.

Os formulários feitos em Structure > Contact forms (/admin/structure/contact) não têm bloco no núcleo do Drupal. O módulo contribuído Contact Block adiciona um Contact block ao mesmo separador.

Passo 4: 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:

  • Tocar para ligar: selecione o número de telefone no texto, clique no botão de ligação na barra de ferramentas e introduza tel:+31104001234
  • Clicar para enviar correio: selecione o endereço e ligue-o a mailto:info@example.com
  • Qualquer bloco: o separador Drupal Blocks incorpora os blocos do seu sítio, como formulários de pesquisa, inscrições de newsletter e blocos personalizados

O que vê

Um mapa de 400 píxeis da sua morada preenche o topo da página. Por baixo, uma faixa cinzenta mostra três colunas centradas, cada uma com um ícone, um cabeçalho e os seus dados. O formulário fecha a página por baixo do seu cabeçalho centrado "Send us a message".

Se não vir a página como mostrada

  • O mapa mostra o lugar errado. O Google Maps pesquisa a morada como escrita. Adicione o código postal, a cidade e o país a Address e guarde de novo.
  • O seu formulário não está no separador Drupal Blocks. O construtor lista apenas webforms abertos e os formulários de contacto do núcleo precisam do módulo Contact Block. Defina o estado do webform como Open em Structure > Webforms (/admin/structure/webform).
  • Os ícones têm tamanhos diferentes. Cada ícone mantém o seu próprio Size. Abra as definições de cada ícone e escolha o mesmo.
  • 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?