Add control settings to a custom Elementor widget - WordPress Tutorial

welcome back to the channel in this video I'm going to show you how we can make this background color so that it can follow the standards that element has set up so for example you'll see that we actually have this background already showing up in here and you can actually set it to a classic style and you can add a default color and you can change if you need to have something custom and that should be able to affect your background here now I'm going to take a different route and add our own styling panel right here and that setting will be the one that's affecting our background so that we have something that's going to show us different ways of actually tackling this so the first thing that we shall do is come back to our code if you don't have the code you can be able to check the GitHub link that I've put inside the video description and you can be able to follow up and have the same code that we do have so we're going to go back to this section here we decided to add this style Tab and we had commented it out in the previous video if you didn't have a chance please go back and review that video and you'll see how we added this extra section but what essentially this code is doing is if we save this and go back to look at this on the back end reload it you will see that when we click to select this we now have this new tab showing right here so we're going to add menu style in this section the first thing that I want to do is use a color Pier so I'm going to come back to our code the first thing that I will do is come in between here and I'll say this referring to the class of the nav menu let's add a control in here now the control that we want to have is going to be a Color Picker so the first thing we do is add an ID so that we can be able to use it later so we'll say we want to have a menu BG color for menu background color and we need to add a label as one of the arguments to call and we shall call that background color and this facility allows us to translate our addon in any other language be German Spanish or anything that we would prefer by adding this little underscore Dash function and then passing in our text domain the next thing we shall do is add the type and we're calling this from the controls manager of Elementor and we are adding it as a color and if your editor is intuitive you'll see that you have very many other options like you add date time you can add galleries you can add text areas if that's something you want to do now all you need to do is think of the name and probably it will be the one but if your your editor is not that good you can actually go to developers. and in the documentation you can look up the different controls available now since we're using the color we can attach this particular color item to a selector so in here we're saying if the wer has take Press menu then the background color should be the value that we have from this BG menu when it is selected and this is essentially what we need because we we' already attached the menu class of take Press menu to our menus so I'm going to save this I'll come back to our browser I'll reload this section by default we have this blue coming from our CSS but what I want to do is come to the style and I'm going to change this and select this big green and you'll see this is automatically green if I update here and then come here and review you will see that now this is actually showing up as green for extra credit let's do the text color as well so that it's easier on us I'll come back here and I'll just duplicate this as well and I'm going to change just a few things here I'm going to say menu text color and we'll say this will be the link colors we'll change this to color because this is just CSS let's go back and reload and if we select our menu go to the style I'm going to change this to one white and you'll see that this is not affecting what we have here for now I'm just going to update it and then you'll see why this is happening when we go and look at this and reload this space you're going to find that these are link items and they the ones that are colored if I turn off this color you'll see that it takes the default browser color now all we need to do is actually go and Target this link inside our take Press menu so if I go back to our code all I need to do is say take Press menu and add the a tag in as CSS would be we'll come back here and reload this and now you'll see that this is actually white because previously we had saved the colors white but let me change it to something else maybe a yellow that will make it easier for us to see the difference and I know that's not so visible but this is going to allow us to experiment and see what happens so I'll bring it to a pop off for the background I'll hit update here and then when I come here and look at the other page you'll see that our colors are actually working you can do this over and over again and add maybe a hover color you can add a visited color go back here and just add maybe this is going to be a link and that will be for the link color and then you'll add maybe a hover color and then we can add a hover here to make it easier for us to understand what's going on so that when we come back and now you can see that when you hover over the different links they change to that color as we expected it to be and if we reload this you'll see that we also have that color as we want it to be the next thing that we want to do is add some typography or change the font family that will be used on the menu so we'll open up our code and we're going to say this referring to our class let's add a new control and let's add a semicolon here to close off that and we're going to add a new ID and we'll say menu text and we'll add font family as the ID the next thing we need to do is add some arguments and in the arguments we shall have the label and we'll say the font family giving it that thank you AI We'll add a type which is going to be coming from the controls manager and that will not be typography but rather will be font and you'll see that our editor is not scrapping anymore We'll add a default like the way we would do it in CSS and say let's add open SS which is a Google font and then we'll add extra and say let's add a sun serif if we cannot find open Suns as a default and then we'll add our selectors and in the selectors we shall add a wrapper and then we're saying this will be wrapped with a the Press menu and we're going to add the font family and thereby pass the value that we're getting from this ID so in other words it would be like getting this and then placing it in this area that's what it would be doing so let's save this come back to our browser I'm going to reload this space we have an error on line 129 so let's go and fix that remove this extra coma on 129 and then we should be able to have a clean browser and once we edit this go to style you'll find that we have a font family showing up here so I can change this to Roboto from Google these are all fonts coming in through elementa you can add Roboto slab you can choose to add popins if that's your preference and you'll see these are actually changing here so I'll update this and if we go to the front end you'll see that we have popins for the links if we go to our unorder list and go to the family you will see that we actually have it as Poppins so this is working like what we wanted to do so the next thing that I want us to have is increasing the padding and the margins of our items so let me go back in here and we're going to do that inside the advanced section because we don't want to duplicate what's already existing so if I increase this you will see that this is being attached to the whole element of our UI but I want to be able to tie the padding only to this particular items so we are going to have to do that in our style so that it's more controlled than what we have here now for the control that we're looking for that is called the dimensions control and the way we add the dimensions control is by coming back to our code and in here we're going to say this add a new control close it off with a semicolon we shall add an ID and we'll call it link margin to make it a little bit clearer and then we'll pass in the arguments as an array first we add a label and we can use the label of Link margin and in here we can use a slider now let me just save this so that you can see what's going to happen if we use a slider and then give it different unit sizes like pixels em or percentages and we can add a range for the pixels the em and the percentages setting a minimum and a maximum and the step so if I save this and then come back here if I choose to edit this in the style you'll see that now we have this slider item and you can see it's only increasing the space on the right and that is because we said let this be on the margin of the right in the code if you look at this we have margin right as the property that we want to affect but if we wanted to affect everything around then we'll just say let that be the margin of the link and if I come back here in our preview space select our menu then once we click this you will see that this still increases it's increasing on the right and the left but the problem is it's not going top and bottom and that is simply because when we inspect our links that we have here and let's look at this you'll see we have a margin of 20 on the list item if we go to the link we actually have a margin of 24 just like we've set up here but it's simply because link Tags by default have a display which is inline so if I was to write here and SEL this beard block you'll see that this changes how this actually looks so the other thing would be adding a display block what kind of display do you want to have on that link in order to make this more effective we'll come back to our editor I'm going to copy something that we previously had here which is a select menu so I'll copy this from that section and then bring it down and here I want to say the menu display style will be the ID and there just a couple of things that I'm going going to add in here so we're going to add this as a type of Select we'll choose it to be a block whether it's block blocking line and we can add others we can add those that are related to flex so if I duplicate this we can change this to flex and then I'll just make this Capital size so that it's easier to fix and then the other thing that you need to add into to your coding is working with our coding standards because now as you look at this it's easier for me to read my code than it was before and then we are adding a display in our selector and saying let this be the value number one I want it to have inline block and we'll leave it as a default inline block so that it mimics what the browser has by default and then once the selector has been chosen then we can use the display and put out the value so let's come to our browser I'm going to reload this and you'll see if we select this come to the style we can choose flex and you'll see now this is going to be different if I choose inline Flex it's a different thing if I choose block that's now different as well let's go back just to make one check you'll see that this is applying it to the general item let me add it to the links so I'm going to save that on changing I'll reload this and I can reduce this if I want to I can change this to flex or inline flex and we're now making our widget much more robust and giving it more options so that someone can be able to use it depending on the size size of area they are working within we'll hit update on this I'll come and look at this on the front end and you'll see that we have this working as we wanted it to it looks exactly like this and this is what we have here and you can see when the space is off here because we've affected this in the advanc section so let me change this to zero update reload and now this is fixed so it's only the link items that are getting the margin for your own marks for your extra credit please add one for padding and let's see whether you'll be able to fix that for your menu if you enjoyed this video give it a thumbs up don't forget to subscribe and share with your friends and in the next video I'm going to show you how you can actually sell this item and make some money so I'm going to teach you how to create plugins and then sell them to make money if that's a video you want to watch don't forget to let me know in the comments give it a thumbs up on the video so that I will know that you are interested in that particular topic