Overview of full-width and boxed pages and rows

Beaver Builder Theme has settings in Customize > General for both page layout (full width, boxed) and Content width, which controls the width of the content in the header and footer. In the content area of the page, Page Builder has both Global Settings and individual row settings for the width of the row's background and content. Here's how they all work together.

Boxed page layout example

Here's a diagram showing a boxed page layout, with various combinations of row settings. 

A boxed layout means that the web page appears in a box in the browser, with space appearing around the box as your browser screen is sized larger than the box size. The box border is shown with a brown line in the following diagram:

Boxed page layout

The theme sets the page layout and header/footer width

The boxed layout is set in the Beaver Builder Theme's  General Layout settings: in this example, Width = Boxed and Content width = 960 px. This sets the width of the header and footer content (in this example, the two columns in the top bar) at 960px. You don't have to enter the width of the box – it's automatically calculated by adding 80 px to the content width, which produces a buffer between the header/footer content and the box on both sides as the screen is resized. 

Page Builder sets the row width

This example shows three different combinations of row and content width, set for each row in the layout.

  • In the first row, Row width is set to Full width. With a boxed layout, this means the row background stretches the full width of the box (not the full width of the browser).
    Row content width is also set to Full width, which means the content also stretches the full width of the box, or less depending on the margins and padding you set for the row.
    Both of these default settings are inherited from Tools > Global Settings, or you can change them for the individual row.
  • In the second row, Row width is set to Full width.
    Row content width is set to Fixed.
    Max width of the fixed row content is set at 600 px. This setting comes from Tools > Global Settings and can't be changed in individual row settings.
  • In the third row, Row width is set to Fixed. This means the row background will only stretch to the Max Width specified in Tools > Global Settings.
    Row content width is also set to Fixed, which means row content also has a max width of 600, or less depending on  margins for the content.
    Max width is set at 600 px. This setting comes from Tools > Global Settings. The default max width is 1100 px.

Full-width page layout example

Here's a diagram showing a full-width page layout with various combinations of row and row content settings. A full-width layout means there is no box, and the content is free to stretch from side to side to the edge of the browser window. 

Full-width page layout

Theme Settings

The full-width layout is set in the Beaver Builder Theme's  General Layout settings: in this example, Width = Full Width and Content width = 960 px. This means that the width of the header and footer content is 960 px, but the header and footer backgrounds stretch to the edges of the browser window.

Page Builder Settings

The row and row content widths are set in the Page Builder Global Settings. When rows are set to full width, then content within the row can be set to either full or fixed width. The fixed width of the row is set by the max-width setting in the Page Builder Global Settings. In this example, the row is set to full width and the max width is set to 600 px. With a full-width page layout, the row background extends all the way to the edge of the browser screen.

This example shows three different combinations of row and content width in a full-width page layout.

  • In the first row, Row width is set to Full width. With a full-width page layout, this means the row background stretches the full width of the browser.
    Row content width is also set to Full width, which means the row content also stretches the full width of the browser, or less depending on the margins and padding you set for the row.
    Both of these default settings are inherited from Tools > Global Settings, or you can change them for the individual row.
  • In the second row, Row width is set to Full width, so the row background extends the full width of the browser.
    Row content width is set to Fixed.
    Max width of the fixed row content is set at 600 px. This setting comes from Tools > Global Settings and can't be changed in individual row settings.
  • In the third row, Row width is set to Fixed. This means the row background will only stretch to the Max Width specified in Tools > Global Settings.
    Row content width is also set to Fixed, which means row content also has a max width of 600, or less depending on  margins for the content.
    Max width is set at 600 px. This setting comes from Tools > Global Settings. The default max width is 1100 px.