Creating a Tabs Block
In this exercise you will learn how to create a new tabs block. A tabs block is great for saving space on the page and places all the section headings near the top for easy viewing.
The first tab will be open when a visitor first lands on your page.Keep in mind that the section names need to be fairly short. This type of block does not lend itself to FAQs.
(See the Instruction section below for an example of tabs.)
Why use a Tabs Block?
Do you have information that a visitor needs readily available without scrolling? Tabs headings are laid out horizontally so that the visitor can see them all on the same line.
Create a new tab block (Inline Metadata):
- In the left panel click on the “_blocks/manual” folder. (All blocks are stored here. You may also add additional folders in this section to organize your blocks.)
- On the blue menu bar above, click “New.”
- From the popup, mouse over “Blocks” and choose “Expandable-Tabs.”
- Title: tabs-sm-content-name. (Preface your tab names with “tabs-sm” to help in identifying expandable content. This becomes the filename and is converted to all lowercase with hyphens.)
- Description: (optional) This will only be visible by anyone who can edit this block and does not show up on the web page. Use it to make notes about this block as a reminder to yourself and other editors.
Set up display options (expandable):
- Display Options: Change it to “tabs.”
- Shrink expandable option: Leave box unchecked.
- Allowed Format: Leave set to “Standard and Mobile.”
Set up header and content (expandable >> section):
- Header: Enter the heading (Keep it short!)
- Content: Add your content in the WYSIWYG area. (You can have text, data tables, images, etc.)
- Add another section by clicking the “+” sign.
- Repeat steps 1 & 2 for each section. (Note: If you have too many sections, the tabs will start to wrap and look very strange.)
Pull in another block to a section (optional):
- Click the “lego” icon below the WYSIWYG area.
- In the popup search for and select the block to insert.
Note: You can pull in another block to a tab section to supplement or replace the content in the WYSIWYG area. An example is pulling in a reusable block of an announcement or RSS feed into this particular tab section.
Send to Workflow
- Click “Send to Workflow."
- At the Spell Check screen, click "Submit."
- At the "Start Workflow" screen, tell us what you did in the "Comments" box. This helps us tremendously in the approval process.
- Click "Submit."
Note: Remember that you cannot add your new block to a page until it has been sent to workflow and approved.
- Access to either the training web site or as a web editor to your site.
- Cascade: Basic I training