Welcome to NitroShock Page Builder

NitroShock Page Builder is a WordPress plugin that gives you a custom component-based editor for building pages. Instead of working with Gutenberg blocks, you create components—self-contained sections of HTML, CSS, and JavaScript that you can save, reuse, and share across any page on your site.

Each component is built and edited in Component Studio, a full-screen editor where you write code, preview results live, and use an AI chat assistant to help with design and functionality. Finished components are stored in your Component Library and can be inserted into any NitroShock-enabled page with one click.

What NitroShock Page Builder Is

NitroShock Page Builder replaces the WordPress block editor on any page you choose. When you activate it on a page, Gutenberg is disabled for that page and the NitroShock editor loads instead. The rest of your site—posts, other pages, the admin—is unaffected.

The plugin is built around three core ideas:

• Components — reusable sections of HTML, CSS, and JavaScript. A component might be a hero banner, a feature grid, a testimonial strip, or any custom layout section.
• Component Studio — the editor where you create and edit components. It has code editors for HTML, CSS, and JS, a live preview panel, and an AI chat sidebar.
• Component Library — a searchable catalog of all your saved components. You can also sync free components from the NitroShock central repository.

How It Fits Into a WordPress Page

To use the page builder on a page:

1. Open any WordPress page in the admin editor.
2. Find the NitroShock Page Builder meta box and enable it for that page.
3. Visit the page on the frontend while logged in — NitroShock's editor toolbar will appear.
4. Use the editor to add components from your library, rearrange them, and customize content.

The page HTML, custom CSS, and custom JavaScript are all stored in WordPress post meta, so the data stays in your own database.

What You Can Build

Any section buildable with HTML, CSS, and JavaScript can be a component. Common examples include:

• Hero sections and landing page headers
• Feature or services grids
• Testimonial carousels
• Pricing tables
• Contact sections and call-to-action banners
• Custom navigation and footer layouts
• Animated or interactive elements

The AI chat assistant can generate the starting code for any of these from a plain-English description, or iterate on code you already have.

Credits

The page builder itself is free to use. Credits are only charged when you use AI features—the AI chat in Component Studio, the AI component generator, and the AI content generation modes in the page editor. Non-AI features use no credits.

Credits are purchased through your NitroShock.ai account and synced to the plugin via your API key.

Common Questions

Does NitroShock Page Builder replace Gutenberg permanently?

No. It only replaces Gutenberg on pages where you have explicitly enabled it. All other pages continue using whichever editor you normally use.

Can I use components from the NitroShock central library for free?

Yes. The Sync feature in the Component Library pulls free components from the NitroShock central repository at no credit cost. Some components may have a credit cost to install.

Do I need to know how to code?

Basic HTML and CSS familiarity helps, but the AI chat assistant can generate and edit components from plain-English descriptions without you writing any code.

Next Steps

• Install and connect the plugin — see Installing & Connecting NitroShock Page Builder
• Enable the builder on a page — see Enabling the Page Builder on a Page
• Start building a component — see Component Studio Guide