Add Frosted Glass Effect - Glassmorphism
Hi guys in this video I’m going to show you how to add a frosted glass effect in your columns and sections. It only takes a couple of minutes to do because I’ve done all the hard work for you. So sit back relax hit that like And subscribe button and let’s get into the Tutorial.
To get things going we’re going to start by setting up our page. We’re going to select a section with four columns and inside those columns we’re going to add a spacer. Now for a PC I’m going to set this for about 230 as a height. You will need to adjust this for mobile and tablet view.
Now I’m going to select the colour of our spacer. We do that by going into the advanced Tab and we’re going to go into background. Now click on gradient I’m going to select the two colours that I’m going to use.
For the first box and we’re going to have to select our background type as radial. This should hopefully give it a 3D effect later in the video. Now with our colours set I’m going to go into border and I’m going to change the radius to 200. This isn’t an exact science it’s just the guess to make sure we’ve got a base for our Circle.
We can fine tune it and make it perfectly round later on. Before I move on I’m going to change the spread of the dark circle in the middle and I’m going to swap our image colours around this. With a bit of luck will give it more of a 3D effect. Once I’ve finish making these changes what I’m going to do then is I’m going to duplicate these circles.
You can do that by clicking in the top right hand side of the spacer and clicking on duplicate. I’m going to do this three times and with these three circles. I’m also going to put them in their own column and I’m going to go in and change each one’s colour. Once I’ve finished changing their colours I’m going to start building our card.
I’m going to do that by adding a new section and selecting one with three columns and in the first section. Here I’m going to add an intersection and the reason. I’m still using inner sections is because Elementor hasn’t officially released the containers.
Now I’m going to delete one of these inner sections and I can do that by right clicking and selecting delete. Now in my intersection I’m going to add an image widget and directly under the image.
I’m going to drop in a heading widget and a text widget and just above this card. I’m going to add another spacer just to give me a bit more space on the screen. I’m not going to be adding any additional colours to this. All I’m going to do is add a new section and drop in the spacer next.
What I’m going to do is make the position of these three circles absolute. I can do that by clicking on the advanced tab in the top right hand side of each spacer. The reason why I’m doing that is so I can move them around the screen and I make it a little bit more attractive. Once we’ve placed our circles where we want them on the page.
I’m now going to go into the card and change his set index value. The reason I’m going to do that is as you can see on the screen is the card sits underneath one of our circles. By increasing the Z index we can actually lay it on top. Now that the card is sitting on top of our circles I’m going to click on the custom CSS tab in the bottom of our Advanced tab.
Remember you do need Elementor Pro to be able to use custom CSS within Elementor. There is a link for Elementor Pro in the top of the description. Now all you need to do is go over to my website which is linked at the top of the description and copy the CSS code.
Once you’ve done that go back into your Elementor Pro page builder and paste in your CSS code. We’re now going to click on the advanced tab at the top of the page and we’re going to paste in under CSS classes frosted glass.
I have left the CSS class name directly underneath the CSS code on my website. You can copy and paste it directly from there as soon as I paste in the classname it takes effect. So it stands out more I am going to move this column into the middle. Now I’m going to go back into the advanced Tab and I’m going to change our top margin so it pushes our card up the page.
Once it’s in the position I want it I’m going to readjust the circles behind the card. Once the circles are in the positions that I want them I’m going to add a box Shadow around our column. We can do that by clicking on the style tab in column and clicking on border.
As you can see there’s box Shadow just underneath to add the shadow click on the pencil icon. It’ll automatically use the default settings and if I click on background within our style tab I can add a colour to our column. I want to do that to make sure it’s got that frosted effect. So I’m going to select white as our background colour.
I’m going to drop its transparency once you’re happy with the positioning of everything on your page. All you need to do is click on the preview button next to the publish button in the bottom left hand side. Now I’m reasonably happy with what I’ve got so far. So what I’m going to do now is add those finishing touches to our card so what I’m going to do.
Now is speed this part of the video up and I’m going to add an image to our box. I’m going to add some text to our heading and I’m going to put some text within our text box. Once all that’s been done I’m going to Centre align all our text.
I’m going to change our margins don’t forget that you will need to check the responsiveness and their positioning on other devices and because we’re going to be displaying these on mobile phones and tablets. You’re going to have to change the size of the circles within the spacer for each device.
Once you’re happy with everything on your page all you need to do please click on the publish button. Once you’re done in the bottom left hand side of the screen remember.
If you do want to use custom CSS within Elementor you will need Elementor Pro. If you haven’t got Elementor Pro there is a link in the top of 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 Elementor’s profits if you choose to sign up.
If you have found this video useful please do hit that like And subscribe button. If you’ve got any questions come and hit me up in the comments box below. Or on my blog that’s it for this video thanks for watching.
I will see you in the next one
