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 automatically create a Body element, which is where you'll add all your future elements and content. Any element that you add to your page nests inside the Body element. No matter how many elements you nest inside other elements, they will all be nested and organized in the Body element.
Accessing the Body element
You can access the Body element through the Navigator or the navigation breadcrumb bar at the bottom of the Canvas. Because the Body element is the outermost element in the page, it cannot be deleted or moved.
Styling the Body element
Like any other element, you can style the Body element by using classes, and 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 position properties and opacity.
Additionally, you cannot specify a custom width for the Body element. This limitation is because the browser automatically handles the width of the Body element. However, you can always specify how wide your content spans across the page by adding Sections, Containers, Quick Stacks, 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 is rarely desirable. You can prevent unwanted horizontal scrolling by being mindful of element widths and negative margins. You can also always hide the overflow on the Body element, but it’s not recommended.
Styling the body tag
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. Any newly created pages will also use the same styling. Read more about styling HTML tags.
To style the Body (All pages) tag:
- Go to the Style panel (press “S” on your keyboard)
- Click inside the Selector field
- Select the Body (All pages) tag from the HTML Tag menu
- Style away
Note: To quickly access the Selector field, select any element on the Canvas, press Command + Return (Mac) or Control + Enter (Windows), type to create a new class or use the up/down arrows to choose an existing class, hit Enter. Learn more about the Selector field shortcut.
Text style inheritance
When you set typography styles on the Body, these styles pass down to all the Body’s children, meaning all text elements on your page.
Note: We recommended making typography style changes on the Body (All pages) tag to ensure uniform typography styling on all pages.
For example, if you edit the font family on the Body (All pages) 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 (All pages) tag. Learn more about text style inheritance.
Known issue: content at the bottom of the page is not visible in the Designer
Issue: A known issue to be aware of is when the content in the page footer is cut off — you aren’t able to access it or scroll to it, even in the Designer. This is referred to as collapsing margins, and is caused by the content being pushed out of the Body element at the bottom of the page. The issue usually occurs when a Navbar is absolutely positioned.
Solution: To avoid this issue, don’t add top margin to the first element on your page when that element doesn't have a fixed position. Instead, add top padding to the Body element.