MTBuilder — Visual Drag-and-Drop Page & Landing Page Builder

Last updated on Jun 7, 2026 2:12 PM

Visual Page Building Overview

MTBuilder is a premier drag-and-drop page and landing page builder plugin bundled with PolyCMS. It completely eliminates the need for separate WordPress installations, allowing you to design beautiful, modern, high-converting landing pages, marketing funnels, and portfolios directly inside your Perfex CRM environment.

To access the visual editor, navigate to Blog > Pages, create or edit a page, and click the blue "Edit with MTBuilder" button beneath the classic content editor.

---

Workspace Layout

The MTBuilder visual editor workspace is divided into three functional areas:

Topbar: Provides navigation back to the admin dashboard, displays the current page title (synchronized in real time), lets you toggle between viewports (Desktop, Tablet, and Mobile) for responsive previewing, and houses the green Save button.
Sidebar: Located on the left, containing three tabs:
Blocks / Layouts: A complete directory of dragging elements (Text, Image, Button, Row, Column) and reusable Template Parts sorted by theme categories.
Layers: A hierarchical DOM tree showing exactly how blocks are nested, allowing you to select and manage deep elements easily.
Settings: Appears automatically when clicking any canvas element to adjust padding, margins, alignment, text color, background color, and border-radius.
Canvas: The central interactive workspace offering a 100% accurate, live WYSIWYG (What You See Is What You Get) representation of your page frontend.

---

Canvas Architecture: Sections, Rows, and Columns

Designing with MTBuilder follows a strict structural grid layout to ensure perfect rendering and responsive adaptability:

Section: The master parent container. Every landing page segment (e.g., Hero, Features, CTA) lives inside its own Section. You can configure individual backgrounds (color, image) and vertical paddings per Section.
Row: Nestled inside a Section, acting as a container for column layouts.
Column: Sits within a Row, splitting the horizontal space (e.g., 2-column layout for text + visual, 3-column layout for pricing grids).
Content Blocks: Element primitives like Heading, Text, Image, and Button are dragged directly into a Column.

---

Detailed Toolbar Block Reference

MTBuilder includes a comprehensive set of 17 pre-registered toolbar blocks, categorized by functional layout structures and content elements. Each block can be dragged directly onto your canvas and customized inside the Settings panel:

Layout Grid Elements

Root Canvas (root): The master container holding all stacked layout segments. Bypasses active highlights and administrative frames to ensure a seamless canvas experience.
Section (section): Represents a vertical segment of the webpage. Supports background images, background colors, custom paddings, and alignment rules.
Row (row): Container element sitting within sections to house columns.
Column (column): Flexible cells within rows. Tweak widths (e.g., 50%, 33.3%, 100%) to establish responsive grids for side-by-side elements.

Basic Content Elements

Title (title): Dynamic heading block (supports <h1> to <h6> tags). Style text size, color, font-weight, letter-spacing, and text-transform natively.
Text (text): Rich text paragraphs. Tweak line-height, text alignment, and typography spacing for content sections.
Image (image): Upload or select images from the Media Library. Supports border-radius, max-width, shadows, and inline alignment.
Button (button): High-converting action items. Adjust link URLs, font-size, border-radius, background, and hover colors with dynamic style isolation mapping.
Icon (icon): Vector vector glyphs utilizing FontAwesome classes. Configure icon color, sizes (e.g., 1x, 2x, 3x), and alignment.

Interactive Components

Accordion (accordion): Container for collapsible accordion listings. Excellent for visual FAQ segments.
Accordion Item (accordion_item): A single toggle item within accordions. Manage open/close default states, heading titles, and text contents.
Tabs (tabs): Dynamic tab panel toggles. Let users switch content cards inline on pricing tiers or technical details without page reloads.
Video (video): Responsive video embed framework. Link directly to YouTube, Vimeo, or HTML5 raw video files with auto-play and display settings.

Advanced Design Blocks

