> 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/runway/layout-customization/home-styles/home-style-5/home-5-how-it-works-module.md).

# Home 5 How it works module

### 36. Home 5 How it works module

> Module position: tp-about
>
> Module class suffix: tp-title-center

![](/files/aSKCPGwy4iEQr6QbyxIG)

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:

Create a new module type as "Custom html"

#### Step-2:

Add the following html code in your custom html module

```html
<div class="col-lg-12 col-md-12">
    <h3 class="module-title "><span class="title-left">How</span>
<span class="title-right"> It works?</span>
    </h3>
    <p class="tp-sub-text text-center">Sed ut Perspiciatis Unde 
Omnis Iste Sed ut perspiciatis unde omnis iste natu error sit voluptatem accusan
 tium Sed ut</p>
</div>
<div class="col-md-6">{vimeo}122959827{/vimeo}</div>
<div class="col-md-6">
    <div class="col-sm-6">
        <h3><em class="tp-icon fa fa-cloud-download"></em> Download it</h3>
        <p>Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo eum.</p>
        <h3><em class="tp-icon fa fa-check-square-o"></em> Install it</h3>
        <p>Et accumsan et iusto odio dignis qui blandit hendrerit enim ad.</p>
    </div>
    <div class="col-sm-6">
        <h3><em class="tp-icon fa fa-cogs"></em> Customize it</h3>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate quod.</p>
        <h3><em class="tp-icon fa fa-thumbs-up"></em> Start using it</h3>
        <p>Nihil imperdiet doming id quod mazim placerat facer possim.</p>
    </div>
</div>
```

#### Step-3:

Make sure the Prepare content is set to YES

Once the module is created successfully SAVE & CLOSE the settings.