​

Section 1 (Lesson 6/10): In this lesson, we’re building the hero section of our Workplace app. The hero section, positioned at the very top of your landing page, is crucial for making a strong first impression as it's the first element users see when visiting your site. A well-designed hero section can significantly influence user engagement and the perception of your app.

In this lesson you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Time to start building, folks. So we are going to be building our Hero section. So this is the top most important part of your landing page when people first click through to your domain. Let's jump in.

I quickly wanted to explain what these three issues were and what this means. So this is the Issue Checker. And as you build out your app, you may see issues coming and going and at times we might need to resolve them. So if I click on these three issues, we have a little popup here that Bubble brings up and it actually tells us where this problem exists as well as what the problem is.

So we see that these errors occurred when we copied across my styles. Okay, "Heading 1", "Heading 2", "Heading 3". And if I click on one of these, it'll actually take me to the page "Styles". So I'm going to close this because I know that if I now scroll down and go find these text elements, this is where the errors are.

So if I click on "Heading 1", and if you click across to your Conditional tab, all I want you to do is remove the condition in red because we will get there. We copied across styles from a completed app, but some of that functionality has yet to be created.

Please do the same for "Heading 2", click across to the Conditional tab, click remove. And lastly, "Heading 3", "Conditional" tab, click remove. Okay, as you can see, no more issues. Perfect.

I'd like you to bring up your Property Editor please. And on the Layout tab, let's just confirm that we're on the index page. We have a Container layout set to "Column". Do that now. If it's not, Container alignment starts from the top, meaning that elements are

top-aligned and are arranged in a column from top to bottom.

Also, make sure that the default builder width is 1400. Just a reminder that that is not a page static page width. This is responsive design. So the 1400 just relates to just the editor, what we're working within. And a page height of 767 is fine for now. As we build out the landing page, the landing page design will dictate the actual height of the page. Okay, so we can just leave that as is.

Next, let's first grab a Container. Click the "Group" once. Click it again on the page. Rename this to "Group Section". I'd like you to set the Container layout to "Column" as well. Next thing I'd like you to do is on the Layout tab, halfway down we've got "Make this element fixed width". Uncheck that. I want it to span edge to edge. You can remove the "Min width", set it to 0 and then we've also got "Min height". And as we build out this course, we'll get used to these particular tools. But let's head back to the page and for now uncheck the box that says "Fit height to content".

Over in the Appearance tab, what I'd like you to do is go to the "Background style", click "Flat color", and then we're just going to choose our brand or our primary blue color and just set it to 10% opacity. I'm doing this because transparent groups are tricky to work with when you're first learning Bubble. So I'm temporarily setting a color just so we can see where this container, this Group, exists and how we are nesting elements within it.

Okay, now I'm just going to tab across to the demo app to see, to demonstrate what we're building. So the Group we just dropped on the page is basically the Group that will have an image as a background. We call this a "Group Section", the top-most group. So next we're going to be creating these text elements and styling them as well as these link elements.

Okay, so let's grab some text. Click once and you can either drop it or draw it on the page, doesn't matter. So the text we need here is "Discover exciting tech jobs at Workplace", written in sentence case. Fantastic.

Now we're going to go down to the "Style Attribute" and we will select "Heading 1". This is going to be center-aligned, so I'm going to choose center-aligned within the text element remember. On the Layout tab, I'm going to remove the fixed width because the page will dictate how this text behaves. "Min width" I'm going to set to 0 and the "Min height" I'm going to actually set to 0 as well because with "Fit height to content" checked, the text element is now fitting height to the text within.

Back to the demo app. Next, we need "Your next career awaits". So that's a text element. So I can either copy and paste this text element or I can just grab some more text, click once and draw it in. So in all caps, type "YOUR NEXT CAREER AWAITS". For this, we're going to choose "Body Large" and we'll do the same thing on the Layout tab, okay? Remove the fixed width. It's very rare that we'll be using fixed width. Min width set to 0. Min height set to 0. And as we do that, "Fit height to content", because it's checked, the text element itself is fitting height to the content within which is the text "Your next career awaits." Okay, I would like this text center-aligned, so back on the Appearance tab we're going to choose text aligned in the center.

