The Style Kit Switcher

Style Kits / Docs / Global design control / The Style Kit Switcher

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.

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.

Customising 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.

Last updated on November 24, 2022

Search docs

In this category

Join our mailing list

Stay in touch! Subscribe for occasional Style Kits updates.

We use cookies to optimise your experience. By continuing browsing our website, you agree to our Privacy Policy