Section 2 (Lesson 2/8): Creating a responsive and visually appealing signup page is key to capturing users’ interest and providing a smooth onboarding experience. In this lesson, we focus on designing the signup page with a two-column layout that responds seamlessly across devices —- from desktops to tablets to mobile phones.

What you'll learn:

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

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

In this lesson, we're just going to deal with the sign-up page design. So the two-column layout that needs to respond really well from desktops to tablets to mobile phone. And then in the next lesson, we'll deal with the workflows. Let's dive in.

So I'd like you to create a new page. If we click the drop-down in the top left-hand corner, we can add a new page. Let's call this page "sign-up," and then Create. So the first thing I'm going to do is bring up the Property Editor. I'm going to give this page a title. I'm going to use the pipe icon to separate "Sign up" from "Workplace."

Let's head over to the Layout tab. Change the container layout to a row. And a row is usually an unusual layout for a web page or an application page because they usually run top to bottom. But remember, we have a two-column layout, we don't have a navbar, we've just got the left column and the right column, therefore, they need to sit next to each other. Going to change the default builder width to 1400 and the min-height is absolutely fine for now.

Now for the two different columns. Head over to the Container section to grab a group and just simply and drop it on the page. We're going to name this "Group Column," and we're going to change the container layout of Group Column to "Align to parent." This is because we want our branding to sit in the center. Now, I'm going to remove the checkbox for fixed-width, I'm going to remove the min width, and I'm going to change the min height. Now, that's obviously collapsed itself down, so we're going to go back up to "Vertical alignment" and choose the rightmost icon, which is Vertical Stretch.

Over in the Appearance tab, I just want to make sure I can see something, so I'm going to change to "Flat color." I'm going to choose my brand blue, or primary, and then I'm going to change the opacity of the color itself to 10%, not on the Group, of the color in the swatch. Okay. So that is Group Column.

Now, I just I just want you to copy and paste this column. So then we have two columns sitting next to each other. I'm going to choose my keyboard, Command C, Command V, and here we go on the right-hand side, group column. We can also just remove that "copy."

Next, we're going to add an image to the left-hand column. Now, there are two ways that we can approach this. The way I prefer is to go find where the image has already been uploaded and just copy the URL link. That is the image location where it is saved to on Amazon S3 web servers managed by Bubble. You can also choose just to upload the image again, but that then adds more weight to your application. I want to keep it as lightweight as possible, if there's a image that is going to be reused, I just want to reuse that image.

So I'm going to head over to the index page. You can do the same. And then double-click on the image and find the area where it says "Dynamic image." We're going to simply copy using the keyboard shortcut. Now I'm going to go back to my sign-up page. Double-click. Okay, so currently, we have a background style of "Flat color," and we have set our background color of primary blue at 10%. I'm now going to click on this "Background style" dropdown to choose "Image." And then I'm going to paste in this dynamic image. I'm also going to check the box for "Center the image," and you can see how it now makes sure that the cropped image is centered.

Now I'm going to pop into my demo app so we can inspect the design of the branding in this particular group. Here we are here. Okay, so we have this image, and we'll be uploading this image (it's in your resources folder). We have "Workplace," that is a Heading 2, and we have some copy down here. So let's start with the logo.

We can grab an image element and draw it in the center. Okay, because its parent, the Group Image, which we named "Group Column," because its layout is set to "Align to parent," we can drop it in the center, or we can move it to any quadrant that we like. Let's put it in the center. Next, you can jump into your Resources folder and go and find the "Workplace-light" image. Okay, looking good. Let's rename it to "Image Logo." Then we're going to go over to the Layout tab. We're going to choose 40 pixels in width, and now we're going to say "Keep element aspect ratio fixed." You can see that Bubble has determined that the aspect ratio is not exactly a square 1 to 1, it is slightly out, and it has actually set the aspect ratio for us: 40 by 41. I could also override this and set it to 1 to 1, if I like, like so. You're welcome to do the same.

So back on the Appearance tab, we're just going to add a bit of a border to this icon, just for design purposes. First of all, let's change the Roundness to 12. Now we're going to choose Shadow style, and we're going to say "Outset." Okay, so usually this would be used for, say, a drop shadow effect. But we're going to play with some of the design here, and we're going to try something else! I want you to choose "Horizontal offset" 0, same with the "Vertical offset," then remove the "Blur radius," but let's set a "Spread radius" of 4. Okay, so you can see over here, it's just a nice and neat little addition to this logo. Now we're going to choose a box shadow color. We're going to choose our white color, but then change it to 30% opacity. Look how nice that looks, and you can see through the border because of the 30% opacity.

Now I'd like you to group this "Image Logo" in another Group because we need another Group because we have more elements, and we're not just going to drop elements into this column. Rather, we want to keep these elements close together and be in charge of how they're distributed. So we're going to have our logo, then our Workplace Heading 1, basically, and then our subtitle beneath that.

I'd like you to highlight Group "Image Logo," right click, and say "Group elements in" --> "Column container." So we're going to call this a "Group Container." And on the Layout tab, I just want some space to work with, so on the min width, I'm going to choose 120, and on the min height, I'm going to choose 120 as well. It's just giving us a bit of space to work with, it will actually respond to the elements we drop inside.

Okay, so now we have Align to parent on the Group Column on the left, which means that we have this parent container type Align to parent on the child, and we can basically put this anywhere we like, okay? We're going to keep this in the center. Back on this image, we now can choose "Horizontal alignment" to put in the centre, and then grab some text. Draw the text in that box. Let's type the word "Workplace," and let's change the style attribute to Heading 2. After you've done that, set the font color to your white color.

Okay, so head over to your Elements Tree, and go and select Group Container. Let's just set up some styling here. So back on the Layout tab, I'm going to remove "Fit width to content." That gives us some space. Then I'm going to go back in, grab this text, remove the fixed width, remove the min width, and the min height. And then on the Appearance tab, I'm going to say I want this center-aligned. Okay, looking good.

Now we need another text element to put inside this Group Container. So we're going to grab some text. I'm going to click it once and then drop it just beneath "Workplace." And I want you to type the following. Actually, before you do that, let's just change the color so we can see it, change it to the white color. Okay, the text is: "Welcome to Workplace. We're excited to help you find your next career." ("Workplace" is capitalized.) Then we're going to align the text in the center, and then lastly, on the Layout tab, we're going to move it to the center, but we are going to remove fixed width, remove min width, and remove min height.

Okay, now we can click back again onto the Group Container. I'm using the Elements Tree now because it's just easier to control, and we're going to set up some max widths this time. We're going to try 320. And that looks pretty good to me. We're also going to remove the min height of 120 because we don't need it, because the elements inside the group automatically determines the height. So we have "Fit height to content" checked, and therefore, the group is fitting height to the content within, which are the two text elements and the image element.

Let's now, with Group Container selected and the Layout tab selected, we're going to apply gap spacing between the elements. We're going to try 20 here. I might adjust this down to 16. So I think we've made good progress on this particular form. There are a few things to learn in terms of column layouts, align to parent, and so forth.

Let's take a break, and when we get back, we're going to deal with the form design. I'll see you then.