Click Button to Change Image And Text Using Elementor
hi guys in thisTutorial I’m going to show you how you can change images and text with a simple button click and at the end of the video I’m also going to show you how you can stop your visitors from getting pushed back up to the top of the page when they click on your buttons so sit back relax hit that like And subscribe button and let’s get into the video
okay guys the first thing we’re going to do is add a new section and in this section we’re going to add three columns and in the First Column we’re going to add three buttons I’m going to drag One widget button onto our page and I’m going to right click on the pencil icon on the right hand side and I’m going to duplicate it two more times
Now with our buttons added I’m going to make this section here slightly smaller so I’m going to drag in one of our column sides and this is going to make our images slightly bigger so what I’m going to do now is add our images and to do that I’m going to click on the plus button and I’m going to drag in an image widget and to save time like before I’m going to right click on the pencil icon and duplicate it two more times.
with those added I’m now going to add some text to our page so I’m going to go into the elemental menu and drag in a text widget and I’m going to duplicate it like we did before two more times because our text is set to Black it is hard to read so to save time I’m going to change it within the section to do that we want to go into the section editor and click on Style in the top left hand side and select typography just click on the Colour Picker next to text.
select which colour you want to change your text to now what I’m going to do is go into each text box and type some text in you can write as much text as you want in this box but for the purpose of this video and to save time I’m only going to type in text free now I’m going to go into each box on the right hand side and the next one up I’m going to type in text2.
In the final one I’m going to type in text one now with our text added I’m going to add our images we have three different buttons and we have three different text boxes so we’re going to add three different images and I’m going to select those at random from our gallery now there are buttons images and text have been added we’re going to start adding some code and you can find this code on my website which there is a link for in the description below
I’ve hopefully made this as easy as I possibly can for you to follow along with so the first bit of code you need to get is the button CSS ID you’re going to need to copy this and select the button that you want to link it to for the purpose of the video I am going to use the first button that I added at the top of our page and call that button one I’m going to select this button and I’m going to go into the advanced tab in the top left hand side and where it says CSS ID.
I’m going to paste in button one in our next button down I’m going to call this button two and in our final button at the bottom we’re going to call this button free now that we’ve given our buttons IDs we’re now going to do the same with our images so head back over to my website and scroll down to where it says image CSS ID and class name like before we’re going to copy our CSS ID and we’re going to have to go into each image and paste that into the advanced tab.
Once we’ve pasted in our CSS ID we’re also going to have to add our CSS classes and this is hidden hyphen image and you can find that just underneath this CSS ID copy this and go back into our image Advance Tab and paste it in under CSS classes and we’re going to have to repeat these steps for the next two images in our middle picture we’re going to call this img2 and in our CSS classes we’re going to paste in Hidden-image
The bottom image we’re going to go into the advanced Tab and we’re going to call this img3 like before in CSS classes we’re going to paste in Hidden hyphen image now that we’ve pasted that into our images we’re going to move on to our text and like before we’re going to have to go into the advanced Tab and add our CSS ID go over to my website and scroll down and you’ll find the text TSS ID and class name back in our Advanced tab.
Next to CSS ID we’re going to type in text one and next to where it says CSS classes we’re going to type in Hidden hyphen text copy this as we’re going to use it in our next two boxes like we’ve done for our images we’re going to go into the next box down and we’re going to go into the advanced tab again and call this text too and like we did in our previous text box we’re going to go into CSS classes and paste in Hidden hyphen text.
Moving down to our final text box we’re going to go into the advanced tab call this text free and we’re going to paste in Hidden hyphen text once all this has been done we’re going to head back over to my website scroll down to the bottom and you’ll find our code and it’s this code that will make everything work we’re going to need to copy this and we’re going to have to paste it into a HTML widget.
Now I’m going to go back up to the top of our page and add another section with one column and it’s in this column that we’re going to add HTML widget so go into our Elementor menu and in the top search bar in the top left hand side type in HTML drag that widget onto our page and in the Box on the left hand side paste in our code and the first thing you’ll notice is our image and our text have been hidden so check that out Code is working we’re going to preview our page.
we do that by clicking on the preview button next to the publish button in the bottom left hand side of our page once our page loads we can start testing our buttons and depending on which one we click we get a different image and text for each one so what happens if we want to add more buttons with more images and text in an Ideal World you’ll get to this point and you’ll be finished with all the text and the images already been added.
But what I’m going to show you now is how to add more images and text and I’m going to show you how to change the code to do that we need to go back into Elementor and what I’m going to do is click on button free and I’m going to write click on it and duplicate it I’m also going to duplicate the image in the same way and finally all that’s left to do is duplicate our text now in our duplicated text box we’re going to change the text to text for now we need to go into the advanced Tab and in our CSS ID we need to type in text 4.
Now we’re going to make the changes to our image we’re going to select our duplicated image and this time we’re going to change the picture and like before we’re going to select one at random from our WordPress media library click on insert media in the bottom right and go into the advanced tab in the top left hand side next to the CSS ID we’re going to type in img4 the final thing we need to do here is go into our button and this is our duplicated button that we made earlier
We’re going to go into the advanced Tab and call this button four like I said earlier on you can have as many of these as you like all you’ve got to remember is to write in the correct CSS IDs if you are finding this video useful please do hit that like And subscribe button to make these work we need to make a few changes to our code and the first thing we’re going to do here is highlight this section of code once we’ve highlighted it we’re going to copy it and
We’re going to paste it in directly underneath and I’ve even left this little space for you to paste in your code now that this bit of code has been added we’re going to call it button four now what I’m going to do is add our button events and what I mean by that is what happens when each button is clicked so what I’m going to do is highlight this line here where it says image free copy it and directly underneath I’m going to paste it in and then this new line I’m going to change it to image 4.
as you can see we’ve got image one two three and four and behind that it says either dot hide or dot show and if that button’s clicked it will tell you which information is going to be displayed on the screen so as it stands if we click on button one it it will show image one but hide image 2 3 and 4. so what we’re going to do now is copy the line where it says text free and we’re going to paste it in directly underneath and change that to text 4.
We’re going to repeat this process in button two and in button three and whatever we paste in and change to image for
We want to make sure it’s on hide this makes sure that only the image and the text for button 4 is only displayed when that’s clicked so what I’m going to do now is speed this part of the video up and show you what changes we need to make on button four so now that we’ve changed all those actions what we’re going to do now is control what happens when we click on button four and we’re quite simply going to copy the same process.
The main difference here is when we paste in our code we want to make sure that it’s image 4 show image free hide and we also want to do this for our text so we’re going to highlight the line where it says text free we’re going to copy it and we’re going to paste it directly underneath and one once we’ve pasted it in we’re going to change it to hide free and show 4. and to show you this working we’re now going to preview our page like before.
To do that all we need to do is click on the preview button next to the publish button in the bottom left hand side of our screen now all that’s left to do is test out buttons and it’s important to test these buttons to make sure the right information is being displayed when they’re clicked as you can see everything works correctly but what happens if we want to add a heading that also changes to do that we need to go back into Elementor and we’re going to add a heading widget.
Now your best bet is to add this at the beginning when you’re setting up this section the code that’s on my website will have the heading code in there already to get things started I’m going to click on button one and I’m going to go into the Elementor menu and drag in a heading widget and I’m going to drop that in directly above our image in the title box on the left hand side.
I’m going to change the text to heading one and once I’ve finished typing that in I’m going to right click on our heading widget and I’m going to duplicate it three more times and once I’ve finished duplicating them I’m going to go into each heading widget and change it to heading 2 for the second one three for the third one and four for the fourth one now what we’re going to do is go into our HTML code widget at the top of the screen
In here on the left hand side what we’re going to need to do is scroll to the bottom of our code and what we’re going to do is highlight this section of code here and we’re going to right click and click on the copy button now all we need to do is paste it in directly underneath once we’ve pasted it in we’re going to go through this bit of code and anywhere it says image we’re going to change to heading remember this doesn’t have to be a heading box
You can change this to anything you want you could have icons in here anything you like all I’m trying to do is make it easier to read and if we do have to make any changes we can identify them quickly and easily now all those chain changes have been made we’re going to go back up to the top of our code and what I’m going to do now is create the switches for our headings and I’m going to make this extremely simple.
All I’m going to do is highlight this line of code and I’m going to copy and paste it in directly above and what I’m going to do is change image 1 to H1 now I’m going to highlight this H1 bit of code and I’m going to copy and paste it in three more times directly underneath now all that’s left to do is change the show to hide on 2 3 and 4. you’re also going to have to change it from H1 to H2 3 and 4. I have sped this bit of the video up so once you get to this stage you’re going to want to highlight H1 to H4.
Once you’ve highlighted it you want to right click and click on copy now go down to button 2 in the code and paste it into this section and where it says show next to H1 we want to change this to hide and change H2 to show so now all you need to do is go down to button free and button 4 and follow the same process making sure that H3 and H4 are set to show and the others are set to hide.
Once all that’s done we’re going to go into each one of our headers and we’re going to go into the advanced Tab and start adding our CSS IDs and our CSS classes for our first headed we’re going to go into the advanced tab click on CSS ID and we’re going to type in H1 next to our CSS classes we’re going to type in Hidden heading and we’re going to repeat this process for heading 2 and we’re going to call this H2 and we’re going to use the same CSS classes for each of the headings.
Heading 3 will be H3 and heading 4 will be H4 if you are finding this video useful so far please do hit that like And subscribe button now that we’ve added all our CSS IDs and our classes all that’s left to do is preview our page to do that like before we need to click on the preview button next to the publish button in the bottom left hand side of our screen once our page loads you’ll be able to click on all the buttons and check to make sure that your heading is sharing with the correct text and the correct image
Now there is a really common problem with using this type of code when you click on the buttons it jumps you back up to the top of the page and there is a really simple way of correcting this problem so I’m going to show you how to solve that and to do that we need to go back into Elementor so what I’m going to do is drag this whole section to the bottom of our page and I’m going to drop it in just here now when your visitors have looked at that much of your page and they click on one of the buttons and they get pushed back up to the top.
They’re not going to scroll back down so to solve this we’re going to go into our Elemental menu and in the search bar in the top left hand side we’re going to type in anchor and what we’re going to do is drop a menu anchor in just above our section and once we’ve dropped that in on the left hand side we’ve got our anchor ID and all I’m going to type in here is here you can obviously be a little bit more creative than this now all we need to do is go into the content page on each of our buttons.
once we’re there we’re going to click on where it says link and it’s got a hashtag we’re going to type in here and we’re going to do this for all of our buttons once we’ve added our anchor link to all of our buttons we’re going to click on the preview button in the bottom left hand side of our screen now when our page loads and we scroll to the bottom and click on one of our buttons you’ll see that we don’t get pushed back up to the top of the page so there you have.
It’s an extremely simple easy fix to stop you from getting pushed back up to the top of the page when you click on your buttons
If you have found this video useful please do hit that like And subscribe button and if you haven’t got Elementor Pro and you’re looking to sign up then there is a link at the top of the description it is an affiliate link it doesn’t cost you any more to use but it does give me a very small percentage of Elementor’s profits if you choose to sign up if you’ve got any questions feel free to drop them in the comments box below
Thanks for watching and I’ll see you in the next one
