Instagram Block

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

In field HTML block:

After that, input sample content below:
<div id="halo_instagram" class="halo-marketing-banners">
<div class="halo-block halo-banners halo-instagram-gallery">
<div class="container">
<div class="halo-block-header">
<h3 class="title">Instagram</h3>
<p class="description">@Halothemes</p>
</div>
<div class="row">
<div class="halo-image-instagram disable-srollbar">
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-1.jpg" data-fancybox="instagram_image">
<img class="lazyload" title="Image Instagram 1" src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg" alt="Image Instagram 1" data-src="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-1.jpg" />
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-2.jpg" data-fancybox="instagram_image">
<img class="lazyload" title="Image Instagram 2" src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg" alt="Image Instagram 2" data-src="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-2.jpg" />
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-3.jpg" data-fancybox="instagram_image">
<img class="lazyload" title="Image Instagram 3" src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg" alt="Image Instagram 3" data-src="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-3.jpg" />
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-4.jpg" data-fancybox="instagram_image">
<img class="lazyload" title="Image Instagram 4" src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg" alt="Image Instagram 4" data-src="https://cdn11.bigcommerce.com/s-coj85swkah/images/stencil/original/image-manager/home-image-instagram-4.jpg" />
<span class="icon_plus">icon</span>
</a>
</div>
</div>
</div>
</div>
<a href="#" class="button button--primary">View Gallary</a>
</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.
Last updated