in this video we're going to create a pop-up or pop out window using the element or pop-up feature the templates there so we're gonna of a website with say a hamburger menu and you click it and it's gonna this big menu that slides out from the right side here then inside that menu we can put whatever kind of content we want and then we'll have an X to close that so I just wanted to make a quick video on how to do that and I have seen Elementor themselves have similar videos but I had somebody in the comments want me to show how to make a specific one that was like a full screen and it slides out and back in so I was just gonna make a quick video showing how to do that so I have WordPress installed the latest version I think it's five point two point two and then I just have for the theme I'm just using Astra it really doesn't matter what theme you using for this video though and then for plugins I just have elements your basic like the default plug-in and then the pro version since the plug the sorry that you pop out is a pro feature so I'm gonna click on templates sorry let's create the page first I'm gonna go to pages and add new and we can call this whatever you want I'm just gonna call it slider but I mean you would probably create this on your home page or anything right so if you already have a page then you don't have to do this step and then we'll click Edit with Elementor so I'm going to be creating a little page from scratch if you're building a website from scratch then you would probably create your header and footer first and then apply those to all of your pages and I have other videos on how to do that if you're interested in WordPress and Elementor and all that please hit subscribe to subscribe to WP levels I appreciate it so I'm gonna come down to settings and then page layout just select element your canvas just have a kind of a blank slate to work on here and then I'm just gonna put in say like a basic header here and like I said you would probably create this as a template I'm not gonna do that in this video so unless that I'm gonna put a logo and we'll put like it maybe a menu here simple text menu and I'm gonna put like a bar hamburger menu on the right side and that'll be the the pop-up activator we're gonna use that to be the action to open and close they're well to open the pop-up so the left side here let's just add an and of course if you have a logo already you would use the logo widget instead I'm gonna click Choose image and I have some old images here this from a previous tutorial where I had ocean theme installed and it put in some some pictures here I'm just going to use the WordPress logo here I want to insert that and we can maybe select the section here I'm gonna change the structure so we'll go 25 actually 1666 16 that looks good to me and if I come up I'm going to go from content with a full width so it's pushed great to the edges there and inside here I'm gonna align that image to the left okay and you know what I'm gonna go to settings down here and then style so this is the page settings if our background color I'm gonna pick something maybe a little bit colorful something like that I like that something a little brighter it looks more like an element or colorful type of website and then for the logo if you didn't know this you can click on the an image any image really go to style and then come down to CSS filters if we click on that if you go to the hue here you can actually change the color of any kind of picture or graphic I'm just kind of neat so I'm gonna go with like maybe a pinkish color something like that and of course you can change the saturation here how bright it is as well up here you can go real pink if you wanted and the contrast and the blur if you wanted what does blue look like okay we'll leave that one alone so there we go we have our logo now we just need a quick menu in here just gonna build a normal nav menu I'm not gonna use the WordPress built-in one I'm going to use the element or nav menu I'm just gonna drag that in here and this was a default one that came with ocean WP so remember I have asked her installed but the old tutorial that I did I imported some like a like a pre-made website and it already had this in here so I'm just gonna go with this and then my alignment I'm just gonna go Center and layout that's good all that's fine I'm just going to change the style here so we're with the text color I'm just gonna go with straight-up white and that always picks gray there there we go and let's see what kind of hover we want the hovers fine for that but the pointer color that's that gray line underneath let's change that to something as well let's go colorful on that let's go with green I don't know why but we'll pick that really doesn't matter okay so now next thing is the icon for the menu that we're gonna use and what we're going to do is use an icon to trigger the pop-up so we're gonna type a icon for the widget I'm gonna click the icon bring it over here and we're gonna change this star you can use whatever you want so normally with fun awesome you would think because I've always called this a hamburger menu because it looks like a hamburger and technically you could use the hamburger but they call it bars I think so there it is here so if you go on the fun awesome website you can or you can use Google and just have been like font awesome and then hamburger menu then usually Google will sort out which one it actually is like the real name for it because you won't find it if you don't know the name so there we go we're gonna click insert and there we go we have this nice hamburger looking menu there it's already a good size so I'm gonna leave the size alone then I'm gonna come to style though and change this stops you I guess white we could go with and then maybe I'll do the pink hover on it okay so I'm just gonna guess that color usually I would already know the color by using like an eyedropper to figure that out and let's go let's just guess it's gonna be like a pink right there maybe it looks pretty close to me maybe it's not so bright but that's why I'm not gonna be too picky so now with the alignment here I want all of these to kind of be in the middle so let's select the section now if we do vertical line here I'm going to select middle and that'll bring everything perfectly in the middle here which is great and then maybe the logo I just might go a little bit smaller so let's say 50% of the width of the column that's so the max width here is 50% of inside here okay and that looks good to me okay so next I just want some content down here and I'm not gonna make you watch every little detail so I'm gonna come over the blocks here let's just import something I'm gonna go with the application here with the Statue of Liberty in the computer you know it's insert that that looks pretty good to me I'm just gonna make this a little bit brighter so this whole section I'm gonna select and that background color you know what I'm gonna do I'm gonna select that pink so I'm just like the icon go to hover this might be crazy bright though we're gonna select this section and then change the background color wow that's brightness anyway looks nice and colorful looks Elementor ish and then you could like you could play with this stuff the these this gray doesn't look very good to me so I would probably change that as well go with the white and maybe some white here I said notice the icons aren't showing up that's a weird bug I was noticing that earlier I can't seem to when I import the icons to have them show up in the list anyway let's continue on so now we have this trigger which we're gonna link up by clicking on it and go to content and I'm gonna select it through the link dynamic link but first we need to actually create the the pop-up that's gonna be popped up so we're gonna save this page and then come back to it later I'm not gonna bother with a footer or anything today since we're just kind of focusing on this and then just two quick things I want to do with the icon here I'm going to select it under content I'm going to align it to the right just so it's pushed up like the logo onto the edge and then I'm gonna select the advanced sorry I'm just like the style then we're gonna go hover and hover animation and I'm gonna put something let's try rotate just so if you hover over it kind of does a little bit something cool there which I like that's cool I like it so I'm gonna publish this page or you can save it as a draft if you want let's take a quick look to see what that looks like so there we go now we're gonna click on this and we want a whole pop-up window to kind of pop out here to fill up our screen so let's go ahead and start that so I'm gonna leave this open in case I need to copy into the colors and on this page I'm going to come over back to – bored and then come to templates I'm gonna go to pop-ups and it's gonna say add new pop-ups I'm going to go ahead and do that and we can give it a name here so I'm gonna say you know main pop up or pop out or whatever you want to call it and create that template here so now we're presented with some pre-made ones lots of really nice pre-made ones which is great and if you want a head start I'd probably recommend that because if you have the pro version there's a lot of really nice ones here and I'm not going to do that and so I'm gonna close this and now this is actually what our pop-up looks like right now so we want to customize this now to access the settings for the actual pop-up window usually would think as I got confused when I first used it I I put in a section like this and then I thought all of the pop-up settings would be edited under this section like right here with the layout and style and stuff but instead what you want to do because you're gonna pop up template the settings are different so you it's kind of like where the page settings are so come down to the little cog wheel here and click that now you have all of these great options for the layout and for me I just didn't realize that at first when I was playing with it okay so what do we want to do for the width I'm gonna switch to VW here and I'm just gonna pick a hundred we went a hundred percent with so when it pops out it fills the whole screen and then the height I'm gonna do fit to screen this is what its gonna look like and I'm going to change the background color I think we'll go with this blue color that we have so I'm gonna take that from the first page that we made and we're gonna copy that and let's go to style in the background color color I'm just gonna paste that in it's looking good already and what I want to customize is the little close button here first that's what I'm gonna use so to do that you come down to the settings page here and then under style and then we come down to close button so I'll do this and you can position it inside or outside we don't have an outside so it's not going to do that it's always going to be inside the window here and now you can use these to vertically position where you want it now I would recommend picking your size first because it'll be harder to position it later after if you'd if you haven't changed that and then vertical position I don't know I'm just gonna guess but what I want is when I click this I want it to pop out and I want the X to kind of be in the same spot where this menu is so it's kind of hovering over it and so again you won't see this page right but I want that icon to be in a familiar plate place here the next thing I want to do was just change that color okay so I'm going to change that to white and then we have that pink hover right so I'm just gonna grab that hover color for this one that pink and come back and let's do hover color and we can put that there I don't want any background color now what else do we have we had that animation right on the on the close button so let me just see there I gotten lost here for a second I'm gonna come back to style close button I don't see any animations that you can put on that button which I wish you could so I wish there was a little bit more options here maybe there's a way that I'm not sure of without using some custom CSS that would be nice so if you know of a way to do that without using some custom CSS then let me know in the comments that be great okay so what what next we could test this I guess so what I want to do I'm just gonna put in some fake text here I'm gonna publish this and now this is where you can put in your conditions so if you add a condition you can select where you want it to apply and how different triggers right so you want it to pop up when somebody's scrolling on scroll to a certain element on the page based on clicks after an inactivity all this stuff and there's some advanced rules here which is great and we don't want any of this so we're not going to select or put on any of that because we're gonna manually trigger this okay I'm gonna click Save and close there and you can look at it but it you're not gonna see it because we're not triggering it anyway so we need to hook this up so how do we do that if we come back to this page I'm going to select on this icon and then we're gonna come back to content and there's a link here let me click on dynamic and if I come down there's the actions okay so just to be clear there we selected the icon and then under content under link click this little dynamic link here okay and then come down and select actions and go to pop up alright now you might if you're not familiar with elementary you might not be sure where are the extra you know where do I select what pop-up all that you actually select right here click on it and you have this little pain I'll come up with the settings and now what action do you wanna have happen when we click on this icon do we want it to open that pop-up we've created do we want it to close the pop-up we created or toggle it so open and close it right so since we already created like the close button we don't need one we just need to need it to open okay so what pop-up do we want to open so we could just click in here let's search for the one that we created and we can see it here now because we saved it I'm gonna click here to save that then we're gonna update this page okay great now if we come back here I'm gonna actually sorry come back to slider if we preview this now this should be hooked up to that pop-up that we created great so now we can see that that's activated and the pop-up fills up the full page but since we're logged in as an administrator you actually it cuts off that top part okay so don't be worried about that your surfers or users on your website won't see this bar so it won't cover up the content what I would recommend though and what I'm going to do is put all the content in the middle so they don't have that problem now you can close this by clicking here or hitting your Escape key so if I hit escape on my keyboard it'll also close that window as well which is nice okay so both of those work okay so the next thing I want to do is when we click on this I wanted to have that animation where it slides out okay the other thing I mentioned earlier is that I wanted these buttons to line up and that would be something that I'd have to be a little bit picky about by being logged out so I have a separate window open maybe in incognito mode because this bar you're not gonna see it so if I'm logged in it's gonna affect this and I won't be able to perfectly align it so this would I hope that makes sense it I just don't want to fool with it right now but I could take a guess but I'm saying it's probably pretty close right now it just doesn't look like it okay because this page isn't affected by that bar and this one is it's actually pushed down if you understand that okay so anyway let's put that of animation in here so I wanted to slide out from the right side there so let's come over to the pop-up and I'm just gonna close this one it's just so we don't get confused here so I have my slider page then I have the main pop-up template page here right and if we come back down to settings we have an entrance and exit animation we're under the Layout tab here so I'm going to put an entrance and I want to come down to let's say slide in from the right okay perfect and then the exit would be oops I put it I typed in there sorry so the exit would be sliding out from the right see how it goes in and out right and I like it if it's a little bit snappier a little bit quicker so I don't want to wait too long there so I'm gonna update this and unfortunately every time you save it's gonna ask you for these conditions you can just click Save and close and it's not really that big of a deal I'm gonna preview these changes on slider right because that's the page that activates the pop-up so when I click here you can see that slides out and click back now we have that quick kind of sliding effect which is pretty neat okay so to get this content down into the middle of the page we're gonna select the page settings again so I just don't need to be confused here if you hit section it has these options to you for vertical line and height align we're not using those we're gonna go back to the settings for the COG there's actually a content position under layout so right now we have it to top so we could put it to bottom if we wanted but I want is in the center here okay so if we select this section now now we can kind of start playing with it a little bit here okay so for this text I'm going to change the actual text here for the widget will say something like please explore our features whatever your website is you can change that to whatever you want alignment I'm gonna Center style let's go for I kind of like that green color so I'm gonna steal that green from over here or you can make it totally unique however you want it or whatever you want okay so let's go to topography and then I'm just gonna make this a little bit bigger and we'll put this thicker around nine hundred weight you can play with the font to change that however you want as well and then I'm gonna add another section this will be two columns here I'm just gonna pull that right underneath our heading there on the left side I think we'll add say a menu widget and we use that same menu that we used earlier good and this one though for the layout I'm going to select a vertical so it's up and down here and then I'm gonna align that to the right side you can stretch that too but I don't want that I want the right side and then I'm actually gonna change if you click this section here I'm gonna go to structure and do I think 33 by 66 okay something like that and then I just need to change the colors here so I can see them so let's go text color I'm gonna select white and the typography I'm gonna put this up say 0.5 maybe even a little bit higher a nice big kind of menu buttons here and on the right side I'm gonna come back to this and change the colors a minute I want to put a picture in here though so on the right side I'm gonna go to widgets drag an image over here and we click the choose image I'm just gonna pick one this is one that I think came with ocean WP when I was playing with that in a previous tutorials I'm gonna insert this nice kind of air balloon picture and I don't need to Center it I like the size everything's fine with that and we come back down to style and I'm gonna put a border radius on it just kind of make it look a little bit rounder there and then we have the menu on the right side here so let's come back to this and on the hover we're gonna put the pointer color we have that that gray color let's change that to something else so we have green here I kind of want something brighter I think we'll go with that pink so let's grab that so let's like the icon here go to hover and I'll select this speck over here or on the slider pop-up and hover point your color and then we'll put this in so when we hover we have that pink and if you don't like that bar there's lots of different types of pointers so if we select here and come to content there's the underline or the over line double line it's the background so the whole color changes which actually kind of like that looks pretty nice so I'm going to leave that then we have the animation so we have a fade animation that's for the background pointer I believe yeah so you can see how that changes so let's say that's neat I like that maybe come from the left side though so comes it out from that there I like that and then just want an extra thing that I wanted to show you is recently Elementor put up this little tutorial where they showed you how to make shapes and you could place them around and I'm gonna do that with using icons they did some tricks by using border radiuses and stuff well you don't have to get that fancy I don't know why they decided to do that not just you see icons so if we use an icon you can just literally drag it anywhere on the page I would probably create another section for it or put it somewhere that's easy to get access to so I'm gonna put it though on the left side here for now just put an icon and what I'm gonna select here it's got a search for circle and there's a normal circle here and there's the different kinds of circles so we can use this insert and I'm just gonna make this bigger so size nice big circle here that we can move around something like how big is that yeah we'll go big and the color for this is I want something close to the background so maybe just a little bit dark or something like that this is something that Elementor does quite a bit with their own personal designs where they put these nice random shapes all behind their backgrounds and it gives the pages a little bit more character right so now that we have this shape this icon if we come to advanced we can come to custom positioning and then go to position:absolute so the absolute position means the absolute position anywhere on the page that we can put it so select that and now it's based on where you select it so you can move it using these triggers here or you can actually click on it and sometimes it's hard to click on because it'll be behind an object so right here we can see the hand to grab it but if you can't grab it what you're gonna do is come down and use the navigator okay and if we select say this column because we know we put it inside this column it'll select this for you on the right side and if we open that we can see there's the nav menu and then we have the icon that we selected and then if you can't click to reach it we can use the offset here for horizontal and vertical to get access to it so I can bring it maybe all the way down here now I can click on it now I can move it wherever I want okay so I'm gonna put this say something like I don't know something like this and now we don't want it on top of this picture right maybe you do so what we're gonna do is come back to advanced and then advanced and then Z index and Z index is basically the same equivalent as layers so if you know Photoshop you can see that there's different layers here right so the menu is on top of the circle the circle is on top of the picture so just think about them as layers and by default they're all on I think zero maybe one I can't remember the default to be honest apologize about that but I know if you set this circle to zero it'll put it behind everything there okay so now what we can do we can actually right click and duplicate this and now we have a second circle which is great so now we can go to style we can change the size of it I'll make this one quite a bit smaller and I'll move this somewhere where I want it maybe read here I'm going to change the color to something totally different we'll go like yellow and then just bring the down maybe find some pictures that or colors that match the the picture a little bit right so we have a yellow hot-air balloon there and we have some red ones so I'm gonna take this and duplicate it again right click and then duplicate and we can change the style here so go kind of red okay great and then we can change the the size of it so we can bring this down a lot and then move that around if you can grab it and there you go kinda has this little bit of extra style here you can put them all around if you want I hate this green so maybe some other color here you would change it to you or something nice and bright alright now so the more I look at it I don't even like the pink anymore I'm picky like that anyway I probably spend four hours playing with that I'm not gonna bore you to death but I hope you can see this this doesn't look amazing but you can also let's say we duplicate sorry duplicate this one again just bring it up somewhere you don't have to use the circles you can use literally anything you want there's like a cool shape that you could use so whatever is kind of fitting to what you're creating and whatever your theme is or I don't know where I could put this just maybe put it right up in the corner here there we go why can't I select that okay anyway something like that and then you could change the color if you have to so we could do something maybe a little bit brighter darker whatever you want if you got like a sharper one maybe you could look like it's like tearing out the page or something anyway you can play with this and that looks good so I'm going to update this again we don't need any conditions just save and close and come over to our slider refresh the page here's our little home page that we created just like this to slide out there's all the stuff that we got people can select from their menu and it'll go to those pages you could put in you know anything you want here our cell or like some type of slider or like it FAQ or you know login a registration you know literally the whatever you can put in a normal page you can put this in here I see that didn't match up there very good how I was planning but anyway you get the idea how you can use the icons to to kind of style your page in your background as well so I hope you found this video helpful and I hope you liked that effect it looks neat and maybe you wouldn't make this look like such a clown show here but I'm sure you'll make some beautiful websites with using the pop ups and I'll probably some more pop-up videos in the future so if you enjoyed this video please hit subscribe and hit the bell to be notified of future videos it means a lot to me thanks a lot I'll see in the next one you .
A great video for Elementor and WordPress beginners.
🔴Subscribe For More Free WordPress Tutorials:
✅Share This Video With A Friend:
👉Watch These Next:
New Styles For Elementor Progress Bar Widget
New Vertical Video Aspect Ratio With Elementor
Elementor Icon Manager – Font Awesome 5 & Custom SVG Icons
WP Levels Group