Crie uma secção principal.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aqui constrói-se uma secção principal que enche o ecrã: uma foto de fundo, um cabeçalho, uma linha de apoio e um botão, com a foto a mover-se mais devagar do que a página quando os visitantes deslocam. Use-a no topo de qualquer página. Para construir a página inteira à volta, siga Crie uma página de destino de marketing a seguir.

O vídeo constrói a secção principal de um produto de relatórios.

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, com pelo menos 1920 píxeis de largura.
  • 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.

Passo 1: adicione a secção

  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, para o cabeçalho, o texto e o botão ficarem centrados juntos.
  3. Ligue 100% height para a secção principal encher 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 larga e clique em Insert selected.
  5. Defina Background style como Cover para a foto encher a secção.
  6. Escolha um Background escuro, que aparece enquanto a foto carrega. Defina Font color como branco e clique em Save.

Dica

Comprima a foto para menos de 500 KB para a secção principal carregar depressa.

Passo 2: adicione o botão

  1. Clique em + na secção e escolha Button no separador Content.
  2. Defina Title como "Start free trial", Link como /trial, Type como Light para contraste na foto e Size como Large, e clique em Save.

Passo 3: adicione o cabeçalho

  1. Clique novamente em + na secção e escolha Text no separador Content. Fica por cima do botão, porque os elementos novos ficam no topo.
  2. Escreva o seu cabeçalho, "Reporting that keeps up with your team", e escolha Heading 2 na lista de cabeçalhos. 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.
  3. Adicione uma linha de apoio: "Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required."
  4. No painel Style defina Font color como branco e clique em Save.

Passo 4: adicione paralaxe

  1. Paire o cursor sobre a secção e abra novamente More > Settings.
  2. Abra o painel Background effects e defina Background effect como Parallax image. Parallax speed começa em 20; arraste-o para 35 para um efeito mais forte e clique em Save.

Passo 5: adicione conteúdo por baixo da secção principal

  1. Paire o cursor sobre a secção principal e clique em Add Section Below, para a página ter conteúdo para deslocar.
  2. Clique em + na secção nova e escolha Text no separador Content. Escreva um cabeçalho e um parágrafo curto, defina a primeira linha como Heading 2 e clique em Save.

Passo 6: 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 desloque para baixo.

Para ir mais longe

Não mostrado no vídeo:

  • Overlay: defina Background effect como Gradient e escolha um Start color e um End color escuros com cerca de 50% de opacidade. O texto continua legível em qualquer foto. O efeito guarda um valor, por isso uma sobreposição substitui a paralaxe.
  • Secção principal mais baixa: desligue 100% height e dê à secção o seu próprio preenchimento superior e inferior no painel Style, por exemplo 100 píxeis.
  • Botão largo: ligue Block button para um botão tão largo como a sua coluna.

Variações

Alternativas à construção do vídeo:

Secção principal com vídeo de fundo

  1. No painel Background effects, defina Background effect como YouTube video.
  2. Cole o URL do vídeo em YouTube video URL.
  3. Em Video options, marque Loop e Disable on mobile devices; deixe o áudio desligado.

Secção principal só com gradiente

Salte a imagem de fundo e use o efeito Gradient com duas cores de marca sólidas para uma secção principal que carrega depressa.

Secção principal dividida

  1. Adicione um Row dentro da secção; vem com duas colunas iguais.
  2. Ponha o texto e o botão na coluna da esquerda e uma imagem na coluna da direita.

O que vê

A foto enche o ecrã com o seu cabeçalho, linha de apoio e botão Start free trial centrados em branco por cima. À medida que desce para a segunda secção, a foto move-se mais devagar do que a página.

Se não vir a secção principal como mostrada

  • A secção principal só tem a altura do seu texto. 100% height está desligado. Ligue-o nas definições da secção e clique em Save.
  • A foto fica parada quando desloca. Background effect continua em Simple image, Parallax speed está a 0, ou nada está por baixo da secção principal para onde deslocar. Defina Parallax image, arraste Parallax speed para cima de 0 e adicione a segunda secção do Passo 5.
  • O cabeçalho fica escuro na foto. O elemento Text não tem Font color próprio. Abra o seu painel Style e defina Font color como branco.

E a seguir?