Skip to main content

Documentation

Complete user guide and reference for PageBuilder Compact — install, configure, and master every workflow upgrade inside YOOtheme Pro.

Jump to Install
Settings Reference

Joomla 4/5 • WordPress 5.8+ • YOOtheme Pro 4.0+

Troubleshooting first

Need help?

Start at Troubleshooting, then enable Debug Mode to capture logs.

Start here

New install

Installation

Install on Joomla or WordPress and verify it’s active inside the builder.

Open
First setup

Getting Started

Find the settings panel and apply the best “first tweaks”.

Open
Core workflows

Search + Accordions

The two features that make large layouts dramatically easier.

Open
Admin speed

Quick Access Buttons

Edit builder modules/widgets in one click without losing flow.

Open
Deep control

Settings Reference

All toggles, colours, spacing, typography, effects, and CSS.

Open
Fix issues

Troubleshooting

Common problems, checks, and what to log with debug mode.

Open

Where are the settings?

Open YOOtheme Pro Builder → Choose Settings → choose 00 – PageBuilder Compact. The 00 – prefix keeps it pinned near the top.

Installation

Install the plugin for your platform, then verify it appears inside the builder.

System Plugin

Joomla

  1. Download the Joomla plugin ZIP
  2. Administrator → System → Install → Extensions
  3. Upload the ZIP and install
  4. Open YOOtheme Pro Builder (active immediately)

Verify: look for collapsible section headers and open Settings → 00 – PageBuilder Compact.

WP Plugin

WordPress

  1. Upload the plugin via WP Admin → Add Plugin → Upload Plugin
  2. Activate on Install or by WP Admin → Plugins → Activate
  3. Open YOOtheme Pro Builder (active immediately)

Important: YOOtheme Pro must be the active theme.

Getting Started

The plugin works out of the box. Most users only change a handful of settings first.

Open settings: Builder → gear icon → 00 – PageBuilder Compact.

Recommended first tweaks

  • Search Panel Default State: Expanded (if you search constantly)
  • Sections Default State: Collapsed (if you build large pages)
  • Element Count Badges: Show (to gauge complexity quickly)
  • Action Icons Position: Try Left vs Right
Workflow

Collapse everything, then open one section

Use Collapse All, expand only what you’re editing, then search within that focused scope.

Speed

Search before you scroll

Search finds content inside nested items (grids, accordions, etc.) — it’s often faster than manual scanning.

Consistency

Keep settings in the builder

No external dashboards — everything lives in the builder settings so your mental model stays consistent.

Sharing

Export your setup for other sites

Once you’ve tuned styles/behaviour, export and reuse across multiple projects.

Section Accordions

Turn long sidebars into clean, manageable stacks. Collapse what you’re not working on, keep focus, and move faster.

Collapsing & expanding sections

Each section header gains a toggle (chevron). Collapsed sections show only the header; expanded sections show all nested content.

Collapse All / Expand All

Use global controls at the top of the sidebar to collapse everything or restore all sections instantly.

Element count badges

Optional badges show how many elements are inside each section (useful for auditing and complexity checks).

State persistence

Collapsed/expanded states can persist per page during your editing session, so you don’t keep re-organising the same layout.

Search & Filter

Search goes beyond labels — it can find text inside nested items, titles, file paths, and more. Combine search with section and element-type filters to pinpoint exactly what you need.

What it can search

  • Section names
  • Element names
  • Deep element content (including nested items)
  • Image paths, background media references
Text Search

Type a keyword to highlight matches instantly. Optionally hide non-matching sections to reduce noise.

Section Filter

Focus the sidebar to a single section (Header, Main, Footer, etc.) so you only see what you’re editing.

Element Type Filter

Filter to specific element types (Text, Image, Grid, Accordion, etc.) to audit layouts quickly.

Match highlighting

Matches can be highlighted differently based on whether the name matches or content inside the section matches.

Module & Widget Quick Access

Joomla: Edit Builder Module

  1. Select a module element in the builder
  2. Click Edit Builder Module
  3. The module’s builder layout opens directly

This avoids admin detours and keeps your editing flow.

WordPress: Edit Builder Widget

  1. Select a widget element in the builder
  2. Choose a builder widget in the widget dropdown
  3. Click Edit Builder Widget

The button appears only when a builder widget is selected.

Visible on This Page

YOOtheme’s “Visible on this page” filter can miss builder-driven modules/widgets. PageBuilder Compact improves detection so your audits are accurate.

Visibility Filter Mode

  • All Sections (default): includes page + layout-level areas (header/footer/etc.)
  • Page Only: only the page builder content

