Featured Front Page Section in Outfitter Pro

In the Tutorial Requests Trello board, a user wrote:

Outfitter Pro Tut Request: #1 How to add a full background image like Altitude Pro above front page store in Outfitter. #2 Also, how to add full video section above store in front page of Outfitter Pro, to embed YouTube videos. Thanks!

This members-only tutorial provides the steps to register a custom front-page-featured widget area and add it above the .site-inner on the homepage with .site-header overlaid on the top in Outfitter Pro.

Tested in Outfitter Pro 1.0.2.

Step 1

Edit Outfitter Pro's front-page.php.

Above

genesis_register_sidebar(
    array(
        'id'          => 'front-page-1',
        'name'        => __( 'Front Page 1', 'outfitter-pro' ),
        'description' => __( 'This is the front page 1 section.', 'outfitter-pro' ),
    )
);

add

genesis_register_sidebar(
    array(
        'id'          => 'front-page-featured',
        'name'        => __( 'Front Page Featured', 'outfitter-pro' ),
        'description' => __( 'This is the front page featured section.', 'outfitter-pro' ),
    )
);

Step 2

At Appearance > Widgets drag your desired widget(s) into "Front Page Featured" widget area.

In my test site, I added a Custom HTML widget.

Title: A 6-Week Course

Content:

<h4>Dominate Your Market with <br/>Outfitter Pro</h4>

<p>
<a class="button" href="#">Sign Up Now</a> <a class="button clear" href="#">Learn More</a>
</p>

<p>
    <span class="small-disclaimer">Note: Text on this page is for demonstration purposes only and does not represent an actual course.</span>
</p>

Step 3

Edit front-page.php.

Above

// Runs the Genesis loop.
genesis();

add