---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: 'Crie uma secção principal | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:06:16+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crie uma secção principal'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:06:16+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crie uma secção principal.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Crie uma página de destino de marketing](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections)
- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

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](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 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](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).
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?

- [Página de destino](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) para construir uma página completa à volta da sua secção principal
- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections) para as opções de esquema da secção
- [Altere o aspeto de um elemento no painel Style](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) para todas as opções de estilo