Tabs

Another great way to sort your content into categories is with the tabs element. Go to add elements, and we grab the tabs element, click, hold, and drag, and drop it where you want it to go onto the page. It generates two tabs by default, and we can add more. Let's talk about the content first. Like many other container elements, what we have here is an entire area that you can bring in any element to place within the content. It comes in with an icon, but we We can bring in columns, we can bring in text, buttons, and build it out to something that works for you within your design. If you go to the second tab, it comes with a button, delete the button, and then you have an open canvas under this tab that you can also bring in the elements that you need for it. The tab elements options are accessed here at the top right corner. We have the settings here that gives you padding margins, duplicate and delete, and then also color control over background, borders, and shadows with a hover option as well. The real magic happens when you click on any of the tabs.

To the far left in the options toolbar, you have options for the orientation and the styles and a few other settings. Let's first see how you rename the tabs and how you duplicate them. To change the label of the tab, highlight the text and type in your text. Let's do the same for this one. Let's duplicate this tab and bring in another one. And you see by duplicating it, it makes a clone also calling it new tab 02. What you will need to do is go ahead and change it to 03. If you are going to use similar content and just switch out images and text, a good idea is to go ahead and do the content exactly the way you would like it, style it out, and then start duplicating it instead of creating all the tabs. And in the end, you have to bring in that content again on a one by one basis. If you made a tab and you want to move it, you can use these arrow keys in the options toolbar to put it in a position that is more suitable. Now I'll move it again to the end.

Let's look at the options then. Orientation is set to horizontal at the moment, and we have three styles. This style detaches the label, and this one gives you a line. You can activate tabs by on clicking or just hovering over it, and it will jump to that. Spacing is between the labels at the top. Add an icon, and this will work on a tab by tab basis. So this icon will only be added to this label. Once you add the icon, you have the ability to put it at the top or change it to right and bottom. Size and spacing between the tab and the label. For a vertical one, the tabs will be on the left. Same option supply, and you can have different styling here as well. And the icons remain with the same functionality. Having chosen the vertical setup, note that in the options toolbar, this icon has changed to a line. If you selected, you can put it on the right or on the left. Let's put it back in horizontal display as this is one of the more famous ways of using tabs. For your With the text and the labels, you have your normal topography settings.

And then with colors, you have control over the background, the text, orders, and you can add a shadow. Here you also have hover settings. Let's change the background for the hover and the text to white, and then you can have active as well. Background on white and text on a darker color. As tabs can take up a lot of real estate, it is important that you go and check it out for your responsive design on tablets, and you will see here they will drop almost like an accordion style. And the same will be for mobile.