Ask a Question ?
Design & Publish Websites Faster

How the Tabbed Widget App Works

There’s a new app: 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 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.

This is how a Tabbed Widget app will look for your visitors

Steps

Installation

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

App Store menu, showing the Tabbed Widget app

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

Drag and drop your app to a  (or column)

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

Default look of the Tabbed Widget app

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.

Clicking on each field that reads "Click to Edit..." will allow you to modify it

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.

Use the edit in place toolbar to insert videos and images

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).

Click on the entry title of a tab to edit it

Add Entries

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

Add entries with the "plus" icon on the left side of the app toolbar

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

A new entry added below the first one on the Tabbed Widget

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.

Here we have 3 tabs that we want to reorder

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

Click the reorder button to fix the order of your items

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

To re-arrange, click and drag items on this window

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.

The remove item button, will appear below each 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.

To open the "Edit Settings" window, click the 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.

This is the Settings modal window

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!

Menu