Ask a Question ?
Design & Publish Websites Faster

Display Your Content Through Tabs and Accordions With This App!

A new app has been launched in our platform, 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 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.

"Tabs and Accordions" app in the App menu

“Tabs and Accordions” app in the App menu

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

Default look for the Tab style

Default look for the app

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

Default look for the Accordion style

Default look for the Accordion style

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.

"Edit Content" in the app's toolbar

Click on the pencil icon in the app’s toolbar to edit it’s content

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

"Manage Tabs" in the CMS panel for the Tabs and Accordions app

In “Manage Tabs” you can edit, delete and rearrange your entries

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.

"Edit Tab" in the CMS panel for the Tabs and Accordions app

Here you’ll be able to edit one tab or entry from your app.

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

"New Tab" tab in the CMS panel for the Tabs and Accordions app

With the “New Tab” tab, you can add a new entry

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.

"Edit Settings" in the app's toolbar

Click on the wrench icon to edit the app’s settings

App Settings

"Apps Settings" for the Tabs and Accordions app

In “App Settings” you’ll be able to edit the general settings for the Tabs and Accordions app

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 Style (only) Settings"

The settings options for the Tab version of the app

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

The style dots for the Tabs and Accordions app

The style dots for the Tabs and Accordions app

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.

Styling options for the texts in the Tabs and Accordions app

Styling options for the texts in the Tabs and Accordions app

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.

Style dot and options for the tabs

Style dot and options for the tabs

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

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

Menu