Webal Layouts is a layout builder for Cassiopeia, the template that comes with Joomla. You arrange the parts of a page on one screen, and a live preview shows the result while you work.
This manual shows you how to design the layout of the pages between the header and the footer with the layout editor: rows, columns, sidebars, the error page and the offline page.
Contents
- What is Webal Layouts: What the layout builder is, what you get in the package and what it is not.
- Webal Layouts requirements: The PHP and Joomla versions, the template and the permissions that Webal Layouts needs.
- Installing Webal Layouts: How to install, update and remove the package, and what the install does and does not touch.
- Where a saved layout lives: A layout is kept in a template style, and adds nothing extra to the page that visitors load.
- How a page is built, step by step: Sections, the Component, rows, columns and positions explained in the order that you build them, with a worked example and the muddles cleared up.
- The layout editor: A tour of the outline, the preview, the settings, the Build, Split and Preview views and the colour guide, and how to move things with the mouse and the keyboard.
- The Component, its sidebars and rows: How to make a page with a sidebar, and rows in the main column beside it.
- Sections with rows and pictures: How to put rows in any section, choose the modules per row for each screen size, and give a section a background picture with a shade.
- Empty parts print nothing: What happens to a section, a sidebar or a row that has nothing to show, and why one layout can serve the whole site.
- Error and offline pages: The 404 page, the offline page and the fixed blocks of a layout.
- Live preview and the visitor view: How the preview works, and how to see the page as a visitor sees it.
- The Checks tab: How the editor checks a layout, and the difference between a problem and a warning.
- Using a layout: How to publish a layout, choose the pages that use it, and duplicate, rename or delete it.
- Export and import a layout: How to save a layout as a small file and bring it into a site.
- Asking an AI assistant for a layout: How to use Claude, ChatGPT or Gemini with the AI help tab, and why the builder never sends anything itself.
- Webal Blocks inside layouts: What was tested with Webal Blocks, the Wide page width, and where to put the Anchor strip.
- Colours and user.css: How to use your own colours for the backgrounds of sections and rows, and how to keep words readable on a background picture.
- If something looks wrong with a layout: Problems that come up with layouts and how to solve them.
- Words used for layouts: The words of the layout editor in one place.
- Building a site with AI: How to design a site with the Webal Blocks design system in Claude Design and build it with the AI help tab.
Other manuals
- Webal Blocks manual: Build a whole Joomla site from native blocks: requirements, installing, first setup, navigation, a page for every module, site-wide features and help.
- Webal Phoca Pages manual: Arrange Phoca Cart's product page from blocks: layouts, category rules and checks before visitors see them.