JO Layout Builder

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?

Unlike a page builder that tries to replace Joomla's existing functionality, JO Layout Builder works with Joomla. Your templates, modules and extensions remain part of your website while the builder gives you a visual way to control the page structure and design.

• 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 required by the content used on a page is 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.

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

Once a layout is built, you can use it in different parts of your Joomla website depending on what you need.

Menu Item: Create a menu item of type JO Layout Builder → Layout and select your layout. This is ideal for complete pages and landing pages.
Module: Use the JO Layout Builder module to display a layout in any Joomla module position.
Shortcode: Enable the JO Layout Builder - Shortcode plugin and use {jolayout id=5} inside an article or Custom module with Prepare Content enabled.
Header & Footer: Create dedicated Header and Footer layouts and let the JO Canvas template or JO Header Footer Override plugin display them across your website.

Menu Item, Module or Shortcode?

📄 Use a Menu Item

• For complete pages such as a home page, landing page, services page or about page
• When the layout is the main content of the page
• When you need full-width sections from edge to edge

📦 Use the Module

• For reusable blocks that appear on multiple pages
• For call-to-action sections, promotional banners or newsletter blocks
• When you need to place a layout in a sidebar or another template position
• When you want to manage placement using Joomla's normal module assignment system

⚡ Use the Shortcode

• When you want to place a designed block inside an article
• When different articles need different layouts
• When you want to avoid creating a separate module for every placement

Build More Than Just Pages

JO Layout Builder can be used for much more than traditional page layouts. Combine its content types with your existing Joomla modules to create complete, responsive website sections without depending on multiple separate extensions.

🚀 Landing Pages & Product Launches

Create a hero section, feature boxes, pricing plans, testimonials and a countdown to launch day — all within one layout.

🏢 Business & Agency Websites

Build service sections, team profiles, testimonials, image galleries, social links and contact areas with a consistent visual design.

🛍️ Offers & Pricing Pages

Create side-by-side pricing plans, highlight a popular plan, add comparison tables using data from Excel or Google Sheets, and include countdowns for time-limited offers.

🎓 Schools, Events & Organisations

Present schedules and timetables as responsive tables, show fundraising progress, highlight achievements with animated numbers, and display event photography in carousels and galleries.

🧭 Site-Wide Headers & Footers

Design your logo, navigation, buttons and social icons in the header, then create a matching footer with contact information, links and copyright — all using the same visual builder.

Frontend Demo

View the JO Layout Builder Demo

Requirements

★ Joomla: Joomla 6
★ Optional: JO Canvas template or JO Header Footer Override plugin for builder-based headers and footers
★ Included: JO Layout Builder module and Shortcode plugin

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.

✨ Ready to build your pages visually?

Get JO Layout Builder

Backend Screenshot:

No images found in the gallery folder 'images/galleries/jo_layout_builder'.

Download Free