---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/case-study'
title: 'Escreva um estudo de caso | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:05:39+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aqui escreve-se sobre um projeto de cliente em três partes: o desafio, a solução e os resultados. Termina-se com sete faixas: um herói de foto, uma vista geral com o número principal, o desafio, a solução ao lado de uma foto, três contadores, uma citação e um apelo à ação. Para mostrar muitos projetos numa página, siga Crie uma galeria de portefólio.
  O vídeo escreve sobre o trabalho de uma agência para a Northwind Retail.
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: 'Escreva um estudo de caso'
      description: |-
        Aqui escreve-se sobre um projeto de cliente em três partes: o desafio, a solução e os resultados. Termina-se com sete faixas: um herói de foto, uma vista geral com o número principal, o desafio, a solução ao lado de uma foto, três contadores, uma citação e um apelo à ação. Para mostrar muitos projetos numa página, siga Crie uma galeria de portefólio.
        O vídeo escreve sobre o trabalho de uma agência para a Northwind Retail.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:05:39+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/case-study'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/case-study'
      description: |-
        Aqui escreve-se sobre um projeto de cliente em três partes: o desafio, a solução e os resultados. Termina-se com sete faixas: um herói de foto, uma vista geral com o número principal, o desafio, a solução ao lado de uma foto, três contadores, uma citação e um apelo à ação. Para mostrar muitos projetos numa página, siga Crie uma galeria de portefólio.
        O vídeo escreve sobre o trabalho de uma agência para a Northwind Retail.
      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) # Escreva um estudo de caso.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Blockquote](/hc/documentation/learn-dxpr-builder/elements/blockquote)
- [Number Counter](/hc/documentation/learn-dxpr-builder/elements/number-counter)
- [Crie uma galeria de portefólio](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

Aqui escreve-se sobre um projeto de cliente em três partes: o desafio, a solução e os resultados. Termina-se com sete faixas: um herói de foto, uma vista geral com o número principal, o desafio, a solução ao lado de uma foto, três contadores, uma citação e um apelo à ação. Para mostrar muitos projetos numa página, siga [Crie uma galeria de portefólio](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery).

O vídeo escreve sobre o trabalho de uma agência para a Northwind Retail.

  ## 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 do que entregou.
- 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. Adicione os elementos de uma coluna por ordem inversa ou arraste-os para o lugar depois.

## Passo 1: adicione o herói

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**.
3. Abra o painel **Style**. Em **Background image** clique em **Select Image**, marque uma foto e clique em **Insert selected**. Defina **Background style** como **Cover**.
4. Escolha um **Background** azul-marinho escuro e um **Font color** branco, e clique em **Save**. A cor mostra-se enquanto a foto carrega.
5. Clique em **+** na secção e escolha **Button**. Defina **Title** como "Visit the site", **Link** como o URL do cliente, **Type** como **Light** e **Size** como **Large** e clique em **Save**.
6. Clique novamente em **+** e escolha **Text**; fica por cima do botão. Escreva o nome do cliente como **Heading 2** e um resumo de uma linha por baixo. 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/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Passo 2: adicione a vista geral

1. Paire o cursor sobre o herói e clique em **Add Section Below**. Adicione um **Row** à secção nova, clique no seu ícone de grelha (**Column layout**), escolha a predefinição **2/3 + 1/3** e clique em **Save**.
2. Clique em **+** na coluna larga e escolha **Text**. Escreva "Overview" como **Heading 2**, adicione o resumo e clique em **Save**.
3. Clique em **+** na coluna estreita e escolha **Text**. Escreva a etiqueta da métrica, "More online orders", e clique em **Save**.
4. Clique novamente em **+** na coluna estreita e escolha **Number counter**; fica por cima da etiqueta. Defina **End** como 32, **Suffix** como %, **Thousands separator** como **Comma**, defina **Speed** como 2500 e clique em **Save**.

O contador não tem campo de etiqueta próprio; o elemento Text por baixo faz esse trabalho.

## Passo 3: adicione o desafio

1. Adicione uma terceira secção com **Add Section Below**. Abra o seu **More** > **Settings**, escolha um **Background** cinzento claro no painel **Style** e clique em **Save**.
2. Clique em **+** na secção e escolha **Text**. Escreva "The challenge" como **Heading 2**, descreva o problema e clique em **Save**.

## Passo 4: adicione a solução

1. Adicione uma quarta secção e depois um **Row**; vem com duas colunas iguais.
2. Clique em **+** na coluna da esquerda e escolha **Text**. Escreva "The solution" como **Heading 2**, descreva o que construiu e clique em **Save**.
3. Clique em **+** na coluna da direita e escolha **Image**. Clique em **Select Image**, marque uma foto do resultado e clique em **Insert selected**. Escreva o **Alt attribute** no painel **SEO** e clique em **Save**.

## Passo 5: adicione os resultados

1. Adicione uma quinta secção e abra o seu **More** > **Settings**. Escolha **Align text center** em **HTML classes** e depois o **Background** azul-marinho e o **Font color** branco no painel **Style**. Clique em **Save**.
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. Em cada coluna, adicione primeiro uma etiqueta **Text** e depois um **Number counter** por cima, como no Passo 2: **End** 32 com **Suffix** %, **End** 2 com **Suffix** s e **End** 15000.

## Passo 6: adicione a citação

1. Adicione uma sexta secção.
2. Clique em **+** na secção e escolha **Block quote**. Escreva as palavras do cliente, preencha **Cite** com o seu nome e função, e clique em **Save**.

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

1. Adicione uma sétima 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 "Contact us", **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 8: 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**.

## O que vê

O nome do cliente e o botão **Visit the site** ficam centrados sobre a foto. A vista geral mostra 32% ao lado do seu resumo; os visitantes veem-no contar até lá quando entra em vista. O desafio fica numa faixa cinzenta e a solução fica ao lado da sua foto.

Na faixa azul-marinho, os três resultados contam até lá quando entram em vista: 32%, 2s e 15 000. A citação do cliente e uma faixa roxa de **Contact us** fecham a página.

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

- **A foto do herói não preenche a secção.** **Background style** continua em **Theme defaults**. Abra o painel **Style** da secção e defina-o como **Cover**.
- **O último contador lê 15000 sem vírgula.** **Thousands separator** continua em **None**. Abra as definições do contador e escolha **Comma**.
- **Uma etiqueta fica por cima do seu contador.** O contador entrou antes da sua etiqueta e os elementos novos ficam no topo da sua coluna. Arraste a etiqueta para baixo do contador pela pega de arrasto na sua barra de controlos.
- **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/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## E a seguir?

- [Adicionar um bloco de citação](/hc/documentation/learn-dxpr-builder/elements/blockquote) para opções de estilo de testemunhos
- [Adicionar um contador numérico](/hc/documentation/learn-dxpr-builder/elements/number-counter) para todas as definições de contador
- [Crie uma galeria de portefólio](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) para listar todos os seus estudos de caso numa página