Use the body element and manage all your site elements and content.
When you start building a website, you start with a blank page. The body element represents this page. Any time you create a new page, you’ll be creating a body element. This is where you 'll add all your elements and content. Any element that you add to your page will be nested inside of the body element. No matter how many elements you nest inside other elements, they will all be nested and organized in the body element.
You can access the body element through the Navigator or the navigation breadcrumb bar at the bottom of the Canvas. Since it’s the outermost element on the page, the body element cannot be deleted or moved.
The body element can be styled, like any other element, using classes. You can use the same class to style other pages across your project. However, some styling options are not available for the body element, including display settings, position properties, opacity, and transforms. You cannot specify a custom width for the body element either. That’s because the width of the body element is automatically handled by the browser. However, you can always specify how wide your content will span across your page by adding sections, containers, columns, and div blocks to the body of your page.
Any content that's wider than the viewport will overflow the body element, resulting in horizontal scrolling, which you rarely want. You can prevent this by being mindful of element widths and negative margins. You can always hide the overflow on the body element, but we don't recommend it.
If you want all the pages in your project to have the same styling — such as the same background color on all pages — you can style the Body (All Pages) tag. All styling set on this tag will be inherited by all body elements across your site. And any new pages that you create will have the same styling as well.
To style the Body (All Pages) tag:
When you set typography styles on the body, these styles are passed down to all its children, meaning all text elements on your page.
So, if you edit the font family on the body tag, all elements on all pages will inherit the same font family. However, changing the font family on any individual text element will override the styles inherited from the body element. Learn more about text style inheritance.
Issue: One known issue with collapsing margins is where the content in the footer of a page is cut off. And, you are not able to access it or scroll to it even in the Designer. That's because the content is being pushed out of the body element at the bottom of the page. This issue usually occurs when using an absolutely positioned navbar.
Solution: To avoid this issue, don’t add top margin on the first element on your page when that element doesn't have a fixed position. Instead, add top padding to the body element.
Something went wrong while submitting the form. Please contact email@example.com