Transcript
In this Quick Tip, we're going to learn about the page element.
The page element is the fundamental element that contains all other elements. By default, every new page you create uses the page element.
The page element has its own property editor that you can view when you double-click. In the property editor, we have page-specific properties that we can define—starting with the page title, which will be displayed in the tab of the browser. We can write whatever we want to name this page.
Next, if you wanted to designate your page for a native app, you would do so by checking this property. This will help you submit your app to the App Store and give you some insight as to how you can achieve this, while also creating a property for naming this page as it would appear on a mobile device.
You can also explicitly create a mobile version to load for this page on mobile devices. This is an alternative to making your page responsive. With this property set, the user viewing this page on mobile would be redirected to the page specified here, which should be designed for mobile use.
One property that each page has is Type of content. Since pages can have data sent to them—like, for example, if you wanted to navigate to a user's profile—you must declare what type of content this page should expect.
In the case of a profile page, the page's Type of content would have to be set to User. Then, with a workflow or a link, you specify which particular thing—or user profile—should be sent. Then, on your page, you have access to a new data source: Current Page's Thing, or in this case, Current Page's User.
This can only be utilized when Type of content is set, and it gives you access to the thing’s data that was sent to this page.
Keeping with the user profile example—if the thing that was sent to the page has a slug, the slug will be used in the URL automatically. If not, we can set the Backup field for URL to represent the thing in the URL using a custom field instead.
You can also customize the width and height of the page—though you can also do this by moving the page handles, like so.
The page element even allows you to define SEO properties to help it rank in search engines and have context when the link is shared. Here, you can write a static or dynamic title, description, or image.
Lastly, you can include HTML in the page header—like if you have a script that you needed to run directly on the page, or are comfortable with HTML. This is for advanced users only, as custom code can easily break your app if you're unsure.
That's it for this Quick Tip. For more, be sure to check out bubble.io/academy.