Advanced Tabs Block

You can create an Advanced 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 Advanced Tabs blocks


How to create an Advanced Tabs block

To insert an Advanced Tabs block, click the Advanced Tabs button in the PublishPress Blocks category.

Screen Shot 2020 12 10 At 11.27.30

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 Advanced 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 Advanced 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 Advanced 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 Advanced Tabs blocks

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

  • Go to PublishPress Blocks in your WordPress admin menu.
  • Click Configuration, then Default Blocks Config.
  • Click Advanced Tabs.
Screen Shot 2020 12 10 At 11.28.39

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

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE