How to Use the Switcher Element

The Switcher Element is a powerful content toggle tool that lets users switch between different content sections. It is often used for pricing tables, comparisons, FAQs, and feature showcases.

1. Adding the Switcher Element

Step 1: Insert the Switcher Element

1. Open the page editor.
2. Go to Add Elements → Find Switcher under Essentials.
3. Drag and drop it onto your page.

By default, the Switcher Element comes with two tabs (Tab 1 and Tab 2).

2. Structuring the Switcher Content

Step 2: Understanding the Switcher Layout

• Each Switcher Tab is a content container where you can add elements like text, buttons, images, or columns.
• Click on Tab 1 and Tab 2 to customize each section individually.

Step 3: Adding More Content

• Bring in elements such as text, images, buttons, or even columns.
• To keep a consistent layout, duplicate an existing tab instead of starting from scratch.

3. Customizing the Switcher Design

Step 4: Editing Tab Labels

1. Click on the tab text to rename it (e.g., "Monthly" and "Yearly").
2. Adjust the width under the settings to fit longer text.

Step 5: Styling the Switcher

• Background color: Set a color for the switcher background.
• Active Tab Styling: Change the color of the selected tab.
• Borders & Shadows: Add border thickness, colors, and shadow effects for better contrast.

Step 6: Choosing Switcher Styles

The Switcher Element has two styles:

1. Tab Style: Standard button-like tabs.
2. Toggle Switch Style: A sliding switch with text labels.

Step 7: Adding Icons (Optional)

• Add icons to each tab for visual clarity.
• Position icons on the left, right, or above the text.

4. Making the Switcher Responsive

Step 8: Optimizing for Tablet & Mobile

1. Switch to tablet view and check the spacing.
2. Adjust tab width & icon positions for smaller screens.
3. Repeat for mobile view to ensure proper alignment.

5. Why Use the Switcher Element?

• Saves space – Toggle between content instead of displaying everything at once.
• Great for pricing tables & comparisons – Show multiple options dynamically.
• Fully customizable – Change colors, styles, fonts, and icons.
• Works on all devices – Responsive settings ensure a smooth user experience.

With the Switcher Element, you can create interactive & dynamic sections that improve user engagement and make your website content more structured and easy to navigate.