The Style Switcher Widget

One of the Style Kits widgets is the SK - Style Switcher. This allows you to have a toggle or dropdown at the frontend of your site, allowing for the users to switch between 2 or more Style Kits. 

This unlocks the potential for two things:

1. Using the  Toggle Style, you can have a front-end light / dark mode functionality where users can pick the appropriate contrast. This mode works with two Style Kits.

2. Using the  Dropdown Style, you can showcase pages to your clients, and show them different styles for the layouts. You can use as many Style Kits as you want in this mode.

The Toggle Style

As the name suggests, this style output a Toggle, that switches between two Style Kits. 

In the screenshot below:

  • Toggle A - Default
    This is the default toggle, and will always display the Global Style Kit (or the style kit of the specific page).  You have the option to customise the icon, and edit the styles under the Style tab. 
  • Toggle B 
    This is the second toggle, which loads the secondary Style Kit. Choose an icon and pick a Style Kit from the dropdown, to switch to.

Customizing Styles

As with most elementor widgets, the Style Switcher allows you to customise the appearance of the toggles and dropdowns, in order to make them blend well with your existing styles. You can find the Styling options at the Style tab of the widget.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us