GT Page Blocks Visual Builder

Updated October 17, 2026

The GT Page Blocks visual builder lets you edit a complete page while seeing its sections together. The section list controls the order, the code panel holds your markup and styles, and Save writes the result back to WordPress.

The downloadable Folio workshop uses independent inline sections. It is the starting point for the exercises below, including the pricing interaction and responsive preview.

Accessing the Builder

There are two ways to open the visual builder.

From the admin bar. When viewing any singular post or page on the frontend (while logged in), the admin bar shows a “Page Blocks Builder” link. This link appears as a child of the “Edit” node if it exists, otherwise as a standalone item. Clicking it opens the builder for that post.

Direct URL. The builder is accessed via a special query string on the site’s home URL.

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

The post_id parameter identifies the post, and pb_nonce is a security nonce that’s validated before granting access.

Access Requirements

To use the builder, you must be logged in with the edit_post capability for the target post, the post type must be enabled in the plugin settings, and the nonce must be valid. If any check fails, the builder returns a 403 Forbidden error.

When the builder loads, the WordPress admin bar is hidden to give you a clean, full-screen editing environment.

Layout Overview

The workshop screenshot shows the controls around a complete page.

Folio page inside the visual builder with its six-section list. — Hiding the code panel gives the page more room while the section list stays available.

Sections, Code and Preview toggle the main panels.
Save writes your sections and pending page settings to WordPress.
Library offers saved sections with Link and Copy actions.
Page Settings contains title, slug, template, import and export.
? opens keyboard help; Close returns to the page editor.

The HTML, CSS and JS editors are labeled in the code panel. The splitter changes how much vertical space the preview and editors receive.

Section Management

Adding Sections

Click the “+” button in the sidebar header, or press Cmd+N / Ctrl+N. New sections are inserted after the currently selected section.

Selecting Sections

Click a section name in the sidebar to select it. The code editors update to show that section’s content, and the section is highlighted in the sidebar.

Duplicating Sections

Click the duplicate button (⧉) on a section, or press Cmd+D / Ctrl+D. The duplicate is inserted immediately after the original. If the original section’s HTML contains an id attribute, the duplicate appends “-copy” to avoid ID collisions.

Deleting Sections

Click the delete button (✕) on a section, or press Cmd+Backspace / Ctrl+Backspace. If you delete the last remaining section, an empty section is automatically created.

Reordering Sections

Drag a section by its grip handle to a new position in the sidebar. You can also use Alt+Arrow Up and Alt+Arrow Down to move the selected section.

Collapsing Sections

Click the collapse button (◉/◌) to toggle a section’s visibility in the preview. Collapsed sections are excluded from the preview iframe but are still saved and rendered on the frontend. This is useful for temporarily hiding a section while you work on others.

Live Preview

The preview updates automatically as you edit code, with a 110ms debounce to avoid excessive re-rendering. The preview is rebuilt by constructing a full HTML document that includes.

Your theme’s stylesheets (collected from the page’s linked stylesheets).
Theme inline styles (global styles, classic theme styles).
Preview injection content (if configured via the filter).
Your sections’ CSS in a <style> tag.
Your sections’ HTML content.
Theme scripts (from theme directories and jQuery if present).
Your sections’ JavaScript.

When any section has format or phpExec enabled, the builder requests a server-rendered preview via AJAX. The server processes the PHP and wpautop formatting and returns the rendered output, which is then injected into the preview document.

Template-Aware Preview

The builder detects which page template is assigned to the post and applies a CSS class to the shell element (is-template-default, is-template-builder, or is-template-premium-builder). This can affect how the preview canvas is styled.

Saving

Click Save or press Cmd/Ctrl+S. The builder sends the section payload to the authenticated md_page_blocks_builder_apply endpoint.

WordPress checks the target page, nonce, capability and enabled post type.
Page Block sections are serialized into the existing page content.
Non-Page-Block content is carried as foreign blocks rather than intentionally discarded.
Pending title, slug and template settings are applied when accepted.
A successful save clears the browser recovery draft.

The control reports Saving and then Saved. That confirmation concerns the server save; browser recovery and a downloaded export remain separate copies.

Closing the Builder

The “Close” button navigates to the Gutenberg editor for the current post. If the builder was opened in an embedded context (iframe), it sends a cancel message to the parent window instead.

Practice With Interactive Pricing

Import the Folio workshop on a practice page. Its pricing section connects buttons to values in the markup.

Open the pricing section and find the data-monthly and data-yearly attributes.
On the frontend, select Yearly. The sample monthly equivalents become $9, $22 and $45.
Select Explore Studio. The message confirms a local selection; no account or payment is created.

Folio pricing with Yearly selected and the Studio plan selection message. — The visible price change gives you a concrete JavaScript result to check.

Export and Import

Open Page Settings > Export to download the current sections as JSON. Import & add appends sections; Import & replace replaces the current section list after confirmation.

Import does not create a complete WordPress site, install a theme or apply the file’s title and slug automatically. Set page metadata yourself and click Save after the import.

Quick answers to common questions:

How do I open the visual builder?

From the page editor, the Edit with Page Blocks Builder link (or the admin bar entry on the frontend) opens the current page in the builder. It edits the same Page Block content; there’s no separate storage or sync step.

Can I preview how sections look on mobile?

Yes. The visual builder has Desktop, 992, 768, 480 and 360 width presets. The separate frontend mobile screenshots use a 390px layout. These are different checks, not conflicting names for the same preset.