There are some basic defaults that Bubble AI sets up for us but that we need to adapt to our liking.

If I scroll over to the elements tree and I click on Index, this is going to bring up the property editor where I can set a few defaults.

One of them is my Page title so I don't want my page to be called index so this is really placeholder text. What I want to appear when someone opens my app in a browser, is for the page title to appear nice and neat. I'm going to change this to my brand and then whatever is relevant for the page. So I can take some of this text here, and yes it's quite long but that's fine, depending on the width of the tab your browser will truncate and show what it needs to.

What else do we need to look at here? Well, what's really important is to double check the layout of the page. Now currently we are correctly set to column and this basically stacks your content from the top of the page down to the bottom of the page and this is correct. Think about when you're scrolling on a page, you're scrolling from the top to the bottom.

Now if we had to set this to a row, then we would have a different outcome. Let's have a look. So now we do have our centered content, but our header is on the left and our footer is on the right. That's incorrect. Let's change it back to a column, and now our content is neatly stacked, starting with the navigation bar of the top, scrolling all the way down to the footer at the bottom.

We'll get into further detail in later lessons about container alignment. Something I will mention now is that the Default builder width we can change if we would like, so I could set this to 1200 and that makes the Default builder width a little bit wider. Now this is the builder width, this isn't how people view it on their web page because we can't control that—they might be on a small phone, they might be on a very large desktop—and we do have control how that renders but the Default builder width specifically is talking about your developer experience.