Glass Effect in Elementor | Glassmorphism 🔥

[Music] hey what's going on guys my name is jim fahad in this tutorial i will show you how you can create a glass effect or glasmorphism using elementor page builder nowadays this glass effect or glassmorphism is super popular in web design trend so why not to do that using elementor page builder and i will show you everything step by step and no matter if you use a dark background like this it would look great also if you use it on a light background like this it would also look great alright so now let's go inside elementor page builder i have already created these two sections but i wanna show you everything from scratch so i'm gonna delete this section also let's delete this section as well now let's start everything from scratch all right so let's first take a new section by clicking on this plus and i want to take this three column structure and this section i wanna set its height to uh minimum height and i'm giving the height to vh and let's turn the height to 100 vh so it would cover the 100 percent of the vertical height now let's add a background image so go under style tab from here background type click on this pencil icon and let's upload an image from here i'm selecting this image now click on insert media cool let's now position it so from here position let's make it to center sender attachment to scroll repeat to no repeat and decide let's make it cover cool so the basic idea is i will work with a single column first then i will duplicate them you know that's the ideal process so first i want to insert a inner section within this column so let's click on this rubik's cube icon and i'm dragging a inner section here inside the column and let's first delete this second column from the inner section so i'm just deleting this so basically this is now our outer column and this is the inner column so first let's do some work on the outer column so i'm selecting the outer column because i just want to add some spacing at the left and right so go under advanced tab of the outer column unbind the padding and here on the right i wanna add for the pixel of padding also on the left for the pixel of padding now let's start working with the inner columns so just click on the inner column i want to add some padding at the top and bottom of this inner column so go under advanced tab unbind the padding so here on the right i want to add for the pixel and the left i want to add for the pixel of padding also on the top and bottom i want to add 70 pixel of padding like this all right let's now insert some elements inside this column so click on the rubik's cube icon first here i'm dragging a heading inside here so i just want it to say 0 2 and let's now duplicate the heading so here it's duplicated and here i want it to say card to we will design these headings a few seconds later so let's now add another widget so click on the rubik's cube icon again and drag a text editor under the cartoon heading here and underneath this paragraph i wanna add a button so click on the rubik's cube icon again and i'm dragging a button widget under the paragraph here all right now let's start doing some styling with our heading first so i'm starting with this one let's now make its alignment to centered and do some styling from here text color i want to set the color to pure white color and then typography i want to set the fun family to pop in spawn font size let's set it to 30 pixel and font weight let's make it 700. now let's do some styling with the paragraph so go under style tab i want to make the alignment to centered then text color to pure white color now let's do some typography from here so from family i want to set it to poppins font and then i want to reduce the margin bottom of this paragraph so let's go under advanced tab and bind the margin so here i wanna add some negative margin at the bottom so i'm adding minus 20 pixel of margin bottom now let's do some styling with this button so select this button here instead of click here i want it to say learn more and let's make the alignment to centered now do some styling from under this style tab firstly the typography i want to say the fun family here also the poppins font font weight i want to set it to 600 all right now the text color i want to set the text color to black and the background color i want to make it to white and then i want to add some border radius maybe 20 pixels yup it looks perfect now i wanna design this zero two in a cool way so let's select it firstly i want to set the alignment to the right now let's do some styling from under this style tab text color i want to set the text color to pure white but then i want to reduce the opacity of this color so i'm just dragging this bottom bar to the very left like this probably you cannot see it right now but you can see it shortly all right let's now do some typography from here so first i want to say the fun family again to the poppins font now the font size i want to make it really really big so i'm setting it to 165 pixel and then i want to drag it to more bottom place here so to do that let's go under advanced tab and bind the margin and let's say it's um negative margin at the bottom so here i'm adding minus 85 pixel margin at the bottom like this all right we have done all the styling with our inner elements now we will do the main part to make that glass effect or glasmorphism let's now select the inner column by clicking on this inner column icon and let's go under style tab first i want to give it a background color so from here background type click on the classic pencil icon from here background color i'm setting the background color to pure white and then i wanna make it very very transparent so i'm dragging the bottom bar to the very left like this and then my plan is i wanna make it realistic so just think about it there is a light at the top left corner here so what will happen in real life if we flash a light from this corner so of course the top and this left corner will be brighter and we will get a shadow on this right side and also at the bottom side so like i said i wanna make this top and left side more brighter to do that i wanna use the border so from here let's now select the border and here border type of course solid let's unbind the border with because i wanna only add the border at the top and left so here on the top one pixel and on the left one pixel and then the border color first i want to set it to pure white and like before i want to reduce the opacity so i'm dragging the bottom bar to the very left here like this and then i want to add some border radius with it so here i'm adding 15 pixel of border radius and like i said i want to add some shadow on the right and bottom so from here let's set the box shadow so first i want to set the shadow color to black color and i'm setting the transparency at the middle so it's 0.5 and then i'm setting the horizontal value to 20 vertical value to 20 and let's set the blur to 50 and spread to 5. all right we are almost done now we just need to add that cool blur effect that will create the real glass effect so to add that blur effect we need to add some custom css and we will find that under advanced tab so from under advanced tab let's now click here on custom css by the way you will get the custom css only on elementor pro version so if you don't have elementor pro already you can get the elementor pro purchase link in the description because by using elementor pro you cannot only create this kind of glass effect you can create a lot more cool effects cool features in my opinion you can create any kind of website using elementor pro so i will put the elementor pro purchase link in the description you can get that from there so here i will just write a single line css code but if you hate to write css code i will also put it on my website that's the gym for her thedigital.com i will put this pages link in the description so from there here you can see blur effect css so you can just copy it and paste inside that custom css field so i'm copying the snippet from here and let's go inside elementor page builder i'm pasting the snippet here so it's basically the selector that we are selecting this column and then inside the css property is backdrop filter and the value is blur 5 pixel you can increase the blur by putting the higher value here like instead of 5 if you put here 10 you see it's not more blurry but i wanna keep it five pixel like this it looks really great now and then finally if you wanna add some animation with it some mouse animation or tilt animation with it you can do that from here under advanced tab you can see here motion effects click there so here i wanna add some mouse effects so turn on the mouse effects from here you can see 3d tilt click on this pencil icon so by default it's four but i wanna set it to three so if you now move your mouse cursor you can see the nice tilt effect okay let's minimize the eliminator page builder tab from the left so you can see it properly now it looks really really cool all right let's now expand it and now i just want to duplicate this column couple more time and remember you won't duplicate the inner column you will duplicate the outer column this column so before duplicating this column i want to delete these empty columns first so i'm deleting the left empty column and then i'm deleting the right empty column now put your cursor on the outer column then right click here and click on duplicate again put your cursor on the outer column right click and click on duplicate and then you know you can change all the contents from here so the first card here instead of two i'm writing here one and it's of course the card one and then two it's card two it's fine and then the third one so here zero two instead of that i'm writing here zero three and here card two instead of that i'm typing here card three and then whenever you are happy with your card design just click on this green update button to save your work now let's have a look how it's looking on mobile device and tablet device so let's check its responsiveness to check it you know from here let's click here on responsive mode so it's already looking great on mobile device we just need to add some spacing at the top of this section so i'm selecting this section let's go under advanced tab so here only for mobile device i wanna set some padding at the top and bottom so first unbind the padding on the top let's add 60 pixels of padding and bottom let's add 60 pixel same for the next inner section so let's select it and for this intersection i only wanna add the padding on the bottom so go under advanced tab and bind the padding and let's add 60 pixel of padding at the bottom and same for the third one let's select the inner section go under advanced tab unbind the padding and let's add 60 pixel of bottom padding now have a look it looks great on mobile device now and let's now check it on the tablet view so from top click on the tablet icon so here on the tablet device similar like the mobile device i wanna make each of this column width to 100 percent so make sure you are selecting the outer column so i'm selecting the outer column go it's layout and only for the tablet device i'm setting the column width to 100 percent it's looking like it and you know similar like the mobile responsiveness select the inner section and bind the padding let's add 60 pixel of padding at the top and 60 pixel on the bottom now let's go to the second section select the outer column make the column width for tablet to 100 percent go to advanced tab unbind the padding and only on bottom i'm adding 60 pixel of padding and let's now go to the third column remember you're selecting now the outer column make the column width to 100 percent for tablet device and now select the inner section go under its advanced tab unbind the padding and let's add 60 pixel of padding at the bottom so on tablet device it looks pretty cool now to save it click on this green update button again and let's now close the responsive mode and not only on this dark background it would also look great on a lighter background so to show you that i'm just duplicating this section by clicking here on this duplicate icon so here underneath the whole section is duplicated here i just wanna change the background of this section so i'm selecting the section by clicking on the six dots now let's go under style tab and then just replace the image so i'm clicking here on choose image let's now select this bit image with a cocktail now let's click on insert media boom here we go you see on a light background it looks also super great and then again click on this green update button to save your work by the way to make your life more easier i will give you this page as a template so if you wanna use this on your own project you can do it the way i have shown you or you can download this page template from jim fahad digital.com i will provide this page link in the description from that page if you scroll down a bit here under important links you will find here download the template i use in this tutorial so you can download this whole page template from jim fahad digital.com if you like it please give this video a big thumb up and don't forget to subscribe this youtube channel and also press on that bell icon to get notified before anyone whenever i'll upload a new video on this youtube channel and if you need any kind of professional help on your elementor project or wordpress project then you can contact me through my website that's jim for hearththedigital.com i will also put this website link in the description once again thank you so much for watching this full tutorial i will see you in the next video for now bye bye

Channel: Jim Fahad Digital

Views: 10,467

Keywords: glassmorphism, glass morphism, glassmorphism css, glassmorphism wordpress, glassmorphism elementor, Glassmorphism in Elementor, elementor pro, elementor pro tutorial, glass effect css, glass effect design, glass effect elementor, elementor, elementor tutorial, glassmorphism tutorial, jim fahad digital, create a website, website learners, create a pro website, tyler moore, elementor wordpress tutorial, wordpress, wordpress tutorial, glassmorphism design, elementor wordpress

Id: 8UJUrQ5cTRo

Length: 16min 15sec (975 seconds)

Published: Sun May 30 2021