--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/editing/element-picker' title: 'Find and add an element | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Open the element picker, find an element in its five tabs and add it' 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-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Find and add an element' description: 'Open the element picker, find an element in its five tabs and add it' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/editing/element-picker' articleSection: 'Edit a page' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/editing/element-picker' description: 'Open the element picker, find an element in its five tabs and add it' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Edit a page](/hc/documentation/learn-dxpr-builder/editing) # Find and add an element. Open the element picker, find an element in its five tabs and add it Learn DXPR BuilderBuild pagesEdit a page ## In this guide Related guides - [Drag and drop](/hc/documentation/learn-dxpr-builder/editing/drag-and-drop) - [Inline text editing](/hc/documentation/learn-dxpr-builder/editing/inline-text-editing) Every element you add comes from the element picker, a dialog with five tabs: layout, content, Drupal blocks, Drupal views and your saved templates. You learn here what each tab holds and how to find an element fast. The example visits each tab and adds a button from the **Content**tab. ## Open the picker 1. Click **Add Elements** in the empty content area and, from the **Layout** tab, pick **Section**. 2. Click **+** on the section: the picker opens again. What you pick now goes into this section, at the top. ## Look through the five tabs 1. Click **Layout**: Section, Row, Tabs, Collapse panel, Carousel and Positioned layers. 2. Click **Content**: text, media and interactive elements, with a **Search** box. 3. Click **Drupal Blocks**: the blocks of your site, with **Filter by category** and a search box. 4. Click **Drupal Views**: every display of your enabled views, with **Filter by tag** and a search box. 5. Click **Saved templates**: your private and global templates, with **Filter by user**, **Filter by type** and a search box. Every tab except **Layout** has a **Search** box: type part of a name to filter that tab. ## Add an element 1. Back on the **Content** tab, pick **Button**: its settings dialog opens at once. 2. Type the **Title**, set the **Link**, keep the **Type** on Primary and click **Save**. 3. Click **Save** on the toolbar. ## Content elements | Element | Purpose | |---|---| | Alert | Bootstrap alert message | | Block quote | Styled quotation | | Button | Styled button with link | | Card | Card with header, title and content | | Circle counter | Circular progress animation | | Countdown timer | Date and time countdown | | Number counter | Animated counting number | | HTML | Raw HTML code | | Icon | Icon from an icon library | | Image | Single image with link and alt text | | Image carousel | Rotating image gallery | | Jumbotron | Large banner with a title and a lead line | | Link | Styled link | | Map | Google Maps embed | | Marquee | Scrolling image strip | | Panel | Bordered panel with title | | Progress bar | Animated progress indicator | | Divider | Horizontal line | | Text | Rich text with inline editing | | Local video | Self-hosted video file | | Video | Embedded video (YouTube, Vimeo) | | Social links | Social media icon links | ## What you see Most elements open their settings dialog as soon as you pick them. Card, Divider and Panel land on the page straight away, and so do Section, Row, Tabs and Collapse panel. Carousel and Positioned layers open their settings first. The new element sits at the top of the section or column you clicked; drag it lower if it belongs further down. ## If you don't see the element - **An element is missing from a tab.** Your user profile hides it. An administrator ticks it under **Elements** in the profile at **DXPR Studio** > **DXPR Builder** > **User Profiles**(`/admin/dxpr_studio/dxpr_builder/profile`). The profile names some elements differently: **Separator** is Divider, **Counter** is Number counter, **Countdown** is Countdown timer and **Blockquote** is Block quote. - **A new block or view display is missing.**Unless the profile's **Check/Uncheck all Blocks**or **Check/Uncheck all Views** box is ticked, user profiles do not add new blocks and displays by themselves. An administrator ticks it under **Blocks** or **Views** in the same profile. - **The Drupal Blocks tab is missing.** The builder lists blocks only when Drupal's **Block Content**module is on. Enable it at **Extend**(`/admin/modules`). - **Saved templates is empty.** Nothing has been saved yet. Choose **Save as template** in an element's **More** menu; see [User templates](/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). ## What's next? - [Drag elements into place](/hc/documentation/learn-dxpr-builder/editing/drag-and-drop): move the new element where it belongs. - [Edit text on the page](/hc/documentation/learn-dxpr-builder/editing/inline-text-editing): type and format text without a dialog. - [Elements](/hc/documentation/learn-dxpr-builder/elements): what every element does and how to set it up.