Premium Content Switcher Widget Tutorial

Intro

Premium Content Switcher widget for Elementor allows you to present multiple content options in a smart way. It is ideal for pricing tables etc. You can add content labels and use the Richtext editor or Elementor templates for the content.

To view examples of the Premium Content Switcher widget, go ahead and check out our demo page.

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

  • Switcher
  • Content 1 & Content 2
  • Display Options

1. Switcher

  • Show Labels: Enable or disable the Switcher labels.
  • First Label: Add text for the first label, which is shown to the left of the switcher.
  • Second Label: Add text for the second label, which is shown to the right of the switcher.
  • HTML Tag: Select the tag that will be used to show the labels. Choose between H1 to H6. The default is H3.
  • Display: Select between inline (All the text on one line) and block (The labels and switcher will be displayed on separate lines).
  • Alignment: Align the text and the switcher to the left, center, or right.
Elementor Content Switcher Widget Switcher Settings
Elementor Content Switcher Widget Switcher Settings

2. Content 1 & Content 2

The Content 1 and Content 2 settings are identical.

  • Content to show: Select an existing Elementor template or add your content directly in the Richtext editor. In the editor, you can edit the text visually or with code, and add images from the Media Library.
    • You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
    • You can also select an existing Elemntor templates.
  • Alignment: Justify or adjust the content to the left, center or right.
Elementor Content Switcher Content 1 & 2
Elementor Content Switcher Content 1 & 2

3. Display Options

Animation: Select an animation that will be used on the content when the switcher is activated. Choose between fade and slide.

Elementor Content Switcher Display Options
Elementor Content Switcher Display Options

Style

  • Switcher
  • Content
  • Container

1. Switcher

Switcher
  • Size -Select the size of the switcher. The default is 15.

Colors -With this option, you can select the background type for the following areas:

  • Switcher Content 1
  • Switcher Content 2
  • Switcher Background

The available background type options are:

  • Color and opacity
  • Gradient
  • Image -Select or upload an image via the Media Library. If an image is selected, the following options become available:
  • Position:
    • Default
    • Top Left
    • Top Center
    • Top Right
    • Center Left
    • Center Center
    • Center Right
    • Bottom Left
    • Bottom Center
    • Bottom Right
    • Custom -Adjust the image’s X and Y positions using pixels, em % or vw.
  • Attachment -Default, Scroll or fixed.
  • Repeat:
    • Default
    • No-repeat
    • Repeat
    • Repeat-x
    • Repeat-y
  • Size:
    • Default
    • Auto
    • Cover
    • Contain
    • Custom -Adjust the image width using pixels, em % or vw.
  • Switcher Shadow -Add a shadow around the switch control button. Select the color and the following settings:
    • Horizontal position
    • Vertical position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Background Shadow -Add a shadow around the switcher. Select the color and the following settings:
    • Horizontal position
    • Vertical position
    • Blur
    • Spread
    • Position: Outline or Inset
Elementor Content Switcher Widget Styling Switcher
Elementor Content Switcher Widget Styling Switcher
Labels

The options for the first and second labels are identical.

  • Spacing -Adjust the space between the labels and the switcher.
  • Text Color -Select the color and opacity of the text.
  • In the Typography settings you can:
    • Select from a large number of font families.
    • Select the font size in either pixels, em, rem or vw.
    • Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
    • Transform the text to: Uppercase, lowercase, capitalized, default or normal.
    • Select a font style: Normal, italic or oblique.
    • Select a text decoration: Default, underline, overline, line through, none.
    • Adjust the line height.
    • Adjust the letter spacing.
  • Text Shadow -Add a shadow behind the text. Select from the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
  • Background -Select a background color and opacity behind the text.
  • Border Type – Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border radius -Increasing the border radius will add circular corners to the area with the background behind the text. You can adjust the border radius in pixels, % or em.
  • Padding -The Padding is the space between the text and the edge of the text container. Increasing the padding will increase the background size. Adjust the padding in pixels, % or em.
Elementor Content Switcher Widget Label Style
Elementor Content Switcher Widget Label Style
Container

These settings styles the container around the switcher and the two labels.

  • Background -Select a background color and opacity.
  • Box Shadow -Add a shadow around the container. Select the color and the following settings:
    • Horizontal position
    • Vertical position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Padding -The padding is the space between the labels and switcher and the edge of the container. Adjust the padding in pixels, % or em.
  • Margin -The margin is the space between the container and the rest of the widget content. Adjust the margin in pixels, % or em.
Container Style for Elementor Content Switcher Widget
Container Style for Elementor Content Switcher Widget

2. Content

  • Height -Adjust the height of the content area in pixels, em or %.
  • Text Color -Select the color for the text.
  • Typography.
  • Text Shadow -Add a shadow behind the text. Select from the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
  • Background -Select a background color and opacity.
  • Border Type – Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border radius -Increasing the border radius will add circular corners to the area with the background behind the text. You can adjust the border radius in pixels, % or em.
  • Box Shadow -Add a shadow around the content. Select the color and the following settings:
    • Horizontal position
    • Vertical position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin -Margin is the space between the content and the rest of the widget parts. Adjust the margin in pixels, % or em.
  • Padding -Padding is the space between the text and the edge of the container. Increasing the padding will increase the background size. Adjust the padding in pixels, % or em.
Content Style for Content Switcher Widget for Elementor
Content Style for Content Switcher Widget for Elementor

3. Container

These settings styles the outer container that holds both the labels, the switcher and the content.

  • Background Type -Select between color, gradients, or an image from the Media Library.
  • Border Type – Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border radius -Increasing the border radius will add circular corners to the widget. You can adjust the border radius in pixels, % or em.
  • Box Shadow -You can add a shadow around the widget with this option. Select the color and the following settings:
    • Horizontal position
    • Vertical position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin -Margin is the space between the widget container and the rest of the post and page content. Adjust the margin in pixels, % or em.
  • Padding -Padding is the space between the widget content and the edge of the container. Increasing the padding will make the background larger. Adjust the padding in pixels, % or em.
Elementor Content Switcher Container Style
Elementor Content Switcher Container Style

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.