Tech | Web Team

Creating Tabs in Sitecore

Tabbed content will create a series of tabs where you can show full pages worth of information without ever leaving your page. Preview a live example.

Helpful Tips!

  • Only one Add-ons folder per page, load it up!
  • Have tons of tiny pages? Consolidate them and make them tabs.
  • Keep your tab titles short and you can fit a lot more tabs on your page.
  • Follow the same rules for content loading in primary content for content builds in tabs.
  • Always preview the parent page to make sure your tabs look good.

Walk Through and Jump to Points in Video

Creating a Tabbed Content Folder

  • Right-click the Add-ons folder
  • Click Insert
  • Click Tabbed Content

Selecting Tabbed Content Option

  • A dialog window will pop up asking you to name your tabs folder. 
  • Don't worry about the name, just click OK.
  • A new item will appear in the Add-ons folder now. It looks like a little blue box of files.
  • This is the folder where you will keep your tabs.

Creating Tabs!

  • To create a tab, right-click your Tabs Folder and select Insert and then click Tab.

Insert Individual Tab

  • A pop up window will appear asking you to name your tab.
  • Pick a name that will make it easy for you to tell the difference between tabs so that future editing or updating can be easier.
  • After naming your tab, click OK and it will appear beneath your Tabbed Content folder.
  • Click on your new tab and you will see a fresh group of fields in the content loading dock. 
  • Lock this page to begin editing.

Tab Content Fields

  • Enter in your tab title.
  • Keep this concise and pertinent to the content of the tab.
  • Shorter tab titles make it possible for you to fit more tabs on your page.
  • Now type in your Content Title. Enter text in Content Title.
  • The Content Title will be the main heading that you see when you open the tab in the live site.

Adding Content to your Tabs

  • Moving down the content loading dock you will see the content editor fields for content, secondary content, and shared content.
  • Each of these fields acts much like the overall page build and can be edited the same way.
  • To add content to these fields click on the show editor and you will see the content editor window pop up.

Text Editor

  • You can add links, text, media, and tables just like the main page’s content editors. Run cursor across the buttons on top of the rich text editor window.
  • Make sure you use the clipboards and formatting tools available to you, you don’t want your tabs to be incongruous from the rest of the page design.
  • When you have added your content to each field, click Accept.
  • When you have added all the content you wish to be included, save your work. 
  • Now you need to create more tabs.
  • You need to have at least two tabs to make tabbed content worth it.
  • You can have as many tabs as you like but overlapping tabs can look messy and confusing.
  • To add more tabs, return to the Content Tree. Right-click your tabs folder and insert a new tab, following the earlier explicated steps.
  • If you would like to change the order of your tabs right click the individual tab in the content tree and scroll down to the Sorting option.
  • Here you will see placement options, you may need to arrange several tabs to get it in the order you desire.
  • When you have added all the tabs you would like to use make sure you save and then left-click on the parent folder and Preview.

Tabbed Content Final Look

  • It’s always a good idea to make sure your tabs look good on the actual site before committing them for publishing.

Puppy and Soda

FAQ

Why are my tabs overlapping?Confused Kitten

Your tab title is too long. Shorten your tab title and you will be able to fit more tabs in a row.

Can I put tabs in Tabbed Content?

No, if you really think it is necessary then perhaps you should consider making your tab its own page and then creating tabs there. You don't have to fit everything onto one page.

 

 

Best Practices

  • Winning Guinea Pig In many cases, using tabbed content and creating a singular page is much more effective for user navigation than creating multiple individual pages.
  • Make sure your tabs are related to the page in which you're creating your tabbed content. Tab titles act like Heading 2s so they must be related to your page title.
  • Instead of making long lists of information, try using tabs to break up the information in parts.
  • Users do not like to scroll down a page so the more information you can have visible in the initial load of your page, the more likely people will stay engaged with your page. Tabs are great for this!
  • Keep your tab titles short so that you can fit more tabs in a row.
  • You can change the content title to something more extensive if you want but keep in mind it is still a searchable title and needs to be keyword heavy and concise.
  • Start with Heading 3s in tabbed content. The title itself reads as a Heading 2.
  • Use tabs as pages within pages. The key is to keep people on your page to optimize your SEO.

 

 

 

Page last updated: 7/30/2013