Stately’s Home Middle 1 widget area in 75 / 25 layout

Updated on May 13, 2019

This members-only tutorial provides the steps to re-arrange two widgets placed in Stately's Home Middle 1 widget area from the default 50 - 50 into 75 - 25.

Before:

After:

We shall edit the code that adds flexible-widgets class to all the home-middle widget areas such that this class does not get added to home-middle-1 widget area, then use Flexbox to show the two widgets side-by-side in a 75-25 configuration.

Tested in Stately 1.0.3.

Step 1

Edit child theme's functions.php.

Replace

if ( 1 !== $widget_area_count ) {
    $classes .= ' fadeup-effect';
}
equity_widget_area( sprintf( 'home-middle-%d', $widget_area_count ),
    array(
        'before' => '<div class="flexible-widgets columns small-12 widget-area ' . $classes . '">',
        'after'  => '</div>',
    )
);

with