Elementor Glass Morphism Effect

hi there guys in this video i'm going to be showing you how to um create this glass card effect on elementor so actually we're going to build this entire section so the first thing that i'm going to do in order to build this is to come here and create a new section okay actually it's gonna be a two column section now on the right side right i'm gonna be adding an image which is going to be this image that that we have up here okay so that the image is this one here i'm going to be inserting that and then i'm going to be adding some border radius as you can see up there so you just come here and let's say 50 100 then maybe 200 and then maybe 20. so something like that it's not going to be exactly as this one here but uh pretty close right so i'm just gonna increase this column width let's say to 60 percent or less and then here to the right section i'm gonna be adding um a text right like hidden text okay like uh add in a create awesome website is what it say so create awesome web sites so let's give some style to this one here i think that the color that i'm using is 37 something like this so just come here and add some um font size now just below that there is um an icon list something like this like this right okay there you go i'm gonna be selecting here on star i'm gonna be removing this and i'm gonna give some style to this star like let's say this size and the color is gonna be like jello perfect so i'm going to be adding not one star but five okay apparently you need to update let me just wait so i'm going to be doing this and space between perfect so something like that and then this button here i think that is a good gradient button which is that i have it right here perfect i'm going to say medium and detects mine out more so whatever more oh the style it's gonna be like um the part of it it's gonna be vanilla round again background type it's gonna be gradient something like this over here it's not changing great okay let's say this blue second one is gonna be like something like this and then i'm gonna be changing some angle and here i'm going to be adding some um there you go some border radius i think that 20 is going to be enough perfect now as you can see that button there has an icon so i'm gonna be island adding that i can just this is slide down great the icon's gonna be after there you go and spacing perfect see that the border radius is not enough i'm gonna add 50 and then to that icon i'm going to add some size with button border type location icon spacing i'm wondering where i can adjust the size of the icon anyway anyway i'm gonna figure out later anyway now now here comes the funny part is the part where i create this um fancy uh glass effect on the car right so in order to do that the only thing they have to do is just to come here first of all you have to install the wn classic comes for elementor which is uh uh applying uh on wordpress i'll leave you the link on the description and and then you need to come here once it's installed then you need to come here and find this widget and drag it and then drop it right at the top of the column where you want to add that effect right either that column or this column here but please notice that uh you need to add it right has the first element on that column so i'm just going to drop it here and probably you you're not noticing nothing see it but it's already applying the glass effect to this column here now you're not um aware of that because uh the background is white so but just in order to show you i'm gonna add some um background here different than white let's say i'm gonna be adding a uh an image right there as you can see the glass effect is already applied down there more than that there is some extra style that has been applied automatically like uh there is a thin white border okay solid and there is uh some border radius here so i'm going to show you how to change or modify that so first of all i'm going to be adding some in this column i'm going to be adding some margin on the top like let's say 200 maybe too much 100 and then at the bottom let's see like 100 so i'm gonna have something like this right then just after i'm gonna select the the glassy effect uh widget again i'm gonna increase the blur so as you can see you can go up to 20 and down to zero which means going to be entirely transparent so i'm going to be adding some number in between like let's say 12. i think that uh that's that's enough that's pretty good uh i'm gonna just let me create here and i'm going to be adding sun um to this column i'm gonna be adding some pattern in order to separate them the elements from the border just a little bit perfect something like that so just in order to give a better style here i'm going to be adding some margin top margin to this call to action button here let's say 50 great okay now now that i have show you that that the glass effect is right there so what i'm gonna do is i'm gonna remove this background so it looks white again and i'm going to be uh positioning this image here as absolute oops sorry now once it's absolute i can drag it to whatever i want it now please notice that that this image is in front of this section so what you have to do is to come here to columns and add some uh higher value let's say five for example so whatever value you add which is higher that the value that this this image has it means that it's gonna be in front this image is by the following thing that is zero but if you add two then it's going to be like um it's gonna be like uh this section is gonna be in front of the image as well so once this is uh this image is positioned as absolute so i'm going to increase the max width and the width so i'm going to have something like this great perfect but now please notice that this section here still have like a box shadow effect which we are going to be adding right now so i'm gonna come here select this column right which is this card here and then i'm gonna come to the border section and i'm gonna add the box shadow effect something like that now notice that maybe this uh default box shout effect is too intense for a glass effect um car so i'm gonna be modifying this a little bit i'm gonna decrease this to 0.10.15 let's say i'm gonna be adding the blur up to 20. let's see like that perfect now notice that we already have a pretty much similar uh effect than this one up here the only thing that is missing is the scrolling effect okay i'm gonna be adding some more with this great and here then i'm gonna be coming to the advanced motion effect scrolling effect and then i'm gonna be adding some horizontal scrolling there you go perfect now we have something like what we have up there okay so uh what is important here is that once you add them this widget here which is the widget that controls the the glass morphe plasmorphins uh then you're gonna notice that some some extra styles will were are going to be applied automatically like this thin white border and this border radius right so what is important to say here is that you can come to the column settings and override that at any point so let's say you want to remove the white border so the only thing that you have to do is to come here select solid and say has a border thickness or width say zero and as you can see the word has just disappeared if you want to increase it you can put five or if you want to change the color just change the color so you can uh do it the way that you want for this example i'm gonna keep it like a five and white with some transparency something like that so the same thing for the border radius by default it has 10 pixels i think uh but if you want to zero to zero you just need to enter a serial number there or if you want to increase it up to 50 then you can do it like this okay by the way this is not good let's say maybe 30. okay something like that okay so uh this is all i hope you have enjoyed the video and i really hope that you guys you enjoy this this widget i'm i'm using it in every single design data web design that i'm doing so i hope that is uh so useful as as it is for me uh please notice that this is this use um um here this is uh elementor class effect use a cs property called background filter which is not supported yet by firefox so this um this property that makes this effect possible it's not supported yet by firefox it is uh supported by uh chrome and safari among other browsers but not just by internet explorer or firefox on firefox is under development so it's going to be available soon but at the day that i'm recording this video is not yet available so so guys have a good day and hope you enjoyed this widget bye for now

Channel: Yaidier Perez

Views: 8,833

Keywords: elemntor, glassmorphism, glass, glassy, cards, blur, backdrop, filter, effect, blurry, smoked

Id: ndGZKyXZrPQ

Length: 15min 46sec (946 seconds)

Published: Mon Feb 22 2021