logo
X-BarWelcome to X-Bar

X-Bar for Kadence

Discover X-Bar, a smart command panel for Kadence that connects Kadence Blocks with AI and speeds up block editing and frontend CSS work without leaving the page you are working on.

What X-Bar helps you do

Use X-Bar to move faster through common editing tasks without switching between panels or hunting through settings. It brings the controls you need into one place so you can stay focused on the page.

X-Bar works in two main contexts:

  • Block editor — manage classes, rename blocks, pick HTML tags, and add block-level custom CSS.

  • Frontend — edit page-level CSS, measure elements with the ruler, and work directly against the live page.

X-Bar is designed to support the way you already work in Kadence. Use it as a fast layer on top of your normal editing flow, not as a replacement for the editor itself.

Feature areas

Here’s the full X-Bar feature set at a glance:

  • Efficiency Features — fast access to common block controls and frontend CSS editing.

  • Page Building Features — support for everyday frontend styling workflows while you build.

  • Grab Code for LLM — copy the selected block markup plus prompt-ready context for AI chat tools.

  • Block Header Styles — ready-made header and submenu styling patterns.

  • CSS Recipes — reusable block editor and frontend styling recipes.

  • Page Ruler — measure elements directly on the live page.

  • Keyboard shortcuts — open, close, and save faster with familiar key commands.

  • Data storage behavior — understand what X-Bar stores locally and what it saves through WordPress.

Use the cards below to jump into the detailed pages.

Efficiency Features

Learn how X-Bar speeds up block management, frontend CSS, shortcuts, the ruler, and storage behavior.

Grab Code for LLM

Copy selected block markup with structured context for ChatGPT, Claude, and similar tools.

CSS Recipes

Browse the full recipe library for block editor and frontend styling.

Block Header Styles

See the dedicated header styling recipe for X-Bar on the frontend.

Separator Line

Add a full-width horizontal rule below a row layout.

Inline Badge

Apply an after-pseudo-element badge to an Advanced Heading.

Container Badge

Add an absolute-positioned badge inside a column surface.

Gradient Border

Create a mask-composite gradient border for every column in a row.

Eyebrow Icon 01

Use a square eyebrow marker built with a pseudo-element.

Eyebrow Icon 02

Use the concentric-circle eyebrow style with a centered radial gradient.

Eyebrow Pill 01

Apply a filled eyebrow pill using a color-mix tint.

Eyebrow Pill 02

Apply a bordered eyebrow pill with a soft inner glow.

For the Page Ruler, keyboard shortcuts, and data storage details, see the Efficiency Features page.

Was this page helpful?

Last updated 4 days ago

Built with Documentation.AI