Creating a hero section for your web app page in Bubble.io
In this Bubble.io tutorial we demonstrate how to create a 2 column hero section using the new Bubble responsive engine. This tutorial video includes how to create a layout that has 2 columns with the text and image element.
Create a stunning hero section: Learn how to use Bubble's new responsive engine to build an eye-catching two-column layout.
Master responsive design: Discover tips for creating responsive hero sections that look great on all devices.
Elevate your Bubble skills: Build professional-looking hero sections with proper alignment, padding, and responsive columns.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.