In this blog post, I’ll show you how to add a free elementor content switcher to your WordPress website. The content switcher will help you switch between different content types on your website in just two tabs.
We’ll use a free elementor extension, HT Mega Addons and in a few simple steps, we’ll have a content switcher on our elementor website.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Free Elementor Content Switcher Tutorial
Step 1: Install the HT Mega Addons Plugin
On your WordPress dashboard, go to Plugins > Add New, search for the HT Mega Addons, install and activate it (00:59)
After you activate your plugin, when you click on it in the menu you’ll be able to see all the Elements that are available for you to use. Find the Switcher and make sure it’s enabled, then Save changes (01:24)
Step 2: Add a Switcher Widget to your Elementor Page
With your content switcher activated, go to the Pages section and open up any page with Elementor where you would like to add your switcher.
In the Elementor editor, click (+) to create a new section, then go to your Widgets area and search for the Switcher (HT) widget, drag it to your section (02:15)
To Read: Free Elementor Pricing Table Tutorial: Create Pricing Tables using Premium Addons
Step 3: Customize your Switcher
In the Edit Switcher area on the left, there’s an option to Select content source. Here you can either use custom content or you can use an elementor template in your switcher.
Use Custom Content for your Switcher
First I’m going to show you how you can use custom content for your content switcher, so under Select content source, select Custom, and then you can add text for switch one and then for switch two sections (02:33)
Under Content select Switcher one and under Title, give it ‘Demo 1’, then select Switcher two and give it ‘Demo 2’ (03:01)
Use Templates for your Switcher
Under Content > Select Content Source, select Elementor Template instead of custom. Here you can use your already created Elementor templates. For example, here I have a Pricing menu template and a Find us template that I’m going to use.
Select Switcher One, under Title, rename it to ‘Pricing Menu’, then rename Switcher Two to ‘Find us’.
Under Switcher One, select Elementor Template for Source Content, then under Content select your template (04:24), Go to Switcher two and do the same.
When you’re done, click the Update button, then reload your page and preview the results.
To edit your switcher buttons;
Back in your Elementor editor select the switcher widget and go to Style > Switcher Button, under Background Type, give it a colour of your choice, then under Color choose a colour for your button text (05:53)
Down on Active, choose a different background colour for when the button is active.
You can go ahead and make more customizations on your content switcher, for example, you can use an image, you can add a border, change typography and more, that’s if you’re using custom content.
When you’re satisfied with your customizations, just click the Update button and then preview your changes.
Also Read: How the Elementor Kits Library Works
In closing
That’s how you can add a free elementor content switcher to your website and customize it to your preference.
If you have any questions or comments, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.
