Before we begin styling the home page of this Professional Services Website we are going to start off with an overview of the Agility 3.2 Skin Design options.
You get to Agility’s Skin Design options by coming over here to Skin Design. One of the things that makes Agility so powerful is the very large range of Skin Design options that you have.
Color Scheme System
It starts off with a color scheme system and this is, I believe, the most sophisticated color scheme generation system of any skin in Thesis. When we start talking about the color scheme generator I’ll explain to you why but primarily what this does is let you pick all the colors for your site. You’ve got around 4,000 options. There are many places where you can apply those colors.
So we have the color scheme generator and typical font styles. You’ve already seen that where we set the typical font family and the typical heading font family. But now, in terms of fonts, we have a quite diverse array of things that we can set.
For example, we can set up the typical list style or the typical link style. We can set up page titles. When you’re setting up a page title you can choose the font, the font size, one of the existing skin colors or you can enter your own color which I do not recommend.
I recommend that you use the color system because it is so much simpler for you to fix or change when you decide you want to change your color scheme. It’s a way better option than entering individual colors.
And then you’ve got a bunch of control over font weight, font style, font variant, text transform, etc. There’s just a ton of stuff you can do. And then page titles sometimes are links so when they are links you can set their link colors and their link decoration and their hover colors and set up margins and things like that.
The text styles are all different depending upon which one you are choosing here but they have a lot of commonalities.
The same thing is true with Menus. We’re going to talk about menu styles here in a little while but essentially there are 4 built in menu styles. There’s the header menu, there’s the typical menu, main menu. There’s a menu if you want it in the header. There is a menu in the footer and there’s a fourth one that is the secondary menu which you can use anywhere you want.
There are a ton of background areas that you can use in here. For example, there’s your overlay styles. But there are tons of different background areas that already exist that you can style plus there’s the ability for you to create 5 other background styles for things that don’t already have a background style assigned to them.
We have widget styles. Again, you’ve got a bunch of built in widget styles like the main sidebar widgets, the footer widgets and header widgets.
And then there are feature box and attention box widgets if you want to use widgets in the feature box or the attention box.
There are a couple of different supplemental widget styles so you can come up with a couple of totally custom widget styles as well.
There’s a bunch of styles for text areas which we probably won’t be talking about today but you can learn all about in the Styling Agility 3.2 videos.
Styling Call to Action
Here’s where you can set up Call to Action styles. So style 1 background, heading, message, submit button, email form labels. You saw those call to action styles earlier. Here’s where you would create a style.
The same thing is true with icon styles. We haven’t really talked about icon styles but you have a number of built in styles that you can customize and select from when you are using an icon. And to learn all about that just look at those Styling Agility videos.
Media Query Options
We also have Media Query options. This is for more advanced users but this allows an advanced user who understands how media queries work to be able to put their media query code in exactly the right spot so it does the job they want it to do. You can change font sizes for the standard Thesis text elements and HTML headings can be changed here and then you can put any of your own custom code.
Miscellaneous Skin Configuration Options
And then we have miscellaneous skin configuration options which we are going to take a look at here a little later. One thing I’d like to draw your attention to is this Scripts section. You can add or remove script to the theme which allows you to have greater control of how fast the page loads and that sort of thing.
You could remove the jquery script. This automatically already removes the emoji script so if you want to add that emoji script back in you can include it. These are a little bit more technical for advanced users.
Skin Dimension Options
And then Skin Dimension options we’ve already looked at when we set the typical desktop width, content width and sidebar width. It does turn out that there is some other dimensional things that you can set but none of them are relevant to what we are doing with this Professional Services website so we aren’t going to talk about them. You can learn all about them in the other Agility 3.2 videos.
That’s my summary of Agility 3.2 Skin Design Options. And with that done I’m going to answer questions.
Call to Action Boxes and Featured Content Boxes
Richard asks if I would differentiate the different purposes for Action boxes vs Feature boxes. Well neither of those two are actual things in Agility. What I think you are referring to are the Call to Action boxes and Featured Content boxes and they are not related to each other in any way except that they can be chosen from Skin Content.
A Featured Content box displays a single post as I showed earlier. A Call to Action box displays a Call to Action which has nothing to do with posts. It’s a sales pitch with a button to push to get a visitor to do something.
So Call to Action box has a call to action in it and a Featured Content box is a way of displaying a single post or page like we’re doing on the front page. Both of them can be chosen as a kind of content in the content grid system.
Agility Skin vs Beaver Builder
David asks “does this operate in place of or with beaver builder? Must you activate beaver builder to use this one?”. David, this has no relation to beaver builder at all.
You could use Beaver Builder here but I have Agility designed to be used on its own. It could be used with Beaver Builder but you wouldn’t. Beaver Builder builds individual pages whereas the Thesis Theme and Agility Skin build templates that can be applied to many different pages.
So if you were going to characterize the difference between Beaver Builder and Thesis you would say that Beaver Builder is a page builder and Thesis is a template builder. Sometimes a template only displays a single page and so at that point the difference between them is obscured. But often many pages are displayed using one kind of template.
How WordPress and Themes Work
David also asks “is this the only theme available or may I use WordPress also?”. David, I think you probably have a misunderstanding of the relationship of themes and WordPress or I misunderstand the question.
But Agility 3.2 is a Skin and it is a skin for Thesis 2.3. And Thesis is a theme for WordPress. The typical mechanism for customizing a theme in WordPress is to have a child theme like Genesis has. Thesis doesn’t have child themes it has skins. They function essentially the same as a child theme. They aren’t the same but you can think of them as analogous.
If you don’t understand any of that terminology then you should look at Lesson 6, Install Thesis and Choose a Skin, because that lesson talks all about that kind of stuff.