--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina' title: 'Crie a sua primeira página | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:12:16+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Construa uma página com o DXPR Builder: uma imagem ao lado de um título, um parágrafo curto e um botão. Também pode partir de um modelo pronto e mudar as palavras. Qualquer caminho demora poucos minutos, e termina com uma página guardada que pré-visualiza como os visitantes a verão. Use esta página depois de instalar o DXPR Builder. O vídeo constrói a página do zero: secção, fila, imagem, botão e texto, depois guardar e pré-visualizar. tags: - 'Build your first page' 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 a sua primeira página' description: |- Construa uma página com o DXPR Builder: uma imagem ao lado de um título, um parágrafo curto e um botão. Também pode partir de um modelo pronto e mudar as palavras. Qualquer caminho demora poucos minutos, e termina com uma página guardada que pré-visualiza como os visitantes a verão. Use esta página depois de instalar o DXPR Builder. O vídeo constrói a página do zero: secção, fila, imagem, botão e texto, depois guardar e pré-visualizar. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:12:16+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/primeiros-passos/primeira-pagina' articleSection: 'Crie a primeira página' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina' description: |- Construa uma página com o DXPR Builder: uma imagem ao lado de um título, um parágrafo curto e um botão. Também pode partir de um modelo pronto e mudar as palavras. Qualquer caminho demora poucos minutos, e termina com uma página guardada que pré-visualiza como os visitantes a verão. Use esta página depois de instalar o DXPR Builder. O vídeo constrói a página do zero: secção, fila, imagem, botão e texto, depois guardar e pré-visualizar. 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) /[Comece aqui](/pt-pt/hc/documentation/learn-dxpr-builder/start-here) /[Crie a primeira página](/pt-pt/hc/documentation/learn-dxpr-builder/start-here/first-steps) # Crie a sua primeira página. Aprender DXPR BuilderComece aquiCrie a primeira página ## Neste guia Construa uma página com o DXPR Builder: uma imagem ao lado de um título, um parágrafo curto e um botão. Também pode partir de um modelo pronto e mudar as palavras. Qualquer caminho demora poucos minutos, e termina com uma página guardada que pré-visualiza como os visitantes a verão. Use esta página depois de [instalar o DXPR Builder](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/instalacao). O vídeo constrói a página do zero: secção, fila, imagem, botão e texto, depois guardar e pré-visualizar. ## Antes de começar - O DXPR Builder está instalado com a sua chave de produto ([Instale o DXPR Builder](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/instalacao)). - Um tipo de conteúdo mostra o construtor: o campo de texto usa o formatador **DXPR Builder**, como **Drag and drop Page** de `dxpr_builder_page`. - A sua função tem a permissão **Edit with DXPR Builder**. ## Criar a página 1. Vá a **Content** > **Add content** e escolha um tipo de conteúdo que mostra o construtor. 2. Escreva um **Title** e clique em **Save**. A página guardada abre com um construtor vazio. O DXPR Builder funciona nesta página, não no formulário de edição. ## Opção A: partir de um modelo O separador **Saved templates** lista esquemas que pessoas do seu site guardaram para reutilizar. O DXPR CMS traz vários, como **Colored icon boxes**. Noutros sites o separador pode estar vazio; **Choose a template** na página vazia oferece então os modelos de página que vêm com o DXPR Builder. [Insert a saved template](/pt-pt/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)mostra estes passos em vídeo. 1. Clique em **Add Elements** para abrir o seletor de elementos. 2. Mude para o separador **Saved templates**. 3. Clique num modelo para o inserir. As secções, filas e elementos aparecem na página, prontos a editar. 4. Clique em **Save** na barra de ferramentas. 5. Abra o menu do olho e escolha **Preview** para ver a página como os visitantes a verão. ## Opção B: construir do zero O vídeo acima segue estes passos. 1. Clique em **Add Elements** e escolha **Section** no separador **Layout**. 2. Clique em **+** na barra de controlos da secção e escolha **Row**. 3. Clique no ícone de grelha na fila, escolha uma predefinição de colunas como 1/3 + 2/3, e clique em **Save**. 4. Clique em **+** na coluna esquerda, abra o separador **Content** e escolha **Image**. 5. Clique em **Select Image**, pesquise na mediateca com **Apply filters**, assinale uma fotografia e clique em **Insert selected**. 6. Abra o painel **SEO**, escreva o **Alt attribute** e clique em **Save**. 7. Clique em **+** na coluna direita e escolha **Button**. 8. Escreva o **Title** e o **Link**, escolha um **Type** e clique em **Save**. 9. Clique em **+** na barra de controlos da coluna larga e escolha **Text**. 10. Escreva um título, defina-o como **Heading 2**, escreva um parágrafo por baixo e clique em **Save**. 11. Clique em **Save** na barra de ferramentas. 12. Abra o menu do olho e escolha **Preview** para ver a página como os visitantes a verão. Escolha **Edit** no mesmo menu para continuar a trabalhar. ## Mudar o que adicionou - **Text**: clique num elemento Text para o editar no local. Uma barra de ferramentas oferece negrito, itálico, títulos, ligações, listas, cor de letra e mais. O seu [perfil de utilizador](/pt-pt/hc/documentacao/aprender-dxpr-builder/administracao/administracao-de-perfis-de-utilizador) decide que botões aparecem. - **Settings**: abra **More** na barra de controlos de um elemento e escolha **Settings**. Um Image tem largura, altura, ligação e texto alternativo; um Button tem **Type**, tamanho e ligação. - **Order**: arraste um elemento pela barra de controlos para outro lugar. Clique em **Save** na barra de ferramentas quando terminar. O navegador avisa-o se tentar sair da página com alterações por guardar. ## O que vê Em **Preview**, a imagem fica à esquerda. O título, parágrafo e botão ficam à direita, sem barras de controlos. De volta a **Edit**, cada elemento mostra a barra de controlos quando paira o cursor sobre ele. O DXPR Builder guarda a página como HTML no campo que edita, normalmente **Body**. Os visitantes veem a página quando o conteúdo é publicado. ## Se não vir o botão Add Elements - **A página vazia mostra "Choose a template" e "Or add elements using the +".** **Enable page creation assistant** está desligado em `/admin/dxpr_studio/dxpr_builder/ai_settings`. Clique em **+** na barra de ferramentas do construtor para abrir o seletor de elementos. - **A página não mostra construtor nenhum.** O tipo de conteúdo não usa o formatador **DXPR Builder**, ou a sua função não tem **Edit with DXPR Builder**. Siga [Verify the installation](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/instalacao#verify-the-installation). - **O separador Saved templates não lista modelos.** Ainda ninguém no site guardou um, ou o seu perfil de utilizador oculta-os. Use **Choose a template** na página vazia, ou [guarde o seu](/pt-pt/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). - **As suas alterações desapareceram depois de recarregar.** A página não foi guardada. Clique em **Save** na barra de ferramentas do construtor antes de sair da página. ## E a seguir? - [The editing tools](/hc/documentation/learn-dxpr-builder/editing): cada controlo, mais atalhos de teclado. - [Elements](/hc/documentation/learn-dxpr-builder/elements): todos os 22 elementos de conteúdo e 6 elementos de esquema. - [Layout](/hc/documentation/learn-dxpr-builder/layout/overview): secções, filas e colunas que se adaptam a cada ecrã.