A snippet is a reusable content block for the Custom HTML module. It can combine safe HTML, custom CSS, and supported module options into a single foundation.
What you will learn
- Distinguish between a snippet, skin, and Joomla article.
- Understand what gets copied when using a snippet.
- Select a suitable block for Custom HTML.
- Know security and size limitations.
A building block inside a module
The Custom HTML module serves as a container for custom presentation content. A snippet inserts a pre-built structure into it—such as a hero section, call-to-action bar, feature list, or contact banner. You don't have to rebuild the same headings, buttons, and image placeholders from scratch every time.
However, a snippet is not a Joomla article, product, or menu item. It generates content strictly within a specific template module. Live site data continues to be managed by Joomla or its respective extensions. In the editor, you see a safe preview of the resulting block.
Snippet versus skin
| Question | Snippet | Skin |
|---|---|---|
| What does it store? | Safe HTML, CSS, and supported Custom HTML options. | Allowed visual appearance properties of an element. |
| Where is it used? | In a Custom HTML module. | On a compatible row, position, or module. |
| Does it transfer text? | Yes, it provides a complete content structure. | No, content remains on the element. |
| Can you save custom entries? | Yes, under My snippets. | Yes, under My skins. |
How snippets fit into the workflow
- Open the snippet library and choose a system or custom block.
- Drag the snippet into a Joomla position on the editor canvas.
- Replace sample text and images with actual site content.
- Adjust safe CSS as needed and verify the layout on mobile viewports.
- Save successful customized layouts as custom snippets for future reuse.
Example: Call to Action
Suppose you want a banner at the bottom of a page with the heading "Interested?", a brief description, and a button. A system snippet provides the structured HTML markup and baseline CSS. You simply replace the text, update the link target, and align colors with your global design palette. If you need this banner layout elsewhere, you can save it to My snippets.
Each instance created from a snippet operates independently. For instance, one module can feature a "Contact Us" button while another says "View Services," even though both originated from the same library item. The library serves as an initial starting point rather than a dynamic live link. This protects completed blocks from unintended site-wide modifications, but means design updates must be intentionally reapplied to older instances.
Select snippets based on the structural layout you require rather than placeholder images, as stock photos are omitted during template export. Give priority to column layouts, content order, and mobile responsiveness. For every implementation, substitute sample data, verify link destinations, and prepare final image assets in your target Joomla environment.
Copies operate independently
Once inserted, you work directly with the local module content. Subsequent edits to the original library snippet will not automatically update previously created blocks.