Quick video of how to add your Blocks

Wherever you’d want to start your tabbed content, drag an “Awesome Tabs” Block. You’ll get a form, where you have to enter the following:

1. Start/End
   Select the value “Start”, since we’re starting a new tabbed content.
2. Panel ID
   This is a panel within your tabbed content. Tabbed content has tabs, and we’ll be starting our first tabbed content panel. Enter a value that makes sense. If the tabs is about chairs, name it “chairs-panel-one” for example. This ID will be applied to the panel element, so it has to be unique on the page. Don’t use the same value for multiple panels. If your tabs is about something general, you could name it “tab-panel-one” too.
3. Panel Title
   The title of the panel, that will be clickable. Tabs have clickable titles, so this would be the thing you click. You could use HTML too, to add FontAwesome icons for example. Combine icons with text, just text or just icons… whatever you please!
4. Tab ID
   Since we’re creating a panel for the complete tabs, we’d need to know for which tab parent element we’re creating this for. So we can apply a tab ID here. If you named the panel ID “chairs-panel-one”, it would make sense to name this “chairs-tabs”. Again, this will be an ID applied to the parent tab element, so it’d have to be unique for the page. The value we enter here, is something we can enter multiple times to add multiple panels to this very same tab.
5. Fade Effect
   This will immediately work for Bootstrap themes, since it will add the “fade” HTML class to the element. Other frameworks may not have implemented this. You can add CSS yourself to do something with the tabs and make your own animation for it.
6. Active
   As expected, this makes the panel active. Be aware though that if you set multiple panels to active, the first one with active set to “Yes” will be made active (not ones that follow after the first active one).
7. Level
   You can have tabs within tabs (within tabs), so that may be very confusing when placing these blocks. That’s what “Level” is for. By default, it will be first level (1). If you decide to nest tabs, you can “level up” and set it to two (2). Or 3 if you go that far. By doing so, the blocks will indent in a bit, so you can easily see that you’re nesting the tabs. Blocks you add in between though, won’t get indented (since concrete5 can not know this is happening). But at least you will get a good visual on what’s happening with your tabs!

Now we have the starting panel. You can add any Block Type, Layout or Stack  you’d like. Even use multiple and combine how you’d want. After you’re done, we can add another “Awesome Tabs” Block Type. This time, we’ll be ending the panel though. So do the following in the form:

1. Start/End
   Select the value “End”, since we’re ending the tabbed content. Fields we don’t need to enter disappear, so you won’t have to worry about these anymore and have a nice short form to fill in.
2. Panel ID
   Fill in the same value as you did before, so “chairs-panel-one” if you got along with the example above. If you filled in something else, use that. If you’re not sure what the value is, just enter something and look back what you did enter.
3. Level
   Here you enter the same level as you did for the “Start” block, to keep the indenting the same. This level is only for visually improving the editing, so no worries if you fill in a value that doesn’t match your starting block.

Congratulations, you just made your first tab. It should work already, but we’ve only created one single panel. To make more, repeat the steps above, and enter the same “Tab ID” value to add panels to the same tab.

Awesome Tabs Settings (Block Type)

In addition, you can also add an “Awesome Tabs Settings” Block Type to your page. This gives you the possibility to make the tabs vertical and add some class names to your navigations tabs and/or tabbed content (and style tabs differently, based on these classes). Ideally, you place this right above your first panel for your tabs. It’s not needed though, since it will look for the ID you fill in. So for the field “Tab ID”, you fill in the same value you did for the “Awesome Tabs” block you want to target (same field name, “Tab ID”).