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.

Setup Front Page Display and Content Options

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to Lesson 11 of Build a Professional Website Using WordPress and Thesis 2.3. So the first thing we are going to do today is set up the front page display and content options.

Default Front Page

This is the front page. We created a static front page and it’s got a bunch of content and display options. You can see what the default Agility Skin front page looks like.

The default has the standard header. This is the feature box area and the feature box area by default contains a Call to Action. And then this section through here is the content area and the content area takes the content from the text editor. So if you’re editing your front page and you’re writing text in the text editor that’s what goes into the content area.

And then below that is the attention box area and the attention box area comes by default configured with 3 different icon boxes.

Then below that is the featured content area and that comes configured with 3 featured content boxes.

Below that is the notice bar area which is currently set up as a Call to Action. And then you’ve got the social sharing area and the typical menu. So that’s the layout of the Agility front page as it’s installed.

Review Professional Services Front Page

Let’s take a look at what we’re going to accomplish. We are going to have the same header. We’re going to have a call to action and a content area. We’re not going to use the attention box area so we’re going to just hide that.

We’re going to use the featured content area for these featured content boxes. And we’re also not going to use the notice bar area because I don’t think we really need that for this type of site. That’s what our target is.

Settings in Display Options

Let’s come back over to Thesis and Skin Content. We really start off with the Display Options. In an earlier lesson we set the Display Options for everything else but now we’re going to set the display options for the front page.

And in the front page we are going to keep the feature box but we’re not going to continue to use the attention box area. We’re not going to continue to use the notice bar. But we will use the feature box, featured content area and social sharing links. Let’s save those and reload it. You can see it’s changed a little bit now.

Box Options

So then what’s important to know is that a lot of these are made up of the same kind of box. So, this section here and actually this section. The attention box area that we’re not using, the call to action down here, that notice bar that we’re not using and the feature box that we are using are all made up of the same kind of box. And in fact, it’s the same kind of box that is in the footer areas.

So they all have exactly the same set of options. Let’s just take a look at a feature box. You can see it’s got, again, the same set of column options and then the same set of content options as we saw in the footer.

Agility Content Grid Options

For those of you who are going to get in use the Skin Editor, this is called an Agility Content Grid section. And you can learn a lot more about it if you watch the Setting Up Agility 3.2 videos. We’re not going to talk a whole lot about it now. We’re just going to talk about configuring it.

In any case, this is the Agility Content Grid box and it gives you the choice of, again, this set of columns.

  • One column goes all the way across
  • Two columns that are split equal
  • Two columns that have a 2/3 and a 1/3 column and then a 1/3rd and a 2/3rd column
  • Two columns that have 3/4 and 1/4 and 1/4 and 3/4
  • Three columns equally sized
  • Three columns with a 1/2, 1/4 and 1/4

If you look at some of the other Agility videos you will see, for example, how to create a 3 column template if that’s what you are really after and so on and so forth.

There are lots of different column configurations available to you. You’re going to see this pattern over and over again. This is the column configuration and this is the set of options that is available to everything with this column configuration.

Choose a Column Configuration

In this case we’re using a single column. And then this content grid box allows you to have a featured content box, an icon content box, a widget area, a Thesis text box, a call to action and, as you saw last time, the copyright and the WordPress menu.

Icon Content Box

Now just so that you get a sense of this. This is an icon content box and it does allow you to specify a large icon instead of an image, for example. The icon content box has the large icon, has the centered title and a centered excerpt. The excerpt is generally quite a bit shorter than the typical excerpt. And then you’ve got the learn more button.

Featured Content Box

The featured content box has a big featured image. And this is the featured page image that I’ve talked about when I’ve talked about image sizes in Agility. It is uses the featured page image size.

It has a title. It has a regular size excerpt and it has a read more button or a learn more button. One of the things that is notable about this is that it is designed for everything to line up. So it automatically adjusts, for example, the height of the heading so that this heading actually sets the height of this one and this one. And our buttons line up across the bottom.

The same thing is true with this content here. It automatically sets the height of the content based on the tallest one so that our learn more buttons line up across the bottom as well. So it’s some of the automatic formatting that comes in this layout.

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