Hello everyone this is Iman Ali here Welcome back to our Channel and today we Are going to talk about how to make a Pop-up menu in WordPress so as you can See we are at wordpress.com and this is What we are going to work on as you can See this is very minimal and you can put That anywhere on your website and it Will open up like a flower so I will Show you where to find that and how to Add that and it's very easy so first of All what you need to do you need to go Over new tab and search for Chordpan.orio So once you search that you will end up Over here as you can see called that Codeband.io and you will end up over Here there are multiple widgets and Every single thing are over here but why We are here because we need something Different we need that widget right so You can just search that uh title if you Want otherwise I have this over here you Can see this is the title colorful Flower pop-up menu you can just type That on like the search area and you Will end up getting this so this is Where you are going to copy all CSS and HTML code and put them on your website So let's just leave this one over here And we are going to click on this so you Can see this is how it will look like And you can put that this you know this Icon this uh style uh pop-up menu to
Anywhere like on the tool like if you Want to put this in bottom left corner You can also put that over here and Anywhere and obviously you can change These icons and uh like if you want to Put WhatsApp number over here or Facebook over here LinkedIn over here You can also do that later I will show You how you can do that so right now you Can see that we have this these codings Over here so I'm just gonna take this Over to my left screen I'm just going to Close this one and here we are this is Our WordPress right so what we are going To do now so now you are going to click On pages and you can just click on any Page like any page where you want to add That right but for now I'm just going to Open my new page and I'm going to add it Over there so I've already opened this Over here and you can see I'm using Elementor and I have nothing on my page Right so I'm just going to click on over Here and I'm just going to add this Because you know this is only for Tutorial based uh I'm just going to like Inform you how you can add that to your Website to your page right so I'm just Going to click on insert Apply It might take some time but not that Much And here we are as you can see we are at Our page and how you can add those
Things right so this is where you are Going to work all of that Um first of all go over here on your Codepen.io and copy the CSS whole CSS Order so click on Ctrl a and Ctrl C so It will copy that and go back to your You know Your website after that search for HTML And you will end up over here you can See copy like drag this over here anyway Where you want to put you know put that Oh Put that Pop-up menu so I'm just going to put That over here right now once you've Done that go over here Right Style Oh sorry right Enter and here you are going to paste Every single thing Right click paste so every single thing Is over here You can see So once you've done that don't click on You know don't go back you need to Remove this body because we don't need That And Once you've done that go back to your Um You know Your codepen IO Wait let me open that yes so I have my
Code pen I over here and copy html2 so Copy that go back over here and after Style you can see this after style enter And you just need to copy it that's it So you can see over here our pop-up menu Has appeared over here and if you click On it you can see these options are also Available So that is very easy how you can put That uh from codebend dot IO and you can Put that pop-up menu over here and it Looks good right right so right now we Are going to talk about like where you Can put how you can put that like on Right side or on the top left wherever You want to so I'm just going to show You right now So now what you need to do you need to Go all the way up and click on advanced And after that go to like scroll that And find position so position is here as You can see in layout section and click On default and click on fixed so once You click on fixed you can see uh it Will end up on like you can see this is Left for the orientation and this is Vertical orientation so what you can do You could just like if you want to put That on my uh you know obviously as you Can see it's on like on top right now so I want this on my you know bottom right Corner so I'm just going to click on Horizontal orientation to right and Vertically bottom so it is in my bottom
Menu but right now you can not see Because of this you can see it's over Here but we don't need over here right So you can move vertical orientation Right so vertical rotation is like Upward and let you know so I'm just Going to put this over here and I'm Gonna use horizontal orientation and Move that over here so it looks good Over here in my opinion and it works Right it won't uh like you know it's Clean over here so in my opinion it's Very decent over here so right now we Can see this over here you can see like Click on publish and you can open this On you know On different And here we are as you can see this is The website and on the bottom right Corner we have that and if you click on It there we are so right now I'm just Going to quickly show you how you can Add your Facebook icon over here or Whatsapp icon over here or you know all Those icons over here And those links so it's very easy and I'm just gonna show you very quickly so First of all go back over here and go Back to content and scroll down where You put HTML codes right so I'm just Gonna do that right now and these are The HTML codes right so as you can see The first one is Anchor right so this is Uh you can find that f a f a anchor so
Fa means font awesome so what is font Awesome if you click on new tab and Search for font Awesome You will end up over here click on it And it will open new page And this is a website actually and go to Icons and you can search for Facebook Because you know we are going to add That Facebook icon right once you search That you will end up over here you can See there are multiple icons over here So I'm just gonna use this one And you can see I can just click on it And it will copy that code I'm just Going to click on it so I have copied This but we don't need all of it right So I'm just gonna place that over here We need only from fa to Facebook right Copy that Go back over here and paste that instead Of anchor you are going to paste for no Uh Facebook So let's delete this paste and that's it Once you click on it click on update And it's updated and actually click on Over here it will upload it load up I Don't know why it's not opening that Right now but it will end up getting Facebook icon and if you want to add you Know Your uh you can see over here we have Hashtag you can add your link like
Facebook link yeah like obviously if you Are putting Facebook over here you are Going to add the link of your page right So you can add your page link over here And it will take you right from over Here to your Facebook page so customer Will like you know get easily access to Your website or your Facebook account You know so I'm just gonna go back and Close this all I don't know why it's not opening up but This is how it works and you can find More over like font Awesome.com and you can search that over Here you'll find multiple options over Here so this is this is how you are Going to add your Pop-up menu in WordPress and it's very Easy as you can see putting that in is Very easy and codepen.io is one of the Best tool out there where you can copy And like copy CSS and HTML code and put That over to your website so I hope you Understand every single thing please Leave a like And subscribe thank you for Watching this video bye
