Want to learn how to create WOW moments for your website viewers as they navigate around your site?
Originally presented to our Design Partners at an evening of pizza and beverages, we're exited to be releasing this 9-part series (supported by a transcript) to all our customers. You'll gain some knowledge on how to use Rocketspark's intuitive design tools to make your website sing!
We'd love your feedback on any changes you've made to your Rocketspark website after watching the series. Get in touch with us here.
1 | Creating WOW moments with stack column backgrounds
One of the things with stack column backgrounds is that you're able to create these wow moments down the page. One thing you might have noticed with the Inspiration Gallery is that it's quite full-on because every stack is kind of a big kind of wow moment, but as people are scrolling down you need to make sure that there's those rest moments in between, breathing space. So don't underestimate just sort of simple, regular stacks with plenty of spacing to alternate between those kind of more picture heavy stacks.
One thing we've been finding as well, is the importance of having, I guess, shades of pastel colours to alternate white. So this is just the two column stack. So if I click on the colour wheel here and I go to Width & Spacing and make this stack’s content go full-width. So obviously this looks terrible right now, so I want to put some decent spacing here using Internal Spacing controls. And now if I go to Column Settings and go over to the other column over here, which is currently empty, I can jump in here and grab an image.
So I've got a column background here that goes right to the edge of the window. And I've got nice spacing all around. The cool thing here is that you've got that sort of pastel change. And so again, we can essentially create the same look here on a different column and add an image on the other side and again adjust the width. And so you've got this look here, which is just quite cramped, and the text is just too close to the edge is and just doesn't have that kind of expansive, spacious look. So again by just increasing that spacing you create more of that kind of square shape. So the issue with this one is that there's just a bit too much text in there. The other thing with these kind of big, spacious looks, is that they’re there for the “wow”, not for packing in lots of text.
So if you want to have a good chunk of text to tell a story or to boost your SEO, that's where again, just kind of peppering those more traditional stacks through the design works best. You know, your kind of three column text stacks etc. Oh, this one here would probably look better if we actually dial back the amount of text. So you can essentially play around with that spacing to adjust the height and shape of the boxes.
One thing to note with Column Picture backgrounds is that the picture is essentially positioned in the middle of the box. There's no pin to corner or repositioning controls. It works particularly well with wide shots and distance shots and stuff where, if you sacrifice a bit of the image around the edges, it still works. If you adjust the width of this, it's responsive as well. So you kind of need images that aren't going to chop people’s faces off at the crop points while adjusting.
2 | Layering column backgrounds on stack backgrounds
Mid width stacks, column backgrounds, stack backgrounds, spacing
You can also achieve this look without going full-width. So if we jump in this one and we go into the second column and we add a background image here and on the left hand side, I've got a pastel background If we add a white background here, maybe we'll make it the mid-width size so it's just a little bit bigger than the regular content. And then add a bit of breathing room there, left and right, top and bottom and you can create a look where you've got the actual stack background revealed here. This could be any colour that you wanted to be. You could add a stack background image here if you wanted to. You can interplay between the stack background and column backgrounds as well.
3 | When to use Grid Gallery vs full-width Stacks
Grid Gallery, full-width stacks, Grid Gallery Effects
Looking at the images alone, this is essentially the same thing. So the top one is a Grid Gallery, and this one here is a three column stack with Column picture backgrounds. So just in terms of that decision making of when to use grid Gallery and when to use the Column picture background, both of these are able to go full-width. Two key reasons you would use a Grid Gallery is if you want to add multiple rows of images in the same stack. So if we go into the Grid Gallery, we can add three extra pictures, and then you've got a second row there, and then you've got all the Grid Gallery options in terms of adding spacing there, the mouse over effect. If you're creating a gallery of call to action buttons for ecommerce categories or service categories, where you are wanting them to be buttons, Grid Gallery is a great option. If you're potentially wanting to put informational content, maybe a heading and a couple of lines of text over an image and then a button and you’re only wanting the button to be the click zone, then that's where a column background image can be good.
But for this kind of look definitely, Grid Gallery is the better option over trying to do this with Column picture backgrounds. Column picture backgrounds are best when they're used to essentially balance the height of the content and other columns where there isn't an image. It gives you the option to go into the image, zoom in and reposition which at this stage, you can't do on Column Picture backgrounds. You've only got it so that it essentially scales to cover the box. So yeah, if you wanted a Grid Gallery to go full-width, all the way to the edge of the window, which is a great look, you just go into the Width & Spacing controls and increase the space. At full-width you don't have the spacing down the sides, it looks a little bit better without the gap there. You can also adjust Width & Spacing at the sides to match.
4 | Column width combinations in full-width stacks
Column layout options, full-width stacks
So to answer your question, “is it just 50/50?” No, this is a ⅓ - ⅔ stack. So I've just added a Column background colour on the first column then if we change the width to full-width and increase the spacing and then add a picture background on this one. You can do it with any stack column layout.
5 | Aligning logos with vertical content alignment
Vertical alignment, logo alignment
Another cool little feature here, because this is essentially the only content. You don't need to use the vertical content alignment feature because it doesn't have to align with any other content. If you had something here they’d aligned to the top margin of each other. But because there's nothing in this column you don't essentially need that.
All of these logos are aligned to the top edge. But if you want to align them to the vertical middle just go into that setting and changing this drop down here to middle and it will line up through the middle, which is a handy feature.
6 | Create colour boxes over stack background images
Column colour backgrounds, stack background pictures
This one as well is kind of cool. So we've obviously got a stack background picture here on 3/4 1 quarter and if I just change this one to full-width and add a column background on that far right hand side. You can create cool text box looks over top of stack background images. So again, what, what you're talking about before. So this is obviously going off the side of the screen. We want to get it where it scales to fit the space rather than bumping. So, yeah, that's definitely on our radars. This is kind of revealing, you know, a nice big image on the left here on, then, having a box. You can do this look as well, where this box doesn’t go right to the edge. Just by changing this to say 1/3 and ⅔ so that the box column is a bit wider.
7 | Create restful stacks for breaking up wow content
Design for comfort, web design dynamics
This is a good kind of breather, just a classic two columns stack with the picture. But using the vertical content alignment we can now line that text up with the picture on the left hand side, which just gives a more polished look and I’ve also added a bit more spacing than standard here.
It's just crowding up the image a little bit too much, so I could just add that in, and it just creates a more spacious look.
8 | Grids within grids
Grid Gallery, Full-width stacks, zero internal column spacing
So this is one of the looks in the inspiration gallery that a bunch of people have asked about, and it's probably one of the ones where it's pushing the limits of these features sort of the most, so I'll show this one. But essentially the ones up here are the ones that kind of the workhorse looks that will probably get used the most. But if you start nesting grid galleries inside columns and reduce the spacing right down to zero you can essentially create grids within grids.
And this is what a bunch of the more technical looking examples in the stack Inspiration gallery are doing. So what that means is so here I’ve reduced the spacing down to zero. But it means that the text can go right to the edge of the column. So a little bit of a workaround is essentially just using it for shorter text. I’ll show the exact example that this one's based off. So short text and it actually doesn't come close to the edge of the box anyway. So if we want this grid gallery to touch the edges here, we go into width and spacing and dial that down to zero, this one down to zero. And so you've got the grid within a grid on. Then if we want to make that go slightly wider or full-width, you've got this kind of look here. So this is a Column background colour with a text block in the button.
You could put a form in here except that you couldn't because of the spacing haha. (Can you adjust the spacing?) That will also adjust the spacing on the other side. So that is something that we were wanting to do is the ability to adjust that spacing at the column level. So, yeah, but that will be the next feature request. So push that through.
But essentially the advantage with Column backgrounds is you can put any type of content block over top. But with Grid Gallery, you can create these columns and rows inside, by editing this Grid Gallery. We've just got a full colour overlay over a picture. You can make that link to whichever category or page you’d like.
9 | Adding wow moments to keep visitors scrolling
Wow moments, long scrolling pages
Something I talk about is the importance of really beautiful stacks to kind of almost give speed boosts for people scrolling down. If everything looks the same, everything's got a white background or everything is the same colouror everything's text and there's no nice pictures or there’s only boring stock photos. That's when people get bored and leave. Whereas if you have those kind of really strong points and really good headings and really good visuals, it kind of gives people that encouragement to keep interested and keep scrolling down the page. But without that stuff, a long scrolling page will not work. So, yeah, it's just around having those unique moments at each point as you scroll down the page.
Join our design community
We're always on the lookout for talented graphic designers globally to become Rocketspark Design Partners.
Find out about the partnership here.
