Tabs Block

You can create an PublishPress Tabs block when you need display a lot of content in a small area. The tabs are mobile-friendly, can be horizontal or vertical, and can be customized with your colors and design.


Video guide to the PublishPress Tabs blocks


How to create an PublishPress Tabs block

To insert an PublishPress Tabs block, click the “Tabs – PublishPress” button in the PublishPress Blocks category.


How to add and remove tabs

  • You can add tabs using the + icon.
  • You can remove tabs using the yellow X icon.

Tab settings for the PublishPress Tabs block

These settings allow you adjust the tab direction and also which tab people will see when they open the page:

  • Tabs style
    • Desktop, Tablet or Mobile
    • Horizontal or Vertical
  • Tabs settings
    • Initial Open Tab: Which tab will be open when users load the page.

Tab colors for the PublishPress Tabs block

These settings allow you to control the main colors for your tabs:

Tab Colors

  • Background Color
  • Text Color
  • Active Tab Background Color
  • Active Tab Text Color

Body and border settings for the PublishPress Tabs block

These settings allow you to control the body and border of your tabs:

  • Body Colors
    • Background Color
    • Text Color
  • Border Settings
    • Border Style: None, Solid, Dashed or Dotted
    • Border Color
    • Border Width
    • Border Radius

Custom font size for tabs (Pro)

Change the font size for tabs through “Tab settings” panel.

PublishPress Blocks - Advanced Tabs

Anchor support (Pro)

You can add custom anchors to the tabs, and open a tab through a URL.

PublishPress Blocks - Advanced Tabs, anchor support
  1. Add the anchor by clicking in the tab and typing in the field above
  2. In frontend, open the post/page link by attaching the custom anchor. As example: yoursite.com/the-page/#custom-anchor

Important: the anchor must be a unique id.

Reorder tabs (Pro)

To reorder tabs, use the arrows to move the selected tab to the left or right:

PublishPress Blocks - Advanced Tabs, reorder horizontal tabs

Also you can move above or below for vertical tabs:

PublishPress Blocks - Advanced Tabs, reorder vertical tabs

Duplicate tabs (Pro)

You can duplicate a tab by doing click in duplicate icon.

PublishPress Blocks - Advanced Tabs,

Default settings for all your PublishPress Tabs blocks

You can set default options for every PublishPress Tabs block added to your site. This is possible with the PublishPress Blocks default configuration feature and it allows you to create a consistent look-and-feel for all your tabs.

Go to Blocks in your WordPress admin menu, then PublishPress Blocks.

Click Tabs settings icon.

Adjust the default settings and save


Tab Blocks inside other Tab Blocks

Sorry, we don't yet support loading tab blocks inside other tabs

Professional publishing plugins for WordPress! Get PublishPress