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.

Step 1: Open the Editor​

Navigate to the XBuilder editor at xbuilder.joomlax.com/editor.

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

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: Export Your Popup​

When you're ready to use your popup:

  1. Click Export in the header
  2. Choose your export format:
    • JSON — Full configuration for import
    • HTML — Standalone HTML code

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​