Build Your Own Business Website header image

J Shortcodes Plugin – Part 11 How to Add Tabs to a Sidebar

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.

This is Part 9 of the J Shortcodes Plugin Series and in this session we show how you can put tabs in a sidebar using a text widget and how you can configure its width so that they sits nicely side by side. We also show how you can place a video inside the tabs in a sidebar by placing the embed code in the text widget.

Video Transcript

Okay so the next thing we’ll do now then is…turned on the wrong program. The next thing we’re going to do is put this in a sidebar. And so, I’m going to take the… well, I’m going to take exactly the same thing here. Copy and then under Widgets, Appearance and Widgets, I’m going to add a text widget to sidebar 1 and paste that same code in. We’re going to get rid of the width because that will break it. If we hit save, we’ll come back over and refresh this page. Okay, so we need to make our tabs a little bit smaller for this in order to make them work right.

So we could say… we’ll just get rid of the there. So 1st tab, 2nd tab, and then 3rd tab. Save and now, all 3 of those things should sit nicely side by side like that inside of this widget. And I’ll bet you that inside of this, I could put a YouTube video.

So… well, rather than a YouTube video, let’s just grab a Vimeo video. Actually, first let’s make sure that we are… and I know what size this wants to be. Design Options, Columns so at 300 pixels wide so I go to Vimeo and let’s see, let’s just search for byob website. Okay, “How to Center the Thesis Navigation Menu”. I think I allow embedding of this so let’s embed it and let’s customize the embed options. I want it to be 300 pixels so copy that.

If we come back over to… let’s say tab 2 and instead of that text, if we put this embed, I bet you the embed will work. So we come over to here and we paste that embed code and hit save and refresh it. Yeah, it does work. I might need to specify a width for this. I might actually need to make this one smaller so that it fits inside of the padding on this because it looks like this has got some padding on either side. Either that or make my other thing wider.

But you get the idea you know, that you can put other things besides text in here. You could put videos in this or anything else that you can embed into a text widget can be placed inside of this.

0 Comments… add one
0 comments… add one

Leave a Comment