Skip to main content

Submenu Example: Tabs

Text in tab item 1

Text in tab item 2

Text in tab item 3


Adding Tabs to Your Page

  1. Switch your page to the code editor view. You can find this option by going to the three dots in the top right.
  2. Copy the code from below.
<!-- wp:shortcode -->
[tabs type="tabs"]
    [tab title="Tab 1" xclass="nomargin"]

<!-- /wp:shortcode -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>Text in tab item 1</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
    [/tab]
    [tab title="Tab 2" xclass="nomargin"]

<!-- /wp:shortcode -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>Text in tab item 2</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
    [/tab]
    [tab title="Tab 3" xclass="nomargin"]
<!-- /wp:shortcode -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>Text in tab item 3</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
    [/tab]
[/tabs]
<!-- /wp:shortcode -->
  1. Paste the code at the top of the code editor then switch back to your visual editor. Be sure not to paste over any existing code!

This will create a series of shortcode blocks and paragraph blocks.

To change the titles of the tabs, replace the text “Tab 1” etc. The content in between the shortcode blocks is what will display on each tab.

Last updated: 5/12/2020