SP Page Builder 7: What's New in the Biggest Update Yet
JoomShaper's SP Page Builder is one of the most used page builders for Joomla. Version 7 is more than an update: it's a new editor. It now works like a modern design tool, with the page in the middle, your tools on the left and every setting on the right, and it adds a design system, motion, popups with conditions, dynamic content, version history, new privacy settings and an MCP server that lets AI apps such as Claude and ChatGPT build pages for you. We tested 7.0.0 beta 1 on a Joomla 5 site, built a page from scratch and went through every screen. Here's what's new and what it means for your sites.
In this guide
- A new editor that works like a design tool
- Four ways to start a page
- Elements, styling and responsive editing
- A design system for the whole site
- Motion, built in
- Faster work: keyboard, SEO checks and versions
- Popups and dynamic content
- New settings: privacy, speed and AI
- AI apps can build your pages: the MCP server
- Keep your SP Page Builder site secure
- Before you update: checklist
Status: Beta
This article covers SP Page Builder 7.0.0 beta 1. Features and screens may still change before the stable release. Try it on a test site or a copy of your site first, never on a live client site.
A New Editor That Works Like a Design Tool
The editor has been rebuilt around three areas. The top bar switches between Design and Structure, picks one of five device sizes, zooms, and holds undo and redo, version history, preview and Publish. The left rail opens five panels: Insert, Layers, Pages, Media and Tokens. The right panel shows the settings of whatever you select. With nothing selected, it shows the page itself: its title, SEO checks and how it looks in search results.
Saves as you go
Your changes are saved while you work. Visitors see them only when you press Publish.
Layers panel
The whole page as a tree: section, columns and every element. Hide or lock any layer from here.
Structure mode
See how each section is built, with its rows, boxes and column widths, without the design in the way.
Four Ways to Start a Page
An empty page now offers four ways to begin, so you never face a blank canvas:
1. Use a layout bundle
About ninety ready-made sites in categories such as Business, Food & Drinks, Travel & Lifestyle and Health & Fitness. Import one page, or every page of a bundle at once.
2. Add ready-made sections
Heroes, features, numbers, pricing, testimonials, FAQs, team, gallery, contact and call-to-action sections, added one at a time.
3. Start from scratch
Pick a column layout, from a single column to nested grids, or type your own widths.
4. Import a layout file
Bring in a layout exported from another site.
Besides normal pages, you can now create article pages (index and detail), popups, dynamic content pages and system pages: login, registration, forgotten username or password, the 404 page and a coming-soon page.
Elements, Styling and Responsive Editing
The Insert panel groups elements into Layout (Box, Flex, Grid, Section, Container, Columns), Basic (Heading, Text, Button, Image, Video, Icon, maps, Module, Table), Forms (Form, Input, Textarea, Select, Radio, Checkbox, Step), Interactive (Slider, Slideshow, Accordion, Tabs) and Dynamic Content.
Select an element and the Style tab gives you precise control: the HTML tag (H1 to H6), font (system, Google or your own), weight, size, line height, letter spacing, spacing, colour, opacity, radius, border, shadows, position, transform and filters.
Smarter images
A focal point, a 2x version for sharp screens, alt text, ratio and fit, and a switch to mark an image as AI-generated.
Advanced visibility
Hide an element on any device, show it only to logged-in or logged-out visitors, or add custom CSS.
Right-click actions
Duplicate, hide, group, wrap in a box, move up or down, or save an element to your library.
Per-device editing
Switch to a phone or tablet and keep editing. Changes there apply to that device only, and headings already scale down.
A Design System for the Whole Site
This is one of the biggest additions. Open Tokens and click Generate: SP Page Builder reads your pages and template and suggests a design system for the whole site.
Colours with contrast
Background, text and accent colours, each shown with its contrast ratio so text stays readable.
Fonts and shape
Heading and body fonts, and the shape of corners and buttons, with a light and dark preview.
Variables everywhere
Colour variables, colour modes and text styles for headings, display, body and interface text. Change one and everything that uses it follows.
After you create it, SP Page Builder even offers to link the colours your existing pages already use to the new variables.
Motion, Built In
Every element has a Motion tab with four triggers: Scroll, Appears, Hover and Loop. Pick an effect such as Fade, Slide, Zoom in, Blur in or Reveal, set the speed and delay, choose whether it plays on tablets and phones, and press Play to preview it.
Faster Work: Keyboard, SEO Checks and Versions
Command palette
Press ⌘K (Ctrl+K on Windows) to search pages, elements, media and actions. ⌘/ lists every shortcut.
SEO checks
See what's missing as you build: a meta description of the right length, one main H1, alt text and a share image, with a Fix or Select button for each.
Version history
Each publish keeps the version before. Name a version, preview it and restore it as a draft.
Preview in the editor
Preview the page inside the editor at any device size, or open it in a new browser tab.
Popups and Dynamic Content
Popups now have their own editor. Start from a popup layout or from scratch, style the overlay and the close button, then use Conditions to decide where it shows (the entire site, specific pages or specific menu items), when it opens (on scroll, on landing, on click, on hover or after inactivity) and an optional schedule so it only runs between two dates.
Dynamic Content keeps repeating content, such as testimonials, team members or events, in collections with their own fields. Add items once, show them on any page, or build index and detail pages for them.
New Settings: Privacy, Speed and AI
The settings are reorganised into six sections: General, Performance, Privacy, AI, Integrations and License.
Privacy and consent
A cookie banner with opt-in (GDPR) or opt-out, a banner designer for desktop, tablet and phone, optional consent logging (anonymous ID and time, no IP address), asking before loading videos, maps and social embeds, and scripts that load only after consent.
Performance
Page caching, page CSS as files, lazy-loaded images, and Google Fonts served from your own site, so visitors don't contact Google.
AI with your own key
Switch on Generative AI with your own key and an AI Assistant appears in the editor. Connect an AI app lets apps such as Claude or ChatGPT edit your drafts through SP Page Builder's new MCP server, while you stay the one who publishes (more on this below).
General
Content width, locking pages while someone edits them, how many page versions to keep, comments and link previews.
Your existing pages keep working
The classic addons are still there. In the Insert panel, scroll to Legacy to find all of them, so pages built with earlier versions keep working. Addons in the menu lists every element and addon by group.
AI Apps Can Now Build Your Pages: the MCP Server
This is the biggest change you won't see in the editor at first. SP Page Builder 7 has its own MCP server. MCP (Model Context Protocol) is the open standard AI apps use to work with other software. In practice it means you can open Claude, ChatGPT, Claude Code or Codex, describe the page you want, and the AI builds it in your SP Page Builder, using real sections and elements, not a screenshot or pasted HTML.
The AI only writes drafts. You publish.
A connected app works on drafts. Nothing goes live until you open the page in the editor, check it and publish it yourself. You can also connect an app that may only read your pages, and disconnect any app at any time under Settings, AI.
How to connect an AI app
1. Open the AI settings
In SP Page Builder, open Settings, then AI, then Connect an AI app. Choose your app (Claude, ChatGPT, Claude Code, Codex or another app) to see its own steps, and copy the address for the app.
2. Add it to your AI app
In Claude, open Settings, Connectors, Add custom connector and paste the address. ChatGPT, Claude Code and Codex take the same address; the settings screen shows the exact steps or command for each.
3. Sign in to Joomla and allow
A Joomla window opens. Sign in and choose what the app may do: read pages and change their drafts, or only read pages. The app works with your account's rights, so an editor's app can't do more than that editor can.
What you can ask the AI to do
Build a whole page
Describe the page and the AI plans it section by section first (headline, purpose, layout, button text), then builds it from SP Page Builder's own elements and ready-made sections.
Edit existing pages
It can list your pages, read one, and change, add or remove single elements: rewrite a hero, add an FAQ section, swap a testimonial, fix a typo on ten pages.
Stay on brand
It reads your site's design system (colours, fonts, button styles) and a design brief you can set, so new sections match the rest of the site instead of looking pasted in.
Find and make images
It can look for suitable images and, with an image AI set up in Settings, generate new pictures for a section.
Check its own work
Before it hands a page back, it checks it on phone, tablet and desktop and fixes what the checks find.
An AI agent in the editor too
With your own Claude key, the same agent works inside the editor: ask for sections, review the plan first if you like, then Keep or Undo what it changed.
Things you can type into Claude or ChatGPT once it's connected:
- "Build a landing page for a dental clinic in Dhaka: hero with a booking button, three services, prices, reviews and a contact section."
- "On the About page, rewrite the hero headline to be shorter and add a team section with four people."
- "Check the Home page on phone and fix anything that overflows or is too small to tap."
- "List every page that still has 'Lorem ipsum' in it."
- "Make a pricing section that matches our colours, with three plans and the middle one highlighted."
Good to know
Connecting AI apps, the AI Assistant and AI pictures come with SP Page Builder Pro. A site administrator switches app connections on under Settings, AI, and each user needs the right to use the Joomla API and AI in the editor. The AI app's own subscription (Claude, ChatGPT) is separate.
Keep Your SP Page Builder Site Secure
A new editor doesn't change one fact: page-builder sites are a popular target. Older SP Page Builder versions had the uploadCustomIcon vulnerability, and attackers who get in often hide their code where nobody looks, such as the #__sppagebuilder_assets table. Before and after a big update like this, it's worth knowing your site is clean.
That's what we built MuRu Guard for: a security scanner and real-time protection plugin that runs inside your own Joomla admin.
SP Page Builder checks
Finds traces of the SP Page Builder uploadCustomIcon attack and rogue rows in #__sppagebuilder_assets, and removes just those rows.
Full site scan
Checks your files and database for webshells, rogue Super Users, injected scripts and defacement, and gives the site a security grade.
Real-time protection
The companion Shield plugin checks every request and can block attack patterns and password guessing.
Security presets
New in MuRu Guard 5.7.0: pick Basic, Standard, Advanced or Maximum protection in one click, see every change first, and undo it any time.
Read-only scanning
Scanning never executes code, and MuRu Guard is open to Super Users only by default. The free version needs no account or card.
Before You Update: Checklist
Quick reference
- Take a full backup of the site (files and database) before installing the beta.
- Install 7.0.0 beta 1 on a test site or a copy of your site, not on a live client site.
- Open your most important existing pages and check that they look and work as before.
- Generate the design system on the test site and review its colours and fonts before linking existing pages.
- Set up the cookie banner under Settings › Privacy if your site serves visitors in the EU.
- Run a security scan before and after the update, for example with MuRu Guard, so you know the site is clean.
- Wait for the stable release before using version 7 on client sites.
SP Page Builder 7 is a big step: a real design system, motion, popups with conditions, privacy tools and version history, all in a faster editor. Test it now on a copy of your site, so you're ready when the stable version arrives.
Watch the full walkthrough
See every new feature of SP Page Builder 7 in action, step by step: watch the video.
MuRu Guard
Joomla security scanner with SP Page Builder–specific checks, real-time protection and one-click security presets.
SP Page Builder is a product of JoomShaper. Lyzerslab is not affiliated with JoomShaper. This article is based on our own testing of SP Page Builder 7.0.0 beta 1.
Comments (0)
No comments yet. Be the first to comment!