In response to a question from a member of the StudioPress community, this tutorial provides the modification steps to add a extra full width widget to the front page 4 section in the Infinity Pro child theme by Studiopress.
Firstly, here’s the default front page 4 section:
And here’s the modified section which includes a new widget added in the 2nd position which displays full width:
Demo Video
The demo video shows you the 2nd full width widget with icon added to the front page 4 widget area and how the widgets display when the screen size reduces on small devices.
Here’s the 2 steps required to add the new widget and make the entire widget area fully mobile responsive as seen in the above video:
Step 1 : Modify the PHP code on line 83 of the Infinity Pro themes front-page.php file like this:
'before' => '<div id="front-page-4" class="front-page-4"><div class="solid-section widget-area fadeup-effect"><div class="wrap">',This removes the infinity_widget_area_class class for flexible widgets so we can now add custom CSS rules to add the 2nd full width widget.