View Categories

Tabs Block

Table of Contents

The PublishPress Tabs block is available in the PublishPress Block plugin. The tabs are ideal for 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.

How to create a 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 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 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 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 size, Google font and spacing support for tabs (Pro) #

This feature is available in the Pro version of PublishPress Blocks. You can hange the font size for tabs and choose between 1400 available Google fonts. You can also transform the text: capitalize, uppercase or lowercase. In addition you can change the spacing between tabs and content. These settings are available in the Pro Tab Settings panel.

    • Font family. Choose between 1400 available Google fonts
    • Font weight + Style. (when Font family is different to “default”)
    • Text transform. Choose between default, uppercase, lowercase and capitalize.
    • Spacing below. This affects the tabs depending if the style is vertical or horizontal. Please note you can set a negative spacing below that depends on border width and style. As example: if style is horizontal and border width is 3, you can set a negative value from -3 to -1
    • Spacing on the right. This affects the tabs depending if the style is vertical or horizontal. Please note you can set a negative spacing on the right that depends on border width and style. As example: if style is vertical and border width is 3, you can set a negative value from -3 to -1

The negative spacing values makes more sense when using the “Folder” theme preset. See more details below.

Theme presets (Pro) #

This feature is available in the Pro version of PublishPress Blocks. Choose one of the 4 theme presets to change the design of your tabs with one click. Please note despite choosing a theme preset you can still customize colors and design as usual. This setting is available in Theme settings panel.

  • Preset. Choose between default, square, folder and cartoon.

Anchor support (Pro) #

This feature is available in the Pro version of PublishPress Blocks. 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) #

This feature is available in the Pro version of PublishPress Blocks. 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) #

This feature is available in the Pro version of PublishPress Blocks. You can duplicate a tab by doing click in duplicate icon.

PublishPress Blocks - Advanced Tabs,

Default settings for all your 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