Adding a custom image grid

Hi there,
Currently this is a feature of our PRO version only. I am sorry. You could replicate this though. Create a new sidebar https://www.cssigniter.com/kb/how-do-i-add-a-new-sidebar-widgetized-area/ and add it in header.php
under `
<div id=”site-content”>`

like this

<div class="container">
<div class="row">
<?php dynamic_sidebar( 'your-sidebar-id' ); ?>
</div>
</div>

Then in your new sidebar add your images and text from Appearance->Widgets using any widget you want or simple HTML widgets.
If you decide to proceed with this modification I would suggest you create a child theme, copy over the files you are editing and make the modifications there. This will allow your changes to survive future theme updates. If you directly edit the theme’s files, all changes will be lost once you update.

Have a look at this guide to learn more about child themes and how to create one https://www.cssigniter.com/ignite/beginners-guide-child-themes/
Let me know if you need additional help with this.

sorry but unable to follow this. also this looks like we are adding a side bar. but what i want to do is on my home page instead of the the slider, i want to replace it with 3 static images (joined side by side like 3 blog categories). When each of the image is clicked it should open the respective blog category feed.

hi,

i did all the steps as suggested. created a child theme. create a new side bar in functions.php. Added the same in index.php. But I am unable to see it in Appearance-> Widgets. No changes observed. Pls guide how can i find it.

Hi there,
Well creating a sidebar might be complex, so just open header.php

<div class="container">
<div class="row">
<div class="col-md-4">
<a href="your-link-1"><img src="your-image-URL-1"/></a>
</div>
<div class="col-md-4">
<a href="your-link-2"><img src="your-image-URL-2"/></a>

</div>
<div class="col-md-4">
<a href="your-link-3"><img src="your-image-URL-3"/></a>

</div>
</div>
</div>

after
<div id=”site-content”>

Let me know if this worked for you.

• This reply was modified 4 years, 9 months ago by Fotis.

Hey thanks for the help. Tried it. It work. Couple of follow up questions.
1. I want this only in the home page and not every page. How do i do that?
2. Also there is some gap between the images. How can that be altered?

And out of curiosity.. why did i not get the custom sidebar that I had created in the widget area? I somewhere read it could be due to plugins. But I disabled all the plugins and checked. Still no luck !

If i disable the slider, then there is no space between the top menu and the images. How can i add some padding?

Hi,
you can add this

.home #site-content{
padding-top:40px;
}

in your custom CSS box under Customize-?Additional CSS to add some padding