Click to Alter Content | Interactive Elementor Tab | WordPress Elementor Pro Tutorial

[Music] hey what's going on guys my name is jim fahad in this tutorial i'm going to show you how to create an interactive tab using elementor page builder so here on the left you can see some logo here and if you click on any other logo like here i'm now clicking on google here on the right side you can see a different content if we click on twitter logo here you can see different content if we click on yahoo logo you can see here a different content and again if we click on the facebook logo here we can see the different content and you don't necessarily use all the time images here you can use here anything that may be images that may be buttons you can use here anything and on the right side you can use any type of content so it would be like simple text headings or you can add videos you can add pricing tables you can add forms anything you want and we will be doing it only using elementor page builder so without further ado let's now go inside elementor page builder alright so let's first take a section i'm selecting a two column structure and let's make its height to minimum height and i'm setting its height to 100 vh now first here inside the left column i'm dragging here an inner section and inside our left column of the inner section layers here drag an image widget let's now select the image so first here i'm adding a facebook image and click on insert media let's now go under its style tab i'm making its width in pixel and let's make it 120 pixel let's give it 40 pixel of height and object fit let's make it contain all right now let's do a bit of styling so go under style tab let's unbind the padding and i'm giving it in percentage on the top and bottom let's give ten percent and right and left let's give it five percent of padding now let's add a bit of border with it so from here let's click here on border so from here border type let's select solid border with one pixel border color let's make it black and a bit transparent and lastly i want to add some box shadow with it so from here first let's select the shadow color from here let's make it more transparent like this i think it looks perfect because if we minimize the elementary builder if we have a look it looks perfect all right now i just wanna copy and paste so just right click over this image copy it and let's just paste inside the right column here now here instead of facebook i'm adding another logo so here let's add google and then i now want to duplicate this entire intersection so let's just duplicate it now let's replace this logo with another logo so here i'm adding twitter and then the last one let's add here the yahoo one and click on insert media all right so we have added four logos here on the left column now inside right column here first i want to add some spacing with the right column so let's select the right column go under its advanced tab here i'm adding padding in percentage so let's add three percent of padding all around the right column now here again i want to add an inner section inside the right column here and let's just delete the right column of the inner section so here this is our main right column and inside that we have here our inner section and inside our inner section here we have got our one column so we will be putting all of our content within this column so for now let's here add a heading widget inside this column so here i wanted to say facebook content let's do a bit styling from here so typography i'm just making the font weight to 800 then underneath this heading let's just add some paragraph or text editor widget so here i'm dragging this text editor widget underneath this heading widget here let's add more dummy text so it would look more realistic all right perfect so this would be the content for this facebook logo let's now create another content section for the google and another for twitter and another for yahoo you know so to do that just let's duplicate this inner section so i'm duplicating this inner section by clicking on this duplicate icon now here instead of facebook content i want it to say google content and here like i said you can add anything so here let's click on this rubik's cube icon now here i'm adding a video widget here let's now remove some text from here just to give this section a real look now again just to duplicate this inner section so this would be for twitter so here instead of google content i'm writing here twitter content now let's remove the video from here and let's add here a form widget so from here i'm dragging a form widget here underneath the heading again let's duplicate this inner section and here instead of twitter i'm writing here the last one is for yahoo so here i'm typing yahoo content and let's remove the form from here and let's add here okay let's search for it all right just had here a pricing table like this all right so we are done with our markup so i'm just recapping it here we have got our four logos and here we have created our four inner sections one is for facebook another one is for google another one is for twitter and the last one is for yahoo okay so now the first thing i want to do i want to add some data attribute with all of these images so to add the attribute just click here on this facebook logo from under its advanced tab let's just scroll down then here you will find the attributes option by the way you will get the attributes option and custom css option only on elementor pro and we will be needing both of these options i will put elementor pro purchase link in the description so if you don't have elementor pro already you can get that from the link alright let's now expand the attributes option from here now inside first you need to put the key name and then the value name no worries i already have written that for you so you just need to go to gym for the digital.com i will put this pages link in the description as well so from that page if you scroll down a bit here you can see image data attribute so from here i'm just copying this attribute text and let's now go inside elementor page builder and paste the attribute text inside here now here have a look here it says data dash show me then here is a pipe symbol and here i have written id name content so first instead of id name content as is the facebook logo so here i'm writing facebook dash content and we will be using this facebook content as the id name of this intersection not this this intersection the facebook content section i will show you that very shortly for now just stand by with me for now just remember here data show me pipe icon then it says facebook content so now i'm just copying this whole text and then click on the google logo go under its advanced tab and here expand attributes now here paste the text now instead of facebook here i'm just typing google now let's select twitter image go under advanced tab now expand the attributes then here paste the text instead of facebook right here twitter you know the same just click on the yahoo icon go under advanced tab expand the attributes paste the text here instead of facebook here i'm typing yahoo content so now we will be using this yahoo content facebook content google content twitter content these as the id name of the inner sections so let's start with the facebook one so you remember we have named the attributes name here you see facebook content so here i'm just copying the facebook content name and on the right side here this is the facebook content section so just click on the six dot to grab this inner section go under its advanced tab and we will be pasting the css id name here so it's facebook dash content now let's go to google's inner section go under advanced tab and here css id it would be not facebook content it would be google content now let's go to the twitter content go under advanced tab here is the css id it would be twitter content and then here is the last one yahoo content inner section go under advanced tab css id it would be yahoo content and also i want to take a common class for the yahoo twitter google and facebook sections that's why i will be also adding a common class with all of this the class name will be all dash content okay so let's copy the class name and let's add the class name with all of them so here's the twitter content let's paste the class name here also with the google content let's paste the class name here and also with the facebook content let's paste the class name here as well all right now i will be doing a bit of custom css because my goal is to make all of this right inner section hide first and then when you click on facebook only the facebook section will appear when you click on google the google section will appear you know right so to do it first let's select this column so i'm clicking on this column icon now from under its advanced tab let's open the custom css so actually you can write it by yourself or if you want you can just go to gymfahatthedigital.com and you can just copy this css snippet from here but as it's very simple so here i'm writing it by hand so you know we have taken a common class that's name was all content so here i'm writing first a dot then all dash content then inside the curly braces i'm making their display to none so right now we can no longer see any inner section here so first of all here i want to display one intersection at least as default so here i'm writing here another line so you know the name of the inner section i mean the facebook inner sections content id is facebook content so to select id we need to put here first a hash then facebook dash content now here inside the curly braces i'm making the display to block now you can see the facebook content here on the right side let me show you to make more clarify so here instead of facebook content if we write here twitter content now we can see the twitter content on the right side if we write here instead of twitter let's write here yahoo we can see the yahoo content on the right side i hope it makes sense so far so first of all instead of yahoo i'm making the facebook content visible by default and then i want to make the click function by using some javascript snippet but no worries because i already have written the javascript snippets for you so to apply that just click on this rubik's cube icon and then here i'm searching for the html widget you can put the html widget anywhere of the page because it doesn't actually matter because we can see the html widget inside of the elementor page builder but we can but we cannot see that on real website so here i'm just dragging the html widget anywhere of this page now let's go inside jim for the digital.com and here if we scroll down a bit here you can see interactive tab.js let's just copy this snippet from here now go inside elementor page builder inside the html code just paste the javascript snippet here so actually it's a very basic jquery snippet i'm explaining it very shortly so basically this is the same thing what you have just seen on the css i just made it dynamic using jquery so first of all i made all the contents here you can see the all content class first of all i made all them hide i mean i made all them hidden then when you click on the specific icon the particular section will be shown that has the same id with its data attribute so it's simple as it is all right let's now minimize it and then click on this green update button to save our work by the way you cannot see them working inside of elementor page builder so to show it's working you we need to click on this preview icon let's just click on this eyeball icon so from here if we now click on google we can see the google content here if we click on twitter we can see the twitter content if we click on yahoo we can see the yahoo content again if we click on facebook we can see the facebook content here cool and lastly if you want to add some fading animation with it like if we click on google it's instantly appearing but to make it look more cool we can add some fading animation with it so let's do it really quickly from inside elementor page builder so for the moment once again i just wanna appear all the intersection on the right side otherwise we cannot work with that and to do that you know we just need to click here on this outer column just click here now go under its advanced tab and from here just click on custom css so here instead of display none i'm making a display block for the moment so we can again now see all the contents all right now let's click this inner section from under its advanced tab here you can see the motion effects so from here entrance animation let's make it fade in and animation duration let's make it slow actually you can make it the way you want i like the fade in and animation duration too slow all right so just to do it with all the sections i'm just right clicking here click on copy then just hover over on the google content in our section right click here and click on paste style let's do the same with twitter content right click here click on paste style let's do the same with yahoo content right click here and click on paste style and then let's go back to the column here click on the column icon from under advanced tab let's expand the custom css then make the display block to display none like before alright and again click on this green update button to save our work and let's now preview our page so here if we now click on google the google section appears with the nice fitting effect same with yahoo same with twitter we can now see the nice fade in animation with all of it i really like it okay so as always my main concern is it compatible with tablet and mobile devices alright so let's do it compatible with mobile and tablet device now from inside elementor page builder let's first click on the responsive mode and first let's go to the tablet icon on tablet device it looks great and if we now go to the mobile device it also looks great but i think if we make them i mean if we adjust them within more shorter space then that will look great so i just wanna adjust two images within a row so to do it just click on this inner column and make the column width to 50 percent also let's do the same with all of them 50 percent also let's do with the twitter column with 50 percent and the last one yahoo let's make the column with 250 percent and then click on this green update button to save our work and like i said it won't work inside elementor page builder so let's just preview it and if we now preview it on mobile device it will look like it i have here selected iphone x and let's make its width to 75 percent so we can see it properly let's now minimize the console from here now let's have a look how it's looking on mobile device so if we click on twitter we can see here the twitter content here is the yahoo content here is the google content everything is looking great and i really like it i believe you already have got the main idea so not necessarily you always need to put here logos you can put here button or any other link and on the right side inside the inner section you can put anything you want i hope you have learned something new today if you like it please give this video a big thumb up and don't forget to subscribe this youtube channel also press on that bell icon to get notified before anyone whenever i will upload a new video on this youtube channel and if you want me to help you on your wordpress project or elementor project then you can contact me through my website that's jim fahad digital.com i will try my best to help you personally once again thank you so much for watching this full tutorial i will see you in the next video for now bye

Channel: Jim Fahad Digital

Views: 4,859

Keywords: Click to Alter Content, Click to toggle element, Click to change content, Click to change element, Click to change layout, Click to show hide, Click to Alter content in elementor, Click to toggle content in elementor, Click to change content in elementor, Interactive Elementor Tab, Interactive tab, Elementor section changing tab, Elementor layout tab, Elementor, Elementor Pro, WordPress Elementor, Click to change text wordpress, jim fahad digital, elementor tutorial, wordpress

Id: LAgLMTU_vqE

Length: 18min 33sec (1113 seconds)

Published: Mon Aug 02 2021