There’s a new app in Breezi: the Tabs and Accordions app! 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.

What You’ll Learn

In this article, we’ll teach you how to set up a Tabbed Widget app. You can use it to display content in tabs, like in the image below. Clicking the title of a tab (on the left) will show its matching content on the right.

Steps

Installation

1. Go to the shelf (once logged into your site), and look for the Tabbed Widget item in the App Store menu.

2. Drag the “Install New” button and release it in a position of your choice.

3. Once it loads, it will look by default like the following image.

Edit Text

4. Double click in each place where it says “Click to edit this text!”. Here you can change the title for the whole app, the text for the entry title, and the text for entry content.

5. Once on the entry content, you can add text and format it (with typefaces, font sizes, colors, etc.). And you can also add images and videos here. Insert them using the “edit in place” toolbar, above.

6. The entry title text, as mentioned above, is also editable by double clicking it. If you single click it, you’ll switch to that item (if you have more than one).

Add Entries

7. To add more entries, hover over the app and click on the “page with a plus sign” icon (New Entry).

A new tab will be added below the first one, like in the image below.

Switch Among Items

8. To switch between your items, single click each entry. Then you will be taken to that entry, where you can add and edit content (text/images/videos).

Reorder Items

9. Also, if you created 2 or more items, you may want to reorder them.

To arrange the order of the items, click on the reorder button.

A window will appear, where you will be able to click and drag the items to their new position.

Once you’re happy with the order, click “Close” on the top right.

Delete Items

10. Now, if you need to remove any of your items, you’ll find the “Remove” button right next to the “Reorder” button below each item. Clicking it will erase that item.

Don’t click on the bigger “X” on the top right of the app, that will delete the whole app! Though you can always restore it if that’s the case.

Tabbed Widget Options

11. Lastly, the options. Click on the “Edit settings” button. It portrays a wrench icon.

This will open a small modal window, with a checkbox to “Propagate Style to All Pages”. Enabling it will copy the settings in the style dot of this app version, to the rest of them throughout your pages.

And that’s it! You can create tabbed content in your site with this app. So go ahead and experiment!

If you have any questions or doubts about this article, let us know in the comments!