Find and add an element
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
- Click Add Elements in the empty content area and, from the Layout tab, pick Section.
- Click + on the section: the picker opens again. What you pick now goes into this section, at the top.
Look through the five tabs
- Click Layout: Section, Row, Tabs, Collapse panel, Carousel and Positioned layers.
- Click Content: text, media and interactive elements, with a Search box.
- Click Drupal Blocks: the blocks of your site, with Filter by category and a search box.
- Click Drupal Views: every display of your enabled views, with Filter by tag and a search box.
- 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
- Back on the Content tab, pick Button: its settings dialog opens at once.
- Type the Title, set the Link, keep the Type on Primary and click Save.
- 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.
What's next?
- Drag elements into place: move the new element where it belongs.
- Edit text on the page: type and format text without a dialog.
- Elements: what every element does and how to set it up.
Something wrong or missing on this page?
Report it
or edit the page.