Build Your Own Business Website header image

Overview of the Agility Appearance & Layout

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.

I want to begin the introduction to Agility Skin 3.2 for Thesis 2.3 with a quick overview of the skin.

Agility Skin Format – Full Width Skin

The Agility Skin is a full width Skin. I’m going to zoom out on this so we can see more of the Skin. By full width what I mean is that we have elements that span the width of the browser window regardless of how wide the browser window is. These footer elements span the entire width of the browser window. Again, the header element spans the entire width of the browser window. The feature box area here spans the whole width.

That’s what I mean by a Full Width Skin as opposed to Page Width Skin where there’s nothing that extends beyond the width of the page. This is the width of the page and in a typical page width skin there would be no color, no activity on either side of this.

Page Styles

Agility has a number of page styles. We have this front page style here.

Front Page

We’ll talk about how to make it work in a bit but the front page has a header and it’s got splitters. But it also has a notice bar which is a call to action that has a special sharing feature. It’s got different types of content in different places and the big call to action, the feature box. That’s the front page style.

Typical Page

We have a regular page layout style. This style is essentially two columns. You’ve got the content column on the left and you’ve got a sidebar column on the right. And, of course the footers and the header on top of it. The header and footer obviously persist in each of these different styles.

Home Page

The home page style again has a content area and a sidebar area. The content area shows a thumbnail image with an excerpt of the post. It has a read more button and it also shows you the number of comments if somebody wanted to read the comments. Just click the comments button and it takes them down in the comments.

Single Template

So this is a single template here for the big featured image at the top. It has social sharing at the top and also has a social sharing at the bottom. It has a call to action at the bottom of each post. It’s got post navigation so you can jump back and forth. It’s got a set of related posts. This is that related post thumbnails so it’s got related posts where you display and then it has the comments section below.

It also has a call to action at the top. These call to actions, in particular this “Use a Strong Benefit Driven Headline” and these are email signup call to actions, work with the Aweber box or the Mailchimp box that DIY themes has created. It also has a little Connect With Us box here that has your social profile links on it and then the rest of these are all widgets.

Home Template

Let’s go back to the home template for just a second. Again, it has this top call to action box and connect with us. Then you’ve got previous posts and next post navigation. We have the in-post email signup form or call to action. The posts page – the blog page has the notice bar call to action and also has the same big full width sharing system.

Archive Template

Let’s take a look at an archive page. The archive pages are pretty much like the home page except it has the Thesis archive title and archive content just like most Thesis things do. Otherwise this is laid out pretty much the same and it doesn’t have the notice bar but again it has the big sharing across the bottom. It also has the signup forms both at the top and bottom.

Custom Pages

Then we have some custom pages.

No Sidebars Template

For example, we have a no sidebars template. It’s a custom template where there’s nothing on the sides. It goes all the way across similar to the front page.

No Social Media Template

We have a page without social media. There can be places where you don’t really want to have social media buttons and that’s what this does. It just takes the social media out of it.

Fluid Grid Archive Templates

Then we have a full width fluid grid archive template. Although for some reason at this point it’s not acting full width. Oh, it’s probably the zoom. Yes, that’s what it is. So there’s the two column fluid grid. It’s got the big image, big title, a typical excerpt and learn more. When things move around, the stuff moves around.

The same thing is true with the full width fluid archive. You can decide that you want just a page of these and the fluid archive does allow you to choose which stuff you want to show up here. It could be just the images and title. It could be just images. It can be anything you want really. So that’s the fluid grid. You can choose that for any archive page and that’s pretty much it for the different page layouts.

Agility Resources – Cheat Sheets

I do have cheat sheets for your use. Go over to the Agility 3.2 Skin page and I have a set of cheat sheets for you to download.

We’re going to be looking at these a little bit later today. There will ultimately be cheat sheet for the footer and one for each of the other regular page styles that have set up configurations. As you’ll see, they are 50 pages or so long. There’s a lot of work involved in creating these illustrations but you can download them here from the site and use those in your work.

0 Comments… add one
0 comments… add one