--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/site-de-pagina-unica' title: 'Crie um website de página única | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T09:06:53+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Follow a tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Crie um website de página única' description: |- 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. 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:53+0000' dateModified: '2026-10-24T17:19:22+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/documentacao/aprender-dxpr-builder/tutoriais/site-de-pagina-unica' articleSection: 'Seguir um tutorial' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/site-de-pagina-unica' description: |- 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. 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 --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Seguir um tutorial](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crie um website de página única. Aprender DXPR BuilderCriar páginasSeguir um tutorial ## Neste guia Guias relacionados - [Crie uma secção principal](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/seccao-principal) - [Crie uma página de destino de marketing](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-destino-de-marketing) - [Ligue a secções e reutilize estilos com classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado) 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-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](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/seo#step-1-start-the-content-at-heading-2). ## 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 `#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](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/resolucao-de-problemas/falha-ao-guardar). ## E a seguir? - [Crie uma secção principal](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/seccao-principal) para opções de sobreposição e paralaxe - [Crie uma página de destino de marketing](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-destino-de-marketing) para uma página de campanha - [Ligue a secções e reutilize estilos com classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado) para mais sobre HTML IDs