Skip to main content

Frequently Asked Questions

Find answers to common questions about XBuilder.

General Questions​

What is XBuilder?​

XBuilder is a professional popup and modal builder for Joomla 4, 5, and 6 that lets you create stunning popups, slide-ins, floating bars, and more using a visual drag-and-drop editor. No coding required.

What can I build with XBuilder?​

  • Modal popups
  • Floating bars (top/bottom)
  • Slide-in notifications
  • Sidebars
  • Fullscreen overlays
  • Video popups
  • Cookie consent notices
  • Newsletter signup forms
  • Promotional offers
  • Exit intent offers

Do I need coding skills?​

No. XBuilder's visual editor lets you build and customize popups without writing code. For advanced customization, optional CSS support is available.

How many templates are included?​

XBuilder includes 250+ professionally designed templates across multiple categories:

  • 86+ popup templates
  • 34+ floating bar templates
  • 38+ slide-in templates
  • And more...

Which Joomla versions are supported?​

XBuilder is fully compatible with Joomla 4.x, 5.x, and 6.x. Joomla 3 is not supported.

Joomla Questions​

How do I install XBuilder?​

  1. Download the package file (XBuilderPopup_UNZIP.zip)
  2. Extract to get pkg_xbuilder.zip
  3. Go to System → Install → Extensions in Joomla admin
  4. Upload pkg_xbuilder.zip
  5. Click Upload & Install

See the full Installation Guide for details.

Do I need to install both the component and module?​

The package automatically installs both. The component (com_xbuilder) is for creating popups, and the module (mod_xbuilder_popup) is for displaying them on your frontend.

How do I display a popup on my site?​

  1. Create a popup in Components → XBuilder → Popups
  2. Go to Content → Site Modules
  3. Create a new XBuilder Popup module
  4. Select your popup from the dropdown
  5. Set menu assignment and publish the module

See Module Setup for detailed instructions.

Which module position should I use?​

The module position doesn't affect where the popup appears (popups always display as overlays). Use any available position like position-0 or debug (for testing).

Can I show different popups on different pages?​

Yes! Create multiple module instances, each with a different popup selected, and use menu assignment to control which pages show which popup.

What is the guided tour?​

The guided tour is an interactive tutorial that appears when you create a new popup. It explains how to use the builder interface and is highly recommended for first-time users.

How do I schedule a popup?​

In the popup edit screen, set "Publish Up" and "Publish Down" dates. The popup will automatically appear and disappear based on these dates.

How do I control who sees the popup?​

Set the "Access" level in both the popup and module settings. You can use Joomla's built-in access levels (Public, Registered, Special) or create custom access levels.

Can I use popups on multilingual sites?​

Yes! Set the "Language" field in the popup settings. Create different popups for different languages and configure module assignment accordingly.

Editor Questions​

How do I add elements?​

  1. Open the Widgets tab in the control panel
  2. Click or drag an element to add it
  3. Or use the + Add Row button on the canvas

How do I edit an element?​

Click on any element to select it. The control panel will show all available settings for that element.

How do I delete an element?​

Select the element and press Delete or Backspace, or right-click and choose "Delete".

Can I undo changes?​

Yes! Use Ctrl+Z (Windows) or Cmd+Z (Mac) to undo. Use Ctrl+Y or Cmd+Shift+Z to redo.

How do I preview on mobile?​

Click the device icons in the header to switch between Desktop, Tablet, and Mobile preview modes.

Styling Questions​

How do I change fonts?​

  1. Select a text element
  2. Go to the Style section
  3. Choose a font from the dropdown (includes 500+ Google Fonts)

How do I make elements responsive?​

Many settings have device-specific options. Look for the device toggle icons to set different values for desktop, tablet, and mobile.

How do I add custom CSS?​

  1. Select an element
  2. Go to Advanced settings
  3. Add CSS classes
  4. Use those classes in your site's CSS

How do I match my brand colors?​

