Build Your Own Business Website header image

Overview of Agility 3 Settings

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’ve just gone over the Appearance and Layout for Agility 3.2 so now we are going to do a quick overview of the settings. I have a demonstration site site setup here where we can look at the settings, www.agilityskin.com.

Skin Content

First and foremost, you have Skin Content and Skin Design. These are generally included in most modern Thesis Skins but the older Thesis Skins don’t have these.

Display and Content Options

Skin Content has the display options where you can specify what you want to happen. It has the display options and then it has content options.

I have reconfigured the Agility 3.2 content options so it’s clearer what’s going on in each of these sections. This used to be just one long list of links but now you can see that these are the Typical Header Settings here. These are the Typical Footer setting. This is for the Front Page. Here’s the Notice Bar, Single Post Settings, the Home or Blog Page Settings and Archive Page Settings.

Skin Display and Skin Design

We have some site-wide settings that can be made over here. As Pros add their own settings or as people getting into the Skin Editor and add their own, the list will show up down here below User Add Boxes. So that’s Skin Display and Content Skin Design.

Color Scheme Generator

It’s got the color scheme generator up at the top. The color scheme actually has 21 colors in it. Every time you’ve got a choice of colors you can choose any of these colors and then here in Skins Design we have options for all different types of the typical font styles. We have options for all of the setup of background areas including options for overlays and options for extra backgrounds that don’t exist today but you might want to create.

Menus

We have options for menus, both the menus that we already have in place like the main menu or a header menu or the footer menu. We also have a set of styles for some other menu that you may want to use. Then we have some supplemental styles that can be applied to any of these things if you really want to drill down and make a menu look quite a bit different instead of using the default menu set up.

Widget Style Options

In Widget Style Options every predefined widget area has a set of style options. You can style the widget text, you can style a link, you can style the list, you can style the headings, you can even style the background for the widgets. That’s for the main sidebar, footer, header, feature box widget, attention box widget, supplemental widget.

Then we have a couple of supplemental setups where you have essentially style 1, style 2 that you can apply to widgets that are in these areas. They can even apply to the widgets that are in these areas but that you want to style separately.

Font Styles

Again, I operate under the assumption that some people are going to want to have a whole different set of font styles for some things. Perhaps you’d want this for a landing page where you want to change up your font styles. So I provide you with a couple of custom text styles, text area 1 as typical texts – links with headings, subheadings, subheading section titles and background.

Then it has adjustments for tablet portrait for phone landscape and for phone portrait so you can really drill down on your styles for a landing page, for example. There’s no place in the Skin automatically that these apply to. This is something for you to use when you decide that you want to take it further.

We have three different call to action or styles that again, allow you to style the background, the heading, the message and submit button. If it’s an email type then you can style the email form labels as well. We’ve got three different styles that you can apply to those.

Icon Styles

In icon styles we’ve got social icon, we’ve got the sort of plain typical icon and then we’ve got these other configurations: circle positive, circle negative, square positives, rounded square positive and negative. You can use these to style the icons and choose a style to apply to an icon.

Media Queries

Media queries. If you’re using the full width style for your website then you can define media query for when somebody’s viewing it only in 1280, 1140 and 1032. It’s actually not showing that.

Plus media queries for various devices and you can customize Thesis text elements. You can also customize HTML elements and you can write custom code to go into there.

Then we’ve got some miscellaneous Skin Configure Options that we are going to talk about tomorrow and Skin Dimensions that we’ll also talk about more. There are some dimensional considerations that can be managed here. So, a pretty big set of options in the Skin Design.

Agility Skin Social Profiles

Then we’ve got Agility Social Profiles. Now Agility Social Profile Links are links from your website to your social networking sites. That’s these here on the screen. These are social profile links. If you click on it will take you to one of my social profiles.

How to Add Links

The same thing is true in the sidebar. These are the social profile links that go off and you can configure which ones show up simply by putting a checkbox. If you don’t put a checkbox in any of them, nothing’s going to show up. Then once you put the checkbox in you can put the URL of your social profile there.

