A single module can share the exact same content, yet look completely different on the page each time. This is determined by its title, HTML header tag, wrapper style known as chrome, and valid CSS classes.
What you will learn
- Distinguish title text, its visibility, and its HTML tag.
- Choose between standard and card chrome wrappers.
- Add a CSS class without writing custom code.
- Verify the result in the editor's safe preview.
Four options, four distinct roles
Title is the short name of the module, such as "Contact", "Latest News", or "Shopping Cart". Simply filling in the name does not automatically mean it will be displayed. That is controlled by a separate toggle for title display.
Title Tag specifies the HTML heading tag, such as H2, H3, DIV, or SPAN. For a typical page section, H2 or H3 is usually appropriate depending on the heading hierarchy. Selecting "none" removes the heading semantics and renders the title as a plain SPAN; the actual title display remains governed by the separate switch. Proper heading hierarchy helps both readers and assistive technologies understand the page structure.
Chrome in this editor does not refer to the web browser. It is the method Joomla uses to wrap a module's output. The editor supports two final variants: default for a standard wrapper and card for a card layout. This is not an arbitrary list of all chrome styles that might exist in other templates.
Module CSS Class does not contain CSS rules. It is simply a safe class name or multiple space-separated names, such as contact-box. The actual visual style of this class must be defined in the template stylesheet. The editor accepts only valid class names—not raw HTML, curly braces, or full CSS blocks.
How to change these settings
- Select the module you want to edit on the canvas or in the Layers tree.
- Click the small gear icon on the selected module to open the right inspector and locate the general output settings.
- Edit the title text and decide whether it should be visible. Then select the corresponding heading tag.
- Select either default or card chrome. Optionally, add a simple CSS class name.
- Check the preview and test mobile viewports. The editor saves your changes continuously.
Important context
The editor preview is a safe representation of your design layout. It does not execute live module scripts or third-party plugins. After export, Joomla and installed extensions determine the actual content, but settings for titles, wrappers, and classes are correctly passed to the supported design output.
Certain module types may offer additional custom layouts or specific parameters. Their availability is governed by the schema of each supported module. Upon saving, the server re-validates that the tag, chrome, layout, and classes fall within permitted values.
If the chosen chrome style does not render titles, title visibility controls may be disabled. For supported chrome variants, the editor uses either default or card wrapping; card mode may also adjust the heading's placement relative to the content.
When selecting a heading tag, consider the entire page structure rather than just font appearance. H1 typically identifies the primary topic of the page, so small sidebar modules should not be tagged as H1. A lower heading level that logically connects to surrounding elements is usually better for side blocks. Visual sizing can be adjusted with CSS styling; the HTML tag exists primarily to define semantic meaning. If you choose to hide a title, ensure that the module's purpose remains clear from its content alone.
Result
The selected module has a clear title, appropriate heading hierarchy, the intended default or card wrapper, and any applied CSS class is a short, valid name rather than inline code.