Blocksy Menu Element | Blocksy Theme Tutorial - Beginner to Expert

this is the fourth video of the bloy serus and we're going to check out the menu element hi my name is Stratos and I create video tutorials about warpers please subscribe to my channel for more videos like this let's start by clicking the menu element that we have already inside here the menu one and immediately I have to select first the menu I have already created a menu and I called it Main and once I do that this will change into the main menu and it will display the pages as you can see I have also create sub uh Pages for the services and then here I have also the third layer I need that also in order to show you some settings let's go for the top level options these are the options that we have for the top level which means that these are for the four pages that I have inside here then we have the drop down options which are for the uh pages that we have underneath the services maybe you don't have if you don't have it as a submenu and we don't have anything else here as you can see we also have the design that is specific to the drop- down options and we have the design for specific top level options so we have two design buttons and this is something that is changed from the other settings inside the customizer that we saw because we had only one I think design button everywhere okay so let's start with the top level options we have four types and the first type is that we have a hover effect and it changes the color of the page that we hover to a blue also that hover effect will also stay uh to the active page so if you click the homepage it will stay blue and this will indicate to the visitor that he's on the home page if we change into the type two then we're going to see that we have a line a blue line underneath the pages and this is how it looks if we go to the type three we will have a background that will change for everything that we have over and of course for the active page later on and if I select the fourth type we will have two lines as you can see here one on top and one at the bottom of every page that we hover over after that we have the item spacing and this is between the pages so let's go for something like 30 just to see the differences and for the item height is basically the item this home item and the height that it will have inside the whole element so basically it will change the height of the lines not the height of the lines but in the distance that we have between these uh items and the lines for this moment so let's go to 50 and we'll see that the lines are now closer to the items if I go and select this type three it means that also the background and the height of the background is going to change because again the item height has changed it's 50% now so if you change that number it will also affect what have uh what are the effects for the type two three and four also the type two you will see that the uh line again is closer if you select the type two we have also the indicator effect and it means that this is how it will appear the line will appear with what effect we have the default one we have the center two slides and it means that the line will appear F into the center first and it will spread to the edges and if we select left to right it will appear from left and it will slide to the right this is the effect once you hover over something if we select the type uh three we don't have anything here and if we select the type four again we don't have that okay let's leave it to the one and I'm going to come back once we go to the colors then we have this stretch menu and it will stretch all the items that we have inside into the available space that we have for this it's two columns so it will go uh and will reach almost uh the logo that we have I'm going to disable that and then we have also the collapse non-fitting items it means that it will show a more here and if you want to see the other items that you have in the menu you have to have a Rover or click it if you have said as that and then see all the other Pages this is if you have added too many items and they cannot fit inside your menu let's go and see now the colors we don't have anything else here let's go for the design and here we have of course the font if I click it I will see all the options that we have for the fonts let's go for 17 because I like 17 in my menu I'm going to change that to a medium just to have something different and also I don't like capitalized letters into the menu uppercase letters into the menu so I'm going to disable that as well this is how I usually put it and I usually put it into black this is not black it's something similar but not exactly black so I'm going to put it as black after that we have the hover effect and the active color and this is of course the color that I have once I hover over a page an item here and of course the color that it will stay once it's active if I go into the general and select something different from these types I will also have the active indicator color which is basically the color that I have here for the background let's go and change that to a red one so you will see now that I have red background and of course as you can see once I have it R I have white colors for the red background and this is from here for the active and the hover colors this probably should be identical because you don't want to H have background color into the hover effect and then once you go and click active to have something different if you have the type one I understand that you may have different colors here a little lighter and this would be dark I think but for the type three I think that you will have similar colors because the background is exactly the same if you select to have a background here we have also the item border radius so we can put here 20 for everything and it will have this effect and it means that if you go and put here 50 it will go and do a round backr after that we have the margin and we have right and left Mar Mar for the whole element okay I think that was all with the top level options let's go now to the drop- down options I'm going to change that to this one because I like better ones I have over to have a simple effect and let's start with the drop down options the first one is the interaction type which is hover or click and it means how do you want to see the sub Pages do you want to just hover the item that has the sub Pages or click it if you want to select click then you should click it in order to see that and for me now it also means that it will redirect into the service page because this is actually a page with the link this is the services page in most cases when you create something into the menu and you add sub items inside there it's not a page that it has a link it's just an item with no link uh but at this moment I did it this way because I also have this option that I want to show you and this is exactly that so uh by default is the entire item which means that you can click the entire item and see the whole sub menu here but if you have actually a link then it will not be easy for the customer for the visitor so you have to go for only arrow this means that he will click the arrow and he will see the sub pages but if he clicks the service page he will go into the services let's go and put that in Hover and let's see then the item hover effect this means how do you want to see the hover effect for the sub Pages the default is the simple one we have the solid color and we have the boxed color let's hover over and you will not see anything because at this moment uh it has a pretty dark color so you cannot see anything let's change first the colors for the sub menus so let's go into the design and let's see the item background color here and we're going to change that I have two colors because I have selected this boxed color if you have the simple one and go here you will see only one color let's change that to something off-white and once you do that you will see the changes for me it doesn't work probably it needs to be refreshed uh this is a problem of Wordpress not bloxy because the customization has many problems at some some point some sometimes so let's go back into the uh item hover effect let's go services and now as you can see I have a different background this means that I also should change the colors for the text so let's go for the font color let's put that into a black and I'm going to leave it as blue so now you can see how it does the hover effect so it changes the item color to a different color let's go back into the general I'm going to change that to solid color and probably I have to also set a color because this doesn't have a color let's go for red again and now once I hover over you will see that it changes the color into red also I should probably change the hover color for the font to something different than the blue because I don't like it with the red and I would probably do a white here let's do a white and now once I have over I will have the red background with the white colors okay let's go back into the general and if I select the Box color it will be a little bit less of height as you can see see it's much smaller Let's uh leave it to solid color just for a few moments and now we have the item spacing and we have 15 pixels and if I change that to something bigger you will see that this will spread out now it doesn't seem to be working but if I publish and refresh again let's go back into the header let's go into the menu and let's scroll down now you can see that we have space but let's go and remove that live in order to see that to change so now we have 15 now I would like here to have separate settings for the item spacing because this is for the whole item left right bottom top so I would like to change probably the left spacing in to something different than the top right and uh bottom but I cannot do that this is a fixed uh item I will change for the uh left right bottom and uh top at the same time then we have the reveal effect which is the default one and this is how the box and the content inside reveals itself so we have the inner reveal and if I have over you will see that it makes a little bit of uh if you can see the content that it's going to fade up it makes that effect so here is the simple effect I think there's no effect and this is the opacity effect probably a fade in as you can see this is how it looks after that we have the width let's go back to the default settings the width of the box so now we have 200 pixels and if I go and put here 400 pixels you will see the differences so this is how it looks right now if you have uh big words big uh big many many big words into your pages into your sub pages and you want to spread out the menu this is the place that you do it be careful because it can go off the screen and it will mess out your layout so be careful with those settings let's go for 200 again then we have the top offset and the horizontal offset the top offset is the space that it's going to have between the box that it's now for the submenu and the line that we have here which is the end of the second row the main row and let's put that into 20 pixels to see that now that I have a little bit of space as as you can see for the Box let's go back to zero and of course if you put it here negative it will go closer to the menu let's go again to zero here we have the horizontal of set but the horizontal set is not actually for this box it's for the third items that we have here for this box so if I go and put here a 60 you will see now that this box is way to the right than it was before let's go again for five pixels so this is where the horizontal offset goes let's go to the design again now we have the font family for the sub menus and let's change that to something like 17 or 16 for the uh weight I'm going to leave it as 500 I'm not going to change here anything else then we have the item divider that we can set between those items and let's change that to a different color because this is why it's not displaying now the color displaying the item divider because it didn't have a color and if you go you want you can go with solid and probably this will be something like this 17 and now it's more settle I think that it should be also a little bit lighter let's go for something like seven yeah something like that if you want and then we have the drop down Shadow for the Box again we have a little bit of Shadow so you can change that if you want and change the color color and you can set the adjust so horizontal offset vertical offset blur and spread and if you want to have outline or inset the drop shadow of the box then we have the drop- down border radius and as you can see once I have Rover I have a little bit of border radiusing to the bottom and to the left and I can go for 20 here and 20 to see the differences so as you can see this is round and this is round also let's go for five and five something like that and that were the basic settings of the menu but we're not done we're not nearly done because what we if we want to put sticky what if we want to put something different like transparency what if we want to do something like that so in order to do that I have to go back into the menu into the header basically and here that I have the elements I have also this something here that says headers once I click it you will see that I have here a global header and we have a button that says create new header that it means that you can create as many headers as you like because you may need to add more than one headers in your page basically if you want a transparent header you have to create another one because in most cases you don't have to but in most cases you will need to have transparency into the homepage but it's not ideal for all the other pages so you create two headers and you set it differently but if you want to do something like that and create something transparency create first the menu create everything for the header and then just go and duplicate that it's easier in order to do that and don't do that first don't do the creation of the header first and then go and make all of those changes Twice first create your menu first create all the main row and then go and create a new header so let's go into the global header I'm going to click it and here I have the sticky functionality and the transparent functionality I'm going to start with the sticky functionality of course and the first is what I want to have a sticky only the main row this is the main row then the top and the main row will remain sticky if I scroll down you will see what it means here is the main row and if I click this one it will also affect the main row and the top row here we have the old rows so if I create also something different for this one let's go and grab the divider and put that here now I will have sticky the whole thing if I want I can justly create sticky for the main and the bottom row so this one will be hidden then we have only the top row if you want and then we have only the bottom row so as you can see we have all the combinations here except for the uh bottom and the top row I think that we don't have that combination I'm going to remove the divider from here let's put it where was and I'm going to go for only the main row after that we have the reveal effect and this is when you scroll down how you want that to be active you can have it as a slide down so once you start uh going into the website and scrolling down you will see that it slides down then we have the fade so it fades up and then we have the auto hiide and so so this means that when you scroll down you will not see that but if you scroll up just a little bit the menu will appear you don't have to go all the way up you just click and scroll up just a little bit and this will show the menu here the uh basically the row then we have the offset and this means that you have uh you can push actually the uh sticky row that you have maybe there are more than one row and you want to push it by 100 pixels so it will go and push it a little bit further as you can see I have a little bit of space right on top okay let's remove that and put that on zero also as you can see we have different uh settings for the mobile and tablet view then we have the enable on and means that where do you want that sticky functionality to be enabled you have the PC and you have also the mobile view so you want to enable that on mobile probably not you will not do that because in most cases you will have something different from the mobile view and also you don't have enough space into the phone to see every time the uh main row to take a little bit of space and not be able to see the content so probably you will do something like that now in the design I don't have any options for the sticky this is actually for the transparency because this is why we may need to change the background in order to see that but here I have also to go back now that I have enabled the sticky functionality into the actually row let's go into the row into the main row here is the sticky State row shrink that I have already seen but as I said this is where you can adjust it but not enable it and here you can make it shrink so I can go with 50% or 70% and once I hover and start scrolling it will shrink into the height that I have put but here the logo will stay the same so it will not change if I click the logo I have now a sticky State logo so I can change that to something that it's a little bit smaller and also as you can see I have other settings here sticky State shrink do you want to change the logo to something different because maybe it has a little bit of text underneath that you don't want to show that once it's sticky or do you want just to shrink it into height 120 is the uh logo height here and I can go for 50 or 70 once I start scrolling let's scroll down to see that and as you can see now it's smaller so we have different settings once we enable the sticky let's go into the main menu let's go for the design and here as you can see we have also settings for the sticky State here is for the main menu so I can go for something like red once I start scrolling down and for the hover over I just need that blue let's scroll down and now as you can see this is the different colors that we may need let's go back to the general and let's go into the button and here let's go for the design and again you will see different settings for the sticky State because you may need also to change the buttons so once you enable the sticky you can see that all of those settings can be changed you will not find those settings into the sticky uh settings where it was for the headers but you will find it into the exact element that you want to change now what if we want to change the background of the actual row you need to go into the main row into the design where you will find the color for the sticky State and let's go and put here a red no red red is the uh font color so let's go for a yellow because who wants red into the sticky state so this is how it looks and as you can see we have other settings as well we have the DB border when it's a sticky bottom border once it's sticky Shadow once it's sticky everything changed once you enable the sticky state so let's go back and probably I'm going to remove the sticky no I'm going to leave the sticky in order to create also a transparency probably you need to have both so what do we do now uh with that we have to also create a new header because the problem with most websites is that you will have a homepage that has an element that you want here to have a transparency but for the other Pages you will not do the same you will not do exactly that so you don't need transparency header so first let's change a little bit how the page looks because I need to do that I haven't shown you yet the settings here but since I'm showing you how to create the transparency you have to go into the pages and we're going to see those settings later on and here you should probably remove the page title because you don't need to do that now I will show you also another option if you want to have the page title in all other pages but not in the homepage because you want to do something different so for now I'm going to disable that so it will remove and also I'm going to remove the content area vertical spacing so let's do that so now as you can see the page will not have any content spacing and the image that we have into the homepage will come into the top of the page okay I'm going to hit publish just to have it published let's go back and let's go back into the header and here I'm going to click to the headers and I'm going to create a new header once I do that I'm going to uh click to the header name and I'm going to put here something like like homepage homepage header and here it says copy elements and style from the global header so do not create something from scratch go and copy everything elements and styles from the global header and this is what I want to do so do that if you have other uh headers as well you can click that if you want so for me is global header and I'm going to create the new header once I did that you can see that this is not the default so it's the homepage and it can be removed if you want if you want you can delete it and if you want to delete that you cannot do that because this is the default one this is something that always has to be there once I go into the homepage header and click it I will see that I have all the settings that I had before for the sticky as you can see here and of course I have the transparent functionality now since I have created two headers from now on I have to change everything to both headers if I want those to be identical for the side because if I go now and go for the elements I have clicked this one this is blue and this is this is the one that I have already selected so I go into the elements and I'm going for the probably HTML and I'm going to put that into the middle no content block HTML is already there content block into the middle and I have to go and probably create something no I don't want to do that let's go and grab the HTML and I'm going to put that into the middle so I have the sample text here let's put that into the middle and probably do it correctly this time and now let's go back here and let's go sorry into the header and let's go to the headers and click the uh home header and click again the global header because once I went out it removed it so for the global header you can see that the HTML is not into the middle it's right here but for the homepage header it's right here so if you want to make a change be careful you have to go first into the headers select the header that you want to change and then do the changes but if you want to keep it consistently to the whole website you have to do it two times one for the homepage header and one for the global header okay let's start from the hold page homepage header and we're going straight down and we're going to hit the transparent functionality once I do that immediately on and automatically as you saw the uh image of the homepage went up because this now doesn't have anything to push it down it automatically go and and grab that settings so as you can see now it is uh a transparent functionality but as you can see I cannot see everything correct so now I have to go select first to be sure that I am into the homepage header and then go into the menu and select now to have probably the color of uh I don't know black I think it's okay for this uh image but you can go with a different color for this one let's go for red so the active one will go into red this is the default State I have also the transparent State and I have also the sticky state so here if I go and change the transparent to White it will go everything and grab that settings now from the transparent because I have different for the default State and different for the transparent State and this is again if I create and have that displayed everywhere but if I want only one one page or uh something different then you will know that this will apply only for the page the transparent page that we have set this default state will not be here then let's go into the button and let's go into the design and what we have here we have the transparent state so you can change also the transparent uh colors for the button and if I go into the logo what we have here we have the transparent State logo because maybe you want a different logo that appears different and it depends of the image that you have here what is the background color that you have maybe you have a dark color so you need white letters and you need another logo so once you enable that functionality the transparent functionality it can be changed and the same goes with all the elements that you have said once you click anything you can see that in the design you will find here the transparent and of course the sticky State uh what we want now to do is go and add a little bit of color once we are into this uh transparent functionality so I'm going to the main row let's go for the design and here I have the transparent State and here doesn't have any color and I want to put here a white but I want that to be not exactly transparent let's go for something like 30 and and this is how you create S effect like that so we will have the transparency but we also have a little bit of background in order to see the items inside the menu and of course if you want you can do that also into the top row you can change here the transparency state but once you start scrolling then you will just need to change the colors for the sticky State because then you will have that color and probably I will need to go and pae uh I'm going to pause the video and I'm going to duplicate this to add a little bit more space so I can scroll down okay just did it but I didn't refresh let's refresh the page let's go into the header and let's start scrolling down as you can see this is how it looks let's go into the homepage and uh you will not see it because I haven't set it right now but if I go into the headers and go into the homepage header and select it you will see that I have that functionality so when I scroll down I will have a different color and when I have into the uh transparency I have different colors so once I click it I will see that I have those settings here and of course these are all independently with the other header because now I have two headers now the thing that I have to do next is to edit the condition so I need to tell the website when to apply the header that I have created the homepage header and all the other pages will have the global header everything that I haven't set a header will have the global header uh do not be confused used when you click it you will see the header that you have selected in order to change that but it doesn't mean that it will apply into that page all of those uh pages that it will apply is going to be set it into here so let's click the add edit condition and I'm going to add a display condition and here it says uh include or exclude and I can select entire website if I want but here I'm going for just one page so you can do all of those settings all singular all archives all post archives and everything else that you have here here so let's go for page ID and select page and I'm going to select the homepage and I'm going to select save and here it means that now from now on it will know automatically when to apply this header and in all the other Pages the global header will go automatically you don't have to set conditions you don't have conditions into the global header because it goes automatically to all the other pages that are not set from any other headers let's go into the page let's refresh here and you will see now that I have that and once I scroll over I have the sticky functionality I have the shink functionality and I have everything that I have set here and if I go into another page you will see that I don't have uh that transparency let's go into the I don't know contact I was a test page so let's type test because I haven't added into the website so let's go for test and here if I scroll down I will see the sticky functionality but I don't have anything for the transparency as you can see so if you have a lot of along you do know how to create sticky functionality and transparent functionality remember I'm going to say it one last time that now that you have two headers if you want to make any changes you have to do it into both of those in order to be consistent and if you are searching why doesn't something applied maybe you have two headers and you have forgotten and in six months time you will need to make a change and you will see that it doesn't apply into the homepage for some reason and this is because you have two headers once you go and refresh the customizer it will go and select the global header and you will go and make a change to the global header and you go into the website probably the homepage and you will not see the change and you will say hey why why is that probably you will send into the support and they will say you have to headers so thanks for guys give me a thumbs up if you like the video subscribe to more videos like this and I will see you all in the next one bye

Channel: Stratos Tutorials

Views: 338

Keywords: WordPress, WordPress Tutorials, Web Design, Wordpress Menu, Blocksy Theme Tutorial, Wordpress Header Tips, Blocksy Pro Features, Custom Header, Wordpress Tutorial For Beginners, Custom Menus, Advanced Menus, Wordpress Website, Wordpress Website Design, Blocksy Advanced Tips, Wp Menu Mastery, Menu Tips, Website Navigation, Menu Element Guide, Theme Customization, Blocksy sticky, blocksy transparent, blocksy sticky menu, blocksy transparent menu, blocksy sticky header

Id: Bb1GtjFhjNg

Length: 31min 52sec (1912 seconds)

Published: Sat Dec 16 2023