--- title: Tabs Block description: "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…" url: "https://publishpress.com/knowledge-base/advanced-tabs-block/" updated: "2025-05-14" category: PublishPress Blocks / PublishPress Blocks --- # Tabs Block 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. ![](https://publishpress.com/wp-content/uploads/2020/06/Gutenberg-tabs-block.png) --- ## How to create a Tabs block To insert an ****PublishPress** Tabs** block, click the "Tabs - PublishPress" button in the [PublishPress Blocks](https://publishpress.com/links/blocks) category. ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-16.49.44.png) --- ## How to add and remove tabs - You can add tabs using the **+** icon. - You can remove tabs using the yellow X icon. ![](https://publishpress.com/wp-content/uploads/2022/03/Screen-Shot-2022-03-10-at-13.27.49.png) --- ## 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. ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-16.50.42.png) --- ## 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 ![](https://publishpress.com/wp-content/uploads/2020/05/tab-settings-1.png) --- ## 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 ![](https://publishpress.com/wp-content/uploads/2020/05/tab-settings1-1.png) --- ## Custom size, Google font and spacing support for tabs (Pro) This feature is available in the Pro version of [PublishPress Blocks](https://publishpress.com/links/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. ![](https://publishpress.com/wp-content/uploads/2023/02/Screen-Shot-2023-02-14-at-9.05.21-1024x436.png) 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. ![](https://publishpress.com/wp-content/uploads/2023/02/Screen-Shot-2023-02-14-at-9.13.35-1024x270.png) - **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](https://publishpress.com/wp-content/uploads/2022/03/Screen-Shot-2022-03-10-at-13.18.25.png) 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](https://publishpress.com/wp-content/uploads/2022/03/Screen-Shot-2022-03-10-at-13.16.50.png) Also you can move above or below for vertical tabs: ![PublishPress Blocks - Advanced Tabs, reorder vertical tabs](https://publishpress.com/wp-content/uploads/2022/03/Screen-Shot-2022-03-10-at-13.21.06.png) --- ## 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,](https://publishpress.com/wp-content/uploads/2022/04/Screen-Shot-2022-04-27-at-15.08.42.png) --- ## 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](https://publishpress.com/knowledge-base/default-blocks-config/) 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. ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-16.51.52.png) - Adjust the default settings and save ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-16.52.08.png)