Introduction
The Loop Tab widget in HappyAddons is a dynamic tab system that automatically transitions between tabs at a set Transition Delay (ms). Unlike traditional tabs, this widget functions like an auto-play slider, continuously cycling through the tabs in a loop.
A visual transition border appears, indicating the progress before switching to the next tab, enhancing user engagement. This feature is perfect for displaying content in an interactive, structured, and automated manner.
Pre-requisite
To enable the Loop Tab, you need to have,
- Elementor
- HappyAddons
- HappyAddons Pro
Adding the Loop Tab Widget
To add the Loop Tab widget to your page, follow these steps:
- Open Elementor and edit the page where you want to add the widget.
- In the Elementor panel on the left side of the screen, search for “Loop Tab” in the search bar.
- Click and drag the “Loop Tab” widget onto the page.
- The widget will now appear on your page; you can move and resize it as needed.
Tabs
The Loop Tab widget allows you to add multiple tabs with customizable content. Each tab can have a Title, Subtitle, and Content, along with Icons and Dynamic Tags for enhanced flexibility.
Title:
- Set the title for each tab (e.g., Tab 1).
- Supports Dynamic Tags for dynamic content integration.
Icon:
- Choose an icon from the Icon Library.
- Upload a custom SVG if needed.
Sub Title:
- Add a Subtitle under the main title.
Content Source:
You can use both Template and Text Editor as the content source.
- Use the Editor to add content for each tab.
- Use the Template to add content for each tab.
Full Container Background:
- You can change the full container background for each tab.
Settings:
The Loop Tab widget offers various customization options to control the appearance and behavior of tabs.
Tab Title Position
- Choose where the Tab Titles will appear.
- Options: Left or Top.
- This setting applies to Desktop & Tablet layouts.
Vertical Alignment
- Adjust the vertical alignment of tab content.
- Options: Top or Center.
- Applicable to Desktop & Tablet layouts.
Text Alignment
- Align the tab text content as per your preference.
- Options: Left, Center, Right.
Action
- On Click: Users can switch tabs by clicking.
- On Hover: Users can switch tabs by Hovering on the tabs.
Enable Double Column
- Enable this option to display tabs in two columns.
- Only applicable to Desktop layouts.
Transition Delay (ms)
- Set the time delay before switching to the next tab.
- Range: 1000ms to 40000ms (1s to 40s).
Style:
Tab Container
The Tab Container styling options allow you to customize the appearance of the Loop Tab widget for different screen sizes.
Width, Padding
You can adjust the width & Padding of the tab container for different devices like Desktop, Tablet, and Mobile devices.
Border Type: Choose a border type or keep it as Default.
Border Radius
Customize rounded corners of the tab container:
Default value: 40px (Top, Right, Bottom, Left).
Background Color: You can set a solid background color for the container.
Tab Item
Gap Between: Adjusts the spacing between tab items for Desktop, Tablet, and Mobile.
Width & Height: Controls the size of each tab item.
Border Radius: Rounds the tab corners.
Padding: Customizable padding for different devices.
Typography: Modify font style, size, weight, and spacing.
Box Shadow: Adds shadow effects for Normal, Active, and Hover states.
Border Type: Choose default or custom border styles.
Text Color: Select Classic or Gradient text colors.
Background Type: Set Classic or Gradient background styles.
Sub Title
Gap Between: Adjusts the space between subtitles for different devices.
Padding: Controls subtitle padding.
Typography: Customize font properties for the subtitle text.
Text Color: Choose Classic or Gradient color styles.
Background Type: Set a Classic or Gradient background.
Normal, Active, Hover: Customize different states for interactive effects.
Loading Stroke
Thickness: Adjusts the stroke width for Desktop, Tablet, and Mobile.
Color: Customize the stroke color.
Horizontal Position: Controls the left/right positioning of the stroke.
Vertical Position: Controls the top/bottom positioning of the stroke.
Icon
Size: Adjust the icon size in pixels.
Gap Between: Controls the spacing between the icon and text.
Color: Customize the icon color for Normal and Active states.
Content
Padding: Adjusts the inner spacing for Desktop, Tablet, and Mobile.
Border Type: Choose default or custom border styles.
Border Radius: Rounds the corners of the content area.
Typography: Customize font style, size, weight, and spacing.
Color: Set the text color.
Background Type: Choose between Classic or Gradient backgrounds.
Box Shadow: Apply shadow effects to enhance depth.
Thats it. Cheers!
