---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-servicos'
title: 'Crie uma página de serviços | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:07:31+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aqui constrói-se uma página que lista o que oferece. Tem um cabeçalho, três serviços com ícones, um serviço em detalhe ao lado de uma foto, logótipos de clientes e um apelo à ação. Use-a quando vende vários serviços. Para uma página sobre uma oferta, siga Crie uma página de destino de marketing.
  O vídeo constrói a página de serviços de uma agência digital.
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 uma página de serviços'
      description: |-
        Aqui constrói-se uma página que lista o que oferece. Tem um cabeçalho, três serviços com ícones, um serviço em detalhe ao lado de uma foto, logótipos de clientes e um apelo à ação. Use-a quando vende vários serviços. Para uma página sobre uma oferta, siga Crie uma página de destino de marketing.
        O vídeo constrói a página de serviços de uma agência digital.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:07:31+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/pagina-de-servicos'
      articleSection: 'Seguir um tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-servicos'
      description: |-
        Aqui constrói-se uma página que lista o que oferece. Tem um cabeçalho, três serviços com ícones, um serviço em detalhe ao lado de uma foto, logótipos de clientes e um apelo à ação. Use-a quando vende vários serviços. Para uma página sobre uma oferta, siga Crie uma página de destino de marketing.
        O vídeo constrói a página de serviços de uma agência digital.
      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 uma página de serviços.

 Aprender DXPR BuilderCriar páginasSeguir um tutorial

   ## Neste guia

 Guias relacionados

- [Crie uma página de destino de marketing](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-destino-de-marketing)
- [Adicionar um ícone](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/icone)
- [Adicionar um letreiro animado](/pt-pt/hc/documentation/learn-dxpr-builder/elements/marquee)

Aqui constrói-se uma página que lista o que oferece. Tem um cabeçalho, três serviços com ícones, um serviço em detalhe ao lado de uma foto, logótipos de clientes e um apelo à ação. Use-a quando vende vários serviços. Para uma página sobre 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 a página de serviços de uma agência digital.

  ## Antes de começar

- A sua função tem a permissão **Edit with DXPR Builder**.
- A biblioteca de média tem uma foto para o serviço em detalhe e quatro logótipos de clientes.
- 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**.
- No DXPR CMS, esconda o título de página do tema nesta página: no seu formulário de edição, abra **DXPR Theme Settings** e marque **Page Title** em **DXPR Hide Regions**. O **Title** do Jumbotron é então o único Heading 1 da página, como explica [Crie páginas amigas de SEO](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/seo#step-1-start-the-content-at-heading-2).
- Os elementos novos ficam no topo da sua secção ou coluna. Adicione os elementos de uma coluna por ordem inversa ou arraste-os para o lugar depois.

## Passo 1: adicione o cabeçalho

1. Clique em **Add Elements** na página vazia e escolha **Section** no separador **Layout**. Paire o cursor sobre ela, abra **More** > **Settings**, escolha o **Background** azul-marinho no painel **Style** e clique em **Save**.
2. Clique em **+** na secção e escolha **Jumbotron** no separador **Content**.
3. Defina o **Title** como "Our services", o **Lead** como uma linha sobre o que oferece e o **Type** como **Primary** e clique em **Save**.

## Passo 2: adicione a vista geral dos serviços

1. Paire o cursor sobre a secção e clique em **Add Section Below**. Dê à secção nova a classe **Align text center**.
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 **+** na primeira coluna e escolha **Text**. Escreva "Design" 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 `palette` e clique no ícone. Defina **Size** como **Very Large (3x)**, abra **Icon utilities**, defina **Style** como **Circle** e clique em **Save**.
5. Repita para "Development" com `code` e "Marketing" com `bullhorn`.

## Passo 3: adicione um serviço em detalhe

1. Adicione uma terceira secção com **Add Section Below** e depois um **Row**; vem com duas colunas iguais.
2. 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**.
3. Clique em **+** na coluna da direita e escolha **Button**. Defina **Title** como "Get a quote", **Link** como `/contact` e **Type** como **Primary** e clique em **Save**.
4. Clique novamente em **+** na coluna da direita e escolha **Text**; fica por cima do botão. Escreva "Design" como **Heading 2**, adicione a descrição e o que está incluído, e clique em **Save**.

## Passo 4: adicione os logótipos de clientes

1. Adicione uma quarta secção e abra o seu **More** > **Settings**. Escolha **Align text center** em **HTML classes** e um **Background** cinzento claro no painel **Style**. Clique em **Save**.
2. Clique em **+** na secção e escolha **Marquee**. Remova as três imagens de exemplo com o **×** em cada. Clique em **Select Image**, pesquise os seus logótipos, marque quatro deles e clique em **Insert selected**. Ligue **Gray scale** e clique em **Save**.
3. Clique novamente em **+** na secção e escolha **Text**; fica por cima do letreiro. Escreva "Trusted by leading brands" como **Heading 2** e clique em **Save**.

## Passo 5: adicione o apelo à ação

1. Adicione uma quinta 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 "Schedule a consultation", **Link** como `/contact`, **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 "Ready to get started?" como **Heading 2** e adicione uma linha. Defina **Font color** como branco 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**) e escolha **Preview**.

## Para ir mais longe

Não mostrado no vídeo:

- **Uma secção de detalhe por serviço**: repita o Passo 3 para Development e Marketing. Ligue **Mirror row** nas definições de cada segunda fila, para as fotos alternarem de lado em tablets e computadores.
- **Ligações de salto**: defina o **HTML ID** de cada secção de detalhe (`design`, `development`, `marketing`). Adicione um **Button** por baixo de cada texto de vista geral com **Link** `#design` e por aí fora.
- **Testemunhos**: adicione um **Block quote** por cliente por cima dos logótipos.

## O que vê

Uma faixa azul-marinho abre a página, com "Our services" em tipo grande branco sobre um resumo de uma linha. Seguem-se três serviços centrados, cada um com um ícone em círculo sobre o seu nome e linha. Design tem a sua própria faixa com uma foto, uma descrição e **Get a quote**. Logótipos cinzentos de clientes passam numa faixa clara e uma faixa roxa fecha a página.

## Se não vir a página como mostrada

- **O letreiro continua a mostrar os logótipos de exemplo.** As três imagens de exemplo ficam até as remover. Abra as definições do letreiro, clique no **×** em cada imagem de exemplo e guarde.
- **Os logótipos estão a cores.** **Gray scale** está desligado. Abra as definições do letreiro, ligue-o e clique em **Save**.
- **Os ícones não têm círculo.** **Style** está no painel **Icon utilities**, não em **General**. Abra as definições do ícone, abra **Icon utilities** e defina **Style** como **Circle**.
- **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 página de destino de marketing](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-destino-de-marketing) para uma página dedicada por serviço
- [Adicionar um ícone](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/icone) para tamanhos e estilos
- [Adicionar um letreiro animado](/pt-pt/hc/documentation/learn-dxpr-builder/elements/marquee) para as definições da faixa de logótipos