hello everyone welcome to elemental pro series in this series I will explain about all elemental process not only that I will show you how easily you can create really cool options using those projects in this tutorial I will show you everything about the menu widget also we will create those cool sections using this awesome widget I'm Fatima with you the instructor let's get started by the way if you don't have elemental Pro you can get that from the link in the description and trust me if you don't have any winter pro it will be missing out on a lot of things and as you learning elemental pro from me I also have a special gift for you so check out the description alright so this is the menu yet let's first have a look what options we have for this vision at first we will drag this into here so here is our menu by default here is the main menu if you want to change the menu go to the dashboard and create a new menu and select the menu from here you will see this in here ok at first here is some option layout you can change the layout from here like horizontal or drop-down here's the icon if you click this on the menu will be appear for now I am selecting the horizontal align you can see the alignment left center right or stage for now I am selecting the left pointer here is the point item you can change this on like over line the bottom will be top of the item you can also say double line you can see the double border if we hover over this you can see those effect you can also select the frame this will be boxed you can also select background that it is you can also slip detect it is only the text and the pointer will be in different color and selecting the background for now you can select the animation from here like swipe up now if you hover this you can select the of animation and shrink it will be like this okay I'm leaving it for now here is submenu indicator this one has some many three items here is the submenu indicator we can change it this one angle like this or the plus icon I'm selecting this one for now okay now here is the mobile option here's the break point tablet if you go to the tablet mode you see here is a hamburger menu if I change it from mobile device you will see the menu here and go to the mobile device then you will see this hamburger menu for now I am selecting this from tablet if we click this one you will see the menu is not Kumud if you click this one full with this min will be the full with menu ok I'm slitting this for now there is also some options aside center edge toggle button if we select the nan the toggle button will be gone and the simple mean will be here wouldn't want this so I am selecting the hamburger menu okay now we will go to the style tab here is more options typography you can change the font size you can change the font family from here you can change the font weight like gold normal you can change the text transform into uppercase you can change the line height and you can also change the little spacing okay okay text color you can select the color from here I'm selecting this one okay here is the padding horizontal padding there is the particle padding space between those items border radius I don't want this okay now go to the drop down here is the drop down menu options you can select the color I'm selecting this one background color I'm selecting this one see how slow we can change the hover color text color will be this one and background color with this one now if we cover this we can see the effect now we can select a divider solid a color will be white and we'll select the low opacity okay water wood will be one pixel now if we open this we will see a divider between those items okay now we go to the toggle button if we go to the template version here is the toggle button we can change the size we can change the border put into one border border radius you can change the color from here like this and the background color will be this okay then here is the Advanced tab you can set margin from here reading from here you can also increase or decrease the chair index you can add a class ID then here is motion effect you can add a background like this one or this one or this you can add border like solid ten pixel color will be red border radius zero okay these were the menu widget works cool now let's create a few cool sections using this widget so you could get a better idea how to use this widget in real life and before moving forward make sure you like this video and subscribe into this youtube channel otherwise you may don't find those valuable videos on your home feed next time so make sure you have liked this video and subscribe into this channel now let's create a few section using this element and first we will delete this one now we will create a nice header using this menu widget okay we will drag it to here we click this icon will make it full weight now I will duplicate this column and I will delete this menu from here here I will add an image this one here is our logo now we will do please the column width right this okay now we will make it vertically middle and this one also vertically middle now with this manner we will make it to align right so here is our header we can say the background here like this one then we will add some padding at top like lifting things up and bottom 15 pixel will change the logo white okay now we will go to the menu edit icon we go to the style tab we will change the text color like white or this one will go to the whole heart we can also change the hover color like this one and the pointer color also this one active over color this one and the pointer color this one okay now we will create a new section here we make it full it will say the background right this one will go to the layout then set the minimum height of wage will set it 100 eh okay then you can go to the style background position center Center attachment default if it no-repeat and size will be cover we will drag a heading here will change the taste okay we will make it Center go to the style tab text color will make it black now go to the typography font size we can change the color red okay typography will make it nine hundred will change the font family Poppins now we want this header in front of this banner so we will go to the section edit icon we will remove the padding then we'll go to the layout minimum height we will set it 100 pixel go to the style we will remove this background color then go to the Advanced we will set a gel index 1 then we will go to this intersection we will set a margin top – 100 pixel this way now we'll go to the style we will set a background overlay here we select a color like this one you can increase the opacity okay I will show you something more interesting we'll duplicate this on and we'll drag it to here and we will also duplicate this banner for that we will go to this one we say the margin duplicate this is duplicated we will drag the duplicated item into here now let's fix this okay realities we will click this one go to the advanced margin 200 now we will click this and we'll remove this margin from here okay go to this one remove the margin from here change the logo so here it is we can do something interesting we will click this one and we'll go to the advanced motion effect from here you see a sticky option we will select it top now if we scroll this one you will see the menu is sticky when I am spoiling but it's transparent we will set a background color here go to the style alert right this is it you can also change something like her menu icon you can select it a drop down look here it is if we click this you will see the menu will be appeared will click this full weight now click this on see how it's working now we will align the toggle icon into right style toggle button color will be this one and that one color with this one now we can increase the size of it we can increase border radius okay if we click this you will see the menu and click this the mean will be high okay let's make them in responsive in tablet mode is looking good Mobile is looking broken how can we fix this we will click this column icon will set the width 70% and we will select this one this will be to 30% okay our menu is already responsive now if we click this you will see the menu is appear and click this for close all right so this is it for now if you want to know about all the details of other elemental projects I have a complete tutorial on that I will put that link in the description also if you want to learn how to create a website from scratch using Elementor or elemental pro you can check out other full website creation tutorials I will put this links in the description as well and if you need any professional help regarding Elementor workplace or e-commerce from the small minor fixing to a complete website creation you can contact through our website just go to the hey wordpress.com and click the make my website button it will fly you to this page you might be searching for here is a simple form just fill it up and clip to the submit request button we will get back to you thank you so much for watching this tutorial see you so .
✅Get Elementor PRO:
And, I’ve a surprise for you,
4 Million+ people started using Elementor Page builder to create their website.
Because it’s the no 1. Drag and drop page builder. You can create your complete website with just a few clicks. Elementor Pro is even better. If you use elementor pro, you don’t need to use other plugins. Less plugin = super fast speed of your website. Elementor Pro is jam-packed with all necessary features.
You can always start with the free version. But elementor pro will blow your mind. And, it’s super affordable for everyone.
I wish you all the best.
Other Full Website Creation Tutorials using ELEMENTOR:
Do You Wanna Start Creating your own website? Start Here:
✅Get Domain & Webhosting(50% off):
✅Get Elementor PRO:
#ElementorPro #Tutorial #WordPress
✅Need WordPress Help?
(No Matter You Need Any Minor Fixing or Complete Website Creation, Feel Free To Contact. We Will Get Back To You Within 24 Hours)