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