How to create a custom html module in Joomla?

One of the main features of Joomla is the flexibility. The default installation of the CMS includes over 20 different modules that help to create a professional and powerful website. In most of the cases these modules will cover the needs of the users, however sometimes you want even more. As you may know there are lots of modules, extensions available for free in the Joomla extensions directory, but what if you only want to display an image and some text, contact details, phone number or opening hours in a certain part of the template?

For this reason you will not need to search for an appropriate module, you can use the Custom HTML module. The name may be a bit confusing, this is basically a custom module that supports html tags as well, and can be easily edited with the in-built Joomla editor, but there is no need to use only html.

The Custom HTML module is a very flexible module and can be used for basically anything that comes to your mind, but most of newbie Joomla users are not aware of its power. In the following I will show you how to create this type of module and what you can use it for.

Add and customize the module for your needs

[alert-success]Extensions > Module Manager > New[/alert-success]

Here you have the options to choose from many different modules, but look for the Custom HTM module. Click on the link and you will be redirected to the module editor.

create custom html module

The next step is to set up the custom text, upload and insert image, add links, phone numbers, basically anything you need.

uploade image to custom html module

At the end, set up the module options like title, module positions, choose pages where you want to show the custom module and publish it.

edit and publish custom joomla module

After publishing your module, go to the front-end of your Joomla installation, and refresh the page. In our demo the custom modules published on the user1 positions are looking like this:

custom module demo joomla 3.3

We have been receiving of messages from users who are using our free joomla templates and wanted to set up the same layout as in our demo. The modules displayed on the user1 module positions are created with custom html modules.

Also the module at the very top of the page, where example address and phone number is displayed, has also been created with custom module by using H4 html tags, paragraph, and links.

phone number custom module joomla

The source code for this module looks like this:

<h4 style="text-align: right;">Call us directly: 1-800-655-4500</h4>

<h4 style="text-align: right;">Allen Street 5, New York - <a href="#">view location</a></h4>

<p style="text-align: right;">The above text is H4 styling. This is a simple text with <a href="#">link</a>.</p>

Hope this quick tutorial was helpful, and if you have any questions, feel free to ask in the comment section. More tutorials and tricks are coming soon.

Leave a Comment

Your email address will not be published. Required fields are marked *