Crie um website de página única.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se um website inteiro numa página: um herói de altura total cujos botões saltam para as secções About, Services e Contact por baixo. Cada secção tem um HTML ID, o alvo do seu botão. Use-o para uma pequena empresa, uma campanha ou um portefólio. Para uma página à volta de uma oferta, siga Crie uma página de destino de marketing.

O vídeo constrói o sítio de um estúdio de design chamado Studio Nord.

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 o herói e uma foto de equipa.
  • 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, por isso os botões do herói entram do último para o primeiro.

Passo 1: construa o herói

  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. Defina HTML ID como hero e, em HTML classes, escolha Align text center.
  3. Ligue 100% height para a secção preencher o ecrã e Vertical centering para o conteúdo ficar no meio.
  4. Abra o painel Style. Em Background image clique em Select Image, marque uma foto e clique em Insert selected. Defina Background style como Cover, escolha o Background azul-marinho e o Font color branco, e clique em Save.
  5. Clique em + na secção e escolha Button. Defina Title como "Contact", Link como #contact e Type como Light e clique em Save. Adicione mais dois botões da mesma forma: "Services" com #services e depois "About" com #about. Cada um fica por cima do anterior.
  6. Clique novamente em + e escolha Text; fica por cima dos botões. Escreva "Studio Nord" como Heading 2 e adicione o 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 a secção About

  1. Paire o cursor sobre o herói e clique em Add Section Below. Abra o More > Settings da secção nova, defina HTML ID como about e clique em Save.
  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 uma foto 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 Text. Escreva "About" como Heading 2, adicione a sua história e clique em Save.

Passo 3: adicione a secção Services

  1. Adicione uma terceira secção com Add Section Below e abra o seu More > Settings. Defina HTML ID como services, escolha Align text center em HTML classes e um Background cinzento claro no painel Style. Clique em Save.
  2. Adicione um 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 "Branding" 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 pen-nib e clique no ícone. Defina Size como Very Large (3x), abra Icon utilities, defina Style como Circle e clique em Save.
  5. Repita para "Websites" com laptop-code e "Analytics" com chart-pie.

Passo 4: adicione a secção Contact

  1. Adicione uma quarta secção e abra o seu More > Settings. Defina HTML ID como contact, escolha Align text center em HTML classes e clique em Save.
  2. Clique em + na secção e escolha Social links. Escreva linkedin como a marca da primeira fila e cole o URL do perfil, depois instagram e o seu URL na segunda. Defina Style como Circle e Size como 2x e clique em Save.
  3. Clique novamente em + e escolha Button; fica por cima das ligações. Defina Title como "Email us", Link como mailto:hello@studionord.example e mantenha Type em Primary e clique em Save.
  4. Clique novamente em + e escolha Text; fica por cima do botão. Escreva "Get in touch" como Heading 2 e o seu endereço de correio eletrónico e número de telefone por baixo, 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), escolha Preview e clique num botão do herói, como Contact.

Para ir mais longe

Não mostrado no vídeo:

  • Menu fixo: crie um menu em Structure > Menus > Add menu com uma ligação por secção, como /studio-nord#about ou <front>#about na página inicial. Coloque-o na região de cabeçalho em Structure > Block layout. No DXPR Theme, ligue Sticky Header em Appearance > Settings > DXPR Theme.
  • Página inicial: faça desta página a sua página inicial em Configuration > System > Basic site settings.
  • Formulário de contacto: insira um formulário a partir do separador Drupal Blocks em vez do texto de apresentação; veja Adicione formulários às páginas.

O que vê

A foto preenche o ecrã com "Studio Nord", o slogan e três botões claros. Um clique num botão desloca a página suavemente até à sua secção. About mostra a foto de equipa ao lado da história, Services três ícones em círculo sobre cinzento e Contact o cabeçalho "Get in touch" e o botão Email us por cima de dois ícones sociais redondos.

Se não vir a página como mostrada

  • Um botão não salta para a sua secção. O seu Link não corresponde ao HTML ID da secção. A ligação é # mais exatamente o mesmo ID, como #about para o ID about.
  • Uma secção fica por baixo do seu cabeçalho fixo. O construtor não conhece a altura do cabeçalho. Em Advanced Settings em DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), defina Scroll offset selector como o seletor CSS do seu cabeçalho.
  • Uma ligação social mostra "No matching brand icon found". A marca não é um nome de ícone conhecido. Escreva-a em minúsculas, por exemplo linkedin ou instagram.
  • 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?