How do I create tabs?

krle · April 20, 2023, 7:18pm

Hello forum! First post here, I’ve been trying to create this for the past hour, would really need someone’s help, I know there is a way but I cannot figure it out, pleease help

Pakic · April 20, 2023, 8:02pm

Hi krle, welcome to the forum

Its pretty easy to create tabs in Divhunt, just you need to have a proper structure of tags.
Follow next steps to create tabs:

Step 1: Create correct structure of elements

Structure needs to be like on a screenshow below.
First div should be holder (Tabs), then we have two divs, one that is holding buttons (Tabs Buttons), and one that is holding all content (Tabs Content).

Then inside of each of those two divs, we should have exact same number of items. You will see in screenshot below, that I have 6 items as ‘Tab Button’, and I have 6 images (Tab).
But keep in mind, inside of in this example ‘Tab Button’ you can put anything you like. Also instead of an image (Tab) I could’ve put div that has many items inside. That part is on you.

Step 2: Apply transform Tabs

Now click on ‘Tabs’ layer from an example above. And go to Transform settings (screenshot below) and set transform to Tabs.

Options:

You have 3 main options for tabs:

Opened tab - number of tab that is initially opened, if you enter 2 for example, it will show 2nd tab, both in builder and on a website. If you want easily to edit all tabs quickly, you can enter ‘*’ in that input, and all tabs will be visible.
Animation - Simple animation when switching tabs on live website.
Duration - Duration of animation above. If you set animation to none. This doesnt have any effect.

You are all set, enjoy!

krle · April 21, 2023, 5:18am

oh wow, didnt know that, thanks!

Tariq · August 14, 2023, 7:12pm

Hey Pakic, I tried to create tabs using your instructions but I am not able to create the tabs. I even can’t find the Tab module in Elements. Can you please create it and add in the elements or help me in creating it? I am struggling so much with specially Layout for mobile responsiveness. Divhunt should automatically adjust the mobile responsiveness like how other builders in WordPress do.