Using my extensions on your site?

Consider making a donation to support ongoing development and long-term maintenance.

JO Layout Builder: a native page builder for Joomla

JO Layout Builder is a native drag-and-drop page builder for Joomla 6 that lets you visually create complete pages, landing pages, headers and footers — without writing code.

Build your layouts with sections, rows and columns, then add content using 29 ready-made content types or any of your existing Joomla modules. Publish your layouts as menu items, in any module position, inside articles with a simple shortcode, or use them to build your site's header and footer.

Everything is responsive, with independent settings for Desktop, Tablet and Mobile. JO Layout Builder also loads only the scripts a page actually needs, supports Joomla's native module system, and keeps your existing extensions working alongside your layouts.

Why JO Layout Builder?

JO Layout Builder takes a layout-first approach to Joomla. Instead of working within a template's predefined structure, it lets you visually build layouts with sections, rows, columns and content elements while still using your Joomla modules and extensions — including for headers and footers.

Build visually

Create complete layouts with drag-and-drop sections, rows, columns and content elements.

Use what you already have

Insert native Joomla modules directly into your layouts.

Design for every device

Control spacing, sizing, typography, alignment and visibility independently for Desktop, Tablet and Mobile.

Publish anywhere

Use layouts as menu items, modules, article content, headers or footers.

Keep it lightweight

Only the JavaScript and fonts needed by the content on a page are loaded.

Reuse your work

Export and import layouts, and reuse sections across your website.

Key Features

Visual drag-and-drop builder — arrange sections, rows, columns and content elements visually. Move sections with one click, duplicate elements, and nest rows inside columns to create complex layouts
29 content types — add text, headings, buttons, images, galleries, carousels, pricing tables, data tables, countdowns, progress bars, forms, menus and more — or insert any native Joomla module
Fully responsive — set widths, spacing, typography, alignment and visibility independently for Desktop, Tablet and Mobile. Breakpoints can be configured from the component Options
Headers & footers — design your site's header and footer using the same visual builder. Start from a ready-made layout and customize it to match your website. Works with the JO Canvas template or the JO Header Footer Override plugin
Use layouts anywhere — publish a layout as a menu item, display it in any module position with the JO Layout Builder module, or insert it inside articles with the {jolayout id=N} shortcode
Native Joomla modules — place existing Joomla modules directly inside your layouts. Menus, login forms, search, custom modules and third-party modules can continue to work as usual
Typography & color presets — control fonts, sizes, weights and line heights for each device. Connect colors to site-wide presets and update your brand colors from one place
Undo / redo & compact view — undo changes instantly and switch to Compact View when working with long pages to focus on the layout structure instead of the content
Import & export — export layouts for use on another Joomla website or reuse sections and layouts across your projects
Lightweight & cache-friendly — scripts for features such as carousels, galleries, countdowns and progress bars are loaded only when they are actually used. Rendered layouts can also be cached for faster page delivery
Accessible output — semantic HTML, keyboard-friendly interactive elements, screen-reader text where appropriate, and support for users who prefer reduced motion

29 Ready-Made Content Types

JO Layout Builder includes a practical collection of content types for building everything from simple content blocks to complete business and marketing pages.

Basic

Text
Heading
Button
Button Group
Divider
Icon
Custom HTML

Media

Image
Image Card
Image Carousel
Gallery
Video

Marketing

Feature Box
Icons & Lists
Pricing Table
Testimonial
Person
Social Icons
Countdown

Data

Table
Progress Bar
Animated Number

Interactive

Tabs / Accordion
Form

Site & Navigation

Site Logo
Menu
Copyright

Structure

Nested Row
Joomla Module

Coming

The Table content type can accept data pasted directly from Excel or Google Sheets, or imported from a CSV file. The Joomla Module element lets you bring existing Joomla functionality directly into your visual layouts.

Publish Your Layouts Anywhere

Build your layout once and use it wherever you need it across your Joomla website.

Menu Item

Create a menu item of type JO Layout Builder → JO Layout and select your layout. Perfect for complete pages and landing pages.

Module

Use the JO Layout Builder module to display your layout in any Joomla module position.

Shortcode

Enable the JO Layout Builder – Shortcode plugin and insert {jolayout id=x} into an article or Custom module.

Header & Footer

