Easily Add Tabbed Content and Responsive Tabs with Widget Builder
Creating tabbed content hasn’t always been easy for non-technical content contributors, even though tabs are a very popular way of presenting information on a web page. Ideally, contributors should be able to create new content tabs without needing to see or interact with code. To make this process easier, we’ve put together a template your Percussion CMS administrator can use with our Widget Builder. Once implemented, any contributor can drag and drop new tabs into page layouts, and add new content.
Create a Custom Add-A-Tab Widget
1. Create a New Widget
In the top left corner drop down switch over to “Widget Builder” and in the top right corner click on the icon that looks like a sheet of paper with a “+’ symbol on it.
*if you do not see Widget Builder Available on your drop down contact us on how to enable widget builder.
2. Fill in Widget Information
Remember to check off the "Is responsive" box at the bottom.
3. Configure the Content Tab
Add two new fields to your widget: one for the title, which will appear as the tab, and one for the content of the tab.
Tip: The name of each of the fields is important as it can not be changed once it has been created and it is used in the Display tab to paste this fields content on your widget. It is case sensitive so please try to copy this tab exactly as it appears here in order to avoid issues.
4. Configure the Resources Tab
You will need upload and include these files into your website's Themes folder. You can download all the files at this link.
- style.css *optional
You should upload all of the files to your templates theme directory in your finder in their appropriate JS or CSS folders. Copy or cut out everything in the file path after “/web_resources” in the search bar for each file after uploading them.
Now reference them in the Resources tab of your Custom Widgets Configuration.
Maintaining consistency across file paths and element names will ensure your widget works after it's deployed.
5. Add Display HTML
Click on the Display tab. Hit “Auto Generate” to create your display HTML. CM1 will create display code for you automatically.
It should look like this:
Now add these classes to your display code, again, ensuring everything is an exact match:
<div class="perc-tab-heading"> $title </div>
<div class="perc-tab-content"> $tabcontent </div>
6. Save and Deploy Widget
Deploying your widget adds it to the widget menu in the Layout tab of your page editor. Once you've deployed a widget, you can't un-deploy it, but you can continue to edit it and deploy after every update. You can also disable a widget to keep users from utilizing it, if necessary.
Adding Custom Tabs Widgets to Pages
Once you've completed most of this work, there are still a few steps left to ensure your new tabs widget is usable by every content contributors.
1. Add the Widget to a Template
Open up a page template for editing. You can use any template to which you want users to add tabs, and can add this functionality to any template you choose.
2. Add a New Region to the Template with the class “perc-tab-container”
3. Add a few Add-A-Tabs Widgets to the Region
Make sure you do this at the page level if you wish to give contributors the option to add and remove tabs as needed.
4. Add Content to Your Widget
5. Save and Preview Your Widget
Note: in editing mode, your tabs will appear stacked so that you can easily view their content during the editing process. When you preview the page, the tabs will display with the correct styling.
While in Preview mode, you can use Percussion's integrated mobile preview to see how your tabs will appear on various devices like tablets and smartphones.
Because the widget is already responsive, there is nothing you need to do to make it mobile friendly.
Add Custom Styling to Your Widget
You can customize the look and feel of your tabs. This may require a little CSS experience. Use the included style.css file to change or enhance any of the rules.
The comments will help identify how each property styles your tabs. Pick your background colors, text colors, and publish.
For more information on our Widget Builder, view the full documentation on our Percussion Help site.
Armani spends his days helping Percussion customers through their implementations as part of our customer success team. He's the tallest member of the team, standing tall at 6 foot 7. His favorite part of the job is learning new things and meeting new people every day, teaching what he learns to the people he meets. In his spare time Armani volunteers at the local Boys and Girls club near his home in Boston, teaching kids how to use computers.