How to Add a Free Elementor Content Switcher (switch custom content or elementor templates)

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)

RgIrtKuLFFIS 9 2H3isJl2 D2snLc4TnNAZS0NEvMXdTXWoWTZvd63tcGoaXE61896oyeDmS1wzsX9Q3LFoiBvrkBkyHUub2Q1h5oP 31J22UXA

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)

free elementor content switcher by the HT Mega addons

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)

custom content switcher by HT Mega addons

Under Content select Switcher one and under Title, give it ‘Demo 1’, then select Switcher two and give it ‘Demo 2’ (03:01)

wZz1DN2zG3S2XHKaPk1RCXmL OsmSntzIQNmkgPSRND2FJkDYARKuShPvrPk0xnCPdU3cE2tlcoDrug1V28Y WMIYmLnYapXb2OhMqrhfPotl fR1O zD7cET0BO2eN1duD2Kk52

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.

DvoPh5YMFbe6idlJX3eJHS4K6B LqeVjNTxiNX2rEw8ouncL5azKk7Sw6ARutCs3ibf99mAmEtfK4u2Un 0lnzNVyHpZyjSLKpZ
XxMP Tpri59g VtMpc06g8HwahPuo4dSfnNwJ20aT8BL1T4kf53RCwbxGYc Hh8qjKtAkBITkxamTNvfanh p5AnGh sha w mlWaQS

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users