Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Styling the Built in Background Style Areas in Agility 3.2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We are continuing to add style and content to the Home Page of this professional services WordPress website. We just finished setting up the color scheme and now we are going to work on styling the backgrounds.

We have this background to customize and this background to customize. Also, the feature box area to customize and then really these additional areas too. Those are all part of our background customization.

Built In Background Areas

We have built into Agility a bunch of different background areas. Again, I recommend that you also look at the Styling Agility videos because they go into this in more detail.

Main Body

Having said that, we’ve got the main body background which as you would assume is the body of the page.

Header Areas

The top header area background which is this section right here. The top header area page background which is front the edge of the page to the edge of the page.


So you’ve got the area background which spans the whole browser window and then you have the page background which spans from one edge of the page to the other. And one sits on top of the other. It lets you style a page background differently than you would style the rest of the background, for example. We are not doing that in this case but that’s what that is for.


And, as I said, you’ve got the top header area then the main header area. Then the top menu area.

Attention Box and Featured Content

Content area can be done and then remember those places on the front page where you’ve got the attention box area or the featured content area? Both of those sections can be styled from here as well.

Notice Bar and Footer Areas

Then you’ve got that notice bar that we’re not using. And the top footer area background and the bottom footer area background. So all of those built in areas can be styled from here.

Additional Styles

Once you are done with those built in styles then you’ve got overlay styles which can be set and chosen. And then we’ve got the extra styles that can be set. We’re not going to cover extra styles here in this class but these exist for you to use in places that there aren’t already built in styles.

And if you watch the Styling Agility 3.2 videos you’ll see how to use both overlay styles and extra styles that we aren’t talking about in this class.

So those are the background areas that have styles created for them in the Agility skin that you can customize. What we’re going to do first is style some backgrounds in the header.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment