Creating a hero section for your web app page in Bubble.io

Creating a Hero Section in Bubble.io

Let's create a hero section for our Bubble app. In this tutorial, I'm going to be showing how to use the new responsive engine to layout content in a two-column hero section. So I have a blank page here. I'm using the new responsive engine and let's bring up the inspector by double-clicking on the page and we're going to layout. I'm going to set the width to quite a standard width used 1240 pixels.

Setting Up the Column Layout

I am then going to start building my column layout. You can see I've got an issue there which is that my layout is currently aligned to parent. I am going to want to allow my page using column and so now when I insert this group it's going to go into stacking on top of each other like a column. So I'll name this section hero and then change the container layout to a row because I'm going to be putting two columns in there. I want them to sit next to each other and then I'm going to set my width remove my min width. This is all part of building in a way that helps your application helps you translate your application to be being fully responsive much more easily.

Configuring the Hero Section

So then I'm going to say my max width is 1240 and then let's give this a slight background just so it's really clear. Okay, there we go and now I need to add my columns. So here's my first column. I'm going to name this left and this is going to contain a series of either text images one on top of each other so that is a column and then get rid of the fixed width and I'm just going to remove the min width for now.

Creating Two Columns

If I copy and paste my column you see I now have two columns and they're exactly sharing the space half and half because I've not got a statement here telling it to either fit to content or min or a max width. So that's going to work perfectly for what I want to do right now and rename that to right.

Adding Content to the Columns

Let's start putting some content into these columns. Let's take some text and we'll go for header one. So let's say "Welcome to my Bubble app" and so then on layout I want this to take up 100% of its container which is left column and I also don't want the height value to skew how I'm laying at my elements so I can remove that there. Now let's put in like a sub header so this can be my body text and we will just have set also set this to 100% so it takes 100% of the column and now let's get rid of that height there we go.

Adding an Image to the Right Column

Now I'm just going to put an image in on my other side and I'll just give it a border so that it shows up. This is also going to be 100% of my column and let's hit preview and see what it looks like.

Making the Hero Section Responsive

Okay, so there's some work we need to do in order to make this responsive because at the moment everything is kind of fixed to the left-hand corner. So let's work through that. In my hero section which has got the background color, my hero section's got these two columns nested inside it. I need to align this to the center. I think that's the one there we go now it's the center of the page.

Adding Padding for Better Appearance

I can also do a little bit of something with padding. So I'm on my hero section and a good rule of thumb 20 padding can go a long way. Okay, and you see that that has now brought in my content from the edge and that's really important. We'll unpack this in a future video but you can see on mobile my hero section is the gray one and it shrinks down to the hero section but then it keeps that gap. If I didn't have that 20 pixel padding then my text would be right up to the edge of the screen and that doesn't look good at all.

Adjusting Column Spacing

Final thing we can do on here is my columns are a little bit close now. I could use margins padding but I think that introduces just too much of a you want to keep things simple and so there's a simple way to do something which then isn't going to create you heaps of work later on then do it that way. So apply gap between elements this is the hero containing left and right column and then my column gap let's pin 30 and let's preview that.

Final Touches and Preview

Brilliant. Now I'm gonna do one final thing having said that the same thing a moment ago let's give this a fixed height. So get rid of height content and also we're actually saying max height 500 and then we want to put our columns in the middle and then get rid of that min height. So that way I've created a hero section. I think I've got I think it might be just being a little bit odd because I think because I'm using basically a placeholder there's no image there anyway you can see that I now have a two-column layout that will has got nice margins nice padding rather than the side it's centered. We have definitely 100% we've got the beginning of a hero layout here.