Widgets

Content Switcher

Estimated reading: 3 minutes 710 views

A Content Switcher is a useful widget that allows you to change between multiple types of information on a webpage. You can use it for things like showing different product images, price lists, feature lists, or organized details. You can also use Elementor templates, AE – Templates, and sections inside the content section.

There are three different layouts to choose from, and you can select one and add your own content or use a pre-made design to display your information. It’s a versatile way to share content on your website.

Content Switcher: Skins Type
Content Switcher: Skins Type

Content

Skins

  • Skin: Select the layout from the preset layout skins.

Content

Content Switcher: Content Settings
Content Switcher: Content Settings
  • Title: Give a suitable title for each list item
  • Type: Select existing Elementor templates and Sections, AE – Templates, or add your content directly in the Richtext editor. In the editor, you can edit the text visually and add images from the Media Library.
  • Icon: Set an icon for each item in the switcher
  • Icon Position: Adjust the position of the icon like left or right
  • Active: Toggle the switch to set the content active on load.

Display Settings

Content Switcher: Display Settings
Content Switcher: Display Settings
  • Switch Alignment: Set the alignment for the switcher button and select from left, right, or center.
  • Space: Set the space between the switcher and the content section.
  • Animation Speed: Set the animation duration in milliseconds.

Style

Switch

Content Switcher: Switch Style Settings
Content Switcher: Switch Style Settings
  • Typography: Set the typography options for the text inside the switch button
  • Color: Choose the background color of the switcher for Normal and Active States
  • Icon Color: Set the icon color
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  • Border-radius: Set the border radius of a switch.
  • Box-shadow: Set the box shadow of the switch.
  • Icon Spacing: Adjust the space between the icon and the text.

Box Style

  • Box Color: Set the Box color.
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
  • Border-radius: Set the border radius of a switch.
Content Switcher: Switch Bar Style Settings
Content Switcher: Switch Bar Style Settings
  • Section Padding: Set the padding parameters for the switcher container section.
  • Background Color: Set the background color for the container.
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
  • Border Radius: Set the border radius around the container to control corner roundness.

Content

Content Switcher: Content Style Settings
Content Switcher: Content Style Settings
  • Padding: Set the padding for the content
  • Background Color: Choose the background color of the content section
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  • Width: Set the width of the border around the content section
  • Color: Choose a color for the border
  • Border Radius: Set the radius of the border to control corner roundness

Check out the Demo page of Content Switcher.

Share this Doc

Content Switcher

Or copy link

CONTENTS