So over on the demo app you can see that the positioning is very different and it's also contained within another Group. So if I go across to the left hand side to the Elements Tree, to the "Layers" dropdown, we have our "Group section". Then, within the "Group section" we have "Group content". Now if I inspect this "Group content", let's have a look at the Layout, we have a "Max width" of 768. And a max width basically means: how wide is this group allowed to grow on different screen sizes? So if there's no max width, the group will just follow the width of the screen. So we need a max width because we want to be able to contain elements in the center and we don't set the "Max width" on the elements themselves, we set it on the Group that we're dropping. So that's a location where we can set it once and then the text inside responds to that width: 768.

Okay, so I'm going to highlight the title text, going to highlight the subtext, then I'd like you to right-click. Now we have a contextual menu and we are going to say "Group elements in --> Column container". Click.

So the first thing we're going to do is we're going to call this "Group Content". Always rename it first. Now, in the Layout tab we can set our "Max width" to 768. There we go. It's nicely contained. And now because it's contained we can set the horizontal alignment of "Group Content" to the center.

Okay, so where does the number 768 exist? Why did we choose 768? So we're going to be following what's called "Bootstrap" and that is a framework for design, and it is just a framework, so it isn't gospel, but it is a design system that we can follow along to make our decisions become more coherent, which will obviously influence how design scales across our application.

And if I click across to the "Responsive" tab, I can see 768 in this bar across the top. I can also see 992 and I can see 1200. And if we're following the system called "Bootstrap", there would also be a 1400 here.

So click on the "Default" and we can see that it's set to 1400 because that's what we set our Editor width to be. Earlier on in a previous lesson I talked about 16 pixels of text height, 72 pixels of text height, 768, max width. There are only a small amount of numbers that we'll just be repeatedly using throughout. So we don't just make these numbers up, we don't look at the screen and go, I want to make this instead of 768, I'm going to make it 797. We do not do that. We need a coherent and structured way to how we build, okay?

Okay. So now with "Group Content". And by the way, if you want to get to "Group Content" or select "Group Content", you can do it on the left hand side in the Elements Tree. And this Elements Tree is expandable. Or you can click on the text, right click and choose, "Select first parent". That will also get you back to "Group Content".

