Content Switcher

Content Switcher is a great way to switch between two or more different content on your page. It can be used in many ways, such as switching between product images, price tables, a list of features, categorized content etc.

Content

Layout: Set the layout from the preset layout Options: Layout 1, Layout 2, and Layout 3.

* Note: Layout 2 and Layout 3 require only two items. and you can add multiple items in Layout 1.

Primary

primary tab
Primary tab
  • Title: Set the title of the primary tab.
  • Content: Choose between text editor or template.
    • If the text editor is selected, then a description box appears.
      Text editor: Set the description of the primary tab.
    • If the template option is selected, you can choose from the available templates.
      Template: Choose appropriate template.
  • Icon: Place the icon along with the primary tab title.
  • Icon position: Set the icon position either left or right.
  • Active: Toggle the switch to set the content active on load.

Secondary

secondary tab
Secondary tab
  • Title: Set the title of the Secondary tab.
  • Content: Choose between text editor or template.
    • If the text editor is selected, then a description box appears.
  • Text editor: Set the description of the primary tab.
    • If the template option is selected, you can choose from the available templates.
  • Template: Choose appropriate template.
  • Icon: Place the icon along with the primary tab title.
  • Icon position: Set the icon position either left or right.
  • Active: Toggle the switch to set the content active on load.

Display

display settings
Display settings
  • Switch alignment: Set the alignment of both tabs from left, centre or right.
  • Space: Set the space between the Content Switcher title and description.
  • Animation speed: Set the animation speed for switching between the primary and secondary tab.

Switch style

Title typography: Set the title typography like font style, size, family, etc.

switch settings
Switch settings

Normal

  • Color: Choose the color of the primary switch tab.
  • Icon Color: Choose the icon color of the primary tab.
  • Background Color: Choose the background color for the primary and secondary tab.
  • Border Color: Choose the border color of the switch.
  • Box shadow: Apply the shadow effect to the primary and secondary tab.

Active

Styling controls for the Active state are available under this section.

  • Icon Space: Set the space between the title and icon.
  • Label Space: Add space to labels.
  • Equal Width: Enable to apply equal width (This is available in only Layout 1)
    • Min Width: Set the minimum width.

Box

box setting
Box settings.
  • Box Color: Choose the color of the box.
  • Padding: Set the padding for the box.
  • Border: Set the border and border radius of the box.

Switch bar

switch bar settings
Switch bar settings
  • Padding: Set the padding for the box.
  • Background: Set the background color or background image on the switch bar.
  • Border: Set the border and border radius of the box.
  • Box shadow: Apply the shadow effect to the switch bar.

Switcher control

* Note: Switcher Control works only for Layout 2 and Layout 3.

switcher control settings
Switcher control settings
  • Handler border size: Set the Handler’s border size.
  • Slider border size: Set the slider’s border size.

Normal

  • Handle Color: Choose the color of the Switcher handle.
  • Handle Border Color: Choose the color of the Switcher border.
  • Slider Color: Choose the slider color.
  • Slider Border Color: Choose the border color of the slider.

Active

Styling controls for the Active state of the Switcher handle are available under this section.

Content style

content settings
Content style
  • Typography: Set the title typography like font style, size, family, etc.
  • Background: Set background color or background image of the content.
  • Text align: Align your content to the left, right, or centre.
  • Border: Set the border and border radius of the content.
  • Box shadow: Apply the shadow effect to the content.

Click here to check out a demo page of Content Switcher element.