Click Button to Change Image using Elementor | WordPress Elementor Pro Tutorial | Elementor Tricks

[Music] hey what's going on guys my name is jim fahad in this tutorial i'm gonna show you how to create this click to change image option using elementor page builder here we can see three buttons one is red color another one is green and blue now if we click on this green button you see this vehicle color becomes green if we click on this blue button it becomes blue and if we click on this red button the vehicle color becomes red so i will show you how to do that using elementor page builder and this tutorial is all about the idea if you follow this tutorial then not only this specific one you can create any type of click to show or hide images option using elementor page builder so without further ado let's now go inside elementor page builder now first to take a new section click on this plus icon i'm selecting this two column structure now let's give the height i'm setting it to minimum height and i'm giving it 100 vh now inside this left column click on this plus icon here i'm dragging an image widget so let's choose the image first i'm selecting this red vehicle image now click on insert media all right now inside the right column here i want to add some content so first i'm dragging and hitting widget i want it to say choose the beast and from under style tab i just wanna reduce its line height to one now underneath this heading let's just drag a text editor widget here and i also wanna add a subheading at the top of this heading so let's click on this rubik's cube icon and i will be using this divider option so let's drag this divider widget at the above of the heading widget first let's make it in pixel and i'm giving here 270 pixel then from add element i'm selecting the text inside the text field i'm writing dynamic power all right let's now do a bit styling so from under style tab i'm making the gap to very minimal and wait let's make it two then from here open the text from the typography i just wanna make the fonda family to the poppins font then the font size to 18 pixel and font weight let's make it 500 perfect all right now underneath this paragraph i wanna add some buttons but before that i wanna take an inner section so let's click on the rubik's cube icon and drag an inner section underneath this paragraph here now let's delete one of these columns from inside the inner section now inside of this intersection click on this plus icon and i'm dragging a button widget here inside the inner section now inside this button i only wanna use an icon so from here icon click on icon library here i'm searching for car let's select the car icon and click on insert then from here icon is spacing i'm making it zero and you know i just wanna remove this text from here now go under style tab from here first let's add some border radius make sure you have selected in percentage and i'm giving here 50 percent of border radius then add 20 pixel of padding with this button all right now i want to change its color to the red color now from here open the color picker i'm selecting a red color that's dd0121 alright now let me show you another thing like if we now try to duplicate this button for the moment i'm duplicating this button from here you see they are now appearing one after another vertically but i don't want that i wanna place them one after another horizontally so to do it i'm showing you another trick first of all i'm just deleting this one okay so let's select this button go under its advanced tab and from here open the positioning now make the width to inline auto this time if we just duplicate this button you see they are now one after another horizontally all right let's now duplicate it one more time and you know we need to add some space in between these buttons so i'm selecting the middle button go under its advanced tab and bind the margin only on the right and left i'm adding 10 pixel of margin cool now the middle button color go under its style tab from here change it to a green color that's hash 56b and the third button let's make its color to the blue color that's hash 255 fdf all right so we're done with the layout now i wanna create that click to change image option to do it first of all i wanna insert the other images the green one and the blue one so to do it just simply duplicate this image widget and duplicate it one more time now here the first image is the red one perfect let's now select the second one then replace this image with the green one click on insert media and then the third one i'm replacing weight with the blue one here we go click on insert media all right now have a look first let's select the first image go under its advanced tab and here inside css classes i wanna add a common class name so i'm giving it the class name all dash images remember you need to apply the exact class name what i'm writing here otherwise it won't work so from here i'm just copying this class name go to the second image under the advanced tab i'm adding the same class name here let's do the same with the third image from under advanced tab apply the same class name with it so right now these three images have the same class name that's all dash images okay now we need to add an unique id with each of these images so with the first image let's add the css id this would be the unique css id so here i'm adding red dash image then with the second one the unique css id would be green dash image and with the third one the css id would be blue dash image alright now my goal is i will be hiding all of these images and i will keep only one image at a moment and to do that we need to apply some custom css with it so let's now just select this whole section by clicking on the six dots go under its advanced tab and from here open the custom css option by the way custom css is only available on elementor pro i will put my elementor pro affiliate link in the description if you purchase elementor pro through my affiliate link you don't have to pay any extra but i will get a credit for that that will help me to continue this youtube channel and make more interesting tutorials like this all right now inside this custom css field you can write the css code by yourself but you don't have to do that because i already have written those code for you all you need to do you just need to go to gym for the digital.com i will put this pages link in the description from that page here under the initial image show or hide css just copy the css snippet from here go inside elementor and paste the css code here okay you may remember we have given all the images the same class name that was all images so first i made their display to none and here you remember we have added an unique id with each of these images so initially here i have made the display block only for the red image so instead of red if i write here let's say green we can see here now the green image or if we put here the blue we can see here the blue image okay for the moment let's put here the red image basically it will work in this way and now my goal is to make it dynamic using javascript so whenever we will click on this red button the image will become the red image when we will click on this green button the image will become the green image and like i said to do that we need to add some javascript code so now click on this rubik's cube icon and here i'm searching for html widget now we can insert this html code anywhere of our website or web page so i'm just dragging this html widget here actually you can put the html code anywhere of your website because it will only be shown inside the elementor page builder on real website you cannot see the html codes all right now again go to gym for the digital.com from this page if you scroll down a bit here you can see dynamic image hide or show js from here just copy this snippet now go inside elementor then paste the javascript snippet here all right if we now have a look inside this javascript code and don't worry if you are not comfortable with javascript because you don't need to understand it i'm just explaining it if you are curious it's a very basic jquery code very easy very simple so here you see i have written it in this way whenever you will click on this button all other images will be hidden then only the linked image will be shown here it's simple like that so right now we have the javascript code now the very last thing we just need to connect these buttons with these images and we can easily connect these buttons with these images by using custom attributes so first i wanna connect this red button with the red image to do it just click on this red button go under its advanced tab now from here open the attributes option and then inside this custom attribute field we need to write some custom attribute code and again you don't need to write that by yourself just go to gym for digital.com and here you can see button data attribute just copy this snippet from here go inside elementor then paste the custom attribute code here so first here you can see it says data dash show me and here you can see a pipe icon you don't need to do anything with this you just need to replace this image id name with this images css id okay for now just forget about everything let's keep it very simple all you need to do just remove this image id name from here and then you may remember you have added an unique id name with this red image that was red dash image that's it so then just copy this whole attribute then go to the second button this is the green button select it go under its advanced tab open the attributes then inside here just paste the custom attribute snippet and here instead of red i'm writing here green now go to the third or blue button go under its advanced tab open the attributes option paste the snippet here and here instead of red i'm just writing blue dash image and now if we click on this red button or green button nothing is changing here because this click to show hide content feature won't work inside of elementor page builder so to see it's working we need to see it from the live preview before that don't forget to click on this green update button and then click here on this eyeball icon to preview it now have a look if we click on the green button the image becomes the green image if we click on this blue button the image becomes the blue image also if we click on this red button the image changes accordingly so it's working 100 perfectly now go back inside elementor page builder because i want to check it how it's looking inside mobile device and tablet device so to take its responsiveness from here click on this responsive mode icon so actually we don't need to do anything with its responsive because it's already looking great on mobile device but i think we can make these buttons centered aligned to do it just click on this column icon and from here horizontal align only for mobile device i'm making it to center it looks perfect on mobile device let's now have a look how it's looking on tablet device on the tablet device is also looking great and on the desktop view is already looking great so when you are happy with your work and you are finally done don't forget to click on this green update button to save your work i hope you have learned something new today if you like it please give this video a big thumbs up and don't forget to subscribe this youtube channel also press on that notification 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 tutorial i will see you in the next video for now bye bye

Channel: Jim Fahad Digital

Views: 26,138

Keywords: Click Button to Change Image using Elementor, WordPress Elementor Pro Tutorial, Elementor Tricks, Elementor Tips & Tricks, elementor tips and tricks, Change Image on Button click in elementor, Elementor show hide image, elementor show hide section on click, Elementor show Image on click, Elementor Image show hide, Jim fahad Digital, livingwithpixels, ohhh boi, elementor, elementor tutorial, elementor pro, wordpress, wordpress tutorial, WordPress Elementor, Elementor custom CSS

Id: nys-bvFn2Kg

Length: 13min 34sec (814 seconds)

Published: Tue Oct 19 2021