Build Your Own Business Website header image

Setup Agility 3.2 For the First Time

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.

Now that you have a background on the settings and page layouts for Agility, let’s work on setting up the Agility Skin for the very first time. I have a site here that has lots of content that is running Thesis classic so I’m going to install Agility here.

Upload and Add Agility

Go to Manage Skins and I’m going to upload a new Skin. Now add the Skin. So we’ve loaded the current Skin. Now let’s come over and look at what our site looks like right now. Whoops, this is not actually what it looks like when you install it from scratch because it usually doesn’t have these things populated. I must have installed Agility at one point.

What you would end up with is nothing here when you install it from scratch and nothing here except for text. There’s the default text in these and you wouldn’t have anything else although you would have this here because this does come over setup and you’d have whatever was on your front page. But these areas just wouldn’t be populated.

Anyway, it’s going to look a little less than completed and the reason is that you really need to know what your content is for each of these three areas. Even for this little this little query box down here, you need to know what the content is going to be before it can display it.

Set Up Six Posts

Really the first thing you want to do is set up six posts. If you want it to look like this where you’ve got three sets of icon boxes and 360 featured content boxes then you need to set up six posts and have those ready to attach to each of these.

Create Two Menus

Once you’ve done that you’re also going to want to create a couple of menus. You want to create a menu for the top menu bar and you’re going to want to create a menu for the footer menu.

Dimensional Decisions

Once you’ve done that then you’re going to want to make some dimension decisions and you’re going to make those over here in Skin Design.

Choose Typical Desktop Width

The first decision is what’s my typical desktop width? Right now the desktop width is set for 1140 but I’m going to take it down to 1032.

Choose Typical Content Width

My typical content width is set for two-thirds width that’s the way I want it. My typical sidebar width is set for one-third width and that’s the way I want it. With that sizing decided I’m going to save my dimension options.

What will happen now is that all of these font sizes will have been recalculated based on the new width. Let’s reload this and now we have a smaller font than we used to have. We have a smaller margin and padding than we used to have because we went down to 1032. Let’s just make sure we actually did go down to 1032. No we did not, not yet. There it is now. I didn’t think it looked different but now you can see the fonts are a little bit smaller than they used to be.

Set Image Sizes

Once you’ve made those decisions then you can set the image sizes. You want to set those early on as possible. We already have images in here and they’re already the wrong size. So if you’re putting this on an existing website like we are here, you’re going to have to regenerate the images so that they fit the size that we want them to fit.

Let’s come back over here to our settings and media. I’ll pull up our Recommended Image Size cheat sheet. You see that for A 1032 pixel size the large should be 647×1032, the medium should be 320 and the thumbnail should be 200×200. Let’s change those. We want to crop that. The width for the large size was 647 and we’ll just let it be nice and long. This one was 320 and then we hit Save Changes.

Regenerate Thumbnails

Because our images were all different sizes we need to regenerate thumbnails. Let’s go to plugins and add new. I’m going to search for regenerate thumbnails. The one I like is by Alex Mills so I’ll install that.

Why I Recommend this Version

The nice thing about this one is that it resizes them one at a time which meant I was able to resize 3800 images on BYOBWebsite without overloading the server. It took a couple hours but it didn’t take a great deal of server bandwidth because it didn’t try to do them all the same time. It was a trivial operation for the server. That’s really the big reason why I like using this regenerate thumbnails. I’m going to deactivate this YouTube widget responsive.

What Happens When You Regenerate Thumbnails

Then we can come back over to tools and click on regenerate thumbnails. When we regenerate all thumbnails, this will take all of my images and it will create the three WordPress default images and the two Agility custom images for every single image that is in my media library. I have a 169 images in the media library so it’s going to take a couple of minutes for the plugin to do that.

Thesis Email Box for AWeber and MailChimp

While the images are processing, let’s take a look at the Thesis Email Box. If you are going to use the Thesis AWeber or MailChimp box this is the time to install it before you do any template saving or anything like that. So at the very beginning if you plan on using MailChimp or AWeber to capture leads then I would come over here Thesis and manage boxes and upload that box.

Setup the Box Before Saving a Template

It’s going to tell me I’ve got to upgrade. I didn’t realize mine wasn’t current so let’s update that one. We’ve got our box updated and the nice thing about putting it in right now is that Agility comes with this box preset up in a variety of different places. You lose those presets if you save a template without this box being installed. If that happens you have to go in and put the box in manually.

So if you’re going to use these, this is a really good time to add the Aweber or MailChimp sign up box. Since we’re here we might as well just do it. There it is. We’ve got that code and then I come over here and paste the code in. Connect Aweber. I’ll choose the Facebook page, really I don’t care about the rest right now so I’m going to save those options. Now those places that are pre-designed to take the Aweber sign in box will have it loaded.

Setup Social Sharing Profiles

Then you might as well set up your social sharing profiles because if you don’t, it’s not going to show up. I’m just going to borrow it from here so we don’t have to look mine up… so my Twitter, Facebook and LinkedIn.

Save those and then come to your Agility social sharing links. So what sites do I want my stuff shared on? I don’t really know that there’s ever a reason not to click all of them but maybe you only want to do one or two. Let’s save those settings.

Setup Schema

Now we’ll set up your Schema. If you don’t know what to do ask me on the forum but for this site I’m going to say Article and Article… where on earth does custom CSS come from? Must come from types. Anyway no Schema for any of these so just Article and Article. Save that and you’ve got all the basics done that you should set up right off the bat.

0 Comments… add one
0 comments… add one