Build Your Own Business Website header image

Setup Front Page Display and Content Options

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

We’re going to start today by setting up Front Page on Agility. Just to refresh your memory, Agility is comprised of a bunch of horizontal sections.

  • The top header bar
  • The main header
  • The top menu bar
  • Feature box area (front page only)
  • The content area
  • The attention box area
  • The featured content area
  • The notice bar area
  • Full width social sharing area
  • Top footer area
  • Bottom footer area

Front Page Setup Doesn’t Affect Other Pages

We just finished setting up the header area which is set up for the whole site. And the same thing is true for the footer area. But when you set up the front page you are just setting what will be on it alone.

To that end we will be setting up the feature box, the attention box area, the featured content area and then the notice bar area. And all of this is set up from inside the Skin Content. Unlike most Thesis Skins, you don’t have to go into the Skin Editor in order to make these kinds of changes.

Where to Find the Settings

Let’s go over here to the dashboard and go down to Thesis and Skin Content. The layout here starts with the header area so it’s options are all number 1. Then you get the typical footer area which are all numbered 2 but we’re actually going to talk about the footer after we talk about the front page.

The front page settings all start with the number 3. Listed here are the feature box, attention box area and feature content area.

Then the notice bar settings is number 4. It’s separate from the Front Page Layout because it actually shows up in a bunch of places on the site so wanted to have it sitting off on its own.

Front Page Display

Setting these up starts off with the Display Options which is on the same page here as the Skin Content. Let’s go to the top of this page and under Display Options choose “front page display”. This is where you can turn on and off the five sections available to the front page. Those are the feature box, attention box area, featured content area, notice bar and social sharing links.

Decide which Areas to Turn Off

So, if you don’t want all those sections you can turn them off and then save it. The sections you unchecked will no longer appear on the front page. For lots of websites you aren’t necessarily going to want all these sections. This is the first place to start.

Choose Content For Front Page Areas

Once you’ve decided which one of those things you want on and off you’re going to go back down to the front page settings and begin deciding what the content is going to be in each one of these areas.

I told you earlier that this header is made up of the Agility Easy Header Box. Well, the footer and the front page are made up of the Agility Content Grid Box. It behaves very much the same.

Feature Box Options

Let’s start off at the top with the feature box and the first thing you do is choose a column configuration just like we did with the header.

Choose Column Configuration

Again, you can either choose two columns where they’re variously aligned with equally sized, two thirds and one third or one third and two third, or three-quarters and one-quarter and so on and so forth. You can choose three columns in various configurations or you can choose four columns equally sized okay.

Choose Content for Columns

Once you’ve chosen the column configuration then you choose the content for those columns. We’re going to do two columns equally sized here. Now that we’ve done that, we can choose what our content is going to be in each one of those columns.

It comes default with a call to action chosen for the feature box. You have many choices you can make here. These are your choices.

  • Featured content box
  • Icon content box
  • Widget area
  • Thesis text box
  • Call to action
  • Copyright
  • WordPress menu

For the more advanced folks who want to do something in the Skin Editor they can choose “None I’ll Drag Something There Myself”. But for most people are going to use one of these elements. For this example we’ll stick with the call to action here. Then for the second column we’re going to choose a widget area.

Overlay Element

Once you’ve chosen the content for those columns then you can choose whether or not you want to add an overlay element. The overlay element is this dark coloration that covers the top of this background image.

I’ll show you an example on the demonstration site. Go over to Skin Content and come down to the feature box and uncheck the overlay elements, save the options. The image lightens up quite a bit, right? And the text is much harder to read.

Typically the purpose for an overlay is to make it so that the text stands out better and by default if you don’t have an overlay the text is just a normal color. Once you put an overlay in, the text goes to a lighter color.

Let’s come back to our settings and add our overlay element. The text here goes to white and that background goes darker. There are other ways to control the color of this text and we’ll talk about that when we move on to styling with Agility.

This is essentially the default behavior when you choose an overlay. And for what it’s worth if you’ve styled that a light-collared overlay, this text will be dark because it knows and calculates the color of the text from the color of your overlay. Light overlays get a dark text, dark overlays get a light text.

You can also choose the overlay style. You have four choices really. You can leave it on default or you can set up an overlay style 1 through 3. Those overlay styles are in the Skin Design section and we’ll talk about the style options you have for those later. But you would apply those overlay styles here.

Currently, overlay styles 1, 2 and 3 are all blank. There are no actual styles set up there for you. They are for you to set up and apply or you can enter a custom class. Let’s say you’ve got a piece of custom CSS that you’re using for your overlay, well you can just add that class to this and it will apply that class to the overlay.

Add Heading Above Content Grid

The other thing you can do is choose to add a heading above the content grid section. We’re not going to do that here but we’re going to do it a little bit later.

Options for Content Chosen

Let’s go back to two columns, equally sized with the call to action and the widget area and save our options. Once we do that when we go back over to Skin Content, we have one more set of settings to apply. Those are the options for that content that we chose.

There are no options for the widget. There’s nothing extra to do except put widgets in it. You can see that we do have the widget area over here now.

The widget area naming convention is pretty simple. It takes the name of the box that it’s in. Since this is a feature box, it’s taking that name then it takes the column that it’s in. So if you’ve got three columns in this feature box, they would be Column 1, Column 2 and Column 3.

Just like it is in the footer here, 2a Footer – Column 1, 2a Footer – Column 3 and 2a Footer – Column 4, because column 2 has got something else that doesn’t have a widget area then.

While there’s no setting for the widget there is a setting for the call to action. Let’s click on it and you have these various choices, essentially three different choices when you set up one of these content grid boxes. You are choosing the column configuration, you are choosing the content for each column and then you’ve got these other things that you can set as well.

Once you’ve chosen the column configuration and the type of content then depending upon the type of content, you will have one more set of settings to do in that column.

The Featured Content Box, the Icon Content Box, the Thesis Text Box, the Call to Action Box, Copyright Box and the WordPress Menu all have settings. In this case the only two that don’t have settings are the Widget Area and the None, I’ll Drag Something There Myself. Otherwise each of these is going to have some kind of setting that you set over there.

Attention Box Area

That wraps up the feature box so let’s move on to the attention box area. We said it’s three columns equally sized and we decided to use an icon box in each of them. We don’t want an overlay element in this case because there isn’t a big background image.

But we do want a section heading and so we can check this box. When we check the box, we get a section heading here so if you don’t want a section heading there you just turn that off.

Let’s see let’s refresh this. You can see here it is set up as two-columns with the widget area. So you could drop a widget here and that widget would sit on top of this and you could put a video in this widget.

Notice also that the font size automatically changed because of the size of the column. You no longer have this massive text now that the font size has changed because of the width of the column has changed.

Let’s come back over to that, go back to a single column. There’s our heading. Let’s turn off that heading in the attention box area so you can see that. Actually, it still has a heading in it, that’s what it is. You also have to cut the text out. So there it is without heading right.

Then in that third section you also are going to be setting up the icon content box. We chose that so now you’ve got options to set for that.

Featured Content Area

The third section is exactly the same. It’s the featured content area and again, three columns equally sized. But this time it’s a featured content box instead of an icon content box and it also has section heading. You can see that section heading right there.

Notice Bar

The last one is the notice bar and the notice bar can be set up any way we want. It is set up as a single column, it has a call to action, and it doesn’t have any overlays or anything like that. Let’s go back over and look at the settings for that. You see the call to action settings that exists anytime you have a call to action. And that’s basically an overview of how the setup for the front page works.

0 Comments… add one
0 comments… add one