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

teasers-boxes-on-front-page

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:

hom-top-widgets

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%;
  }
}

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

4 Discussion to This Post

    • Can you share the wp-admin access via contact form? I shall look it once.

  1. Thanks for your great explanation I used it for the home page of the above website (second 3 col layer at the bottom) Do you know a way of moving the widget title to go under the content like the 3 examples above the 3 widgets?

    Cheers
    Julian

    • You are using the Text Widget. Correct? Just move this kind of line

      <h4 class="widget-title widgettitle">Our Thought</h4>

      line at bottom. I mean that it will move below the last

      <p>

      tag.

Leave A Reply

Your email address will not be published. Required fields are marked *