> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bc-beautica-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bc-beautica-documentation/home-light/home-banner-2.md).

# Home Banner 2

<figure><img src="/files/eHvjV6Zlw0Wil8HswqrR" alt=""><figcaption></figcaption></figure>

To show **Home Banner 2** on Home page, In the Page Builder -> Go to **Widgets** -> drag and drop **HTML block** into specified sections.

<figure><img src="/files/XGxHL5ZLsRoJIxd0pN8k" alt=""><figcaption></figcaption></figure>

In field **HTML block**:

<figure><img src="/files/RLCPswQmrSLRn8AyEUhr" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When you are happy with your changes, don't forget click **Save HTML** and **Publish** to repackage the edited theme.
{% endhint %}

After that, input sample content below:

```html
<div class="halo-block halo-home-section" id="homeBanner2">
    <div class="container">
        <div class="homeBanner2__block">
            <div class="homeBanner2__slider disable-srollbar">
                <div class="homeBanner2__item home-banner-image">
                    <a href="#" class="homeBanner1__img image-with-overlay" title="Milancelos" aria-label="Milancelos">
                        <img class=" ls-is-cached lazyloaded" src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/home-bottom-banner-1-cp.jpg" data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/home-bottom-banner-1-cp.jpg" title="Milancelos" alt="Milancelos">
                    </a>
                    <div class="content">
                        <h3><span>#Trend:</span> Milancelos</h3>
                        <p class="text">Pellentesque posuere orci lobortis scelerisque blandit. Donec id tellus lacinia andos tincidunt risus de consequat velit. Quisquemos sodales suscipit tortors...</p>
                        <a class="button button--primary" href="#">Shop Now</a>
                    </div>
                </div>
                <div class="homeBanner2__item home-banner-image">
                    <a href="#" class="homeBanner2__img image-with-overlay" title="Cosmopolis" aria-label="Cosmopolis">
                        <img class=" ls-is-cached lazyloaded" src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/home-bottom-banner-2-cp.jpg" data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/home-bottom-banner-2-cp.jpg" title="Cosmopolis" alt="Cosmopolis">
                    </a>
                    <div class="content">
                        <h3>#Cosmopolis</h3>
                        <p class="text">Pellentesque posuere orci lobortis scelerisque blandit. Donec id tellus lacinia andos tincidunt risus de consequat velit. Quisquemos sodales suscipit tortors...</p>
                        <a class="button button--primary" href="#">Shop Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

Or use button below to generate the code with your own banners. Please click the **Copy code** on the popup after you changed all the blocks.

{% embed url="<https://codepen.io/HaloThemes/pen/OJaygEN>" %}

{% hint style="info" %}
Please click the "Run Pen" button to be used
{% endhint %}