Page Element

This core reference entry is suited for beginner-level builders.

The Page Element is the fundamental element that contains all the other elements.

Type of content

This property defines the type of thing the page should expect. Once set, you can refer to the Current page thing in the Bubble Editor. A typical use case of this feature is to create a profile page. Set the type of content to 'user,' and in each element of this page, you can refer to the Current page user's email, Current page user's picture, etc. If you set a type of content to a page, all links pointing to that page should define a thing to send.

Time zone selection

Overriding timezones in the backend requires that you activate the advanced setting Enable timezone override controls in your app's general settings.

Reference: Application settings: Advanced

Select a type from this dropdown menu to define the timezone type with which you are parsing data. By default, data will be parsed using the client's timezone (Current User's current timezone). If needed, you can override this setting by selecting a static timezone as an alternative.

Backup field for readable URL

This page represents a thing of the type defined as Type of content.

If the current page's thing does not have a value for its Slug field then the field chosen here will be displayed in the URL. URLs for things without a value for their Slug field usually look like

To make this URL readable, select a field to define what to display in the URL. Usually, it will be a short text field, like a name or title. For example, choosing the field 'location' with a value of 'work,' the URL becomes

Page title

This property defines how the page will be displayed in the browser. It can be dynamic by using the 'Insert dynamic data' button.

This page is a native app

Check this box to build a native app and if you want this page to be the app submitted to the app stores. Clicking this checkbox displays a popup listing tips for building a native app. Note: This feature is in beta.

Native app name

Enter the name of the app to be displayed on the homepage of a user's phone.

Mobile version

To have a specific design for the page when loaded on a mobile device, select a page from this dropdown menu. Because the URL remains the same, this is transparent to the user.

Container Layout

Select the container layout type for the page (Fixed, Align to Parent, Row, or Column). Since the page itself is a container, all child elements on the page will inherit different layout controls depending on your selection. More on this can be found in the Containers section.

Preset page width

Select a preset width for the page from this dropdown menu so that the page fits the target device, e.g., laptop, mobile, or tablet. Changing the page width or height dimensions in the Bubble Editor changes this setting to 'Custom.'

Width for UI Builder

Set a specific pixel value for the width of the screen while you are building. When designing responsively, this value is used to determine the dimensions of child elements that might rely on having knowledge of the page width. This value can be updated by setting a custom value or selecting a Preset page width.

Title (for SEO / FB)

Enter the title you want social networks to crawl when looking at the page. This title is displayed by Facebook, for instance, when the site is listed. It should be approximately 50–60 characters including spaces. If left blank, the title entered in the SEO & Metatags section in the Settings Tab will be used.

Description (for SEO / FB)

Enter the meta description you want Google to crawl when looking at the page. This description is displayed by Google or Bing when the site is listed. It should be less than 160 characters including spaces. If left blank, the description entered in the SEO & Metatags section in the Settings Tab will be used.

Image (for FB)

Choose a dynamic image for Facebook to display.

Page HTML Header

This feature is available on paid plans. Enter any HTML to include in the Header. For example, Google's or Facebook's tracking code for conversion.

Warning: This is for advanced users only because it could break the page.

Background style

Select a background style from this dropdown menu to apply a backdrop. Choose from None, Flat color, Gradient, Image, and Video.

Background color

Choose the background color for the page.

Note: The background color only applies to the page element itself, not the true (browser html) page background. In certain instances, like a popup that is longer than the page element, this html page background color (default: white) will be exposed. Coming soon: Ability to set this html background color.

Gradient style

Choose either Linear or Radial from this dropdown menu.

Gradient direction

Choose the orientation of the gradient from this dropdown menu. Selecting 'Custom' displays a Direction degrees field to set the direction in degrees.

Direction degrees

Enter a number between 0 and 360 for the direction of the gradient.

Gradient shape

Choose Ellipse or Circle from this dropdown menu to define the shape of the gradient.

Gradient base

Select a screen location from this dropdown menu to determine where to base the gradient. Choose from Closest-side, Closest-corner, Farthest-side, and Farthest-corner.

X Center Position (%)

Enter a percentage to offset the gradient from the gradient base horizontally. 50% will center the gradient horizontally.

Y Center Position (%)

Enter a percentage to offset the gradient from the gradient base vertically. 50% will center the gradient vertically.

Starting color

Select the starting color of the gradient.

Ending color

Select the ending color of the gradient.

Intermediate color

Select an optional middle color of the gradient. If the input is empty, no intermediate color will be applied.

Background image

Upload or choose a dynamic image to use for the background. Tip: Use an image from our royalty-free library.

Center the image

Centers the image when the user resizes the browser window.

Make image as wide as parent element

If the parent element is wider than the image selected, the image will automatically resize to cover the entire element.

Repeat the image vertically

Repeat the image vertically if the image is smaller than the page's height.

Repeat the image horizontally

Repeat the image horizontally if the image is narrower than the page's width.

Background color if empty

When using a dynamic image, it may take a few milliseconds for the image to load. This color displays until the image loads. The default is transparent.

Apply a parallax effect (desktop only)

Check this box to scroll the background image more slowly than the elements on the page. This gives an impression of depth.

Parallax speed

Choose a number from this dropdown menu to control the depth effect of the parallax. With a value of 0, the image will not scroll. With a value of 1, the image will scroll at the same speed as the elements.

Video file

Upload an mp4 file or choose a dynamic video to use for the background.

Fallback image

On mobile devices, videos are not displayed due to data usage limit concerns. Upload an image to use in this case.

Play video silent

Check this box to show the video without sound.

Stripes (deprecated)

Define screen-wide stripes for the page.

Other ways to learn

User manual articles

Last updated