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!

BluePrint ONE - Overlapping Content thumbnail

BluePrint ONE - Overlapping Content

How to use the overlap controls in the BluePrint ONE stack.How to use the overlap controls in the BluePrint ONE stack. 

Categories: Demo


0:00 [Music]
0:08 in this video we're going to have a
0:10 quick look at how to use the overlap
0:13 settings in blueprint and what the
0:16 differences between the two options we
0:18 have available but to move up and pull
0:21 out so we'll start with a basic page
0:27 we've just got a blue section a green
0:31 section and then a footer they're all
0:34 done with blueprint but they could be
0:35 done with one column stacks they could
0:38 be done with sections pro anything you
0:40 like really now if we look at it as it
0:44 is now nothing's been changed they're
0:46 just everything's in its default
0:48 settings so everything will behave just
0:51 as it would normally and we get a blue
0:55 section at the top we then get I agree
0:58 one an inside that we've put our text
1:02 section with a white background and a
1:04 maximum width of 960 pixels and then at
1:08 the bottom we've got our social footer
1:11 inside the main black footer so the aim
1:16 of the game here is firstly we're going
1:18 to try and move this white section with
1:21 the text up so it bridges this gap and
1:23 the idea of these overlaps really is
1:26 just to break up the linearity of the
1:28 site a bit the horizontal lines that
1:31 just tend to divide everything up it's
1:33 nice if content can subtly overlap these
1:36 lines it gives you a bit more of a a
1:38 designed look rather than a drop team
1:41 look so we've got our contained with
1:48 blueprint here so we've just always done
1:50 this set a maximum width here of 960
1:54 pixels we're going to pull this stack up
2:00 out of the green one so that it bridges
2:05 the gap now because
2:08 inside another stack pullout seems to be
2:13 the logical thing that we would want to
2:15 do we want to pull it out of the stack
2:17 it's in and move it up and remember all
2:20 these settings are all normal
2:24 position:relative CSS settings so you're
2:28 not going to get any weird behavior with
2:30 the width of components and having to
2:32 realign things and left align a right
2:35 align not working or we're adjusting is
2:38 the top position and the margins so
2:41 everything behaves just as it would do
2:43 for a normal stack so if we go into
2:47 preview for us and then all we need to
2:50 do is just click this pull out button in
2:52 the overlap settings and the default is
2:56 just for 90 pixels and Ying's
2:59 immediately we've pulled it out by 90
3:01 pixels and you will notice that that gap
3:06 has not been added to the bottom but
3:09 this is moved up without affecting the
3:11 bottom area now if we turn that off
3:13 again then it moves down and we've got
3:20 our normal padding at the bottom so if
3:25 you see that the difference that when we
3:28 turn it on this has moved up but its
3:31 original position was 90 pixels down so
3:35 that is still taking up the space in the
3:38 green area as it was before
3:41 now if we change it up to move up you
3:47 will see that we've now still got
3:51 original space at the bottom and that's
3:54 the key difference move up takes its
3:58 entire contents and moves them up pull
4:02 out we'll just move it relative to where
4:07 it was before visually but its original
4:10 position will still take up the space
4:13 that it did before and you notice in all
4:16 these cases obviously we've put some
4:17 padding on the blue area both just to
4:21 make sure we've got some rhythm
4:22 which into so you may be wondering what
4:25 the difference is between these two
4:27 settings well if we have a look down at
4:30 the footer area which is at the bottom
4:33 of our page let's get a selection on to
4:39 this so at the moment our footer social
4:43 our orange social footer is stuck inside
4:47 as as you would expect that's where to
4:49 put it
4:50 now if we do pull out then it's pulled
4:54 it out you can see very clearly there
4:55 Harry to move it hasn't affected
4:57 anything around its above it
4:59 it's just pulled it out now if we were
5:02 to do move up it doesn't work what it's
5:05 done it's moved everything up it's moved
5:09 itself up within the black background so
5:14 it's pulled the top of the black
5:16 background it has actually moved and we
5:17 can see that it's moved because we've
5:19 now got the white space at the bottom of
5:21 our page and so if we make this move
5:24 bigger you will see a jump even further
5:27 up and we get an even bigger space so
5:30 it's taken the whole of the footer with
5:33 it and just to be clear we selected our
5:38 orange blueprint which is just limited
5:42 with left aligned
5:43 we haven't selected the footer the black
5:47 one which is where the the black
5:50 background is but nevertheless it
5:54 appears that we've pulled the whole
5:55 thing up or what we've actually done is
5:59 made more space above it because I
6:01 haven't pulled it out we've moved it up
6:02 and it expanded the space at the top of
6:08 the black area to push it up and we've
6:10 ended up with that equal gap at the
6:12 bottom which is clearly what we don't
6:14 want so the first thing to note is that
6:17 if you've got stacks that are inside of
6:21 the stacks and you want to pull them out
6:23 make sure you use the pull out setting
6:25 if you suddenly see unwanted space at
6:28 the bottom of the page it's because
6:31 you've used move up when it's inside
6:34 another
6:35 so if we use pull out now there you go
6:38 we've pulled it completely out of this
6:40 stack we haven't got a pair space at the
6:42 bottom of page there's nothing there and
6:44 it pulled out a long way we can put that
6:48 back the 113 the other two controls are
6:55 just responsive controls so our sizes
6:59 change of things around it it's nice to
7:01 be able to alter the overlaps for
7:04 different sizes so now we're probably
7:07 looking at the large with this screen
7:08 size so if we make this 130 again then
7:13 you can change the overlap just as per
7:15 the large and medium breakpoints we've
7:18 got set here once you've got these
7:20 defined the normal overlap will be below
7:23 the medium medium overlap will be
7:27 applied above the medium breakpoint you
7:29 set and below the large and then
7:32 obviously the large is just above the
7:34 large breakpoint so I just want to
7:40 mention a couple of things that you need
7:43 to know when using pull out or move up
7:46 with sections so here we've got the same
7:50 sort of like blue section a green
7:52 section we've just reclose the
7:53 blueprints for sections post axe and
7:55 here's our blueprint that we want to
7:59 pull out so we've got it set to pull out
8:01 sections are all at their default
8:03 settings nothing's being changed and we
8:07 see it's getting cut off now this you
8:11 won't see in foundation or foundry or
8:16 themes that automatically allow
8:18 overflows this is what you will see in
8:22 other normal themes where overflows are
8:26 not allowed so I'll just demonstrate
8:29 that if I just paste it aside Styles
8:32 back onto the page because we're in
8:34 foundation here you will see immediately
8:36 the overflows allowed so you won't see
8:40 that problem if you're using a framework
8:42 theme get rid of site style
8:46 all sections can sort that out for you
8:49 anyway if you're using a normal frame if
8:52 you just go down to the bottom and you
8:54 change the overflow the very bottom
8:56 setting to visible will force it to be
8:59 visible and you will get you pull out
9:02 working again and you'll see the over
9:04 area now the other thing that can happen
9:09 with sections is when we start changing
9:12 our height from a default normal height
9:14 let's go to a fixed side responsive now
9:17 we've made the fixed height now 300
9:23 pixels high and we've got this new
9:28 setting allow pull out of blueprint if I
9:30 turn that off you'll see the doctors
9:34 again hidden the overflow now same thing
9:38 with proportional Heights in certain
9:40 circumstances we've got a 30% browser
9:43 height here it's working without the
9:45 allow pull out of blue blueprint if we'd
9:48 applied some animations or other things
9:50 with child stacks it may well have
9:53 hidden that overflow in which case if it
9:56 does just check that setting now just
10:00 bear in mind that sections intelligently
10:03 hide overflows for things that need them
10:05 hidden so when you add a child stack
10:07 with a Ken Burns animation and certain
10:10 other effects it will hide the overflow
10:12 for a good reason because it needs to
10:14 clicking this button will override that
10:18 come what may so you generally won't
10:21 need it but it's pretty obvious if you
10:23 do it will just allow it to pull out if
10:27 doing so break something else because
10:30 you've allowed an overflow on an image
10:32 that shouldn't be overflowing then
10:35 obviously do it a different way you try
10:37 to put too many different things in one
10:39 section so that's the only real
10:43 difference other than that in default
10:44 state if it will just behave just like
10:46 these ones will be using blueprint so
10:51 we'll have a look now the examples from
10:55 the home
10:58 demo site and the blueprint one page and
11:02 just see how it goes first one is
11:06 pulling up over an image at the top so
11:08 we've got our image top of the page just
11:13 again just done in the blueprint for the
11:15 background image using the we shared
11:18 Charles stack from pro styles and we
11:20 want to pull up this orange blue print
11:24 box over the image so you see we've got
11:29 it inside another blue print in just in
11:33 order to give us our site max width and
11:36 a width for small screen so we've got a
11:41 96 96 % width and a max width of 14 46
11:45 but this is this is where the business
11:47 is happening now we are inside another
11:52 blue print here but we're not trying to
11:53 pull it out of a colored background so
11:55 it doesn't matter if we move its parents
11:58 up and in this case we do want to use
12:01 move up for that same reason because
12:03 this can will want the space below to be
12:07 moved along with this stack so just like
12:11 at the bottom where it was adding this
12:12 base and we didn't want it here we want
12:15 the page flow to remain as it was before
12:18 so we'll preview that page and you can
12:21 see now we've got this set to move up so
12:23 it's just literally moved up by 136
12:26 pixels and it's now over the bottom of
12:29 the image if we wanted to change this to
12:34 pull out if you watch the position of
12:36 this just get it right set up then when
12:41 we change it to pull out you see that
12:46 jump down we've now got the space here
12:50 equivalent to the size of the stack
12:53 removed so if you've got extra spacing
12:56 you think where's the extra space coming
12:58 from it because you've used the pull out
13:00 setting when it's not inside a
13:05 background area going put it back to
13:08 move up
13:10 and everything now is spaced as per the
13:14 settings that we put in the stacks
13:16 similarly here we've got just two
13:19 blueprints one with the text in it and
13:22 the gray background board around it and
13:24 we've just pulled that up behind the the
13:31 our English title and again that will be
13:34 using the move up so I think always
13:37 think you're pulling content that's
13:39 below upwards on the page so this one is
13:43 set to move up as well by 55 pixels and
13:46 it just puts it halfway under that one
13:49 and if we go down further we can have a
13:52 quick look at how the the corner padding
13:55 from work now this only works for text
13:58 this just puts an empty floated
14:02 container in in the blueprint so the
14:06 text will wrap around this just like if
14:08 you had a floating image in a in a text
14:11 stack or in a paragraph the text will
14:14 wrap around this so again we'll go back
14:18 to our preview and we'll just see what
14:20 we're trying to do we want the text to
14:23 wrap around the floated area that's
14:28 behind here such that when it overlaps
14:30 we don't lose our text behind there and
14:32 we don't have to put any nasty columns
14:34 with things like vine and it's all nice
14:36 and responsive so we can change the size
14:39 of that that space and so the text is
14:41 always is always nicely away from our
14:45 orange box and to set that up is very
14:51 simple once you've got your overlap done
14:55 let's just turn off the corner spacer so
14:58 we'll just turn that off there so when
15:02 you set it up you've got to move up and
15:05 the overlaps gone and then you just need
15:08 to work out how much overlap you need to
15:10 space so you can see how the text gone
15:12 behind it so we want to put an imaginary
15:15 box in floated in the text area the size
15:19 of the overlap with the orange part
15:22 and it's a bit of trial and error that
15:25 you can guess pretty much so you can you
15:27 can change the small medium and large
15:31 with again as filler the breakpoints at
15:34 the top you can also change the height
15:37 know the widths you can do in
15:39 percentages the height for various
15:41 regions has to be an absolute unit so
15:43 you can choose pixels browser width or
15:45 browser height browser width is quite
15:47 useful if you're trying to scale stuff
15:51 proportionally to the size of the
15:52 browser make it responsive in this case
15:54 we're just using pixels so I guess that
15:58 for medium screens this overlap that we
16:02 just saw was about 26% and for large
16:05 screens it's about the same because the
16:07 the text doesn't change that much we
16:09 could probably fine tune the medium one
16:11 a bit a bit more we've also got a
16:13 control for where it where it is top
16:15 left or top right so if we were
16:18 overlapping from the other side we'd
16:20 just do that
16:21 bear in mind with floated spacing and
16:26 text that wraps around it it can only be
16:29 done at the top so you can't float at
16:31 the bottom and wrap the text around it
16:33 either side that's just the way that
16:35 floats work so you've got to think about
16:37 how you you do your layout to make sure
16:40 the overlapped areas at the top if you
16:41 want to use this feature and we can turn
16:45 it off in edit mode if we don't like
16:47 that empty box there so you'll notice
16:51 also that we've got no space or width
16:54 for small screens and that's because for
16:59 small screens we decided that we didn't
17:01 want any overlap so in the overlap
17:04 settings we set it to zero so we get our
17:09 normal experience one was below the
17:12 other one no overlap now some of these
17:15 are the ones we've left the overlap on
17:16 seeing see this one the black one over
17:19 the image will let the overlap on for
17:21 mobile just to show the flexibility and
17:23 the same with the one we looked at
17:25 before with the title so it's entirely
17:28 up to you you can turn the overlaps on
17:30 and off for each of the three screen
17:32 sizes
17:33 I'll just come down to the the final one
17:36 at the bottom here and we've overlapped
17:41 this caption type content over the image
17:45 here there is one of the control we have
17:49 available to us will come down to this
17:51 caption will see all we've done is set
17:55 the move up control again and we're
17:58 going to overlap by one hundred and
18:00 thirty two hundred and thirty four
18:02 medium and two hundred thirty four large
18:04 that's just because we don't want the
18:06 overlap so much when we're on mobile and
18:10 the image itself is smaller so let's
18:14 just have a look how that behaves and
18:18 you see we have overlay controls here so
18:21 it defaults to be in the front if you
18:22 wanted you could put it at the back so
18:26 now it's behind our image and obviously
18:28 I've made the image transparent so you
18:29 can see it and there's a custom control
18:32 which allows you to change the z-index
18:35 to a custom value you should never
18:38 really need to use that but it's there
18:39 if you do now one final thing if we
18:48 change this to pull out instead of move
18:51 up so we'll use the wrong setting you'll
18:55 now see we've got our gaap back again
18:57 there so it's like where do this gap
18:58 come from it because we've used pull out
19:00 on machine Tintin
19:07 and then we are back to everything we
19:10 just did correct margins and padding
19:12 around it so I hope that's been useful
19:15 and it really is very simple to use
19:19 these controls it's just what you see
19:20 here in the overlap settings move things
19:24 up and if you don't get the results
19:28 you're expecting just come back to this
19:31 video and decide whether you should be
19:33 using removal port pull out because it's
19:36 a 99% at the time you should be using
19:38 move up
19:39 so that's the first button thanks for
19:41 watching and I'll see you next time"}]