Elements Overview
Elements are the building blocks of your popups. XBuilder provides 12 core element types organized into three categories.
Element Categories
Content Elements
Elements for displaying content and capturing user interaction:
| Element | Description | Common Uses |
|---|---|---|
| Text | Rich text content | Paragraphs, descriptions, lists |
| Heading | Headline text (H1-H6) | Titles, section headers |
| Button | Clickable buttons | CTAs, form submissions, links |
| Image | Images and graphics | Product images, icons, banners |
| Video | YouTube/Vimeo embeds | Tutorials, promotions |
| Icon | Font Awesome icons | Visual accents, features |
Layout Elements
Elements for structuring and organizing content:
| Element | Description | Common Uses |
|---|---|---|
| Section | Row container | Grouping content horizontally |
| Column | Column within section | Multi-column layouts |
| Divider | Horizontal line | Visual separation |
| Spacer | Empty space | Vertical spacing |
Embed Elements
Elements for embedding external content:
| Element | Description | Common Uses |
|---|---|---|
| Maps | Google Maps embed | Location, contact info |
| Iframe | External content | Forms, widgets, embeds |
Adding Elements
Method 1: Drag and Drop
- Open the Widgets tab in the control panel
- Find the element you want
- Drag it onto the canvas
- Drop it in the desired location
Method 2: Click to Add
- Open the Widgets tab
- Click on an element
- It will be added to the end of the popup content
Method 3: Quick Add
For sections with columns:
- Click the + Add Row button on the canvas
- Select a column layout (1, 2, 3, or 4 columns)
- A new section is created with empty columns
Element Hierarchy
Elements follow a nested hierarchy:
Popup
└── Section
└── Column
├── Heading
├── Text
├── Button
└── (other elements)
Rules
- Sections can only contain Columns
- Columns can contain any content element
- Content elements cannot contain other elements (except nested structures)
- You can have multiple Sections in a popup
Common Element Settings
All elements share these configuration options:
Content Tab
- Element-specific content settings
- Text, images, links, etc.
Style Tab
| Setting | Description |
|---|---|
| Typography | Font family, size, weight, color |
| Spacing | Margin and padding |
| Background | Color, gradient, or image |
| Border | Width, color, style, radius |
| Effects | Shadow, opacity, blend mode |
Advanced Tab
| Setting | Description |
|---|---|
| HTML ID | Custom ID for CSS/JS targeting |
| CSS Classes | Additional CSS classes |
| Device Visibility | Show/hide on desktop, tablet, mobile |
Responsive Behavior
Every element supports device-specific settings:
- Desktop — Default settings
- Tablet — Override for tablet screens
- Mobile — Override for mobile screens
Look for the device toggle in settings to configure responsive behavior.
Element Selection
Selecting Elements
- Click on an element to select it
- Right-click for context menu
- Use Structure panel for nested elements
Selection Indicators
- Blue border around selected element
- Breadcrumb trail in control panel
- Element type displayed in panel header
Selecting Parent Elements
For nested elements:
- Click Select Parent in context menu
- Use keyboard shortcut
- Click parent in Structure panel
Next Steps
Learn about each element type in detail: