The Content Switcher Element is a unique and user-friendly tool that allows you to toggle between two content areas. Unlike the traditional Tabs element, the Content Switcher provides a sleek toggle-style switcher, making it ideal for showcasing comparisons, such as yearly vs. monthly pricing or any other dual-content display.
Adding the Content Switcher Element to Your Page #
- Locate and Add the Content Switcher Element:
- Open your Elementor editor and navigate to the GW Elementor Addons panel.
- Drag and drop the Content Switcher Element to your desired section on the page.
Configuring the Content Switcher #
Switcher Settings:
- Alignment: Define the alignment of the Content Switcher.
- Active Item: Select the active item when loading the page.
- Add badge: Add a badge next to the item name.
Content Tab: Set up your content areas:
- Primary Item: Select the first template to display (e.g., Monthly Pricing).
- Secondary Item: Select the second template to display (e.g., Yearly Pricing).
Use prebuilt templates or simple text for these areas, depending on your website’s requirements.
Styling the Content Switcher #
Style Tab: Personalize the appearance of your Content Switcher for a seamless fit with your website:
- Switcher Typography: Customize font style, size, and weight.
- Switcher Colors: Set custom colors for the switcher background, text, and active states.
- Toggle Button Size: Adjust the size of the switcher button for better visibility and usability.
Content Area:
- Style the content areas’ text, background, and borders for both the primary and secondary templates.
- Ensure a consistent and polished design for both views.
Advanced Options #
Advanced Tab: Use Elementor’s built-in advanced settings to refine your element further:
- Adjust spacing, padding, and alignment for perfect positioning.
- Ensure your Content Switcher is responsive across all devices.
Use Case Example: Pricing Tables #
The Content Switcher Element is perfect for toggling between Monthly and Yearly Pricing tables:
- Add prebuilt pricing table templates to the Primary Template (Monthly) and Secondary Template (Yearly).
- Style the switcher to provide a smooth and visually appealing toggle experience.
- Allow users to compare options and make informed decisions easily.
Unlock the Power of Dynamic Content #
With the Content Switcher Element, you can simplify complex information and create a seamless user experience. Whether it’s toggling between pricing plans, features, or other comparisons, this element helps you present information in a clear and organized way.
