The page

The page is the blank canvas on which you design your app's user interface.

At the core of everything related to design and user interface in Bubble is the page.

This is the canvas on which you place , text, images, icons, videos and everything else that your users need to make use of your app.

What is a page?

No matter what kind of application you want to build, from a simple website to a complex eCommerce platform, the page remains the starting point for all your design and development efforts. You can see the page itself as the lowest level in the hierarchy of a page's structure, where every element you add to it is contained within that page.

What is a page's hierarchy structure?

A Bubble page is composed of three types of components:

The page The page is the top-level component of a webpage and is responsible for organizing the groups and elements on the page. The page is the top container for all elements
Groups: Groups are used to group elements together and control their layout. They can be thought of as "boxes" that hold other elements. They can be styled or they can be invisible to the user and can contain Elements and even other Groups to create a hierarchy. Groups are a major part of your page's design as they determine how your other elements behave. Groups are containers for elements and for sub-groups
Elements Elements are the actual content that your users see and interact with to work with your app, such as buttons, links, images, icons and input fields. Elements are the things that users interact with on the page

The way in which these components are organized and styled determines the overall layout and design. From a technical viewpoint they make up the page's hierarchy structure.

In a way, the hierarchy above is how your browser "sees" the page before rendering the results on the screen.

You can read more about the element hierarchy in the article below:

Article: The element hierarchy

Default pages

When you create a new Bubble application, a few pages are included by default. These pages have a few traits in common:

They are always present when your app is created
You cannot change their names
You cannot delete them

index

The index page is the main page of your app (more on that below).

404

The 404 page is where your users are taken if they type in an URL in the URL bar that includes your domain, but the page name they enter doesn't exist:

https://appname.bubbleapps.io/non-existing-page

The 404 is an that is used to tell your browser that the page doesn't exists.

You can use this page to tell your users that the page couldn't be found and point them in another direction.

reset_pw

This is the page to which your users are directed if they need to reset their password. They will most likely follow a link in a reset password email to this page.

The index page

The index page is the main page of your application – the first page that will load when a user types in your app's domain in the browser's URL bar. It's also the only page that can be displayed without showing the page's name.

For example, the below URL's would take you to the index page even if you are not including the page's name in the URL:

No custom domain

Custom domain

If your app has any custom set up in version control, the version-test part of the URL is replaced by the of the currently active branch.

Setting an index page

When you create an app in Bubble, the index page is created automatically. You cannot name another page index, but you can replace it by using the Make this page the new index function.

The old index page will be named old_index.

Video lesson

Video: How to set a new index page

The page URL

Every page that you add automatically has a unique URL assigned that your users can access to visit that page, just like any other website. All pages follow the same URL pattern: by combining the root URL of your application with the name of the page:

No custom domain

Custom domain

If you have connected your app to a custom domain, the URL will look like this:

If your app has any custom set up in version control, the version-test part of the URL is replaced by the of the currently active branch.

Creating a new page

To create a new page, click the dropdown in the upper left corner of the Bubble editor, right next to the Bubble logo. In the dropdown, click Add a new page...

You will be asked to provide a name for the new page and whether you want to clone an existing page.

Naming your pages

You can create as many pages in your app as long as they have unique names. Keep in mind when naming pages that they need to be . Any non-URL safe strings you provide will automatically be .

A simple rule of thumb for page names is to only use the english letters a-z and numbers 0-9 and replace spaces with dashes. During URL encoding, Bubble will:

change the text to lowercase
replace spaces with -
replace special characters with _

Cloning a page

Cloning a page means to create an exact copy of that page under a new name. The entire page, including all elements and workflows will be copied.

There are two ways to clone a page:

By selecting Add new page...

... or by having the page you want to clone open in the editor and selecting Edit - Clone this page:

Regardless of the method you choose, you will be asked to provide a name for the clone and confirm which page to clone in the page dropdown marked below:

Page properties

Each page can have their own individual settings configured that affects how that page looks and behaves. Settings are available in the Property Editor.

There are two ways to access the page settings:

Double-click with the left mouse button anywhere on the page itself (avoid clicking on another group or element
Clicking on the page in the page's :

For the full list of all the settings for the page, see our page settings core reference.

The page's settings are available in the Property Editor, as illustrated below:

Appearance

The Appearance tab lets you control the visual properties of the page, such as the background style and colors, as well as what kind of data the page should hold and its SEO metadata.

Layout

The Layout tab lets you control the page's responsive properties, or how it's layout is structured and changes across different screen sizes. You can read more about layouts in our guide on responsive design.

Conditions

The Conditions tab lets you change the and background styling if one or more certain are true. You can read more about this in our article on Conditions.

Organizing your pages

Pages can be organized into folders in the Bubble editor to make them easier to find.

Organizing pages into folders makes it easier to find the pages you need to open in the editor, but they do not affect the URL or navigation experience of the page in your app.

Adding a page to a folder

To move a page into a specific folder, do the following:

Open the Property Editor for the page by double-clicking anywhere on the page itself (not on another group or element)
Pick a folder, or create a new one. You can leave the dropdown blank to remove it from a folder.

Navigating your folders

You will find all the folders you create in the upper right corner of the page navigator (which is located in the top left corner of the Bubble editor).

Video lessons

Video: How to organize your pages in folders

Frequently asked questions

Can I add page folders to my URL structure?

Bubble does not support page folders in your app's URL's. As such, all pages follow the same structure as described above.

Can I publish and un-publish pages?

All pages are public, meaning that as soon as you have created one, they can be accessed in your app. Keep in mind that changes need to be deployed before they are visible in your live app – this applies to pages too.

If you'd like to keep the elements on a page but not make the page available to your users, you can convert the contents of the page into a r and store them there.