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!
Hi Samar, Thank you so much for this! I just wanted to know is it possible to add more tabs with images that are in sync, and if yes how is that done?
Hi Haj, Please open the chat & I’ll explain to you clearly.
Thanks!
Hi Samar, Thank you so much for this! I just wanted to know is it possible to add more tabs ?
Regards !
Hi i have a question how do you call an specific tab from a link for example i want to do a menu link to Woo Modules what do i put so it opens the page on that tab.
Hi Samar, Please if I want to extend to maybe include 4…6 items that can be toggled, how can I implement this?
Hi Thiago, You’ll have to go through the Code that is provided in the Layout to be able to add more items. You’ll have to duplicate the CSS & JQuery in the Code Modules and set up classes for new Tabs.
How to add 4+ tabs?
Hi, is it usable for video files, similar to manychat.com?
Yes, you can easily replace the Image Module with the Video Module and copy/paste the class from the Image Module and you’re good to go. ✌️
How to replace modal? Didn’t find any good information on google 🙁
Hi, good tutorial! How is possible to edit the type of animation? Can you tell me which part of the code I need to edit? thanks in advance
Hello, this code works fine on my computer browser, but strangely, it doesn’t work on mobile browsers, what should i do?
Can you tell me how I can prevent the specialty section from adjusting the content on the rest of the page? Meaning that the section loads with a fixed height so nothing moves when a button is clicked.
Hi Gabe
You can try to remove the Height added to the Section and that should fix the issue!
Sorry .. in english =)) This is really great!
Where can I change the border color of the active box and the small blue line under the icon (currently blue).