The ULTIMATE Page Navigation (Part 3) What you DON'T KNOW about SHADOW & GLOW I Power BI DESIGN

i want to enable you to build the ultimate page navigation menu in power bi now that's why i'm doing a mini series on this topic in the first video we had a look at how to build an effective clean menu using the built-in page navigator and in the second video i showed you how to take it to the next level by overlapping different elements over one another now in this video i'm going to show you that one tool that you really want to have in your toolkit so that you can build menus like this one over here or this one now let's get started [Applause] welcome to how to power bi my name is boss and if this is the very first time for you visiting this channel then make sure to hit that subscribe button if you want to stay up to date on all of my videos in which i share everything i know about power bi now this trick is going to be about how you can effectively use shadow and glow for your menu buttons and also how to use them in quite unusual ways to achieve a certain creative effect now as a starting point we take this menu over here that i've built in the first video of this mini series so let's select it and then go to formatting and then here under style we are going to add a little bit of shadow and let's see what happens now you see we have a little bit of shadow at the bottom of our buttons and on the right hand side but of course there are many more options here so let's explore these options now the first thing that i want to change here is the color so that we can see a little bit better about what all of these different options do now here first of all we see we have transparency and we have blur now if i play around with the transparency let's see what happens you see when i move it to the left it becomes more visible and if i move it to the right it becomes less visible and then we also have the amount of blur that we want now if i move this all the way to the left you see we have just a normal line and if i move this one to the right then you see it becomes a little bit more blurry and also the rectangular shape becomes a little bit smaller so it seems as if the button is shrinking okay now this will be important for later however for now i want to have no blur at all so i'm going to shift this all the way to the left so that we have something that looks like a normal line now if i then also put the transparency all the way to zero then you see we just have a line at the bottom and a line on the right hand side and the positioning of that line well we can change now here the position by default is the bottom right however we can either go for one of these default options or we go here to custom and that gives us all of the options so now we have here two new options the angle and the distance now let me start off first with the angle and change 45 degrees to zero you see we now have a border line on the right hand side now if i change that number to let's say 19 then you see we have a line at the bottom and if i increase this to let's say 180 then we have the borderline on the left hand side and if we put it to 270 then you see we have it all the way at the top all right and everything in between well then you see there are some variations of that so for our purposes let's put it to 120 degrees and then here for the distance if i drag this to the right you see the line becomes thicker the left it becomes thinner and so over here we can put it to let's say 50. so now we can make these lines a little bit less visible by increasing the transparency so i'm going to put that up to 75 degrees all right and then for the selected state there i want to have zero transparency so now what about glow let's also add a little bit of glow to the buttons and let's see what happens so i'm going to turn glow on and you see that it looks well a little bit much maybe but quite interesting because it overlaps with the shadow that we created before and we can use that because now if we open up all of the glow options we can make it white just like this and then for the default state i don't want to show it so let's switch the default and put the transparency to a hundred percent and then for the hover state there i do want to show it but let's maybe go for white and then put the transparency a little bit down and you see now when i hover over it it closes the rectangle now maybe when it's selected we also want to have that this glow so let me go back to select it then put the transparency in the middle so let's say 50 just like i have for the over now this is the standard way of using shadows and glow however you can also use shadows in a quite unusual way now let me show you now i go here to insert and then here are two buttons and i'm going to insert a second page navigation all right now the new page navigation let's put it vertically from one another so i go here to visual and then over here to pages i'm going to hide the hidden pages and then for the grid layout i'm going to choose vertical and then here five padding that's okay and then i resize it so that is as big as the previous menu alright so now with this selected let me hide that other menu for the moment all right and then i take the new page navigation and we're going to make a few changes here now first of all i'm going to go here to style and then here text we're going to turn off okay then we go here to fill and then for the fill color we choose white but this is going to be the color that i want to have for my special effects later okay so white is fine then i go here to state select it and then i make that wired as well so now we can take that page navigator that we just added and let's call this one effect and let's make sure that this one is going to be below the menu buttons just like this and now i'm going to show the menu buttons again you see i didn't place them exactly over one another and that's why we have a white border line on the right hand side which would be an alternative to the shadow approach that we just took before however now i actually want to take the page navigation effect and i'm going to play around with the positioning so here in the properties position we can push it a little bit to the left by decreasing horizontal and we can push it down by increasing vertical and now you see we have well horizontal border lines and these horizontal border lines we can also make smaller now so over here i can just take the effect make it a little bit smaller put it more and less in the middle just like this now that gives us a little horizontal border lines in between the buttons but let's say we only want to have it for the selected item then i can go back here to the effect and then over here we can go to style fill and then over here we want to have well for the default we now we don't want to have a fill color so i can put the transparency to 100 but for the selected state there i do want to show it so there i put the transparency to zero now you see these little black lines those are the border lines let's then also put the border off and you see now we are only highlighting the selected item now the next thing that i want to do is that when i hover over the different buttons that i see a border line at the bottom for the item that i'm hovering over on and for this we need to do a trick with the shadow now let me explain the trick first i'm going to hide the actual menu buttons and then i go to the effect and then over here under style we go to fill and we make it again white so that we see all of the buttons now i want to make these buttons smaller and use them as lines but how to make them smaller but still have them in the right position well that's where shadows come in now i go over here to shadow and then let's turn it on you see by turning it on you see already that the buttons get smaller and now we can start playing around over here with the blur if i put the blur to the right you see it becomes smaller and smaller and now if we resize the effect so let's make it wider you see we have horizontal borderlines now here i can put the blur all the way to the right transparency also all the way to the right and then here for the position we can switch again to custom and then for the distance well also here we can drag it all the way to the right to make these bottom lines smaller or just choose a distance that works for your menu alright so now we have these horizontal border lines by using the shadows so the shadows made the actual buttons seem smaller so now i just want to make them a little bit less wide just like this and put them more or less where the menu buttons are and now i can unhide the menu buttons so now we just have to position them where we want them to be so right below the text and once you have this go to your menu buttons style and then here for the hover stage there you want to make sure that when you hover over the button that transparency is set to 100 so let's see if this works now i'm going to hover over one of the buttons and see this bottom border line pops up so you have seen now two interesting ways in which you can use shadows and glow effects for your menu buttons now let's go again back to that first example let's see what else we can do now first of all let's get rid of the shadow again so i'm gonna go here to style and then shadow i'm going to turn off and let's also turn glo off for the moment all right and now i'm going to take that effect from before and i'm going to place it over my manual just like this and now i'm going to hide the menu buttons again now this effect also needs to be below the menu buttons like we added before and now we're going to change the shape for our effect let's first put the transparency down to let's say about 50 and then here for the blur we can put it all the way down let's keep a little bit let's say five and then here the angle i'm going to put up let's say around 220 and then the distance somewhere in the middle so 50 pixels and then for the color of the shadow we can go for white again and then here for the fill let's go for the same color as the background our dark blue color all right then here for the selected state i also need to pick the same color so that we have well a border line on the left and a border line at the top and then we can resize these border lines in any way we like all right so let me resize a little bit and see there's still a bit of a hover effect that i want to get rid of so i go here to hover so i put the color over here to the same color as the background so now we can unite the menu buttons again and then i take the effect and i can start putting it in the right position where i want to have it so maybe here in the top left corner and we just have to resize it so that it has the same size as the background buttons and then we can go back to the menu buttons and then here under style there i would like to add a little bit of glow and i want to see the glow in the default state and put it down the transparency to somewhere in the middle so let's say 50 and that helps me then also with the positioning of the effect so you see after you position it correctly it looks pretty good and now the next thing that i would do is go back to the menu buttons and then style then over here we want to have for the default state we don't want to show the glow so we are going to put the transparency to 100 however for the hover state there we do want to show it so now when we hover over it you see it fills up nicely the rectangle and of course this has many different variations you could for example start playing around with mixing different colors so that it looks like this or like this or maybe you want to have a different positioning of the lines and make it look like this so you see this trick opens again many design options that i hope take your page navigation to the next level and sometimes it's just thinking a little bit outside the box to make it really look good and stand out now i hope that you got a lot of value out of this video and if you did consider subscribing i want to thank you for watching and i hope to see you in the next video

Channel: How to Power BI

Views: 33,088

Keywords: page navigation power bi, power bi page navigation, interactive page navigation power bi, menu power bi, power bi menu, dynamic page navigation, shadow power bi, glow power bi, best page navigation, create menu in power bi, power bi, power bi tutorials for beginners, power bi desktop, how to power bi, datatraining, howtopowerbi, bas dohmen, datatraining.io, bas, use shadow power bi, use glow power bi, power bi shadows, power bi glow, glow and shadow page navigation

Id: b3dhwII31VA

Length: 12min 32sec (752 seconds)

Published: Thu Dec 30 2021