FOUNDATION THEME — BUILDER
WordPress Theme Builder — Visual Page Construction and Design Studio
Build custom page layouts, design systems, and branded experiences without writing code. The visual construction layer for LuperIQ themes.
The Problem With Page Builders
Page builders like Elementor and Divi promise visual design freedom but deliver something else: 500KB+ of CSS loaded on every page, JavaScript that conflicts with your business plugins, proprietary shortcode lock-in that makes it nearly impossible to switch, and a completely different editing experience from the rest of WordPress. They are full CMS replacements disguised as themes. You do not need a new CMS — you need a visual building layer that works with what you already have.
The LuperIQ Theme Builder gives you drag-and-drop page construction without replacing your stack. You build pages visually using a structured block system — rows, columns, and 20+ block types — that outputs clean, lightweight HTML. The design token system keeps colors, typography, and spacing consistent across every page you build. There is no external runtime, no proprietary CSS framework, and no conflicts with LuperIQ modules. Build the pages you want without paying for the overhead of a full page builder platform.
Everything You Need to Build Visually Without the Bloat
Visual Page Builder
Drag-and-Drop Layouts Without a Page Builder Platform
Build complete page layouts using a row-column-block hierarchy. Drag blocks into position, resize columns, and reorder sections without writing HTML. The output is clean markup — no wrapper div soup, no inline style overrides, no builder-specific classes.
Drag-and-Drop Blocks
20+ Content Types Ready to Use
Every type of content you need to build a business page: hero sections, headings, paragraphs, feature cards, image blocks, stat grids, pricing tables, FAQ accordions, testimonial quotes, CTA bars, button groups, HTML blocks, and more. Each block has its own settings panel with alignment, tone, and content controls.
Design Token System
One Source of Truth for Every Visual Decision
Define your brand colors, type scale, spacing units, and component styles once as CSS custom properties. Every block, every layout, every section references these tokens automatically. Change your primary color in one place and it updates across every page you have ever built.
Responsive Preview
See Exactly What Visitors See Before Publishing
The builder includes a responsive preview mode that shows your layout at desktop, tablet, and mobile breakpoints in real time as you build. No publish-and-check cycle required to verify that your design holds together on small screens.
Template Library
Start From a Proven Layout, Not a Blank Canvas
A library of pre-built section patterns and full page templates covers the most common business page types: homepage, services, about, contact, landing page, and more. Start from a template, replace the content, and publish in minutes instead of building from scratch.
Section Patterns
Reusable Building Blocks for Your Site
Save any section you build — a hero variant, a testimonial block, a features row — as a named pattern. Load that pattern on any other page with a single click. Design consistency across your site becomes automatic instead of effortful.
Custom CSS Injection
Escape Hatches When You Need Them
Every block, section, and page has an optional CSS field for targeting specific elements without touching your theme files or writing global overrides. Advanced users can push the builder further without giving up the visual workflow for routine builds.
Header and Footer Builder
Visual Control Over Site-Wide Layout
Build and configure your site's header and footer with the same visual interface you use for pages. Control navigation layout, logo placement, CTA buttons, sticky behavior, mobile menu style, and spacing — all without code.
Color System Management
Brand Consistency Across Every Component
The color system panel lets you define and name your full palette — primary, secondary, accent, neutral, surface, error, warning — and apply them as semantic tokens throughout the design system. Palette changes propagate everywhere instantly.
Typography Controls
Set Your Type Scale Once, Use It Everywhere
Configure font families, weight scales, line heights, and letter spacing for every text role — display, heading, body, caption, label, code. The type system outputs as CSS variables that all builder blocks reference, keeping your typography consistent without per-block font overrides.
Who This Theme Is Built For
Agencies Needing Visual Building Tools
Build client pages visually without installing a page builder that adds 500KB to every load, conflicts with business modules, or creates lock-in you cannot hand off cleanly. The theme builder's output is standard HTML — maintainable by anyone.
Businesses Customizing Their Site
Make layout changes, build landing pages, and update service pages without involving a developer for every edit. The visual interface is approachable enough for non-technical users and powerful enough for complex layouts.
Designers Creating Branded Layouts
Work in a visual environment that respects your design system. Design tokens keep your palette and typography consistent. Section patterns let you define your brand's layout vocabulary once and enforce it across every page.
Anyone Who Wants Visual Control Without Page Builder Bloat
If you have ever installed Elementor for one landing page and then been stuck with its overhead site-wide, this is the alternative. Visual building, clean output, no platform dependency.
Complete Your Builder Stack
Theme Studio
Full design system, scheduled themes, and automatic rollback protection
The module layer on top of the builder theme — adds revision history, scheduled theme switching, safety net auto-rollback, popup builder, and advanced layout rules. /modules/theme-studio/
Site Editor
Centralized content editing for every page and post on your site
Edit page content, module-generated pages, and post content from a unified interface without navigating to individual edit screens. /modules/site-editor/
Data Core
The shared data foundation for all LuperIQ modules
Powers cross-module queries, global settings, and the data facade that makes every module work together correctly. Required for the full LuperIQ stack. /modules/data-core/
Frequently Asked Questions
How does this compare to Elementor in terms of performance?
The Theme Builder outputs clean, semantic HTML with no builder-specific CSS framework loaded site-wide. Elementor loads its full CSS bundle on every page regardless of what blocks are used. In a typical comparison, the Theme Builder adds under 30KB per page versus Elementor's 400–600KB. The difference is meaningful for Core Web Vitals scores and actual visitor experience.
What block types are available?
The builder includes 20+ block types: hero sections, headings, paragraphs, feature card grids, image blocks with captions, stat grids, pricing tables, FAQ accordions, testimonial quotes, button groups, CTA bars, dividers, spacers, HTML blocks, ordered and unordered lists, tabs, icon rows, video embeds, and form embed blocks. New block types are added with module updates.
Can I export my page designs to another site?
Yes. Page layouts are stored as structured JSON in post meta. You can export individual pages or full layout bundles from the Data Tools panel and import them into another LuperIQ installation. This works for staging-to-production transfers and multi-site replication.
Will this conflict with my existing WordPress plugins?
The Theme Builder does not load a global JavaScript or CSS framework that would conflict with other plugins. It uses scoped styles and vanilla JavaScript. LuperIQ modules are tested for compatibility. Third-party plugins that use standard WordPress hooks and enqueue their own assets cleanly will generally coexist without issues.
Is Theme Studio required to use the builder?
Theme Studio is separate from the Theme Builder. The builder is the visual page construction layer built into the theme. Theme Studio is a module that extends it with revision history, scheduled themes, popup builder, and the safety net rollback system. The builder works without Theme Studio, but Theme Studio adds significant capability if you want those features.
Can non-technical users edit pages after they are built?
Yes. The visual interface is designed to be accessible without developer knowledge. Content editors can click into any block, update text, swap images, and reorder sections using drag-and-drop. The design token system prevents them from accidentally breaking brand consistency — colors and fonts come from the token palette, not freeform inputs.
How do I get started with a new page layout?
Open the page in WordPress admin, activate the builder, and choose whether to start from a template in the library or a blank canvas. If you start from a template, replace placeholder content with your own text and images. If you start blank, add rows and blocks to build your layout section by section. Publish when done.
Ready to Design Without Limits?
The LuperIQ Theme Builder is free with any plan. Visual page construction, a clean design token system, and 20+ block types — without the page builder bloat.