Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hello guys welcome to this video today we are going to show you how you can add this widget to your Elementor and make your website little bit more awesome and as you can see that it's looking so much amazing with this custom shape as we Jean and this widget is fully responsive and also customizable so that you can make customization to these widgets as you want and also it is fully responsive as you can see if I come to the mobile size and it is looking awesome and if I come to something like tablets as you can see that it's also working fine so you do not need to worry about the responsiveness of this widget and also I'll show you how you can make and however you can find these widget for your Elementor and most of the important part it is fully free we made these so that you can enjoy and test it out and if you wanna thank us just subscribe the channel that will be enough for us and no more talk let's enjoy the show actually few days earlier I found this in code drops and here is the link I will put it in the description you will find it's and here as you can see that dynamic shape overlays with SVG and if I go to the demo here as you can see that there have six different demo and here in the middle one which is the number three which is looking cool as you can see that it's looking so much simple with gorgeous effect so what I did is I turn each into a element or widget and which is fully customizable and and in this video I will show you how you can find these widget and how you can use it so before that I want to thank eliminate elements because with the help of unlimited elements widget creator we created our widget and so let's go to the WordPress dashboard and here let's go to the dashboard and first of all let's install the plug-in which is unlimited elements so here in their search for unlimited elements and if you search for unlimited elements you will find this one which is unlimited elements for elemental so this is the plug-in install it with the help of this plug-in we can create or import our custom widget into our L Metro so that's why we need this plugin so after an installation we can active this plug-in so let's go to the unlit elements so for now let's skip it and here what you can see that we have these bunch of elementary widget actually so many widget which you can use if you have Elementor and unlimited elements you can see that so many are free and most of them are row so if you want you can install their pro version and for that case we have a coupon in the description you can find it or affiliate link please go to the affiliate link which is web see 4.com slash unlimited elements you will find this link in the description and here use coupon web server which you will also find in the description for 20% of discount so it will worth it because you can see that they have so many plug-in and let's come to the point so what we need is in here for now we need to import our custom widget so custom widget so let's first of all download our custom widget so for that I will so for that lets go to the Omega I will put in the link in the description also so you will get the download link so don't worry so come to the mega and download the plug-in so that's the so that's not a plug-in that's a widget actually so download the widget so I come here in these three dots and a standard download so as you can see that your town loading already here so let's come here and drag and drop it here and just import the widget so as you can see that our widget advanced menu is added so let's close this pop-up and if you come to the uncharacterized you can see that our advanced menu and if I go to this menu or if I click this widget as you can see that here is all our information and this widget is made by vfc 4 and it is found on quote drops so as you can see that here is all the code drops HTML CSS and JavaScript and many of those I wrote also as customly to turn it to element or widget and here it is after that lets come to the template and let's add a new template and here let's select template type which is header and let's give it a name header and here we are and here what we need to do is in the sarchu yet we need to search our widget which is advanced menu and here is the widget and what we need is we need to drag it from here and as you can see that there it is it's looking good and if I publish and say that the condition is for entire site so that these header will for enter site so if i refresh and what we will see is we will see that in these header which is existing header will replace our menu so as you can see that and that's our hamburger menu with this nice little effect so what we need to do is we need to make it some adjustment and fast adjustment ease as you can see that there is some white space so for that what we can do is we can come to the header and in the section let's say that I want the content width will be full width and the column gap will be no that so if I update now if i refresh in my site now as you can see that that's for our full width and if I see that there is no more extra gap but we can see that there is still one pixel gap we can see and for that what we can do is we can come to the header and in the advanced select a section and in the advanced we can make a negative margin so if I make a negative margin and update and come to my size and make a refresh we will see that there is no more gap now so that's looking perfectly fine so let's polish on these hamburger so for that what we can do is we need to select this hamburger by this pencil icon and let's say that in the advance the position so we need to find the position and for the width let's say that each will be inline Auto and also for the position let's say that it will be fixed so now as you can see that the our hamburger is now in there but what we need to do is we need to say that horizontal orientation will be right so this will be in the right side and also we can say that it will be from the right it will be 50 pixel so let me say that and here from the top as you can see that also say that it will be 50 pixel now it is perfectly in position if I update and come to my site and make refresh and as you can see that it's looking perfectly in position and if I click it as you can see that it's perfectly walking fine with this custom shape layer but there is a problem as you can see that if you notice there's our text for this site but if I come to the navigation as you can see that is still in here in our navigation we don't want it so for that what we need to do is we need to make some set index to our widget so select the widget come to the advanced and in the advanced we need to set some set index so let's say that 100 and if I go to the website now we have a higher set index of 100 and if I open our navigation now you can see that we don't have anything we don't have these text in here so as you can see that it's perfectly working fine now our header is higher than any other content in the word set so let's also make some navigation here so for the menu what we need to do is we need to come to the advanced menu and in the content we will have these item so for the item you can add to your navigation menu so let's so for the first one let's say that home and in the link what we can do is we don't need to paste or write our URL we can say that home and in Elementor there is a nice feature which will put your page same page in the drop down link so you can click it you tool make your link re address here so next one will be about and for the link let's say that about and had it is about page so after that let's add conduct if I can spell and here also said that contact and here duties our conduct and last one for that let's say that portfolio let's make that P capital and also here let's say that portfolio and that's fine for now so if I update and open our navigation hamburger as you can see that in that's our menu now if I come to my site and make a refresh as you can see that it's our menu it's swattin fine so after that lets come to the menu and say that we want a style to the text so for that let's go to the style and here let's enable the style and for the typography what we can set is we can set all the items so let's say that montserrat will be our font family and we will have a font size of 50 pixel and with off something like 300 and also for the line hatch we will have something like 1.61 I don't know let's see how it is looking so it's looking perfectly fine let's say that I want something higher line height something like that or something letter spacing of something like that it's looking perfectly fine let's also increase the size of the menu let's say that 16 just working fine as you can see after that as you can see that we have option for color so here you can select color which will apply on the text as you can see that we have this red text but there is a problem if you select color from here you will lose the ability to choose a hover color so I will recommend you to not to use color from here so let's clear it from there and as you can see that we have these hover color and if you want to change this color hover and text color what you need to do is you need to go to the content and in the bottom as you can see that we have these two option menu text color and menu text hover color so let's say that text color will be something purple and how our color will be something like that now as you can see that we have this hover color but it is not what you are looking for it's ugly color so let's make another one or let's back to the default one and which is looking good for now so that's it you can change it from here so let's go to the top and say that we have an option for hamburger background as you can see that in the background we have this black color which we can change so let's say that we will have this red color so as you can see that our hamburger is now red you can change anything as you want so let's make it something purple once again and that's looking fine also you can change the color of the bar as you can see that for now it is white so you can make it black or something red as you want let's say that it will be white and that's looking good after that let's say it a pulse color and as you can see that we have this pulse color which is in hamburger around the hamburger so we can change the color of these parts let's say that I will have a red pulse color so as you can see that our pulse color is now wrapped so it's up to you how you wanna design we have so many options to design so let's say that I will have something like you you you something like that which is looking fine for me right now so after that you can increase the size of these hamburger let's say that I want 100 so as you can see that now our hamburger is 100 a square so it's looking fine perfectly so let's back to 880 which is looking awfully fine for now so after that as you can see that if we click it we have this 3 layer going on here first one is which is this white one so we can change these so let's say that first layer will be this red color second one will be something purple or third one will be like that let's say that third one will be white and if I click as you can see that if you notice we have three layer which is now changed color first one as you can see that red and second one as you can see that purple and third one and he is white and if you notice you can see that the third SVG layer which is white is the final color for our nap menu so choose it as the background for the nap menu so I will have this color which is looking good for now for the third color so that's it let's save it and if I come back to my site and let's make a refresh and as you can see that our custom menu hamburger is here if I click it our menu is working it's fully responsive that's mean when I come to the mobile it will be fully fine but for now as you can see that we have this menu which is what press menu so let's open it with incognito mode and paste it here so that we can test our responsiveness so now as you can see that it's looking fine and also we don't have any gap from the top and if I make it a small size something like that as you can see that it's looking fine you and something like tab size as you can see that it's looking also fine you so it's fully responsive as you can see that so that's it for this video if you like this video please give it a thumbs up and let me know what you think about these widget and if you want you can join our Facebook group higher you can find this kind of idea or you can give me ideas to make element or widget link in the description you can join and let me know how it is and what kind of improvement can I make and if you like this video please give it a thumbs up and don't forget to subscribe the channel if you are new to my channel and my name is our fun and I will see you in the next video till then bye-bye khuda Hafiz .

Video Discription

Today we are going to show you something interesting. We saw this in the codrops. They listed it with source code. We thought it will be a good idea to turn it into an elementor widget. That’s what we did, We customized the effect to make it compatible with elementor and finally, we came out with this result. You can download the widget from down below and test it out. Also you can watch the video to see how you can use it. we hope, it will be helpful and you will like it. Happy web !!.

Download the widget :

Codrops Link :

Affiliates :
Buy happy addons :
Buy Elementor :
Ultimate Addons For Elementor :
Astra Pro :

Unlimited Elements For Elementor :
*** Get 20% off with our coupon code : "webcifar" For unlimited Elements plugin [ Note this coupon will work with only the link given above ] **

Join The Community :
Our website :
Facebook Page :
Facebook group :
Instagram :
twitter :

#elementor #codrops #advancemenu

 

InterServer Web Hosting and VPS

Leave a Reply