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 we’ve finished adding and removing Post/Page Options in Thesis 2.1, we’re going to do something very interesting which is to create a feature box on the front page that is going to be widgetized. It’ll have a slideshow or a slider in it and it’s also going to have a call to action. It’s going to be a 2 Column Feature Box.
Existing Boxes and Creating New Boxes in a Template
Now, we do that obviously in the Skin Editor and in a template that we want it on. We want it in our Front page so the first thing to do is to create a container for the feature box. So we come over here and select the box to add and notice how this little thing, this asterisk indicates a new box? That means we’re creating a box that doesn’t already exist.
This box, Archive Intro, Home Post Box, Post Comments, Previous and so on, those boxes exist and could be re-inserted in the page simply by selecting it. So if we choose Byline and we add that box back in. We could shift+drag Byline back into the Headline Area and it would show up just like it did before. We’re not going to do that but that’s how you can do this kind of thing.
Create the Structure for Feature Box
What we’re going to do is to add an HTML container. So we’re going to create a new HTML container and we’re going to call it Feature Box. It doesn’t matter what you call it, I would call it something that makes sense to you though. Let’s shift+drag it over here into Container and then down into position, below the Nav Menu. Then we’re going to create a column for the widget and we’re going to create a column for the call to action.
Add HTML Boxes Inside the Feature Box
So, I’m going to create a new box again, an HTML container box. Let’s call it more specifically Left column and while we’re at it, we’ll do that one more time. We’ll create a new box called Right column. You could leave these all as containers but then you’d never know which one you were talking about.
So we’ve got a left column and a right column, we’ll shift+drag the right column and drop it into the Feature Box and then the left column and drop it into the Feature Box. Open up the Feature Box, you can see they’ve got a left column and a right column here and now that we’ve got our structure in place, now we’re going to put the content in.
Add Content Areas to the Feature Box: Widgets Area
The content for the left column is going to be a widget area so we’re going to create a widget area by coming down here and selecting a widgets box. Let’s add that box and then we’re going to give that widgets box a name and the name is going to be Feature Box Widgets. This name does matter because this is what the widget is going to be called in your dashboard so make sure that this is definitely descriptive. I’ll call it Feature Box Widget Area. Say save to that then I’m going to shift+drag it and drop it into the left column.
Add Content Areas to the Feature Box: Text Box for C-T-A
Then I’m going to create a text box for the call to action so we’ll come back down here and create a new text box. I’m going to call this text box “Call to Action”. So we’ve created our call to action and I’m going to shift+drag it and drop it into the right column.
Add Definition so Thesis Recognizes the Content Areas
Now we’ve got a left column and a right column with a Feature Box Widget Area and a Call to Action and if we save this template and come over and look at the page, lo and behold, it doesn’t look like it’s in columns, right? Because the widget box is a widget area sitting on top of the text box.
Add Class and ID Definitions to 2 Column Setup
The reason is that we haven’t given it any information about how it should be a column, right? So, that’s what we have to do next and what we’re going to do is borrow the definitions from Thesis Classic. Thesis Classic has this 2 Column setup already with responsiveness.
It has a container called Columns with a Content column and a Sidebar column and all of these things work responsively perfectly. The way Thesis knows how to style them is because it has assigned them classes. So the container has a class of columns that is, this columns container has a class of columns and then the left column has a class of content and then the right column has class of sidebar.
And that’s what we’re going to do in our Feature Box, we’re just going to do exactly the same thing. We’re going to come over here to our right column and we’re going to give it a class of sidebar, we’re going to come over to our left column and give it a class of content and then we’re going to come over to the Feature Box and give it a class of columns.
As it turns out I’m also going to give an id of feature_box and it is not my intention here to teach these concepts of CSS in this class. We’ll be teaching CSS later and actually, if you watch the Beginner’s Guide to the Thesis 2 Skin Editor, you’ll get a lot of information about this there even though some of the things are a little bit different. This here assumes you already understand the whole class, id thing for CSS so if you don’t, we’ll touch on it later.
Anyway, we’ve given the Feature Box an id of feature_box and a class of columns and then we’ve got in our left and right columns the same classes as the content column and the sidebar and now, the columns will actually look like columns because it will be borrowing exactly the same code as these columns have.
Add a Slideshow Widget to the Feature Box
Now that we’ve done that, let’s just put some content in there and then we can check its responsiveness. We’ll come back over to our Appearance and Widgets panel and now you can see we’ve got our Feature Box Widget Area. Remember if we had named that Feature Box Widget Area “Fishsticks”, it would show up here as “Fishsticks”, so this is one of those cases where the name is important just because it ends up being a name shown here.
Add Padding Around the Widget Area
We’ve got a meteor slideshow set up in here so I’m going to take a slideshow widget and drop it into Feature Box and refresh this. Now that we have that happening and the other thing I want to do is put a call to action here. Obviously it would be nicer if this had its padding, right?
Let’s take a look at where it gets its padding from. Come back over to the Skin Editor for a moment, the padding that happens in the content column comes from this Page Post Box. So what we’re going to do is to borrow the post box class for that for our left column and actually, not for the left column but actually for the widget area.
Take this Feature Box Widget Area and what we’re going to do is give it a class of post_box at which point it automatically gets all of the padding assigned to the post box and makes it look more like that regular column. Now if we refresh it, it’s got the 27 pixels of padding around it like everything else does.
Add the Call-to-Action
Then the other thing we have left to do is to put in our call to action, our text box. The first thing actually, was have to get a call to action. I’m going to go to my AWeber account because this is going to be an AWeber signup form.
We’re going to go to my generic registration form. This is it here, I created it for this so. We’ll go to step 2, to step 3 and install my form. We’re going to grab the javascript for that here and then come back over to Thesis content and open up my Call to Action box, drop in that javascript, disable the p tags and save my options.
Refresh it and now, I’ve got a nice little signup form sitting there in the Feature Box with my rotating slideshow there sitting on top of the content. The nice thing about that whole thing is that it is responsive.
Check the Responsiveness
Let’s come back over here to the responsinator and look at this site here. The slideshow has reduced in size and the signup form needs a little bit of work. We’ll work on that so it doesn’t overhang here. We’ll do that in another section but at least it’s stacked side by side nicely and then everything else works as it worked on Monday. It’s all nice and responsive.