With Responsive Addons for Elementor (RAE) Advanced Tabs widget, you can display a substantial amount of information in an aesthetic and organized way under different tabs.
Content #
General Settings #
- 1.Layout: Select the preferred layout you want to display the content in.
- 2.Enable Icon: Check this if you want to display icons next to the tab title.
- 3.Icon Position: Choose “Inline” to display the icon in the same line as the title or “Stacked” to display both on separate lines.
Content #
From the content tab, you can add more tabs and add separate content for each of them. The repeater controls are as follows:
- 1.Set as Default: This control will set that specific tab as the first tab that shows when the page is loaded.
- 2.Icon Type: Gives you the option to show no icon, display an icon or display an image instead.
- 3.Tab Title: Change the title of the tab from here.
- 4.Content Type: Choose “Content” to input your own custom content or “Saved Templates” to choose the content of a template.
- 5.Choose Template: If you select “Saved Templates” then select the template you want to display the content of from this control.
Style #
General #
You can change various properties of the entire widget container such as padding and margin. You can also add a border and give it rounded corners. Add a box shadow to give it a cool effect.
Tab Title #
- Set the HTML tag for the headings.
- Apart from changing properties such as margin and padding of the tab title container, you can also set a minimum width to it.
- Adjust the icon size and typography for text separately along with controlling the space between the icon and the title.
- Change the background color, text and icon color of the title / title container for three different states, that is, normal, hover and active state.
- Also add a border and customize it with various options such as color, size and radius.
Content #
- Change the background color of the content tab along with adjusting properties for the text within it such as typography and color.
- Adjust the margin, padding as well as add a border with various options available to style it.
- Set the box shadow for better appearance.
Caret #
Display the tiny arrow next to the active tab. Adjust its size and color if you choose to display it.
Responsive Controls #
If checked, for smaller screen sizes, horizontal layout will automatically switch to vertical layout to display the tabs without breaking or looking weird.
