> For the complete documentation index, see [llms.txt](https://jdocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jdocs.themeparrot.com/joomla-templates/knapsack/layout-customization/home-page/custom-html-modules.md).

# Custom HTML Modules

### Custom HTML Modules

> Module position: Position 1, Position 2, Position 3
>
> Module class suffix:not used

![](/files/jLyZhunYwoaqcAOL0B6B)

**If you want your module this way, Go to backend: Extensions --> Module Manager --> New --> Select type as Custom html with the settings below:**

#### Step-1:

![](/files/n2SYFyQ1TCQpjkHTjLES)

#### Step-2:

![](/files/x7pXJ5rNzEc2tTmn35BN)

Add the folloing html code in your custom html module

```html
<div class="hm-overlay" style="height: 200px;">
    <a href="index.php/shop/structured-shoulder-bag"><img src="images/themeparrot/blog/shoulder.jpg" alt="shoulder" class="img-responsive" /></a>
    <div class="hm-overlay-caption">
        <h2>Shoulder Bags</h2>
    </div>
</div>
```

#### Step-3:

![](/files/OlHxFzLeFSgzGzb5WZnS)

> Module position: Position 5, Position 6
>
> Module class suffix:not used

![](/files/QehwhlqCIWOmB0HI5eVI)

**If you want your module this way, Go to backend: Extensions --> Module Manager --> New --> Select type as Custom html with the settings below:**

#### Step-1:

![](/files/vtLXUeYD6j0Gl65RPLgp)

#### Step-2:

![](/files/aPn9u64oYn9I4064lEet)

Add the folloing html code in your custom html module

```html
<div class="tm-overlay" style="height: 300px;">
    <div class="tm-image"><img src="images/themeparrot/dt.common.streams.StreamServer.cls.jpg" alt="dt.common.streams.StreamServer.cls" class="img-responsive" /></div>
    <div class="tm-overlay-caption">
        <h2>Our Workshop</h2>
        <a href="/index.php/about">View more</a></div>
</div>
<p> </p>
```

#### Step-3:

![](/files/sA1hrU1tam49MsS5OpYZ)