1. Home
  2. Docs
  3. Xpro Elementor Addons
  4. Free Elementor Widgets
  5. Content Toggle

Content Toggle

How to Install Elementor Content Toggle Widget

Xpro Content Toggle Widget for Elementor lets you create hidden content boxes, so the visitor only sees the titles of each content box item. This lets you showcase your content in a less cluttered way. The visitors don’t need to scroll through a lengthy page and can see all the content by simply sifting through the titles. That is why Xpro has added this best FREE widget in the free list that lets you add an attractive and functional content toggle to your Elementor website.

However, this widget is also perfect for the comparison of two types of content. Our super cool Content Toggle Widget for Elementor is touch-friendly and comes with all the necessary customizable features to help you showcase the two diverse versions of the content with less scroll time. You can add more credibility to your website by adding any of the 6 unique and amazing switch button styles.

Xpro Content Toggle widget for Elementor flawlessly allows users to switch between two kinds of content, saved templates, or pages. You can apply tons of styling customization to make the most user-friendly content toggle layout for your websites. It’s a FREE, easy-to-use widget to create brilliant before-after effects on your WordPress website. Let’s see how you can fully utilize this amazing widget.

Requirement

You need to install and activate the free version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Content Toggle Widget is ‘Enabled’ from the Xpro Elementor Addons dashboard, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Content Toggle Widget, and then toggle the button ‘ON’ to enable it.

How to Use Xpro Content Toggle Widget for Elementor

This fantastic content toggle feature allows you to showcase your most important content beautifully and interactively on your website. Get instant attention by adding this appealing element that will attract new customers which will increase site traffic and conversion as well just because of less scroll time.

This Toggle element allows you to use any of the Free Xpro widgets in each section, including the most incredible options to design the most standout website for visitors to boost sales.

Let’s see how you can fully utilize the potential of the Xpro Content Toggle Widget for Elementor.

Step 1

Click on the Xpro Addons section available in the Elementor Editor.

Step 2

From the Xpro Addons section, find and simply drag’n’drop the Content Toggle widget on your desired page location.

This is the default view of our Xpro Elementor Content Toggle widget.

How to Add Content in Xpro Content Toggle Widget for Elementor

The widget is a super easy option in which you can creatively showcase your content in a user-friendly manner. At first, you can add a label (title) to your toggle in the edit box adjacent to the label option in the Primary Section of the Content Tab. After that, there are two ways to add content (Editor or Dynamic) which you can select from the content source option.

As you see I have selected the content source as dynamic. An edit option will appear and when you will click the edit option a pop-up of the widget area. From here you can easily drag’n’drop any widget through which you can add any kind of visual content i.e. saved templates, images text.

Similarly, you can drag’n’drop on the widget you want to add I have used the pricing widget for a better understanding of the most relevant benefit of the content toggle widget and that is less scroll time.

If you want to know more about adding content or how to style our Xpro Pricing Widget. You can easily head over to the doc of Xpro Pricing Widget for Elementor. Moreover, if you want to add your pricing in a more appealing way you can also check Elementor Pricing Carousel Widget.

Similarly, you can add content to the Secondary Section. It will look something like this.

Try our free Elementor Theme Builder to customize the default WooCommerce product and category templates.

By Xpro Elementor Addons

How to Style Xpro Content Toggle Widget for Elementor

Once you are done adding content you can jump towards the most important part where you can attractively present your content toggle on your Elementor site.

Switch Section

Here you can choose any of the 6 different styles and adjust the alignment of the switch. You can adjust the size and the space between the content and the switch.

After that, you can choose the most vibrant colors for both primary and secondary options.

Label Section

Similarly here you can separately style your primary and secondary label. You can change the typography and color. You can simply adjust the active color as well.

Content Section

Now let’s style the content to make it more eye-catching on the website. You can style your content with the following options from the Content section:

  • Set the alignment of the content
  • Change the typography of the content text
  • Add color to the content text & background
  • Add & Style box-shadow
  • Add & Style border (5 options)
  • Customize border-radius and margin

Similarly, you can style the content of the other toggle content by toggling on the other option.

The end result will look something like this on your website

Best Content Toggle Widget for Elementor

That is all from our Content Toggle Widget for Elementor. We hope now you have a better understanding of how to fully utilize our easy-to-use Content Toggle widget by Xpro to add the most interactive content toggle feature to your website. This widget is very helpful to showcase your content in a compressed form.

If you want to explore and add more attractive Elementor widgets then check our complete list of free Elementor widgets and download our free Elementor addons now.

Moreover, check our other promising widgets like Social Share for Elementor, Counter, and Hotspot widget for Elementor, and Social Icon Widget. You will be surprised how easily you can customize Xpro Elementor Addons for your WordPress websites.

How can we help?