Click any color input to open the color picker. Enter your exact hex color code (e.g., #4F46E5).

Trigger Questions​

What triggers are available?​

  • On Load — Show when page loads
  • On Scroll — Show after scrolling
  • On Click — Show when clicking an element
  • Exit Intent — Show when leaving
  • Timed Delay — Show after time passes
  • Floating Button — Always-visible trigger button

How do I set up exit intent?​

  1. Go to the Behavior tab
  2. Select "Exit Intent" as the trigger
  3. Configure sensitivity settings

Note: Exit intent works best on desktop. Consider alternatives for mobile.

Does exit intent work on mobile?​

Exit intent detection is limited on mobile devices due to how mobile browsers work. Use scroll or timed delay triggers for mobile users.

How do I make a popup show only once?​

Go to the Behavior tab and set the display frequency (cookie settings) to "Once ever" or your preferred duration.

Templates Questions​

How do I use a template?​

  1. Click Library in the header (or press L)
  2. Browse templates
  3. Click a template to preview
  4. Click Use Template to load it

Can I customize templates?​

Yes! Templates are fully editable. Change any text, images, colors, or settings after loading.

Will a template replace my current work?​

Yes, loading a template replaces your current popup. Save or export your work first if needed.

How do I save my own templates?​

Export your popup as JSON. Save the file and import it later to reuse your design.

Export & Import Questions​

How do I export my popup?​

Click Export in the header and choose your format (JSON recommended).

What's the JSON export for?​

JSON exports contain your complete popup configuration. Use them to:

  • Backup your work
  • Share templates with others
  • Move popups between projects
  • Version control your designs

How do I import a popup?​

  1. Click the import option in the header or Library
  2. Select your JSON file or paste JSON
  3. Click Import

Cookie & Display Questions​

How do I prevent popups from showing too often?​

In the Behavior tab, configure the display frequency:

  • Once per session
  • Once per day
  • Once per week
  • Once ever
  • Custom duration

What is Test Mode?​

Test Mode ignores cookie settings, so the popup shows every time. This is useful during development. Remember to disable it before going live.

How do I reset cookies for testing?​

  1. Open browser DevTools (F12)
  2. Go to Application → Cookies
  3. Delete cookies starting with xbuilder_popup_
  4. Refresh the page

Troubleshooting​

Check these common issues:

  1. Cookie already set — Clear cookies or use test mode
  2. Page rules — Check if popup is excluded from current page
  3. Trigger not met — Verify trigger conditions
  4. Test mode off — Enable test mode to bypass cookies
  1. Go to Behavior tab
  2. Increase display frequency duration
  3. Disable test mode if enabled

Elements not aligning properly​

  1. Check parent element settings (Section/Column)
  2. Verify alignment settings on the element
  3. Check for conflicting CSS

Fonts not loading​

  1. Verify the font name is correct
  2. Check internet connection
  3. Clear browser cache
  4. Try a different font

Animation not playing​

  1. Verify animation is selected
  2. Check animation duration isn't 0
  3. Clear browser cache
  4. Test in different browser

Changes not saving​

  1. Make sure you're using the Save function
  2. Check for error messages
  3. Verify browser isn't blocking localStorage

Mobile layout broken​

  1. Switch to mobile preview
  2. Check responsive settings
  3. Adjust element widths to percentages
  4. Simplify layout for mobile

Performance Questions​

Will popups slow down my site?​

XBuilder is designed for performance:

  • Lightweight runtime
  • Lazy loading where possible
  • Optimized animations

For best performance:

  • Optimize images
  • Use appropriate image sizes
  • Limit complex animations on mobile

How do I optimize popup images?​

  1. Use compressed images
  2. Use WebP format when possible
  3. Match image size to display size
  4. Consider lazy loading for below-fold images

Compatibility Questions​

What browsers are supported?​

XBuilder works in all modern browsers:

  • Chrome (recommended)
  • Firefox
  • Safari
  • Edge
  • Mobile browsers

Does it work with my Joomla site?​

XBuilder is built specifically for Joomla 4, 5, and 6. It integrates natively with Joomla's:

  • Media Manager for image management
  • Access control system
  • Multilingual features
  • Module system for displaying popups

See Joomla Integration for details.

Keyboard Shortcuts​

ActionWindowsMac
UndoCtrl+ZCmd+Z
RedoCtrl+YCmd+Shift+Z
DeleteDeleteBackspace
CopyCtrl+CCmd+C
PasteCtrl+VCmd+V
DuplicateCtrl+DCmd+D
Toggle popupPP
Open libraryLL
Command paletteCtrl+KCmd+K

Getting Help​

Where can I find more documentation?​

Browse the documentation sections in the sidebar:

How do I search the docs?​

Use Ctrl+K or Cmd+K to open the search, or use the search bar at the top of the page.

How do I report a bug?​

Contact support with:

  1. Steps to reproduce the issue
  2. Browser and version
  3. Screenshots if helpful
  4. Any error messages

Still have questions?​

If your question isn't answered here, check the specific documentation section for your topic, or reach out to support for help.