Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
Video Transcript
Hi there! This is Barbara from Wicky Design. Today, I’m going to show you how to style an image 5 different ways using the Elementor page builder. We are just going to be using the built in style tab on the Elementor image widget. We’re not going to be installing any additional plugins or have to add any CSS code in order to make these changes happen. There’s a lot you can do just by using what Elementor gives you. So let’s get right into it.
I have my page opened up in Elementor and an image in 5 different columns. I’m going to click on the first image and then I’m going to go to the style tab.
Borders
The first thing that I’m going to do is add a border around my image. To do that, I’ll go down here to where it says border type and change this from none to, I’m going to select solid, but you can select whatever is available in here. So I’m going to select solid and you’ll see now that there is a border around my entire image. But I can change some of these settings to make my image look a little different.
The first thing that I’m going to do is change the width of my border. I’m going to select 8px all around. So that made the border a little bit thicker. Then I’m going to change the color of my border by selecting color, then I’m going to pick a dark green color.
So now I have an 8px width border that’s dark green around my entire image, but I can adjust these border width settings to get some cool effects as well. If I unlink these, now I can change this so that only the top and the bottom have a border. So that gives a cool effect and of course you can do the same thing to the right and the left as well by changing the top to 0 and the right to 8, the bottom to 0 and left to 8. So now we have a border on the left and the right. So there are a lot of cool ways that you can play around with borders just by changing the width and the color.
We also have this really cool border radius setting. So if we do that, let me link all of this together again and show you how that works. So the border radius gives you rounded corners. So if we go to border radius and select 10 px, you can see it rounds the edges a bit to give it a different look. You can adjust those to make it a little bit bigger or smaller depending on the look that you’re going for, but there are a lot of cool things that you can do just by changing around these settings. And again with border radius, you can unlink these and get some cool effects as well.
Circle Shapes
So that kind of segues into my next tutorial and that is how to crop an image that is a square into a circle. So we go to the style tab. We’ll just be using the border radius for this one. So if we go to border radius and put in something pretty high, like 200px, you can see now it’s a circle. So you see that a lot for like avatars and stuff like that, so that’s one way to achieve this.
One thing to note for this: To get a perfect circle, you will want to upload an image that is square. If you don’t upload a square image, you will get more of an oval shape, but you can still play around with those settings and get some cool effects.
Box Shadows
Moving on to image 3. I want to add a shadow around this image. So in order to do that, I’m going to again go to my style tab, go down to the bottom and click box shadow.
So when you just click box shadow, by default you get this drop shadow that goes all the way around the image. We can adjust those settings by moving the horizontal axis or the vertical axis and that gives some pretty cool effects. We can also adjust the blur to make it pretty dramatic or not some dramatic at all and the spread as well. So lots of cool effects that you can do just with the box shadow.
I want to show you something pretty neat that I’ve seen on a lot of different websites lately. So that is to change the color of the box shadow to completely solid. So when you do that, there’s no transparency anymore. So let me change that to a red color. So there’s no transparency on the shadow itself, but there’s still this blur, so I’m going to go to the blur and drop that all the way down to 0. So as you can see, it kind of add like this cool shadow border effect around the image and this is something that I’ve seen a lot lately in designs. So if you were wondering how to achieve that, this is how. And again, you can adjust the vertical and horizontal axis to get some cool effects. So whatever your kind of looking for as far as the shadow goes you can adjust accordingly.
So that’s another cool effect you can do without having to know any CSS code, just by playing around with the box shadow in the style tab in Elementor.
Hover Effects
Let’s move on to the 4th image. For this one, I’m going to show you how to do some cool opacity effects on hover. So we have this opacity slider and it has a normal and a hover effect. So if this image was a link, you can add some cool effects on hover when people click on it. So if we go to hover, here’s where we’ll want to put these in. So you can see, I just changed it to 0.6 and you’ll see when I hover over it, it makes it look a little bit different. A little bit lighter. So this indicates that it’s a link, so if you’re going to be linking your images on your site, this is a cool way to add a little bit of extra to that and all you have to do is change the opacity on hover.
Combining All Styles
For the 5th and final styling, I’m going to combine a bunch of different techniques that we used. So I’m going to go to the style tab again and I’m going to give this a border and then make it 10px, change the color to a green color again, and I’m going to add a border radius of 200px all the way around to give it a circular shape.
So that’s combining a few different techniques that I showed you in the previous tutorials to one image. Let’s go even further by adding a hover effect where we change the opacity and adding a box shadow to the whole thing. So as you can see, that combined a bunch of different effects in one image to create one cool style.
So I hope you found these tutorials helpful when styling your images. Like I said, it’s very easy to go around and play with the settings in Elementor. You don’t have to know any CSS code and you don’t have to install any plugins to achieve this, which is why I love Elementor so much for designing web pages.
Play around with these images and get some cool effects. Leave a comment down below to show me what you’ve done. Bye!
