About Stacks Guru

Stacks Guru is born from the need to search the vast number of videos out there on stacks built for Stacks Pro and the Stacks 5 plugin for Rapidweaver.

We have scraped over 500 videos to get the transcripts for each in order to make the spoken word searchable.

Please use this free tool to help you learn and discover the awesome power that Stacks and the stacks made for Stacks have to offer.

Stacks Guru

Video Reference

Leave a Tip!

Every little bit helps to keep this going. I'll be doing my very best to keep up with the likes of Joe when it comes all the videos he posts!

ButtonBar Zones -  Building a menu layout.  (4K) thumbnail

ButtonBar Zones - Building a menu layout. (4K)

Learn how to build menu layouts using ButtonBar ZonesLearn how to build menu layouts using ButtonBar Zones 

Categories: Demo


0:00 [Music]
0:08 in this video we're going to look at
0:11 button bar zones now the zone is a child
0:17 stack at the button bar then it allows
0:19 us to align elements within the bar and
0:23 put other items other than buttons into
0:25 the bar to create our menus so let's
0:29 start by just adding three buttons to
0:32 our bar now the bar receptor Center we
0:36 can see how our preview display just at
0:40 the top right of the stack so if we
0:41 preview that we get three buttons in the
0:45 center of our page now we can obviously
0:49 do quite a lot with that we can stretch
0:52 the bar we can write a lie on it we can
0:55 have it stretch like that we could have
0:58 the buttons to the right but just for
1:01 the moment we're going to leave it on
1:02 stretch now with the dumb stretch
1:05 obviously those three buttons will
1:07 stretch to be the full width of the bar
1:09 but the reason we wanted stretch is
1:12 because we're going to add a zone and
1:16 what we're going to try and do is make a
1:17 sort of traditional menu with a title
1:20 bar and that some social icons or
1:22 another button so if we have its own
1:25 wing citizens a pale yellow colors that
1:29 are easy to see we can drop other stacks
1:33 into the zone now if we want to make a
1:36 title well let's drop the header in
1:39 there in this case it's a header probe
1:41 and we'll just set that to you site
1:44 title so we'll preview that and you'll
1:50 notice now that by default that zone has
1:53 got equally spaced with all our buttons
1:58 so we've got four items in the bar each
2:00 of which is going to get an equal space
2:02 and if we responsively resize the window
2:07 those spaces follow that
2:11 now it's not always easy to see where
2:16 the zones are and that's why your
2:19 alignments aren't doing what you think
2:21 they should be so in the main button bar
2:24 stack in our edit mode helper features
2:27 we've got a zone layout alper now what
2:31 this will do it will just give us a
2:33 dotted line around our zone in preview
2:36 mode so we can see now that our zone as
2:42 we need was the same size as our buttons
2:44 and our header is left aligned now what
2:52 about if we want a logo next rider so
2:56 let's drop an image into that zone and
2:59 we'll put in the button bar logo now
3:07 obviously we want to limit the size of
3:10 this so let's make it 48 pixels that's
3:15 all screen sizes well other previewing
3:18 we'll see what we get now you can see
3:20 that the zone itself is equally spaced
3:24 in the bar but its contents have got
3:27 half of the zone each which isn't really
3:30 what we want so that's because the image
3:36 is obviously centered if we left align
3:39 our image and the image is going to be
3:46 at the left of that's half of the zone
3:51 because the header is taking up an equal
3:54 amount everything in with in zones by
3:56 default will get equally spaced and just
4:00 just to show you that if we just add a
4:02 background to the actual start of the
4:04 head of stack you will see that the
4:08 header is taken up that amount of room
4:10 which we don't really want
4:14 so in our own settings is quite an
4:17 important one in our content settings
4:20 will see these alignments and let's just
4:23 leave in preview mode so that we can see
4:25 and at the moment the the default
4:31 setting will use whatever the static
4:34 settings are so we might think well
4:36 let's write a line that zone nothing
4:38 happens well the content has got nowhere
4:42 to go because this image is that be all
4:45 this white space belongs to the image
4:47 and the header is as big as the header
4:51 background the gray so we need to sort
4:55 of understand when we can and can't use
4:57 these and for this we've got the content
5:00 fill setting here below now in this case
5:04 we want our content to be in mind we
5:06 don't want them to take up as much room
5:09 as they can in the zone and I'll look we
5:14 now have our right alignment because the
5:18 image is taking up the space it needs
5:19 the head is taking up space which needs
5:22 is all this white space so there's
5:25 somewhere to write a line to so if we
5:27 click center it will center line it and
5:30 left obviously left aligned which is
5:33 sort of what we want for our site title
5:35 and our logo so let's get rid of the
5:40 background of our header that's what
5:43 look very good for the time being let's
5:47 add some social icons to the right hand
5:50 side of our are so we can add another
5:53 zone and we want perhaps three round
5:59 icons so tool for the job is the button
6:04 group now the button group defaults to
6:07 three buttons which is quite convenient
6:09 you could add a three separate buttons
6:12 if you want but the group's nice because
6:14 we can control lots of things together
6:16 and what we're going to do is change
6:19 this button
6:20 each of them to be round button so our
6:26 social icons and we can change the font
6:32 awesome to be Twitter that one say
6:39 Instagram for that one and perhaps
6:45 visible for this one you can of course
6:49 use your own icon sets with with these
6:52 gods as well which is nice if you've got
6:56 your own branded icons so what would we
6:59 expect to happen now we'll would expect
7:01 these three buttons to be centered
7:03 within this group and this is own to
7:06 take up one fifth of the width of the
7:10 bar and that's exactly what happens so
7:16 we've got a nice sort of lay out there
7:20 but what happens if we want to control
7:23 the width of one of these zones a bit
7:26 more perhaps we don't want our menu
7:29 items in the middle of the bar because
7:31 we want eat more to the right but if we
7:33 write a line the bar then everything is
7:36 going to move to the right so in our
7:40 title zone we've got some growing shrink
7:42 settings and you'll see that there's one
7:46 that says fixed title area which we're
7:50 not going to use on this occasion we've
7:53 got don't grow or shrink in the bar grow
7:57 preferentially and grow with damp shrink
7:59 so if we tell it to grow crush
8:01 preferentially now this zone will take
8:06 up any spare space in the bar that it
8:09 can do so rather than everything being
8:11 stretched to its extreme this zone gets
8:13 a preferential treatment it gets a
8:17 higher priority in the giving up of the
8:22 space now
8:26 this icon zone here while we don't
8:29 really want that to grow so if we
8:32 highlight this done we can say don't
8:39 grow or shrink in the bar so this zone
8:42 now will only ever be the size needed by
8:46 these buttons and we see the buttons
8:52 tight up against the right-hand side and
8:56 I think at this point if we add the
9:01 background to the bar let's make this
9:04 background sort of off black so it looks
9:08 like a normal menu bar we'll get a
9:11 better idea of how everything's going to
9:13 look as a dark and what we're on let's
9:17 make it look more like a a menu we can
9:20 style all these buttons at once in our
9:23 button bar using the button styles if we
9:28 set them to custom you'll notice is also
9:30 you can use button horsemaster styles
9:32 and foundation swatch styles if we set
9:35 them to custom it sort of defaults to
9:37 the sort of colors that you would expect
9:39 for a dark background menu bar but you
9:42 can change everything change the text
9:44 the holder the background of each button
9:46 and the hover and when they're stacked
9:49 in a vertical menu okay so let's come
9:52 back to these social icons we've got
9:54 here if you remember they were pretty
9:58 much around together on the right-hand
10:00 sidebar and we've also got these
10:02 dividers on which look nice between our
10:04 buttons but aren't so clever between the
10:07 social icon so the first thing we'll do
10:08 in our button group let's turn off the
10:12 dividers there they go and we're going
10:18 to increase the button spacing let's say
10:20 give it 16 pixels and we can add up some
10:28 spacing around our buttons which is
10:30 looking better I think it's time we can
10:33 turn off the zone helpers fair
10:37 they don't look very nice when we're
10:38 trying to see what our bar is going to
10:40 look like and we'll go back so we've got
10:46 a reasonable looking dire now but I
10:50 don't like these buttons being so big we
10:53 need to change the color of the header
10:55 so that's right to line this bar showing
11:02 if we write a line this button bar at
11:05 the moment is stretching everything if
11:10 you remember we set this down to grow
11:11 preferentially the one on the left with
11:13 the header let's change the header to be
11:17 white for the the time being look set
11:22 the alternate theme so it shows a bit so
11:26 under normal circumstances this zone and
11:31 everything else would just flow to the
11:33 right-hand side and take up the space
11:35 but because we've got this zone set to
11:38 grow preferentially when we write a line
11:41 everything else that is Raylan will take
11:45 up all of that rhythm and suddenly our
11:48 buttons are looking better now they'd
11:52 look even better with a couple of
11:54 changes obviously let's make them look
11:56 like menu items let's say home about and
12:05 gallery
12:10 so with our button box selected again
12:13 let's preview that now that's starting
12:17 to look more like a menu because I my
12:20 father effects but one of the nice
12:21 things we can do with button bar so we
12:24 can just make these divided a little
12:27 less tour I think it just brings her or
12:32 sense of coherence across the box it
12:34 doesn't get disjointed by the year by
12:39 the full height dividers and we perhaps
12:43 need a bit more a bit more spacing at
12:45 the end of this zone well that's fine we
12:47 can just custom tab this zone and I'm
12:51 going to set the stack Cuddington or
12:53 while I think about it because we can
12:55 adjust the vertical mobile menu behavior
12:59 separately so let's add I don't know 24
13:04 pixels of adding to the left hand side
13:05 of this zone and let's let's put the
13:10 same on the right there we go that's
13:16 starting to look better now now the
13:19 icons a full height of the bar at the
13:22 moment we may or may not want to make
13:26 them smaller well we can just make out
13:29 but the smaller it's probably the
13:31 easiest way so let's make these small
13:38 obviously we could cut the door which
13:40 could make the other buttons larger
13:42 we've got a almost infinite amount of
13:46 choices okay so that's better on I like
13:49 that after that we need a bit of padding
13:52 on our last time zone as well while
13:53 we're on don't we show up that matches
13:55 as well we'll put some custom padding on
14:01 here left we'll leave that on it at 12
14:03 and I also want a gap on the left of the
14:08 image so I'm just going to add a margin
14:09 to the stack on the left let's say 16
14:13 pixel Margie that's starting to look
14:17 more like a bar that you can do it
14:20 and at the moment it's not going to do
14:25 anything we haven't told it to what
14:28 we're going to do a mobile but you can
14:30 see several unique features of the zones
14:33 it doesn't wrap all the menu content to
14:37 a new line and you lose it in your page
14:39 you'll see that it tries it's best to
14:42 fit everything in so when the header my
14:45 website wraps on to two lines the rest
14:49 of the bar behaves itself and wraps on
14:54 to two lines as well now obviously get
14:56 to a point where there isn't enough
14:59 space and in the case of these flexible
15:02 zones the content will just disappear
15:04 now this is the point where we need to
15:05 set our break point so that doesn't
15:07 happen for a mobile menu but in a lot of
15:11 ways expected because with traditional
15:13 menu bars at this point where it starts
15:16 to wrap all this stuff would end up on
15:19 the white background with your page and
15:21 your white text would disappear and it's
15:25 something that people see a lot let's go
15:29 back to edit mode now we might want set
15:34 of some social icons here let's have a
15:38 little experiment let's get rid of to
15:40 the social icons and just demonstrate
15:44 another thing we can use zones for we've
15:47 got all these buttons here starred in
15:50 one way and obviously that styling you
15:52 don't have to apply the style for the
15:54 whole bar but because this is isolated
15:57 in its own group let's put this back to
15:59 a normal button we can modify this
16:04 styling separately now any button can be
16:07 custom style at the moment it's going to
16:11 get the same style as everything else in
16:13 the bar so let's get this button + style
16:18 and set up to custom so now we've got a
16:20 blue button and
16:25 we'll say maker a guy now but Princeton
16:31 this is another thing that people quite
16:34 often like to do and we've got the
16:36 button set to small at the moment let's
16:39 set it to two tiny see what we've got
16:42 now that's great we've got a two by now
16:48 but the button is the same height as the
16:53 bar that that looks good nothing wrong
16:56 with that but you may want it
16:58 differently so down at the bottom of the
17:05 button tough stack we've got settings
17:07 that are only ever used when they're in
17:09 the bar and one of the easies don't
17:11 equalize hiking bar so if we check that
17:15 this button now you're going to behave
17:18 like a button anywhere else on the page
17:19 it will stay size as you've said it
17:22 sethi to so we've got our contained by
17:26 now button it hasn't been equalized in
17:29 height to match these buttons with their
17:31 hover areas and you see how high they
17:33 are and we've got a rather respectable
17:36 little bath with a Buy Now button there
17:38 I think that image probably would do
17:42 with being a bit smaller but let's not
17:45 worry about that now so we've got our
17:50 desktop bar setup and the stacking we've
17:56 got stuck below break point now that
17:58 important thing to remember here is this
18:00 button bar break point can be used by
18:03 all the menu elements of the stack that
18:06 toggle menu and the buttons itself as a
18:11 single break point where everything will
18:14 happen you can set custom ones elsewhere
18:16 but it's quite nice to set this as a
18:21 single point of contact if you like
18:25 so at 640 pixels that's going to go now
18:29 we're going to need to change that we
18:30 know that because it was starting to run
18:32 out of space coldly yet yeah well I may
18:37 not want I may not want that you see
18:39 that's where it's wrapping and I may not
18:41 want it to go even that far say I want
18:44 to keep it on the same line well 70
18:47 creates a a good long because that's
18:49 round about the size of a tablet so so
18:53 if we set our great point to 768 just
18:57 from that little pest then that's better
19:04 so now we've got quite nice nice
19:06 behavior and then you see the the binary
19:12 button has got full width and it's made
19:15 the bottom of the menu person 1 i'm not
19:18 keen on that look so let's change that
19:23 let's sort out the width before we put
19:27 the space at the bottom and if we look
19:30 in the button + to stack settings down
19:33 the bottom we've got a second that says
19:35 don't grow in bar now if we enable that
19:38 it will stop this button automatically
19:41 filling it's available space which is
19:44 why it was going forward now normally in
19:47 a bar we want them to fill the available
19:49 space so that these three buttons will
19:51 stretch to fit the space between the two
19:54 zones I've had before but just by that
19:57 simple setting within our preview again
20:00 and we've got a butter so we've got two
20:06 choices in order to get some space below
20:09 this button and our mobile menu easy
20:13 thing we can do is add some cutting to
20:15 the bottom so that's at 12 pixels of
20:19 padding to the bottom of the zone when
20:21 it's stacked and there we go we've got a
20:23 knife space on our mobile menu
20:28 now we're going to just jump back to
20:31 that idea we had before more than one
20:34 button in this zone so let's let's add
20:38 another button and let's put this to a
20:42 custom style as well so it doesn't get
20:45 out and we'll make this one size tiny as
20:52 well so much but let's perhaps change
20:55 the color of this one there's a bit
20:58 garish and we'll set the automatic over
21:06 color so we don't need to set this whole
21:07 color it will just holler a slightly
21:09 darker than that green and we might say
21:15 demo on this book so let's have a look
21:19 at what we've got again now now we've
21:22 got another full week button underneath
21:25 our Buy Now button which is not really
21:28 what we want so we don't want that to be
21:32 underneath we want it to be alongside
21:35 our of the book and we can do this in
21:38 various ways we could say down growing
21:45 bar so this will not grow to be the
21:48 width of its group and the width in the
21:51 consequently the width of the bar and
21:54 then we immediately get a little button
21:57 group as you'd expect a group to look
21:59 then you notice we've not got our
22:01 spacing there on desktop we've got our
22:04 business pacing we need to tell it not
22:08 to equalize as well like we did with the
22:09 first one there we go and we've got our
22:14 business stationery store the spacing is
22:16 automatically removed when we get below
22:21 the break point and we've told it not to
22:25 grow so there's a way around that if you
22:27 want to display so I think that looks
22:28 quite nice myself but let's go to our
22:32 bar settings group settings sorry and
22:36 let's tell this one not to wrap now this
22:39 is a useful
22:40 a useful thing to do anyway because if
22:44 we return to our social icons that we
22:46 have before you often want you three
22:48 social icons in a line you don't want
22:50 them to stack as if you put if you put
22:52 them in a zone in top bar you'll get a
22:55 stack of three social icons which
22:57 doesn't look too nice so now we've told
22:59 this not to stack so this bottom bit
23:02 here is our group we get that gallery
23:05 and the group is spacing its buttons
23:08 just the same as if it was on desktop so
23:12 we've now pretty much hit each I think
23:15 we've got a nice menu on desktop we've
23:18 got a nice menu on mobile except it's
23:21 not a mobile menu we can sort that
23:25 though we're going to land a toggle and
23:30 we've got one little last thing to do
23:33 with this zone but I'll show you that in
23:35 a second so let's make I'm going to make
23:40 this the background of our menu bar on
23:42 mobile a different color just so that
23:45 you can see what's what let's make this
23:49 a great blue color just for now and you
23:57 probably have at least this black in
23:59 reality but I just want to see the
24:01 difference so in a toggle menu by
24:07 default we get a toggle switch stack or
24:09 she's going to be covered in a different
24:11 video let's just make that a white color
24:18 that's the label so let's we can put
24:22 menu there we go we've got a white label
24:25 sort of off-white let's make a bright
24:28 white for our toggle there we go that's
24:32 a nice way to drop colors in two worlds
24:34 just drop them straight out you don't
24:36 have to click that and click that and
24:37 then go back again just drop them
24:40 straight out of here you call the worlds
24:41 in you color picker so now we've got a
24:46 knife menu what else do we need to do
24:49 well
24:51 in essence nothing because I was just
24:54 going to work having a toggle menu with
24:58 button bar is as simple as just adding
25:00 the toggle my new stack but look nothing
25:04 appeared now this is the same problem
25:07 that people have time and time again we
25:08 drop downs we've got nothing on our page
25:11 because this is just a test page so but
25:14 I've got one in my clipboard here let's
25:17 just posts on page contents so we've
25:19 pasted in the one color foundations back
25:24 now we've got something on that page a
25:26 page doesn't end good other menu so
25:30 we've got menu that we saw before
25:32 dropping down and I said we've got one
25:35 last thing to do we don't want the title
25:37 there because just like most men use the
25:41 drop-down is what was the bar and that's
25:44 what made this a different color so you
25:45 can see that that toggle menu is
25:48 different to the dark well that's easy
25:51 to sort because we just want to hide
25:53 this zone so use don't start using
25:57 visibility stacks the zones have them
25:59 all building with much more intelligent
26:00 controls for you soon as I so we're
26:02 going to hide this now we've got various
26:06 options and they're all going to do the
26:07 same in this case but listen to a high
26:10 Glen stacked because that's going to
26:13 hide at the button bar break point and
26:15 that's the same breakpoint at the double
26:17 menus using or we could say hide when
26:19 inactive sellable menu and that's if you
26:22 using bringing in you toggle it a
26:25 different break point but we'll just say
26:28 hi when stacked you see in the toggle
26:30 menu we've got show menu up button bar
26:34 break point we could have a custom break
26:36 point if we wanted and the animation set
26:41 to slide let's just have a good look of
26:42 things we can do with that so it slides
26:46 down at the moment and now we've hidden
26:47 our top zone so that looks just like the
26:49 menu you always want to and if we want
26:53 to fade and say that slide down and
26:57 we've got more of a fading effect
27:01 and if we for instance wanted it to be a
27:06 full screen menu wouldn't really got
27:08 enough content to wat map here then we
27:12 select full screen and we've got it will
27:14 look great in Rapid River previously so
27:16 tall but this will cover the full screen
27:20 okay so one responsive menu using zones
27:26 and button bar now two things you might
27:32 be asking at this point are one is it
27:36 nearly over here and two can we contain
27:40 this menu to the width of our site
27:43 Styles max width and happily the answer
27:45 to both questions is yes and the site
27:48 max width is easy in the button bar
27:52 settings we just select that contained
27:55 width setting and it will default to a
27:59 maximum of thousand pixels which is the
28:02 foundation site with so there we go and
28:05 if you change it inside styles your max
28:08 width change it here too much you can of
28:11 course put this to something different
28:12 if you want and is actually doing a bit
28:15 more than meets the eye because if you
28:16 notice I custom padding off the zones of
28:20 God so it fills nicely and it matches
28:24 perfectly with foundation columns so
28:31 that you get this knife padding on the
28:33 left and on the right so any zone
28:37 padding that you put on will be
28:38 cancelled off the first and the last
28:40 zone or button is such that instead if
28:44 it's a button lot of them absolutely
28:46 automatically so just clicking the
28:47 contained width setting will make it
28:49 behave just as it would do if it was any
28:54 other stack of with it contained within
28:56 foundation and that's the end of the
29:00 video I hope you've enjoyed it and I
29:03 hope you can get some idea of the things
29:06 we can do with button bar strangely
29:10 enough although we've made a what you
29:13 might call a traditional menu here
29:15 it's a lot more involved than making
29:17 some more different menus such as
29:22 scented icons one thing that people ask
29:25 for all the time is a logo in the center
29:27 and menu items either side of it that is
29:31 a breeze compared to this and so
29:34 hopefully this has taught quite a few of
29:37 the ins and outs of however the stacks
29:39 all work together and it's been of some
29:42 use to you I shall see you next time
29:44 thanks for watching"}]