Welcome to a straightforward guide on using the Gutenberg Tabs Block. WordPress continues to improve, offering many tools to enhance your website. The Gutenberg editor, particularly with the Premium Blocks feature, allows you to create advanced tabs with content. This guide will help you set up and customize your WordPress tabs, making your site more interactive and organized.
This tutorial is perfect for both beginners and experienced WordPress users. Follow the simple steps to integrate and style your content tabs effectively. Let’s get started and make your content more dynamic with the Gutenberg Tabs Block.
If you need to add more inner blocks, you can easily add extra fields to the tabs content section. Just click on the “+” icon and pick the type of field you want to include.
General Settings
Layout Settings
Icon: Toggle to show or hide an icon next to the tab title.
Icon Position: Choose whether the icon appears before or after the tab title.
SubTitle: Toggle to show or hide a subtitle for the tabs.
Auto Change Tabs: Toggle to automatically change tabs.
Auto Change Delay: Set the delay time for auto-changing tabs.
Gutenberg Tabs Block – General Settings
Tab Item
To change the icon, select the tab item from the document overview and choose between icon, image, SVG, or Lottie. You can also adjust the icon size and position.
Display Options
Tabs Type: Choose between horizontal or vertical tabs.
Tabs Layout: Select between auto and fixed-width tabs, which are only available for horizontal tabs type.
Tabs Style: Pick from three tab styles that work with both horizontal and vertical tabs to match your website design.
Tabs Alignment: Adjust the alignment of the tabs.
Gutenberg Tabs Block looks unique on small screens like phones and tablets.
Gutenberg Tabs Block – Display Options
How to Style Gutenberg Tabs Block?
Tab Wrap
This tap will be available only if you select Style 2 in the Display Options.
Background Color: Choose a background color for the tabs wrap.
Border: Customize the border style, width, and color for the tabs wrap.
Border Radius: Adjust the border radius to round the corners.
Box Shadow: Add a shadow effect to the tabs wrap.
Margin: Adjust the margin around the tabs wrap.
Padding: Set the padding inside the tabs wrap.
Gutenberg Tabs Block – Tabs Wrap Style
Tab
Active Indicator Color: Set the color for the active tab indicator.
Active Indicator Height: Adjust the height of the active tab indicator.
Background Color: Choose a background color for normal or active tabs.
Border: Customize the border style, width, and color for normal or active tabs.
Border Radius: Adjust the border radius to round the corners for normal or active tabs.
Box Shadow: Add a shadow effect to normal, hover, or active tabs.
Margin: Adjust the margin around the normal, hover, or active tabs.
Padding: Set the padding inside the normal, hover, or active tabs.
Gutenberg Tabs Block – Tabs Style
Icon
Color: Set the color for the icon.
Hover Color: Choose a color for the icon on hover.
Active Color: Set the color for the active icon.
Border: Customize the border style, width, and color for the icon.
Border Radius: Adjust the border radius for the icon.
Box Shadow: Add a shadow effect to the icon.
Margin: Adjust the margin around the icon.
Padding: Set the padding inside the icon.
Gutenberg Tabs Block – Icon Style
Title and Subtitle
Title Color: Set the color for the tab title/subtitle.
Hover Color: Choose a color for the title/subtitle on hover.
Active Color: Set the color for the active tab title/subtitle.
Typography: Customize the font, size, and style of the title/subtitle text.
Border: Customize the border style, width, and color for the title/subtitle.
Border Radius: Adjust the border radius for the title/subtitle.
Shadow: Add a shadow effect to the title/subtitle.
Margin: Adjust the margin around the title/subtitle.
Padding: Set the padding inside the title/subtitle.
Gutenberg Tabs Block – Titles/Subtitles Options
Tab Content
Background Color: Choose a background color for the tab content.
Border: Customize the border style, width, and color for the tab content.
Border Radius: Adjust the border radius to round the corners.
Box Shadow: Add a shadow effect to the tab content.
Margin: Adjust the margin around the tab content.
Padding: Set the padding inside the tab content.
Gutenberg Tabs Block – Tabs Content Style
Container
Background Type: Choose the background type for the container.
Border: Set the border style for the container.
Border Radius: Adjust the border radius for the container.
Box Shadow: Apply a box shadow to the container.
Margin: Set the margin around the container.
Padding: Set the padding inside the container.
Gutenberg Tabs Block – Container Style
Conclusion
This guide teaches you how to use the Gutenberg Tabs Block to enhance your WordPress site. The Premium Blocks for Gutenberg plugin provides all the tools you need to create advanced and visually appealing content tabs. You’ve seen how to customize everything from the icon and title to the border and shadow effects. This guide is designed to help everyone, from beginners to experienced users. By following these steps, you can make your site look better and more organized. Your interactive tabs will not only display your content beautifully but also make your site more engaging and appealing to visitors.
Need Further Help?
Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.
