Getting Started

This guide walks through creating your first section-based page using the visual builder.

Creating a Page

1. In the WordPress admin, go to Pages > Add New.
2. Give your page a title.
3. Publish or save the page as a draft.
4. View the page on the frontend.

Launching the Visual Builder

While viewing the page on the frontend (and logged in as an admin or editor), look at the WordPress admin bar at the top. You’ll see a Page Blocks Builder link. Click it.

The builder opens in a full-screen interface. The admin bar is hidden, and you’re presented with the builder layout.

The builder URL follows this pattern:

https://yoursite.com/?build=page-blocks&post_id=123&pb_nonce=abc123

The nonce ensures only authorized users can access the builder. You don’t need to construct this URL manually. The admin bar link generates it for you.

Understanding the Builder Layout

The visual builder has four main areas.

Top bar. Contains the brand label, panel toggle buttons (Sections and Code), the “Apply to Gutenberg” save button, and a “Close” button that takes you back to the Gutenberg editor.

Preview canvas. The large central area showing a live iframe preview of your page with your theme’s stylesheets loaded. Above the preview is a toolbar with viewport controls (Desktop, 992px, 768px, 480px, 360px) for testing responsive layouts.

Section sidebar. On the right side, a list of all your sections. Each section shows its inferred name (derived from the first heading or section ID in the HTML). You can click to select, drag to reorder, and use the action buttons to collapse, duplicate, or delete sections.

Code area. At the bottom, a split-pane code editor. The left column is always HTML. The right column shows either CSS or JS (toggle with the swap button). Above the code editors are options for wpautop formatting, PHP execution, and JavaScript location.

Status bar. At the very bottom, a small bar showing the live preview indicator and a count of visible/total sections.

Writing Your First Section

When you first open the builder, you’ll have one empty section. Click into the HTML editor on the left and write some markup.

<section class="hero">
    <div class="inner">
        <h1>Welcome to My Site</h1>
        <p>This is my first section built with Page Blocks.</p>
    </div>
</section>

As you type, the preview iframe updates in real time (with a 110ms debounce). You’ll see your HTML rendered with your theme’s styles applied.

Now switch to the CSS editor (on the right) and add some styles.

.hero {
    padding: 80px 20px;
    text-align: center;
    background: #f8f9fa;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

The preview updates instantly to show your styled section.

Adding More Sections

Click the + button in the section sidebar header to add a new section. It will be inserted after the currently selected section. You can also use the keyboard shortcut Cmd+N (or Ctrl+N on Windows/Linux).

Each section is independent. It has its own HTML, CSS, and JavaScript. On the frontend, each section renders as a separate Gutenberg block.

Reordering Sections

You can reorder sections in two ways.

Drag and drop. Grab a section by the grip handle (the ⋮⋮ icon) in the sidebar and drag it to a new position.

Keyboard. Use Alt+Arrow Up and Alt+Arrow Down to move the selected section up or down.

Saving Your Work

Click Apply to Gutenberg in the top bar (or press Cmd+S / Ctrl+S). The builder sends your sections to the server, where they’re saved as Gutenberg blocks in the post content. The button briefly shows “Saved” to confirm.

After saving, if you go back to the Gutenberg editor, you’ll see your sections as individual Page Block instances in the block list.

Choosing a Template

The first time you open the visual builder for a page, the plugin automatically sets the page template to “Page Blocks Builder.” This template keeps your theme’s header and footer but removes the page title and content width constraints, giving your sections full-width layout.

If you want complete control with no header or footer, switch to the “Full Page Builder” template in the Gutenberg editor’s Page Attributes panel.

What Happens on the Frontend

When someone visits your page, each Page Block renders its content directly.

• CSS is output as an inline <style> tag, minified.
• HTML is output as-is (with optional wpautop and PHP execution).
• JavaScript is either output inline or queued to the footer, depending on the JS Location setting.

There are no wrapper divs, no framework overhead, and no JavaScript dependencies. What you write is what gets rendered.