Settings Reference

All settings live inside YOOtheme Pro Builder: Settings → 00 – PageBuilder Compact.

General settings
  • Enable Search & Filter
  • Enable Section Accordions
  • Enable Module/Widget Buttons
  • Enable Element Settings Search
  • Search Panel Default State
  • Sections Default State
  • Show Element Count Badges
  • Action Icons Position
  • Auto-scroll on Preview Hover
  • Visibility Filter Mode
  • Debug Logging + Level
Colours

Controls panel, inputs, buttons, toggles, and highlight colours can all be customised to match your builder UI preferences.

Typography

Adjust header, input, button and badge sizing/weights to suit your editing environment.

Spacing & sizing

Tweak padding, border radius, gaps, and toggle sizes to match your workflow and screen size.

Effects & transitions

Control shadows, transitions, hover brightness, and focus styling for a smoother builder experience.

Custom CSS

Add your own CSS that loads after plugin styles.

.yo-customizer scopes rules to the builder UI. Use the .bm-* classes from the CSS reference section below.

.yo-customizer .bm-controls-body { background: #2a2a2a; color: #fff; }

Export & Import

Export settings

  1. Settings → 00 – PageBuilder Compact
  2. Scroll to the bottom
  3. Click Export Settings

A JSON file is downloaded with your configuration.

Import settings

  1. Settings → 00 – PageBuilder Compact
  2. Click Import Settings
  3. Select your exported JSON
  4. Click Save in the save bar

Unknown keys are safely ignored.

Reset

Reset individual fields using the small reset control, or use Reset All Settings to restore defaults. Remember to Save.

Debug Mode

Enable debug logging to capture detailed console output when troubleshooting. Disable it once you’re done.

Steps:

  1. Enable Debug Logging
  2. Set log level (Debug is usually enough)
  3. Reproduce the issue
  4. Open browser Developer Tools → Console

Console helpers

If your build exposes a debug helper object, common commands include:

BuilderModuleDebug.status()
BuilderModuleDebug.history()
BuilderModuleDebug.stats()
BuilderModuleDebug.diagnose()
BuilderModuleDebug.clear()

Names can vary by version. If the object isn’t available, rely on console logs.

Troubleshooting

Plugin not appearing in YOOtheme Builder

Joomla: Check it’s enabled in System → Manage → Plugins.

WordPress: Check it’s activated in Plugins and that YOOtheme Pro is the active theme.

Sections don’t collapse

Confirm Enable Section Accordions is enabled. Close and reopen the builder. Enable Debug Mode and check the console for errors.

Search isn’t finding content

Ensure the builder preview iframe has fully loaded. Deep search relies on the builder node tree; unusual custom elements may store data in ways that can’t be indexed.

Edit Builder Module/Widget button not showing

Ensure the feature is enabled. The button only appears on builder-backed modules/widgets. On WordPress, select a builder widget in the dropdown first.

Settings aren’t saving

After changes, the YOOtheme save bar should appear. Click Save. If it doesn’t appear, toggle any setting to trigger the change state.

Visible on this page isn’t showing modules

Save the page and wait for preview refresh. Check Visibility Filter Mode — “Page Only” can exclude header/footer modules. Use debug logs for diagnosis.

CSS Class Reference

Use these class names in Custom CSS to target plugin UI parts inside the builder.

Controls Panel

.bm-accordion-controls
.bm-controls-header
.bm-controls-body

Section Elements

.bm-section-toggle
.bm-section-content
.bm-element-count-inline
.bm-section-actions

Search Highlights

.bm-search-match-name
.bm-search-match-content
.bm-highlight-element

Element Settings Search

.bm-element-search-panel
.bm-element-search-input
.bm-element-search-category
.bm-search-results-count

Requirements

Joomla

Joomla 4.x or 5.x
YOOtheme Pro 4.0+
PHP 7.4+ (J4) / 8.1+ (J5)
Modern browser

WordPress

WordPress 5.8+
YOOtheme Pro 4.0+
PHP 7.4+
Modern browser

Frequently Asked Questions

Does this modify YOOtheme Pro core files?

No. It integrates into the builder environment and does not modify YOOtheme’s files.

Does it affect frontend performance?

No. It runs inside the builder/customiser environment and does not load on the public frontend.

Can I disable specific features?

Yes. The major features (Search & Filter, Accordions, Quick Access, Settings Search) can be toggled individually.

How do I report a bug?

Enable Debug Mode, reproduce the issue, then copy relevant console output and include it with your report.