• a

POPULAR DIVI CHILD THEMES

Florence

Molti

Molti Ecommerce

Go-On 2.0

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

NEW & POPULAR DIVI CHILD THEMES

Florence

A Delicate & Innocent Business Child Theme for Divi.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti

Multipurpose Business Child Theme for Divi.

Go-On 2.0

The Most Modern Child Theme for Selling Digital Products.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

How to create Image Switcher on Custom Tabs click in Divi

Samar Jamil

Hey Everyone, what’s up?

In this tutorial, I’ll show you how to create an Image Switcher on Custom Tabs click. So when you’ll click on Custom Tabs It shows the content in the tab more like an Accordion and changes the image on your screen on the right of it. It’s kind of a cool thing to add to your site and attract people.

Sneak Peak

Here’s a quick look at what it looks like in action. You can see that when you click on any of the Custom made Tabs It reveals the content and changes the Image on the right side with smooth animation.

Desktop

Mobile

Video Tutorial

Let’s see How to achieve this same thing on your site

All you’ve to do is simply enter your Name and Email in the form below and click on the Submit button then you’ll see the Download Layout button just download the layout.

After Downloading you’ll need to extract the .Zip file on your PC after extracting you’ll get a .json file. Once you’ve .json file you’ll need to go to any page you want and Enable the Divi Builder. Once Divi Builder is enabled on your page you can now drag the extracted .json file and drop it to Divi Builder. You’ll then see a popup, just uncheck the option “Replace Existing Content” and click on the Import button.

Now the layout will be successfully imported on your page you can now simply change the content to your own and you’re good to go.

How to change the Revealing Text to any other module.

When you click on the Tab you see text reveals for the currently active tab. If you want to change it then all you’ve to do is copy the CSS class from the Text Module and paste it to the newly added module and delete the Text Module. You may have both modules If you want. Below I’ve added a Button Module and you can see it’s working fine.

How to add more stuff after Image

That’s super cool, right? The same goes for the Image area If you want to add something after the Image of the active slide you’ve to copy the class of that Image and paste it to the newly added Module. As you can see in the below demo the text “Amazing” shows after the Image.

So that’s how easily you can create an advanced tab that switches the Image. Cool right? Let me know what you think about this creative idea in the comment section below I’d love to hear from you. 

Have a great day!

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!