A new app has been launched in Breezi, the tool for designers! It’s the Tabs and Accordions app and with it you’ll have a new way to add content to your site. You can either have the Tab style, where your content is managed through tabs, or the Accordion style that, how it name implies, shows your content in accordion form. In this tutorial, we’ll show you how to work it like a champ.

Note: This app will replace the Tabbed Widget app, so we recommend you migrate your content to this new app. The Tabs and Accordions app has a lot of options for styling and customization, can be switched between accordion and tab style, gives you more content space and is more visually interesting. So, you may want to include it in your Breezi site anyway.

To Install It

Go to the App Store in the shelf. There, look for the “Tabs and Accordions” app. To install it, just drag the “Install New” button to your layout.

This is the default look of the app. It will always load up with the “Tab” style.

This is the default look of the “Accordions” option in the app.

In the “Apps Settings” portion of this tutorial, we’ll show you how to switch between the two styles of this app.

To Edit Its Content

You can click on the “Edit Content” button in the app’s toolbar or double click anywhere editable in the app itself. Either way, the CMS panel will open up.

If you decide to go in through the app’s toolbar, you’ll see two tabs on the left side: “Manage Tabs” and “New Tab”.

Manage Tabs

In the first option you’ll be able to manage the entries you have (you can edit, delete and reorder them).

To delete one element, just click on the entries Delete link.

If you have more than one entry and you want to rearrange them, you can click and drag them to their new position.

To edit one, just click on the “Edit” button with the pencil icon from the entry you want to modify. You’ll be taken to a new section where you’ll be able to change the title and body of said entry. Click “Save” when you’re finished.

New Tab

To add a new tab, just click on the “New Tab” tab on the left of the CMS panel. Write a title and a text for it. When you finish, hit “Save” and then “Close”.

To Edit Its Settings

Click on the “Edit Settings” button in the app’s toolbar. A new panel will open up. Remember to click on “Save” when you finish to see your changes reflect in the app.

App Settings

App Style: Here is where you can switch between the tab and accordion look of the app.

Transition Speed: You can pick how fast the transition will be when clicking through your tabs. You can make it fast, slow and medium speed.

Tabs Style (only) Settings

This options are only available for the app in its Tab Style form.

Tabs Position: You can place your tabs at the Left, Top, Right and Bottom of the main body.

Fit Content To Tabs Size: With this checkbox you can choose if you want your main text to have the same length or height (depending on the position of the tabs) as the tabs.

Transition Effect: You can make your content Slide or Fade when clicking through your tabs.

Propagate Style to All Pages

By enabling this option, all the versions of that app will have the same styling throughout your whole Breezi site. Furthermore, if you update one app in one page, changes will be reflected in all of the pages where that app is installed.

If you uncheck the “Propagate Style to All Pages” option, styling will be managed independently on that app. Note that this option is enabled (checked) by default.

Its Style Dots

These are the style dots for the Tabs and Accordion app. Most of them have the standard styling options that you know and love (if you need a reminder, click on the link). But there are two that are a little bit different, and here we’ll explain what they do.

To Style the Text

First, and one of the most important, is the dot for the styling of the texts in your tabs or accordions. You can access it by clicking on the dot that’s on top of the text like in the next image.

When clicked, a new panel will open up where you’ll be able to see the options you have. Much like the Bulk Style Editor, you have, at the left, various tabs where you can pick which part of the text you want to modify. On the right, you’ll get the formatting options (font, size, color, alignment, etc.).

To Style the Tabs

This option is only for the app in its tab form. You’ll see that you can alter the options for the buttons or tabs when you click on the dot on top of the container. You can use separators like bullets, bars, pipes and dashes; containers like buttons or none of the above.

Voilà!

And that’s it! That’s all you need to know. Now you have a new way to include content creatively! Go check it out and bring it to life in your Breezi site.

Have any doubts? Let us know in the comment section below!