How To Add A Reflection To A Image Or Button In Elementor Using HTML
Hi guys in this Tutorials I’m going to show you how you can add a reflection to an image or a button depending on how you want to use it. It’s extremely easy to do so sit back relax hit that like And subscribe button and let’s get into the Tutorials.
Okay guys to add a button or an image with a reflection to our page, The first thing we need to do is drag in a HTML widget. Once the widget’s on your page look in the description below. You’ll find the code. Copy and paste this into your HTML box. Ignore the size of the image or button because I am going to show you how to change that later in the Tutorial. As you can see there is a small reflection on that button or image.
If we want to change the position of our button or image. All we need to do is look for our code on the left hand side and look for the word centre. It’s towards the top of the code.
Once you’ve found it highlight it and type in right. If you want it to sit on the left hand side of your page. All you need to do is type in left to move this back to the middle of your page at any time. You can highlight that piece of code and type in Centre. If you’re using this in a section with more than one column it will only stay in that column. You can move it left or right the same way within that column.
The next thing I’m going to show you is how to change the size of your button or your image. To do this we’re going to look for our code on the left hand side. Towards the middle you should see the word style. This is followed by the word width and it’ll have a number with a px at the end. This is the number we need to increase to change the size of our image.
Like before I’m simply going to highlight the section of code and change the number. I’m going to change it to 225. You can obviously make this as big or as small as you like to change the height and make our image look less distorted. We’re going to change the height now in the next line of our code. You can see the word height this is followed by a number and a px. It’s this number that we’re going to change to make our image larger.
For the purpose of the video I am only going to change it to 100. When you add your own images you will need to play around with your own widths and Heights. To make sure it looks right on your page. The next thing I’m going to show you is how much of your button or your images reflected on the page. We’re going to look for our code again on the left hand side.
This time we’re looking for where it says 60. If we only wanted to show 10 of reflection all we need to do is highlight the 6. and type in 10. Now 10 is quite small and you probably can’t even see it on the screen at the moment. You will probably need to type in at least 30 to notice the results. You can increase this number by as much as you like so if you wanted to type in 70 you can do.
If we want to add a second image or button. We can go to this part of the code and copy and paste everything down. Underneath we’re going to paste it back in now. This does only just copy the previous bit of code to change the picture Where it links to I’m going to show you that next. Looking at our code on the left hand side we can see our Target web address.
You can link this to Google or any other website. You can think of if you wanted to use it as a proper image. You could just copy your image URL and paste it in here and once the image is clicked it’ll open full screen. To change the image on our page. What we need to do is highlight this URL in our code and we’re going to have to replace it with one from our media gallery.
To add a border to our images we need to go to the top of our code and look for the word border. You’ll see a 0 and a px and if we change this 0 to 5. We can add a border of five pixels. As you can see if you do choose to add a border you will have to change your margins. If you don’t change your bottom margin. You will have this funny looking overlap over the reflection. If a border is a must on your project and you want to change the colour of the Border.
You need to click on the hashtag number underneath. Replace this number with something that fits in with the style of your website. So you might be thinking of other ways. You can use the reflective background on your images on your website. Well if we wanted to add an image to our page. On the right hand side side of it we wanted to add some text. We’d need to copy out our code and paste it into a section with two columns.
I’m going to quickly add a spacer just above that in another column. Just so it doesn’t interfere with what’s above. With our spacer and columns added we’re going to now add our HTML widget. Like before all we need to do is drag it into our column that we want our image to display in. All that’s left to do is paste in our code depending on how big your image is. You will have to change the sizes like we did at the beginning of the video on the column on the right hand side.
I’m going to drag in a header widget and I’m also going to drag in a text widget. Underneath that from there you will also have to look at your margins and make sure everything lines up. Before you publish your page live. If you are having trouble with your images lining up together. You may want to have a look at what your theme settings are on your website. I’m using the Astra theme to make sure that everything lines up correctly. There is a link for extra in the bottom of the Tutorial.
You don’t need Elementor Pro to use this feature but if you are tempted to buy an Elementor Pro then there is a link in the description below.
It is an affiliate link it doesn’t cost you any more to use but it does give me a very small percentage of their profits if you choose to sign up. There are plenty of great Tutorials set to come so please do hit that like And subscribe button and notifications Bell for when they get released. If you do have any questions please do drop them in the comments box below.
Thanks for watching and I’ll see you in the next Tutorials.