Create dedicated Header and Footer layouts and use them across your entire website. JO Canvas displays them automatically, or use the JO Header Footer Override plugin with your existing template.

More than a page builder. Design your site's header and footer using the same visual layout-building system.

Getting Started

Follow these five steps to turn a blank Joomla 6 installation into a complete, ready-made website in just a few minutes: download the required files, install the extensions, import the builder settings, import the header and footer, and import your first page layout.

Download the Required Files

Download JO Layout Builder, JO Canvas, and the sample JSON files from the link below. You will get four JSON files:
1. settings.json
2. header.json
3. footer.json
4. layout.json
Install JO Layout Builder and JO Canvas
1. In your Joomla administrator, go to System → Install → Extensions.
2. Open the Upload Package File tab and drag in the JO Layout Builder ZIP file. Wait for the success message.
3. Repeat the process with the JO Canvas template ZIP file.
4. Go to System → Site Template Styles. You should see jo_canvas - Full Width set as your site's default template.
Import the System Settings

The settings.json file contains the color presets, fonts, and responsive breakpoints used by the demo layouts. Import it first so everything you import afterwards looks as intended.
1. Go to Components → JO Layout Builder → Layouts.
2. In the toolbar, click Import Settings.
3. Click Choose File and select the settings file (system.json).
4. The groups found in the file are listed: Color Presets, Fonts, Breakpoints, and Other Settings. Keep them all selected for a fresh site, or untick any group you want to keep unchanged.
5. Read the note explaining that these settings apply to the entire site, then click Apply Settings.
6. You will see the message "Builder settings applied" along with the number of values imported.
Import the Header and Footer

Header
1. Go to Components → JO Layout Builder → Header. The header opens in the builder.
2. In the toolbar, click Import Page and select the header file (header.json).
3. The dialog shows the file information and lists the sections it contains.
4. If the file contains builder settings, leave Apply Settings unticked because you already imported them in Step 3.
5. Click Replace Page to replace the starter header with the imported header. If you change your mind, you can use Undo.
6. Click Save & Close.
Footer
1. Go to Components → JO Layout Builder → Footer.
2. Repeat the same steps with the footer file (footer.json): Import Page → select the file → Replace Page → Save & Close.
Tip: Replace the demo logo with your own by clicking the logo in the header, choosing your image, and saving. If the header or footer contains Module items, open each one and select the appropriate module again, because module IDs differ from site to site.
Import the Layout

Create the Layout and Import the Page
1. Go to Components → JO Layout Builder → Layouts and click New.
2. Enter a title, for example, Home.
3. In the toolbar, click Import Page and select the layout file (layout.json).
4. Leave Apply Settings unticked because the settings were already imported in Step 3, then click Replace Page.
5. Make sure the status is Published, then click Save & Close.
Show It on Your Site
1. Go to Menus → Main Menu → New.
2. For Menu Item Type, choose JO Layout Builder → JO Layout.
3. Select your layout, enter a menu item title, and click Save & Close.
4. To make it your home page, click the star next to the menu item in the list.
You're ready to build. Open your site and customize the text, images, colors, and other content to make the website your own.

Frontend Demo

View the JO Layout Builder Demo

Backend Screenshot

Requirements

Joomla 6
JO Canvas template or JO Header Footer Override plugin for builder-based headers and footers
JO Layout Builder module for displaying layouts in module positions, and Shortcode plugin for embedding layouts in articles and other supported content

Start Building Visually

Build responsive Joomla pages with the tools you already know, the extensions you already use, and a visual workflow that keeps things simple.

Everything You Need to Get Started

Name	Description
JO Layout Builder Component	The core page builder for creating and managing custom layouts, pages, headers, and footers.
JO Layout Builder Module	Display any saved layout in a Joomla module position.
JO Layout Builder Plugin	Embed saved layouts inside articles or Custom modules using the `{jolayout id=x}` shortcode.
JO Canvas Template	A minimal, blank Joomla template designed for JO Layout Builder. It provides a clean, full-width layout for your pages and automatically displays your custom header and footer—no additional configuration required.
JO Header Footer Override	Want to keep your existing template? Use this plugin to display your custom JO Layout Builder header and footer without switching to JO Canvas.
Sample JSON Files	Import these ready-made JSON files into JO Layout Builder to get a quick start with preconfigured layouts.