Custom Images

You can also use custom images. So, if you don’t want to use the Font Awesome icons, if you’ve got little icon images that you want to use instead, you can put the URL of that custom Twitter image or custom Facebook image in here. Those will then be used instead.

Custom Social Networking Sites

If you don’t live in the US, say maybe you’re in Holland and there is a social networking site for Dutch-speaking people that you want to include there. In that case, you can use this other social profile link to set that up. When you do that, it’s going to bring up the link title of the custom site and then you can put your image in here to reflect this custom social profile.

Will Not Slow Your Site Down

And, by the way, this loads no JavaScript so there’s no big page load on these things. They are simply links to the site and so these will never slow your site down.

Agility Skin Social Sharing

On the other hand the Agility social sharing links allow you to choose which social sharing links to display on the site. You provide a link for them and you can enter text for that. Let’s come down and look at this. You can change this Twitter to tweet this or change Facebook or LinkedIn or Google+. You can change it here.

These fire the minimal amount of JavaScript in order to share properly. These are designed really to work with JetPack’s social sharing facility and with Yoast SEO social sharing facility. I don’t recommend you use JetPack but if you’re using Yoast SEO then these will piggyback onto the stuff that Yoast SEO is doing and won’t load their own code and will provide the Yoast SEO stuff when you click on that button.

So it’s very lightweight, very quick to load and has all the minimum stuff necessary in order to properly share the social links that you want to share.

Agility Skin Restore Templates

We looked at restore templates. That lets you restore these default templates. I’m saying that was no fanfare but this was a huge undertaking to actually accomplish this and I hope people find it useful.

Agility Skin System Status

I also added an Agility System Status. I wanted to make sure that during the conversion process especially from 3.0 to 3.2, that if something went wrong I could come and look at the settings. I could have you print this out for me or email it to me and I would be able to see what was going on in the background. So that’s what this Agility System Status is for. If we have a problem after the upgrade this will help me troubleshoot it.

Agility Skin Page Details

Agility Page Details is something that we looked at very briefly earlier. Again, every page and post on the site has this section called Agility Page Details.

Oh, we didn’t look at Schema but we’ll go back to that in just a second. But it lets you specify Schema different than the default one that you set. It lets you enter an icon so that if you want to use this page’s icon you can do so. It lets you add responsive video.

Page Specific Widget Content

It also gives you this thing called Page Specific Widget Content and the Page Specific Widget Content will only show up on this page. Let’s take a look at my site, www.byobwebsite.com so you can see an example. This is the Agility Skin page and this cheat sheets area is page specific content so it won’t show up on any page other than this page.

I’ll edit this page, then we scroll down to that page specific content. You can see that nice visual editor and I just put in the download links for each of those pdfs, a little title and then I’ve got responsive video on this page so I checked that box.

Now if I come back over to appearance and widgets and look at my main sidebar, I’ve got this Agility page specific content cheat sheets. I gave it a title. I said I want to show the widget title and that’s why that is showing up on that page and why this isn’t showing up on any other page. The page specific widget content is a very useful tool.

Agility Skin Schema Settings

Finally, let’s just go back to Agility Schema Settings. This gives you a chance to choose a default Schema for every post type. So here I said CreativeWork for posts and Article for pages. The custom CSS post type that comes with something, I’m not sure what now but the custom CSS post type is not going to use a Schema and neither is a Changesets post type and so I just leave those as no setup.

BYOBWebsite is soon going to be taking advantage of the new Google courses mark up and when I do, I will be changing some of the stuff up just a little bit. But I have article for post type, article for page, not using other custom CSS or Changeset. For live answers, this is going to become Questions because that’s a kind of markup that I haven’t implemented yet.

This will be courses, this will be article, the case studies will be article and the what’s new announcement is going to stay article. The events are events and all the rest of this doesn’t need any Schema because these are just post types that are created by other things.

So you can set up your defaults and then when you’re on the page and page details if you feel like it should be different then you can change. And that’s an overview of Agility 3 page settings.

0 Comments… add one
0 comments… add one