Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 14 – Example – Add a Widgetized Feature Box

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Since we removed the author’s name, let’s make this Feature Box widgetized instead. We can create a feature box widget area by coming down here to Widgets and calling it Feature Box Widget Area, say OK. Save in the template. We don’t want it in the page template so we’re going to have to go back over to front page. That’s where we have our feature box.

Open up our Feature Box and we’re going to drag the Related Post Query Box out and drop in the tool box. Come back over and grab our Feature Box Widget Area. Shift+drag this and drop into the Feature Box. Save that.

And now we’ll come over to Appearance and Widgets. We have a Header Widgets and we’ve got a Feature Box Widget. Let’s see what plugins do I have installed? Unfortunately I don’t have anything to show here, I was going to put a slider in there but I’m at a wrong place… which is okay, let’s just go someplace else and do it.

I am going to manage skins, we’ll go ahead and activate Classic Responsive. Then go into the Skin Editor and go to our Front Page, and create an HTML Container called Feature Box. Give it an id of feature_box.

While we’re at it, we will create a widget area. Shift+drag that into the Feature Box. Shift+drag the Feature Box into the Content Column, save the template. Bounce back over to Appearance and Widgets. And then in my Feature Box Widget Area, I will add a Meteor Slides Widget and now we can visit the site and the feature box is going to have the slideshow in it.

And if I want the slideshow to be larger, I can just take it out of the Column and just put it in the Main Content section. So since I have the Content Column now, let’s take it out and put inside of Columns instead. In fact, it doesn’t even have to be inside our Columns, it could be entirely outside of everything, it could be directly below the header. Save it. Now the slider fills the entire width of the skin.

0 Comments… add one
0 comments… add one