Divider (divider): Horizontal lines to separate content logically. Tweak border-style (solid, dashed, dotted), color, width, and margins.
Style Group (style_group): A premium styling box wrapper. Group multiple elements (like a feature card containing an icon, title, and paragraph) and customize the group's border, padding, and box-shadow.
HTML Editor (html_editor): Paste custom raw HTML, SVG vectors, or web-to-lead script code blocks directly into your visual canvas.
Blog Posts (blog_posts): A dynamic post-querying grid widget. Fetch and render your latest blog posts dynamically inside beautiful card patterns with pagination.

---

Template Parts

Template Parts are reusable visual sections and component layout structures that enable you to build a cohesive design system across your site. Instead of designing repetitive structures (such as FAQ grids, CTA banners, or pricing cards) from scratch for every landing page, you can load and reuse them with a single drag-and-drop:

Section Presets (Template Parts): Ready-to-use structural segments designed for specific layout themes. These include high-impact Hero layouts, 3-column feature grids, customer testimonial sliders, and content blocks.
Custom Visual Saving: Designers can save any configured Section or Row on their active canvas as a custom reusable part. The system preserves all nested padding, margins, custom background colors/images, and styled buttons.
Cohesive Branding: Reusable parts ensure consistent margins, border-radius layouts, and typography sizing across all marketing funnels, dramatically speeding up landing page development workflows.

---

6 Premium Pre-seeded Templates

MTBuilder ships with 6 premium pre-designed full-page templates that you can apply with a single click in the Layouts sidebar tab:

SaaS Premium Landing Page: Slate-900 background, bold hero CTA, indigo tags, 3-column key features matrix, and high-contrast Indigo conversion banner.
E-commerce Modern Storefront: Splendid 2-column hero split with pricing labels, dark CTAs, retail photography placeholders, trust badges, and dark slate conversion blocks.
Blog Elegant Layout: editorial-centric hero segment, 2-column main grid hosting post listings and custom author bio sidebars.
Food & Restaurant Menu: Warm cream backgrounds, subtle separating lines, and 2-column pricing menus.
Travel Destination Grid: Light turquoise banners, clean 3-column hotel/airline services lists, and responsive CTA forms.
Corporate Corporate Workspace: Clean white backgrounds, slate gray consultation modules, and deep navy proposal request panels.

---

Visual Page Settings Integration

The editor features a dedicated Page Settings panel in the visual workspace Sidebar, uniting classic page configurations directly inside the drag-and-drop mode:

Title Syncing: Change your page title inside the settings input, and see the topbar page name update instantly in real time.
Page Layout Template: Select external page template files (e.g., Full Width, Contact, Default) dynamically via dropdown.
Featured Image Selector: Integrated directly with the native PolyCMS Media Library. Search, select, upload, preview, or remove featured images on the fly.
Google SEO Metadata: Complete input control over Meta Title, Meta Keywords, and Meta Description with a real-time Google search snippet display.

---

Data Integrity and Shielding Model

MTBuilder includes an automatic backend database shield. When a Page or Post is flagged as an active MTBuilder page (holds active layout metadata), saving that page inside the classic CRM dashboard will automatically ignore and unset the content and description update fields.

This guarantees that editing page settings (like status, parent page, or title) inside classic admin viewports will never overwrite, corrupt, or strip the custom HTML5 layout structure, styles, and buttons designed inside MTBuilder.

---

Combining MTBuilder with Theme/Plugin Scaffolds

For production projects, the strongest workflow is:

Build a stable frontend shell with a custom theme scaffold (header, footer, archive, SEO structure).
Use MTBuilder to assemble landing sections from Template Parts and preset full-page templates.
Extend MTBuilder with plugin-registered custom blocks when business-specific elements are needed.

Recommended responsibility split:

Theme scaffold: global structure, typography system, navigation, reusable PHP partials.
MTBuilder templates/parts: campaign sections, sales pages, temporary funnels, marketing experiments.
Plugin scaffold: custom MTBuilder blocks, third-party integrations, block settings schemas, data-driven widgets.

See implementation guides:

---