Skip to main content

Quick Start Guide

Create your first popup with XBuilder in under 5 minutes. This guide walks you through the basics of building, customizing, and configuring a popup.

Prerequisites

Before following this guide, make sure you've installed XBuilder on your Joomla site.

Step 1: Open the Editor​

  1. Log in to your Joomla administrator panel
  2. Navigate to Components → XBuilder → Popups
  3. Click the New button to create a new popup

You'll see the main editor interface with:

  • Left Sidebar — Control panel with widgets and settings
  • Center Canvas — Live preview of your popup
  • Top Header — Device preview, undo/redo, and actions

Guided Tour​

When you first open the builder, a Guided Tour will automatically appear. This interactive tutorial explains:

  • How to navigate the interface
  • How to add and edit elements
  • How to customize styles
  • Keyboard shortcuts and tips

We highly recommend completing the guided tour before building your first popup.

Step 2: Choose a Template (Optional)​

The fastest way to get started is with a template:

  1. Click the Library button in the header (or press L)
  2. Browse categories: Popup, Slide-in, Floating Bar, etc.
  3. Click a template to preview it
  4. Click Use Template to load it into the editor
Start from scratch

You can also build from scratch by adding elements directly to the canvas.

Step 3: Add Elements​

If starting fresh or customizing a template:

  1. Go to the Widgets tab in the left sidebar
  2. Drag an element onto the canvas, or click to add it
  3. Available elements:
    • Content: Text, Heading, Button, Image, Video, Icon
    • Layout: Section, Column, Divider, Spacer
    • Embed: Maps, Iframe

Adding Your First Section​

Most popups start with a Section containing Columns:

  1. Click Section in the widget palette
  2. Choose a column layout (1, 2, 3, or 4 columns)
  3. Drag elements into the columns

Step 4: Edit Element Content​

Click any element to select it. The left sidebar shows its settings:

Content Tab​

  • Text content, links, images
  • Element-specific settings

Style Tab​

  • Typography (fonts, sizes, colors)
  • Spacing (margin, padding)
  • Background and borders

Advanced Tab​

  • Custom CSS classes
  • HTML ID
  • Device visibility

Step 5: Configure Popup Settings​

Switch to the Layout and Design tabs in the sidebar:

Layout Settings​

  • Position: Center, top, bottom, corners
  • Size: Width and height
  • Overlay: Background dimming

Design Settings​

  • Background: Color, gradient, or image
  • Border: Radius and color
  • Shadow: Box shadow effects
  • Animation: Entry/exit animations

Step 6: Set Up Triggers​

Go to the Behavior tab to configure when your popup appears:

TriggerDescription
On LoadShows immediately when page loads
On ScrollShows after scrolling X% of page
On ClickShows when clicking a CSS selector
Exit IntentShows when mouse leaves viewport
Timed DelayShows after X seconds
Floating ButtonShows via floating trigger button

Example: Exit Intent Popup​

  1. Select Exit Intent as the trigger
  2. Configure desktop/mobile behavior
  3. Set cookie duration to avoid repeat shows

Step 7: Preview and Test​

Use the device preview buttons in the header:

  • Desktop — Full-width preview
  • Tablet — iPad-sized preview
  • Mobile — Phone-sized preview

Toggle the popup open/closed with the button on canvas or P key.

Step 8: Save and Display Your Popup​

When you're ready to show your popup on your site:

Save the Popup​

  1. Click Save in the header toolbar
  2. Enter a title for your popup (required)
  3. The popup is saved to your Joomla database

Set Up the Module​

To display the popup on your frontend:

  1. Go to Content → Site Modules
  2. Click New and select XBuilder Popup
  3. Select your popup from the dropdown
  4. Set Menu Assignment to choose which pages show the popup
  5. Set Status to Published
  6. Click Save

See Module Setup for detailed configuration options.

Export (Optional)​

To backup or share your popup:

  1. Click Export in the header
  2. Choose your format:
    • JSON — Full configuration for import/backup

Keyboard Shortcuts​

Speed up your workflow with these shortcuts:

ActionShortcut
UndoCtrl+Z / Cmd+Z
RedoCtrl+Y / Cmd+Shift+Z
Delete elementDelete / Backspace
DuplicateCtrl+D / Cmd+D
CopyCtrl+C / Cmd+C
PasteCtrl+V / Cmd+V
Toggle popupP
Open libraryL
Command paletteCtrl+K / Cmd+K

Next Steps​