Displaying 3 Columns Teaser Boxes Below the Banner on Home Page of Whitespace PRO Theme

By default Home page have one widget area for Welcome Text. This article will show how to create a new widget area on home page and display the 3 columns teasers in that area.

Step 1: Registering a new widget area “Home Top”. Add the following code in your functions.php file:

//* Register home top widget area
genesis_register_sidebar( array(
	'id'          => 'home-top',
	'name'        => __( 'Home Top', 'whitespace' ),
	'description' => __( 'This is the home top section will come below the banner image.', 'whitespace' ),
) );

Step 2: Navigate Dashboard > Appearance > Widgets and 6 Text Widgets in Home Top Widget Area. See the SS:

Step 3: Hook home top widget area after site header. Open the front-page.php file and add the following code above the genesis() function.

// Hook home top widget area after site header
add_action( 'genesis_after_header', 'whitespace_home_top_widget_area' );
function whitespace_home_top_widget_area() {

genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top-section" id="home-top-section">',
'after' => '</div>',
) );

}

Step 4: This is the last step. Add the following CSS in your style.css file:

/* # Home Top Section
---------------------------------------------------------------------- */
.home-top-section {
    display: inline-block;
    padding: 40px 40px 20px;
}

.home-top-section .widget {
  float: left;
  margin-left: 2.5641%;
  margin-bottom: 10px;
  padding: 40px 20px;
  text-align: center;
  width: 31.6239%;
}

.home-top-section .widget:nth-of-type(3n+1){
  clear: left;
  margin-left: 0;
}
.home-top-section .widget .widgettitle {
  color: #232323;
  font-size: 26px;
  margin: 0 0 22px;
}

.home-top-section .dashicons, .home-top-section .dashicons-before:before{
  font-size: 35px;
  line-height: 35px;
  height: 35px;
  margin-bottom: 25px;
  width: 35px;
}

.home-top-section a.button{
  background: none;
  border: 2px solid #00a99d; 
  color: #00a99d;
  padding: 10px 30px;
} 

.home-top-section .widget:hover{
  background: #f5f5f5;
}

.home-top-section a.button:hover{
  background: #00a99d; 
  color: #FFF;
}
/* Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 681px) and (max-width: 767px) {
  .home-top-section .widget {
    width: 48.717%;
  }
  .home-top-section .widget:nth-of-type(3n+1) {
    clear: none;
    margin-left: 2.5%;
  }
  .home-top-section .widget:nth-of-type(2n+1) {
    clear: left;
    margin-left: 0;
  }
}
@media only screen and (max-width: 680px) {
  .home-top-section .widget {
    float: none;
    margin-left: 0;
    width: 100%;
  }
}