Design your website pages with professional style using the Advance Tab Widget of AbsolutePlugins. You can easily implement it in your web pages and edit it within a minute based on your website focus.
You can see the below video to understand how you can use the Advance Tab Widget. Or you can follow the documentation whichever you find convenient.
Step 1
To use our Advance Tab widgets, first, create a section by clicking on the “+” icon on Elementor and then from the block section of the left bar search for Advance Tab. Drag the Advance Tab block and drop it into your created section.
Now under the Content tab, you can select the Advance Tab style from the Advance Tab Style dropdown menu. There are ten unique and professional-looking styles available for the Advance Tab section. You can choose any of the styles you want.
You can see all the Advance Accordion-style from here. Choose any of the styles you want by clicking on the style number.
Step 2
After selecting the style set the tab position as vertical or horizontal. You can also set the alignment of the tab from here.
From the Content section, you can add content to your tab section. By default, there are four items available. You can delete an item by clickning on the “X” icon and copy an item by clicking on the copy icon. Click on the Add Item button to add a new item
To edit an item just click on it. Now you can add a title from the Title field. After that add images by clicking on the add image icon and then choose the image size. There are different image sizes available. You can add images from your media library or upload images from your device.
You can disable the caption option or can select the custom caption or attachment caption option. From the column option, you can select the image column and then add the content title with a description.
You can also enable or disable the Read More button and add a button text with a link.
Step 2
Now move on to the Style tab where you will find different style options to customize your tab section.
General Advance Tab Style
Under the General Advance Tab Style menu set the background type as Classic or gradient. You can also use an image as a background too. After that click on the box-shadow edit icon to add a box-shadow to it.
Set the border type, add border width, color, border-radius. At last add padding and margin for the section.
Tab Title
Style your Advance Tab title text for normal, hover, and active condition. Set the typography, background, title color, box-shadow, border type, padding and margin for all three condition.
Image
Add image width, height, border type, box-shadow from here. You can also add different CSS filters to your image too.
Caption
If you enable the caption then you can set the caption alignment, color, background typography and others.
Content box
Add content-box background color, border, box-shadow, padding and margin from this option. Similarly, you can set content & content title typography, color and other styles from the Content & Content Title menu.
Button
Add button typigraphy, background, color, border, padding and margin for both normal and hover conditions.
That’s it! You have successfully redesign your Advance Tab section.