Very good welcome, good morning, good afternoon, good night, I'm joaquín barberá of course online store dotcom origin web point is and online store murcia.es we are going to see in this video how to use the nap menu an element widget that will help us to add a menu if we want to add this menu on a page as we would simply go to pages we would add new or edit and we love one that already exists and there we would add the widget in the menu in this case what we are going to do is how we would create a header with that menu or header that we can use is a header that we can use in all the pages of the website or only on some pages for that we will use the theme bittler of the event well let's go here to templates let's go to theme builders and notice that we can add a new template that can then be a header a footer you see how we have several tabs ok we can assign it to different designs and well we also have the new wílder order from here we can launch it what is exactly the same here we have header footer single post etc. note that it is the same here haider footer single single post and to add a new template or a new design that in this case is type header Well, we just go here to Heather and now we would add a new one to add a header type we will add new and here you see the header is already chosen or we could change and choose another and here we would put the name but we are going to do it with the new one simile of the one that is going to be progressively introduced in the event we have released from here in the future will surely appear on the page already main when we go to sell good here we have it and what we want is a header we click here here we could choose between different headers or headers already predesigned on Those of us who could continue working on this case are going to start from scratch to click here on the blade to close this stern and we have our work interface here we are going to add a new section we click on the plus and well we are going to work with a single column but in this header we could work with two columns and in the left column put the logo on the right put the menu etc. but hey let's do something very simple let's focus on it menu I will add a single column here we have it perfect let's go back to the widgets we click on these squares and here we have the menu nap dragged it to the section that we have created perfect and here we have the menu the first thing we are going to do is put a background color so that now when we modify its width we will see it perfectly for that we are going to go to the advanced tab and now here in the background let's add a background a color well a light color light gray let's see something like that perfect now we are going to configure first the section for that we do click here edit section because what I want see is how you can customize the width of the menu from here from the section note that the first thing we have here is the width of the content type box or full width type in the case of box type we can customize fix you the width of the menu and therefore set the background color so that you can visualize this change in width well if it were all white because I would appreciate well what we are doing, check how can I here customize width in case we select here full width as we will have the menu will occupy the entire width available here we have it and as you have seen if we put a box then we can set the width let's see it there we have it this would be a width that is not complete well I'm going to leave it in full width I'm going to leave it like this perfect well let's go let's go saving we are going to publish it for now we will not choose the conditions this is to add conditions from where This header will be shown that we will see later perfect let's now continue with the configuration we click here from the nap menu we go to the content tab and well the first thing we have to select here note that we have layout this tab only in content we have to choose which menu we want to be shown here from the ones we have created in wordpress could be secondary menu could be this that I have or It could be the main menu and you already know that this is generated from appearance menus well I'm going to select this now we are going to establish the layout the design can be horizontal which is the menu normal could be vertical which would be this type of menu or could be drop down which is a typical drop-down menu with our hamburger icon that is the that is going to be shown on mobile phones and tablets, but we could make it also appear on the desktop well, for now I'm going to put in horizontal which is the normal here now we have an alignment issue an alignment option we can center left-right is valid or this option that appears good in the elements that they occupy the entire width with equidistant separations we are going to leave it I am going to leave centered let's put them centered for now well here we have an option called pointer in what you mean is the way you let's highlight the effect or see the uber effect is when I put the cursor mouse over an element, then notice that it changes color and in this case I am also getting a lower bar because that is the pointer now itself is selected underline which is a lower line but we could put over line look now the line appears above double line on line that would be two lines frame is a rectangle bacan what is a background color and text test as you can see what happens what happens is that the anchor test the text is enlarged Well, for now I'm going to leave an online a girl inferior to her we have now we have this animation option we already have in fate and it is the animation that appears when the pointer is shown look at the pointer as it appears because that effect is fake but if we put for example the drop in then now look at the pointer now you see how it seems to appear from the bottom up because that is this effect drop ping and if we put drop out You see how now it seems that it goes from top to bottom well here you can choose the effect that you want for the pointer now we have here an option that says is submenu indicator that good what it means is you see this icon in this case is a downward triangle which means that this element has a submenu and when we put the mouse it appears to be submenu as we can indicate that icon in different ways we could with this one with road chat you see how the icon has changed we can put it angol it changes a little too and plus that would be the best sign I I'm going to leave the classic that looks pretty good is correct now let's go to see these options here mobile drop down here we are going to establish the point of break so that the hamburger type icon is displayed, that is, when to what screen size these menu items will disappear and will be replaced for the hamburger type icon that is a drop-down we could say that in no case in this case as break is selected point break point none because in all devices it will look like this The hamburger icon will never appear, we can see it here, we will put tablet and you see that it appears without the hamburger type icon we put mobile and Likewise, all the menu items always appear that would be as if we added a break point is not to say if we do not add break point Now let's go to the next option, which would be a tablet, note that it says tablet thousand 25 pixels or less here what we are saying is that from a screen one thousand 25 pixels or less, that is to say downwards, the type icon is already displayed hamburger therefore if we choose this option the hamburger type icon will will be shown on tablets and mobiles since on mobiles the size is less than 1.025 let's check it for that we come back here we go to put the tablet and see how the hamburger icon appears and if we choose forgiveness and if we choose here mobile You can also see the hamburger type icon we go to desktop and now the other option we have to it would be mobil in this case the interface would be transformed, that is, the menu items would be transformed into a hamburger-like icon from 768 pixels down, that is, in this case in tablet mode the menu items but the mobile would already show the hamburger icon let's see it on tablet we see that the systems appear menu and if we click on mobile, the icon would appear hamburger guy let's go back to desk and I for the moment because I am going to leave it in table that is to say in this case the vrac point the breaking point would be in tablet in thousand 25 pixels for sizes of screen equal to or less than one thousand 25 pixels would already show the icon type hamburger I'm going to leave it like this here, well, we have a choice of football which for the drop down menu is worth full weeds a full width We are going to put it on a tablet to be able to see these options, this would be the full width for drop down for top down here we also have a choice of alignment we can align to the center this we are talking about the dropdown of the hamburger type menu and here we have a site or centered and well I'm going to leave it here on the side and here more options would be displayed well let's see now such the button This icon the hamburger type icon can be changed because the hamburger or what no icon appears, which would be quite rare let's leave sorry we're here in hamburg and then the icon position that we can put it to the left to the right or to the center which is normal we are going to save we are going to update wants to assign conditions at the moment no I close perfect and we continue because now we are going to go we are going to put the mode desktop to see the normal menu here we have it and now we are going to go to this tab to style tab here notice that we have three submenus or three tabs one for the main menu that is, with customization options from the main menu, another for drag down for the dropdowns either these here or the hamburger icon that it also has a drop down for all drop down menus and then we have here the tag the button voucher that refers to this hamburger type icon that we have seen before where we will be able to set customization options on that good icon we are going to start with the main menu the main menu and well the first thing we can establish is the typography we click and here well family that is the type of font size size from the source let's see it smaller the weight that is the thickness of the font decoration style transformation if we want to put a low-rise line of line space between letters typography options then we have here take a look normal over and active and in each of them we can customize something in normal the test color that would be the color of the text this color that we are seeing then we have in position hover position over we can customize the test color and the pointer color that display or see I have already mentioned it to you is when I put the mouse cursor over a You see that the element changes color, it turns green and the pointer appears as We can customize those colors too, logically, in this case to put a more orange color ok and I'm going to copy it and we are going to put it both for the color test and for the pointer I like this color better, there we have it perfect and good and that is the active the active eo active is we can also customize text color and pointer color but this would be when we click On one of these elements the page is loaded as it will be marked with the color that we establish here, for example, for this, we are going to put a blue this same I haven't changed it, let's see that I'm here hours and here we are going to put the same for the color pointer and for the color test, well, we already have everything marked now if we click on contact then these colors will appear let's see now the pointer wits we already know what the pointer is because this is is how the thickness you see the thickness of this pointer which in this case is a underline a lower line you already know that we can establish different types from pointer we saw it in the good content tab, so let's put it finite something like that also horizontal padding this is a horizontal inner margin we are going to modify it for you to see how that inner margin is changing ok well let's establish something like this vertical padding because this would be a vertical margin well here we are going to leave it as it was by default We simply delete it and we will delete it and it remains as it was by default even notice that both the pointer wits the horizontal padín vertical padín We can also set all this independently on the desktop tablet and vertical mobile padding as it is a margin vertical interior from above and below there I see it you are seeing it We are also going to leave it as it was by default we are going to delete it and ready and here we have a space between space between elements look at how it is it also modifies the space between items here in the difference between horizontal padding and space between is that in horizontal padding we also set a margin here on the sides which happens is that as it is centered it is not appreciated but if the menu were in the side on the left side if it would be appreciated and it would be the difference horizontal padding is a left and right inner margin but also would count between this element and this part here and between this element and this part of here space between would only be space between elements, well We already have the main menu and now we go with the drop down, you know what they are the dropdowns either this dropdown for example that we have there or it could be also already we are also configuring this drop down is worth this down from here well let's go here to the desk and well the first thing we have to look at is normal over and activate the same as in the main menu that happens is that now it is for this doctor and the same color test background color and typography that is, we can establish a typography different in normal position production over and until good I am the typography to leave the same the same here in the submenu that in the main menu does not I'm going to change the test, good color, the one that is coming out by default may be worth I will not touch the background color well if we are going to change it bank let's put a soft gray something like that let's see see I could worth it and it's color to you, we'll leave it as is and in over we are going to put in background color we are going to say when I put the mouse you see that color that appears because we are going to establish we are going to establish the same as here we are going to copy it but we are going to put a little more more intense that would not be that let's copy it again there has been a problem we are going to copy control c over here we are going to paste it now yes and let's make it a little darker so let's see how You see good I could see and we could set the text color but hey here Right now it comes out white in the over position which I think looks good perfect good type of border we have no border look at this rectangle but we could put a solid edge is not appreciated because that is not appreciated border in this rectangle because we don't have a width set how much set a width here we have it, you see that edge appears that can be solid could be double is the type of line we want dotted there we have it, well, let's leave them solid for now let's look at these options and then I'm going to remove it no I'm not going to set a border although good if we put it very fine maybe it would not look bad let's see sea could be worth an edge and in green this black color you can put a color similar to the one of the darker background let's try let's copy this color and let's put it here in color and we're going to make it a little darker something like that ok well then that's something else we're going to put a little more thickness we could set different thicknesses top right bottom or left of independently if we click here well then it would not look bad let's leave it like this let's see too how is our track downs being and here we are also doing somewhat weird we are doing exactly the same our border and the colors that we have established perfect we return to the desktop and we already have here the type of border, the width, the color and the radius of curvature corner radius edges set is a rectangle with perfect corners but we are going to change that we are going to put a curvature on the corners you see we are going to put minus 3 and there we have to look at the corner how it comes out a little curved and good box shadow is for establish a shading we are going to modify it horizontally and vertically and you see how it looks here is the shading that of course can be customized in your design let's set positive here well here we could go adjusting it well if maybe it could look good maybe a little less extension a little better something like that in any case I well I'm going to remove the shadow I'm going to leave it here default values set I will not put any shadow on this icon, we will leave like this and well we continue we continue the previous town and here we have a horizontal padding that you already know is a margin horizontal interior that is to say left and right here we have the sites of menus well let's modify it and see how this margin is modified to left and right I'm going to delete it to leave it as was originally by default and here we have a margin and interior upper and lower that is, 1 vertical is worth we can modify it vertically too And there you have it, how it is being modified, we are also going to leave it as it was by defect that that upper and lower inner margin, that is, a vertical one if want, we would like to change the distance between the menu items as We could use this option that as you can see are also customizable for any type of device independently we can establish a one quantity for desktop another for tablet and another for mobile and here we have a divided a divisor this could separate the elements this of this we are going to establish one for example solid we are going to establish a color let's copy this for example there we have it there it is still will not be shown because we have to set a width not shown we have to give it a width we are going to put 3 and now we see there we are going to remove there we have it, you see that separation, well, that would be the toilet and finally here we also have a distance option look we are going to increase it and as it appears good apart from this element something that then does not have too much meaning we are going to suppress to leave it as it was and finally have let's pick up the drone down and we have here the button tag to see these options as let's go for example to tablet that we see our target button and well let's see we have a normal option and see we already know what is normal the color and the background color good, let's leave that color or we could put the one we want the one we want come on let's change the color to do something and background color because it would be the background color the background color here because we are going to put a very gray soft something like that and then we have the over position that is, we can do that when we put the mouse will change the color we are going to put for example here now a gray a dark gray you see when I put the mouse changes the color of the hamburger type icon because there would be the background color not I'm going to play, I'll leave it so good because that would be normal and then we have here the site option which is every year here you see the size of the icon type hamburger that could also be customized for different devices mobile that is, we could this you have already seen that it is in many options we can set this size for computer in case it will show the computer logically then for tablets put another size and for mobile you can choose another different size ok we could choose different sizes well I'm going to leave it as it was by default I think it is a size that is fine I will change it in all of the tablets and well on the desktop we would not care because it will show us but hey what we also leave as it came by default there it is in we go again to the tablet to see this these border with options here would be the thickness of sds edge notice I am going to leave it I am going to leave it very soft with a thickness of 1 note that the border color is the same color as the icon and then we have here a border radius that is for the curvature of the corners I'm going to leave it too very little, let's leave it something like that Well, we would also have the advanced button custom tag in advanced we have the same options as in all the widgets or in most of widgets or elements of this builder of this visual layout which is elements therefore we are not going to enter here because they are the same options I do not want to lengthen the video much we have of course in margins outer margin we have padding which are inner margins this would be the whole blog that in this case from the nap menu background motion effects we have already seen it we have changed the background color we go anyway to put in desktop mode here it is we have background social of course We are also going to see with over options that here they put it as when hovering the mouse instead of having border options it is valid for the whole element or border zeros adaptability placement also if we want this element not to be shown in some of the types of device we are going to update we already have in our created menu we are going to update it and now we can set the conditions in which we can decide where we want it to be displayed this heather that we are creating because we have actually created a xerez template to which we have added the menu Well, let's add conditions, make condition And it is even that if we want to show it where the site enters, it would be in everything the website is header would appear throughout the website on all pages hey no, I want it to only appear in some pages well come on well we put singular now here we can establish in which elements for example pages we have tickets we have here a lot of options pages perfect hears in all the pages would now only show on all pages but for example not on blog entries would show the xerez that came by default but hey no no no no all pages I just want it on the page contact contact is ok and I also want it on the page of team on team page in k good team sorry this would be for the team page I would have to create another new rule for contact page that has to say singular condition pages or contact page now yes well, right now this header that we have created with the menu alone would be displayed on the team page and on the contact page nothing else in the The rest of the web would show the header that we have by default, well this It could be let's save and close and we would no longer have saved well let's go let's get out of here go to the desk and from here we could change the name and give it a friendlier name and we update perfect because here in the cimbis there in classic mode, the header would already appear here here we have it header team and contact page and from here it could be edited modify etcetera and from here from the new the new version of the cimm wílder exactly the same and here we would have our header that We just designed well, with this we finished this video I hope you have liked how to add and configure the menu item nothing of the visual layout maker element and well see you in another video thank you very much goodbye .
☑️ 👉***MIS CURSOS PREMIUM, ACCEDE A TODOS POR SOLO 10€/MES***
Como utilizar el widget Nav menú de Elementor para crear un menú. También veremos como asignarlo a una plantilla de header con el theme builder de Elementor.
Toda la info sobre Elementor PRO: