welcome to websites for beginners with JP we are looking at the circle menu widget that is included in the element pack by BD themes for both the free and pro version of Elementor you want to know where you can find this just click on the link in the description below and you will see that these guys are releasing new widgets weekly and I think in my opinion they are probably the developers at the moment with the most widgets that can be added to your Elementor and their customer support is stellar so they come highly recommended let's have a look at the circle menu and of course when we talk about menu we talk about the menu something like this but the circle menu is a tad different and the only way to understand the circle menu is to have a look at it on the left in the elementary editor we go and search for circle and then you will see circle menu pop up here this is a non displayable placeholder so I can drag it anywhere on my page but if I want to drag it and drop it here I can do that so I'm going to drop it there and you will notice a little circle that appears and when I hover over it you see these little other circles coming out and immediately you get the sense that this is a menu you can click on these little icons and it will take you to other places within your site or even on your page let's have a look at how this works and I would start by saying you probably don't want it to appear here you want to appear it somewhere fixed on your page and that will go under layout toggle icon position and at the moment it's default which means it displays where you placed it I want to maybe add it here in the bottom left hand corner click on default and then bottom bottom bottom bottom left and now it will move here I don't like that it is too close to my margins let's see if I do that and now I don't even see it okay it's just updated and see how it looks as a default placement at the bottom left yes and I don't like it it is too close to my margins no one is going to see that and if you're on a tablet it probably will be very difficult to press there so you need to play with these two settings called your horizontal offset and your vertical offset now the vertical offset left means up so I'm going to let's say type in 30 pixels and see no yeah that is 30 so it's minus 30 and I want to type and it goes up so left means up look at that let's bring you down again to minus 30 and then horizontal offset right means right let's see yes so let's also add 30 to that and update it let's go have a look if it is better placed at this moment yep much better the next problem we encounter is that these submenus are now displaying below our screen so we have to fix that by going to additional settings and the direction for which those Manesh should appear should be top right let's see top top top top right and then we hover over it and there it goes one thing that i like to change here is the trigger at this moment whenever i hover over it these menus come out i am not too fond of that there was once when i tested and every time my cursor would go over it it will pop up and it started to annoy me a little bit so i like to put it on click that's just my personal preference now click and it opens click and it closes lets style it just for intersect we've got a Oh an all mona chromatic scheme here for fernando Schmidt so for Nando let's give you a little bit of color and this one is the toggle icon so for the toggle icon let's make what background and color let's see background should be the blue let's make it orange and that didn't work so I guess it's this oh okay there it is it's the icon it's keep that white and then for background there we go good and then I also want to change the circle icons my background also to orange good it's nice complementing the black of this page doesn't look too emo for Fernanda Schmidt web designer now let's see about the content what can we do with these little icons and for that you go to content and over here you will see what you can add and how you can style it the first thing you can notice is that for your little circle navigation you can change your icon now you have a plus within a circle or you can even choose a hamburger menu let's leave it on the hamburger menu for now and then over here you can edit your sub menus or menus these you will need to do manually you're not going to have a styling here that says just enter any menu that you've created you have to go and set your links by yourself so over here if your link is let's say begin what do we have over here we have contact I type in contact and it looks for contact ok or what else do we have there services I think those are just custom links I made right so you have to add in your own links over here and your products and any ID you can also add section IDs let's go and test that always something that you need to first see if we go here to references let's see for this section ID let's give it a added section I got it ok section IDs under advanced type in references ok it's good to our circle menu now ok click here click here ok so lets go you for documentation call it references and then here we say references I didn't reference this all right update let's see if a circle menu now let's go to the top click over here as references and it takes me to the section good and if you want to add more items you're going to click here under more items and it's not adding new ones now is five the maximum no there we go just a little bit slow on adding it it's thinking you will notice the more you add the more this will become crowded so you will have to consider at some point let's just add for the references we have your references contact us ok you just have to consider at one point whether this is becoming too much and then you will have to go and change the setting maybe to something like bottom center and now if you click on it you will see how many did we create oh good grief right this is quite this style widget ok right so be careful don't go too overboard with all of that even my panel has frozen up on this side now because just too many information yeah so yeah there is a sitting that you can change for this displace them more evenly but of course if you are working on a page like this just stick around to a few let's just delete this guy at the moment he's been a little bit crazy in his head and I just want to add it again let's drag it and I guess it you can drag it anywhere because we are going to place it where we want bottom center and now I want just to show you again we have to put that at the top so we put it at top half and now if you hover over it you will see it spaces very evenly for the top half if you just put it at top you will see it space more closer to each other let's see if I can make this thing go ballistic again okay you see had one more one more menu now it gets too close to each other and that's where you are going to use this one top half it will space it all the way in a semicircle right but of course I recommend you don't add this many four to five is probably the maximum that you should go a very nice feature that you can add on to your site and if you go and have a look at how they showed it on their side these are all fixed positions nicely colored and then the one I had also shown here at the bottom and if you want to place one somewhere in the middle you can even do a complete 360 if you have enough of this this is a circle menu navigation widget by BD themes for the element pack add-on for Elementor .
Works on FREE version of Elementor
Find out more about Element Pack:
For all Stuff Elementor and Other Goodies:
This free tutorial brought to you by the Rainbow Nation’s sweat and tears, nah..by:
(but please support us by subscribing to the channel)