How to Use the Switcher Element

Die 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. Voeg die Switcher Element by

Step 1: Insert the Switcher Element

1. Open the page editor.
2. Gaan na Voeg elemente by → Find Skakelaar 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.
• Klik op Tab 1 en 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: Voeg by 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)

• Voeg by 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.