Page Element (Legacy)
Last updated
Was this helpful?
Last updated
Was this helpful?
The Page Element is the fundamental element that contains all the other elements.
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 uer'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.
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 example.com/page/1449154312665x293260311940684900.
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 example.com/page/work-1449154312665x293260311940684900.
This property defines how the page will be displayed in the browser. It can be dynamic by using the 'Insert dynamic data' button.
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.
Enter the name of the app to be displayed on the homepage of a user's phone.
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.
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.'
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.
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.
Choose a dynamic image for Facebook to display.
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.
Select a background style from this dropdown menu to apply a backdrop. Choose from None, Flat color, Gradient, Image, and Video.
Choose the background color for the page.
Choose either Linear or Radial from this dropdown menu.
Choose the orientation of the gradient from this dropdown menu. Selecting 'Custom' displays a Direction degrees field to set the direction in degrees.
Enter a number between 0 and 360 for the direction of the gradient.
Choose Ellipse or Circle from this dropdown menu to define the shape of the gradient.
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.
Enter a percentage to offset the gradient from the gradient base horizontally. 50% will center the gradient horizontally.
Enter a percentage to offset the gradient from the gradient base vertically. 50% will center the gradient vertically.
Select the starting color of the gradient.
Select the ending color of the gradient.
Select an optional middle color of the gradient. If the input is empty, no intermediate color will be applied.
Upload or choose a dynamic image to use for the background. Tip: Use an image from our royalty-free library.
Centers the image when the user resizes the browser window.
If the parent element is wider than the image selected, the image will automatically resize to cover the entire element.
Repeat the image vertically if the image is smaller than the page's height.
Repeat the image horizontally if the image is narrower than the page's width.
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.
Check this box to scroll the background image more slowly than the elements on the page. This gives an impression of depth.
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.
Upload an mp4 file or choose a dynamic video to use for the background.
On mobile devices, videos are not displayed due to data usage limit concerns. Upload an image to use in this case.
Check this box to show the video without sound.
Define screen-wide stripes 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 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.