Use tabbed blocks to present information to your users in a concise page.


There are two styles of tabbed blocks which can be used to consolidate information on your page, regular tabs and expander tabs. Converting regular blocks into tabbed blocks happens at the column level.


Add a block (or 2, 3 etc.) to your page.

Open the Page Tab in the Theme Press Designer.

Theme Press Designer → Page Tab → (Block 1)

Click on the column where you'd like to format blocks.

The designer accordion will open, displaying multiple expanders.

Click on the 'Handling' expander.

From the 'Tabbed Blocks' dropdown, select either 'tabs' or 'expanders'.

Choose the blank option if you want to remove any styling.



If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.




If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.




If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.




If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.




Examples

Expanders
Tabs




  • Replace me with a link
  • Replace me with a link
  • Aim for 4 or fewer related links.  If we need more, that's okay.  Be judicious.  Delete me when you're done.