Advanced Tab is a Gutenberg Block that allows you to insert tabbed content into your post or page. The Advanced Tab block allows you to insert tabbed content into your post or page.
1. How to add Advanced Tab Block? #
To add the Advanced Tab Block in your Gutenberg editor first click on the (+) icon then in the search box type “Advanced Tab” and you will see the “Advanced Tab” block.
After inserting the “Advanced Tab” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The General settings tab has the Preset option and counter settings number settings option. The General settings panel properties are as follows.
- Layout: From our pre-defined presets you can select which style you like.
- Tabs: You can add new tab items and it’s content from the tab settings. Also can set tab icon.
- Tabs Settings: You can set tabs style from here like Horizontal or Vertical also can set icon and icon style.
3. Style Settings #
From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.
- Tab Title: You can set typography, color, icon color, icon size and icon to title gap.
- Background: You can set normal and hover background color.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Active Tab Color: Set active tab color.
- Tabs Wrapper: You can set tab wrapper gap, alignment, padding, normal and hover background, border and border radius.
- Content: You can set content area margin, padding, background, border and shadow.
- Active Indicator: You can enable active indicator like arrow and border can set the size and color.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Shadow: You can set the wrapper area animation.
5. Final Outcome #
Following these basic steps and more customizing, you can style your Advanced Tab Block and your want and get your outcome.
