--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/edicao/seletor-de-elementos' title: 'Encontre e adicione um elemento | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:12:32+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Cada elemento que adiciona vem do seletor de elementos, um diálogo com cinco separadores: layout, conteúdo, blocos Drupal, vistas Drupal e os seus modelos guardados. Aqui aprende o que cada separador contém e como encontrar um elemento depressa. O exemplo visita cada separador e adiciona um botão a partir do separador Content. tags: - 'Edit a 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: 'Encontre e adicione um elemento' description: |- Cada elemento que adiciona vem do seletor de elementos, um diálogo com cinco separadores: layout, conteúdo, blocos Drupal, vistas Drupal e os seus modelos guardados. Aqui aprende o que cada separador contém e como encontrar um elemento depressa. O exemplo visita cada separador e adiciona um botão a partir do separador Content. 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:32+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/edicao/seletor-de-elementos' articleSection: 'Editar uma página' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/edicao/seletor-de-elementos' description: |- Cada elemento que adiciona vem do seletor de elementos, um diálogo com cinco separadores: layout, conteúdo, blocos Drupal, vistas Drupal e os seus modelos guardados. Aqui aprende o que cada separador contém e como encontrar um elemento depressa. O exemplo visita cada separador e adiciona um botão a partir do separador Content. 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) /[Editar uma página](/pt-pt/hc/documentation/learn-dxpr-builder/editing) # Encontre e adicione um elemento. Aprender DXPR BuilderCriar páginasEditar uma página ## Neste guia Guias relacionados - [Arraste elementos para o lugar](/pt-pt/hc/documentation/learn-dxpr-builder/editing/drag-and-drop) - [Edite texto na página](/pt-pt/hc/documentacao/aprender-dxpr-builder/edicao/edicao-de-texto-em-linha) Cada elemento que adiciona vem do seletor de elementos, um diálogo com cinco separadores: layout, conteúdo, blocos Drupal, vistas Drupal e os seus modelos guardados. Aqui aprende o que cada separador contém e como encontrar um elemento depressa. O exemplo visita cada separador e adiciona um botão a partir do separador **Content**. ## Abrir o seletor 1. Clique em **Add Elements** na área de conteúdo vazia e, no separador **Layout**, escolha **Section**. 2. Clique em **+** na secção: o seletor abre de novo. O que escolher agora vai para dentro desta secção, no topo. ## Ver os cinco separadores 1. Clique em **Layout**: Section, Row, Tabs, Collapse panel, Carousel e Positioned layers. 2. Clique em **Content**: elementos de texto, media e interativos, com caixa **Search**. 3. Clique em **Drupal Blocks**: os blocos do seu site, com **Filter by category** e caixa de pesquisa. 4. Clique em **Drupal Views**: todas as apresentações das suas vistas ativas, com **Filter by tag** e caixa de pesquisa. 5. Clique em **Saved templates**: os seus modelos privados e globais, com **Filter by user**, **Filter by type** e caixa de pesquisa. Todos os separadores exceto **Layout** têm caixa **Search**: escreva parte de um nome para filtrar esse separador. ## Adicionar um elemento 1. De volta ao separador **Content**, escolha **Button**: o diálogo de definições abre de imediato. 2. Escreva o **Title**, defina o **Link**, mantenha o **Type** em Primary e clique em **Save**. 3. Clique em **Save** na barra de ferramentas. ## Elementos de conteúdo | Elemento | Finalidade | |---|---| | Alert | Mensagem de alerta Bootstrap | | Block quote | Citação com estilo | | Button | Botão com estilo e ligação | | Card | Cartão com cabeçalho, título e conteúdo | | Circle counter | Animação circular de progresso | | Countdown timer | Contagem decrescente de data e hora | | Number counter | Número animado de contagem | | HTML | Código HTML em bruto | | Icon | Ícone de uma biblioteca de ícones | | Image | Imagem única com ligação e texto alternativo | | Image carousel | Galeria de imagens rotativa | | Jumbotron | Faixa larga com título e linha de apresentação | | Link | Ligação com estilo | | Map | Incorporação Google Maps | | Marquee | Faixa de imagens em deslocamento | | Panel | Painel com bordo e título | | Progress bar | Indicador animado de progresso | | Divider | Linha horizontal | | Text | Texto rico com edição em linha | | Local video | Ficheiro de vídeo próprio | | Video | Vídeo incorporado (YouTube, Vimeo) | | Social links | Ligações de ícones de redes sociais | ## O que vê A maioria dos elementos abre o diálogo de definições assim que os escolhe. Card, Divider e Panel ficam na página de imediato, tal como Section, Row, Tabs e Collapse panel. Carousel e Positioned layers abrem primeiro as definições. O elemento novo fica no topo da secção ou coluna onde clicou; arraste-o para baixo se pertencer mais abaixo. ## Se não vir o elemento - **Falta um elemento num separador.** O seu perfil de utilizador oculta-o. Um administrador assinala-o em **Elements** no perfil em **DXPR Studio** > **DXPR Builder** > **User Profiles**(`/admin/dxpr_studio/dxpr_builder/profile`). O perfil dá outros nomes a alguns elementos: **Separator** é Divider, **Counter** é Number counter, **Countdown** é Countdown timer e **Blockquote** é Block quote. - **Falta um bloco ou apresentação de vista novos.**A menos que a caixa **Check/Uncheck all Blocks**ou **Check/Uncheck all Views** do perfil esteja assinalada, os perfis de utilizador não adicionam sozinhos blocos e apresentações novos. Um administrador assinala-a em **Blocks** ou **Views** no mesmo perfil. - **Falta o separador Drupal Blocks.** O construtor só lista blocos quando o módulo **Block Content**do Drupal está ligado. Ative-o em **Extend**(`/admin/modules`). - **Saved templates está vazio.** Ainda nada foi guardado. Escolha **Save as template** no menu **More** de um elemento; veja [User templates](/pt-pt/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). ## E a seguir? - [Arraste elementos para o lugar](/pt-pt/hc/documentation/learn-dxpr-builder/editing/drag-and-drop): mova o elemento novo para onde pertence. - [Edite texto na página](/pt-pt/hc/documentacao/aprender-dxpr-builder/edicao/edicao-de-texto-em-linha): escreva e formate texto sem diálogo. - [Elements](/hc/documentation/learn-dxpr-builder/elements): o que cada elemento faz e como se configura.