Crie uma página de evento.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma página para um evento. Tem uma secção principal com foto, a data e um botão Register now, os detalhes ao lado de um mapa, cartões de oradores e uma faixa de inscrição. Use-a para dias abertos, palestras e webinars. Para um site inteiro numa página com deslocamento, siga Crie um site de página única com deslocamento.

O vídeo constrói a página de um dia aberto de uma universidade.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A biblioteca de média tem uma foto larga para a secção principal.
  • 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 secção por ordem inversa ou arraste-os para o lugar depois.

Passo 1: adicione a secção principal

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout. Paire o cursor sobre ela e abra More > Settings.
  2. Em HTML classes escolha Align text center.
  3. Abra o painel Style. Em Background image clique em Select Image, marque uma foto e clique em Insert selected. Defina Background style como Cover.
  4. Escolha um Background azul-escuro e um Font color branco e clique em Save.
  5. Clique em + na secção e escolha Button. Defina Title como "Register now", Link para a página de inscrição, Type como Light e Size como Large, e clique em Save.
  6. Clique novamente em + e escolha Text; fica por cima do botão. Escreva o nome do evento como Heading 2, depois a data e um slogan. Defina Font color como branco no painel Style 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 os detalhes e o mapa

  1. Paire o cursor sobre a secção principal e clique em Add Section Below. Clique em + na secção nova e escolha Row; as suas duas colunas iguais são a divisão de que precisa.
  2. Clique em + na coluna da esquerda e escolha Text. Escreva "Event details" como Heading 2, adicione uma linha para data, local e contacto, e clique em Save.
  3. Clique em + na coluna da direita e escolha Map. Escreva a Address do local, defina Map height como 320 e clique em Save.

Passo 3: adicione os oradores

  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 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 + em cada coluna e escolha Card. Abra o seu More > Settings, defina o Header como a sessão e o Title como o nome e a função do orador, e clique em Save.

Passo 4: adicione o apelo à ação de inscriçã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 "Sign up", Link para a página de inscrição, 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 "Register today" 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:

  • Fotos dos oradores: clique em + num cartão e adicione uma biografia Text, depois clique novamente em + no cartão e adicione um Image; fica por cima do texto
  • Foto mais escura: no painel Background effects da secção principal defina Background effect como Gradient. Escolha a mesma cor escura com cerca de 60% de opacidade como Start color e End color
  • Programa: adicione um elemento Text e insira uma tabela com o botão Table para hora, sessão e orador
  • Inscrição na página: veja Adicione formulários às páginas

O que vê

O nome do evento, a data e o botão Register now ficam centrados e brancos na foto. Por baixo, os detalhes preenchem a metade esquerda e um mapa do local a direita. Três cartões de oradores ficam numa faixa cinzenta e uma faixa roxa fecha a página com Sign up.

Se não vir a página como mostrada

  • A foto da secção principal não enche a secção. Background style continua em Theme defaults. Abra o painel Style da secção e defina-o como Cover.
  • 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.
  • Um cartão não mostra caixa de diálogo de definições depois de o adicionar. Os cartões abrem vazios, sem caixa de diálogo. Paire o cursor sobre o cartão e abra More > Settings para preencher Header e Title.
  • 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?