Okay, so let's just click and bring up our Property Editor. First of all, let's "Select first parent". So we have "Group Content" highlighted, and now we're going to apply some gap spacing, okay? So we check the "Apply gap spacing between elements" box and now let's say 12 pixels (which is also part of the system that we'll get used to).

Now, I would like "YOUR NEXT CAREER AWAITS" at the top of "Group Content". So I can either pick it up - actually, before we do that, the text element is wider than I want it to be, so I'm just going to select the text and check "Fit width to content". Okay, it's pulling to the left, so I'm going to center-align it.

There are two ways to change the position, or, there are actually three ways. Let's discuss all of them.

So we have "Horizontal alignment" and we have these four buttons below here. "Make first", "Previous", "Next", and "Make last" are greyed out. If there are more elements on the page, these would all be available. If we said "Previous", watch what happens: "Your next career awaits" Text element goes to the top. If I click "Next" or "Make last", it goes to the bottom. I can also pick it up, move it to the top. Over in the Elements Tree, I can also drag it underneath. Okay, I'm just going to put it to the top position. That's where I want it.

What do we need next? Okay, we've got some text here. So I'm just going to cheat. I'm going to copy this and then I'm going to let you type it out. So what I'm going to do is I'm going to copy and paste this text (command C, command V), it's dropped it towards the end. Going to paste it into this box and I'm going to set the "Style Attribute" to a "Body Medium". You can see it's currently left-aligned but I'm just going to override a part of the style to make it center-aligned. Now the layout looks a little bit different.

Let's go back and inspect. So in this example it looks like there is a "Max width" of this text because it's not going edge to edge. So in the "Layout" tab of this text element I can see that I have a "Max width" of 576: another Bootstrap breakpoint width! So let's do that. Going to click on this text element, head over to the Layout tab. On the "Max width" we're going to choose 576. And there we have it.

In the Elements Tree, go back and select "Group Content". Now I'd like to position "Group Content" in the center of "Group Section". Now, for that to happen, we actually need to head up to "Group Section", being the parent, to instruct the parent where to position its child group, which is "Group Content". So we can go to "Container alignment" and choose center. Now we are in the center of the screen.

Now we need two link buttons, okay? One says "Browse Jobs" link element and the other one says "Sign up". Now these link elements look like buttons, but it's important to note that on your public-facing pages you need to use link elements to help Google, this crawling bot, understand the structure and the sitemap of your particular application.

Okay, so instead of using just a text element, we want it to kind of look like a button so it's more engaging so it catches the user's attention. So we're going to restyle some link

elements so they look like buttons but they will behave like link elements.

So let's grab a "Link" element in the left-hand side and just drop it anywhere inside "Group Content". Okay, so it looks like a standard link. So what we're going to do is detach this link, all right? And let's set up a style here. So I'm going to say "Browse Jobs" and then let's scroll down. For the font size I'm going to choose 16 (it's going to be the standard for any kind of button design). I'm going to choose center align this text and I'm going to choose 500 medium. You will get comfortable with the repetition of setting these particular styles throughout this course, okay? So don't worry about why are we using 16, why are we using bold- it's a design system that you'll become familiar with. The main thing is that it's coherent and consistent.

We're going to choose a background style here of "Flat color", and we're going to choose the "Primary contrast". We're going to choose a Roundness of 8. Now we're going to head over to the Layout tab because I want a fixed height here of 44 pixels. I'm going to remove fixed width and watch it expand edge to edge inside, which is pretty cool and we will be using it for mobile, so inside its parent container it spans edge to edge. But let's remove the "Min width" and let's check "Fit width to content."

We're going to choose padding. So left right padding of 16 and 16. It's looking good. Last thing we need to do is just set the text to our black text so it says "Browse Jobs". Okay guys, let's save this as a style because we will be using this particular style in other places. So we're going to click "Create a new style..." Let's call this "Secondary button link".

Okay, we need another one that says "Sign up". So I'm going to copy and paste this with my keyboard shortcut. Copy, paste. Let's reposition it, head over to the Layout tab and choose "Previous". And now these two are side by side.

Before we do anything else, just so we can differentiate, let's rename this one from "Browse Jobs" to "Get started". Now we have an opportunity to change the layout of these buttons. We want them side by side in a "Row" container layout. They are currently a part of "Group Content" which is set to a "Column". So, we'll highlight these two link elements. With them both highlighted, we're going to right-click "Group elements in --> Row container". Now they're next to each other. Excellent.

We're going to be calling this group "Group Links." Now we're going to say Container alignment in the center and to add a bit of space between these two buttons, we're going to check "Apply gap spacing between elements". Within "Column gap (px)", we're going to set this value equal to 12. Looking good!

Now with the "Group Links" group highlighted, we're going to say "Make last" to push it beneath the subtitle text. And this is looking pretty good, but obviously the spacing isn't quite right. So before we finish this lesson, let's just sort out the spacing and then we'll take a break.

Let's jump over to the demo app. So the demo app has some gap spacing of 32 on "Group Content". But there is another group within "Group Content" called "Group subtitle & title", so this enables us to apply less spacing, or keep these two elements closer together.

Okay, so on "Group Content", let's change the "Row gap (px)" from 12 to 32. And now we're going to highlight "YOUR NEXT CAREER AWAITS" plus your Heading title, right-click "Group elements in --> Column container" (top to bottom, stacked please). Going to call this "Group Title & badge", and then we're going to apply gap spacing of 12 here.

So you can see that there will be lots of groups, and groups give us a lot of flexibility and power. They don't really add much weight to your app, so don't worry, but it's within these groups that we can get really granular and precise with our layouts.

Okay, before we take a break, let's just edit the style of this link, "Get started." I want this to look like a primary button, so I'm going to detach the style. I'm then going to change the background color to my primary blue and then the text to the contrast white. That's all we need to do.

After you've done that, you can go ahead and create a new style and we're going to call that style "Primary button link" and create.

Okay, so I know that was a lot to take in. We dealt with all sorts of things in this particular lesson, but we're going to take our time and when we get back we're going to start bringing this hero section to life with a background image and we'll start talking about other components for our landing page as well.

I'll see you in the next lesson.