Content Switch

The Content Switch widget in JupiterX allows you to switch between multiple content options within a single element. It’s useful for organizing information, such as pricing tables, feature lists, or categorized content. You can also use templates and sections inside the content.

View Live Demo

Content Tab

Switcher

  • Default State: Choose whether the 'Primary' or 'Secondary' content shows up first.

Primary:

  • Label: Name the primary option, e.g., "Monthly Plan."
  • Content Type: Choose 'Content' to type your text directly, or 'Saved Template' to use a pre-designed Elementor template.
  • Content Editor: If 'Content' is selected, type and format your details here.
  • Template Selection: If 'Saved Template' is your choice, click to pick a template from your collection.

Secondary:

Repeat the above steps for the secondary content that appears after switching.

Display Options:

  • Animation: Add a dynamic effect for switching content; options include 'Fade' or 'Slide'.

Style Tab

Here, we'll spruce up the appearance of our switch.

Switch

  • Alignment: Decide the placement; left, center, or right on the page.
  • Switch Style: From 'Classic' to 'Rounded,' pick your aesthetic.
  • Switch Size: Make it bigger or smaller as needed.
  • Colors: Select colors for both the controller and the background.

Labels

  • Text Colors: Designate colors for both the standard and selected text labels.
  • Typography: Play with font styles and sizes here.

Spacing

  • Horizontal Spacing: Adjust the space between switcher, primary and secondary elements.
  • Vertical Spacing: Adjust the space spreading from switcher to the content below.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.