> 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

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2Fk5CghMFgOUa4lWE87xkk%2FCustom_HTML_Modules.png?alt=media\&token=08fadb60-bcd2-4241-9345-7e0808ea4b96)

**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:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FNFJAhl2BR0gRk6GB8K5T%2FCustom_HTML_Modules_step1.png?alt=media\&token=918ef3ca-9818-452e-a37e-b333f79c4675)

#### Step-2:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FVsxsNSl0yYyX0GVhEyrB%2FCustom_HTML_Modules_step2.png?alt=media\&token=d6180839-5dd8-467c-ac4b-6fb1cfcc8f63)

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:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FPzrKkljsgA2yEZxjXENw%2FCustom_HTML_Modules_step3.png?alt=media\&token=5b7680d7-4a53-4c1b-870b-c0297f13675a)

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

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2F0X3n11uPC6QvKnDCJzW4%2Fposition5.png?alt=media\&token=5bb17a81-c5b8-4771-9bbd-f730524a3992)

**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:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2F8lHfxe1zcjwLCIjIEde3%2Fposition5_step1.png?alt=media\&token=d27f19be-31d7-433c-9158-f4701fa787f4)

#### Step-2:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FkXEVpVaBDAAEfGAz9x72%2Fposition5_step2.png?alt=media\&token=493b15dd-dbc5-4a71-ba94-1dc59d41e21b)

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:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2F4nXpQrgzMRKeCphDTopZ%2Fposition5_step3.png?alt=media\&token=5a533bbe-884e-47bf-b63a-70441809455c)