This article explains how our demo home page is built:  http://demo.flothemes.com/rebecca/ .  The image below explains what each block represents.

The next images shows the settings specific to the home page:

The widget used below the page content represents a text text widget with 4 images inside. The code used in that widget is the following:

<div class="row home-brands">
 <div class="medium-6 large-3 columns large-align-left">
 <a href="http://demo.flothemes.com/rebecca/gallery/processus-dynamicus/">
 <img src="http://demo.flothemes.com/rebecca/files/2014/11/0003_layer-4.png" alt="" />
 </a>
 </div>
 <div class="medium-6 large-3 columns large-align-center">
 <a href="http://demo.flothemes.com/rebecca/gallery/aliquip-ex-ea-commodo-2/">
 <img src="http://demo.flothemes.com/rebecca/files/2014/11/0002_layer-3.png" alt="" />
 </a>
 </div>
 <div class="medium-6 large-3 columns large-align-center">
 <a href="http://demo.flothemes.com/rebecca/gallery/accumsan-et-iusto-odio/">
 <img src="http://demo.flothemes.com/rebecca/files/2014/11/0001_layer-2.png" alt="" />
 </a>
 </div>
 <div class="medium-6 large-3 columns large-align-right">
 <a href="http://demo.flothemes.com/rebecca/gallery/claritas-est-etiam-2/">
 <img src="http://demo.flothemes.com/rebecca/files/2014/11/0000_layer-1.png" alt="" />
 </a>
 </div>
</div>

And we also used some custom css to align it nicely on mobile devices:

/*for home page 4 images*/

 .home-brands .columns{ margin-top: 60px; }

@media only screen and (max-width: 1023px){
 .home-brands{ text-align:center; }
}
@media only screen and (min-width: 1024px){
 .large-align-left { text-align: left; }

 .large-align-right { text-align: right; }

 .large-align-center { text-align: center; }
}

In the first and second footer sidebars, we’ve used ‘Flo images’ widget, but without any image :

Below you can find videos that describe 4 examples of home page used on our demo site: