This guide introduces modules in Joomla 5, focusing on how they work with the default Cassiopeia template. Modules are versatile content blocks that enhance your site’s functionality and design, such as menus, banners, or custom HTML. You’ll learn what modules are, how they’re used in Cassiopeia, and how to start incorporating them into your website. Let’s explore the basics!

I will use the Cassiopeia template as a reference since it's the default template in Joomla.

What Are Joomla Modules?

Modules in Joomla 5 are small, flexible content units displayed in specific areas of a webpage, defined by your template’s module positions. Unlike articles, which hold primary content, modules add secondary elements like navigation menus, login forms, or sidebars. In the Cassiopeia template, modules appear in positions like top-bar, sidebar-right, or footer, allowing you to customize your site’s layout. Each module type (e.g., Menu, Custom, Breadcrumbs) serves a unique purpose, and you can control their placement and visibility to suit your needs.

Joomla Modules vs. WordPress Widgets

Joomla modules and WordPress widgets serve similar purposes, adding content blocks like menus or custom text to your site. However, modules offer more flexibility in Joomla, as you can assign them to specific module positions (e.g., sidebar-right in Cassiopeia) and control their display on selected pages via menu assignments. WordPress widgets are typically limited to widget areas like sidebars or footers, often requiring plugins for advanced control. You’ll explore these differences further in a dedicated blog article, but for now, know that Joomla modules are extremely robust and customizable.

Comparing a Joomla Custom HTML module to the WordPress version of a Custom HTML widget:

Screenshshot showing the custom HTML widget in WordPress
WordPress: Custom HTML Widget
Screenshot showing the Joomla custom HTML module
Joomla: Custom HTML Module

Why Use Modules with Your Website?

The default Cassiopeia template offers a clean, responsive design with predefined module positions that make it easy to place modules exactly where you want them. For example, you can add a Menu module  menu for navigation or a Custom module  sidebar-left for a promotional banner. Modules let you enhance Cassiopeia’s layout without coding, and you can show or hide them on specific pages using menu assignments. 

Here are the module positions for this template:
Special thanks to the Joomla website documentation for this screenshot.

Screenshot showing the Cassiopeia template module positions
Module Positions for Cassiopeia

Let me show you how I use modules for my website on the lower part of this site's front page:

Screenshot showing my site front page modules as an example
Some Example Modules on my Website Front Page

Common Module Types in Joomla 5

Joomla 5 offers a variety of module types, each with specific functions. Here are some commonly used ones with Cassiopeia:

  • Menu: Displays a navigation menu in positions like menu or footer.
  • Custom: Allows you to add custom HTML, like text or images, perfect for sidebars or footers.
  • Breadcrumbs: Shows a navigation trail, often placed in top-bar.
  • Latest Articles: Lists recent articles, great for sidebar-right to promote content.
  • Login: Adds a login form, useful in sidebar-left for user access.

You can explore these types by navigating to Content > Site Modules in the left sidebar navigation and clicking New to see available options.

Screenshot showing the default modules in Joomla
These are the Default Modules in Joomla

How Modules Work with Cassiopeia’s Positions

Cassiopeia’s module positions define where modules appear on your site. For example, placing a Menu module in menu creates a horizontal navigation bar, while a Custom module in below-content adds content below articles. You can assign modules to specific pages through the Menu Assignment tab, ensuring they only appear where needed. A good analogy is picturing a TV dinner tray where each food item compartment is a module position, and the whole tray is your web page.

Tips for Success

  • Check Cassiopeia’s documentation for a full list of module positions (e.g., banner, sidebar-right), or, if you're using a different template, find out how the module positions are laid out.
  • Use the Menu Assignment tab to control which pages display a module, like showing a Login module only on a homepage.
  • Ensure modules are published and assigned to a valid position to appear on the frontend.

What’s Next?

With a solid understanding of Joomla 5 modules and Cassiopeia’s positions, you’re ready to create your first module! The next tutorial will guide you through creating and configuring a module to enhance your site’s functionality.

Continue to the Next Tutorial: Joomla SEO Basics