WP SITES

Log in

Change Home Top Featured Page Widgets From 3 To 4 In Executive Pro Theme

—

by

Brad Dalton

By default, the Executive Pro theme is coded is display 3 Genesis featured page widgets inline when using the home top widget area.

In this tutorial, i’ll show you how to increase that from 3 to 4.

Here’s the question i answered recently:

Need Help Adding 4 Columns to Home-Top Section – Executive Pro

Firstly, here’s what the default home top widgets look like:

3 widgets inline

On Line 1295 of your child themes style.css file, find this code:

.home-middle .widget,
.home-top .widget {
	float: left;
	padding: 0 2.8%;
	width: 33.33333333%;
}

And change it to this:

.home-middle .widget {
	float: left;
	padding: 0 2.8%;
	width: 33.33333333%;
}

.home-top .widget {
	float: left;
	padding: 0 1.4%;
	width: 25%;
}

And here’s the result:

4 featured page widgets inline

You can also center the title for each widget and change the font size by adding this code at the end of your style sheet, before the Media Queries:

.home .featured-content .entry-title {
    font-size: 1.5rem;
    text-align: center;
}

Related Solutions

Comments

3 responses to “Change Home Top Featured Page Widgets From 3 To 4 In Executive Pro Theme”

  1. Jeanette Avatar
    Jeanette

    I have Executive Pro and Genesis on my site and this tutorial is working wonders and now i have 4 featured pictures. But is not using pages or post there but as a bar for social icons and was thinking of adding some other text under. like you can on Minimum pro since there are 4 widgets not only one that can take 4. But i will work out our another way..

  2. Jeanette Avatar
    Jeanette

    If i would like 4 separate widgets for the Home top like featured 1,2,3,4. Do you have a trick for that.

    Now since all are sampled in one Widget i can not get the social Icons plugin to show like it does on Minimum Pro http://my.studiopress.com/themes/minimum/#demo-full

    1. Brad Dalton Avatar
      Brad Dalton

      Yes however you would need custom code for that.

      This tutorial relates to the Executive Pro theme and may need tweaking fir use on other themes.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.