Welcome. We are going to be making a custom tab, advanced Elementor widget, and to do that, I have gone to my dashboard and I’m going to go to new pages and I’m going to get a new page up and running. OK, so I’m just going to call this test page. You can appropriately title it whatever you want. Chances are you actually already have this open. So, awesome new page, I’m just going to get a new section here.
I’m just going to give it some padding so we have some area to work with. And in here, we’re going to look up tabs. All right. So we’re going to be using the tabs feature. So, I’m going to quickly add a little bit of styling. So we’ll just give it some padding. I’m just going to give it a little boxcutter. Now, this is totally optional. You don’t have to do this. I just want to make it look a little bit more presentable.
Okay, so that’s our tab. Our tab is ready to go. We can have unlimited tabs as much as we want. So let’s go and get our custom areas in here. Okay. So I’m going to go back to the dashboard. I’m going to go back to templates. OK, so templates on the left hand side and we’ve got our saved templates. So right now we don’t have any. And this is where our magic happens. So we can hit add I just like to go section add new section just pre-fills out that area and let’s just make some team members.
So here’s from where I already write this out previously team member dash type one. So I recommend a logical naming convention, whatever this tab is for. So team members in this example and then naming the tabs so that you can keep your sections and templates organized. Awesome. So we’re going to make two in this example. But obviously you can repeat this as many times as you want. So I’m just going to go grab a premade area like so.
Obviously you can design your own as much as you want to. So I’m gonna hit copy because I’m just going to have one on each page. I’m just going to copy that. You don’t have to. All you have to do is just go publish then I’m going to go back if you wanted to know, I’m holding down control as I hit those buttons to open them in a new tab. So I’m going to go back to our templates and I’m going to use this EA Duplicator.
Now, if you don’t have essential add ons, I highly recommend this plugin. It’ll just help this step a little bit. Otherwise you can just go add new section and repeat that process. However, EA duplicater will just sort of speed that up a little bit. So all I’m going to do is hit duplicater hit tab, too, and then I’m just going to go edit the tab too. And in here I’ll just delete that. And back in here, I just delete that.
And awesome, so I’ve got to have one with one team have a tab, too, with the next team member now to get this showing up in our tabs, we need to paste in what is shortcode. So, on the right hand side, back in our saved templates, you’ll notice we have add two pieces of shortcode that display our tabs that we’ve just made. So it’s as simple as just copying over the tab one, putting it underneath tab one and repeating that for tab two and putting that back in tab to.
So, don’t freak out if you don’t see those results within Elementor editor. Sometimes I do show up, sometimes don’t. If we go over to a live page, that’s when we get our tab, one in our tab to pulling in our custom area. So that’s how you get it set up. And now as far as designing, you can go as far as you want to fit this in with your website. So I hope you enjoyed that tutorial.
I hope it was quick and fast and to the point for you so you can get back to doing what you need to do. So with that all being said, when you do have some time, I highly recommend checking out my Elementor 3.0 First impressions. But here that goes over a lot of the new settings that are inside of the new update of Elementor. Very cool stuff, um, hopefully they fix all the bugs that are currently there. So, thank you very much for watching. I will catch you in the next year. Have a great day.
