Layout defaults

BB Theme has settings in Customize > General for both page layout (full-width, boxed) and content width. Both settings control width in the theme header and footer, not in the content area.

​

Full-width page layout

Here’s an example in which Customize > General > Layout > Width is set to Full width and Content width is set to 1020px. The header and footer background colors take up the entire browser width, whereas the content in the header and footer is limited to a maximum width of 1020px. As the browser width decreases, the distance between the row edges and the content in the header and footer grows smaller but never disappears, because a minimum distance of 80px is maintained. Once the responsive breakpoint is reached, the header may change to a different header and nav layout.

​

Boxed page layout

A boxed layout means that the web page appears in a box in the browser, with space appearing around the box if your browser screen is sized larger than the box size. Here’s an example in which Customize > General > Layout > Width is set to Boxed and Content width is set to 1020px. You don’t have to enter the width of the box – it’s automatically calculated by adding 80px to the content width. Boxed layouts give you a couple extra settings in Customize > General > Layout:

• Spacing field - Change the distance between the top and bottom of the box and the browser window
• Drop shadow - Alter the size and color of the drop shadow that appears around the box edges to give the box a 3D appearance

​

Content width in Beaver Builder layouts

Row and content width in the content area of the page is set in the Beaver Builder editor, either in Global Settings or in individual rows. The screenshots in the previous sections show a content area with various row and content widths so you can see how they compare to the Customizer layout settings in the header and footer areas.

​

Responsive behavior

​

Breakpoints

BB Theme uses default breakpoints to control when layouts adapt for different screen sizes:

• Medium devices: 992px
• Small devices: 768px

You can customize these breakpoints in Customize > General > Layout.

​

Header layout changes

At the medium device breakpoint, certain header layouts automatically adapt:

• Nav Right changes to Nav Centered (menu below logo)
• Nav Left changes to Nav Centered (menu below logo)
• Nav Centered + Inline Logo changes to Nav Centered (menu below logo)

At the small device breakpoint:

• Navigation menu collapses to a Hamburger icon or MENU button
• Vertical navigation layouts switch to centered layout with mobile toggle

​

Content area responsiveness

The content area layout adapts based on your settings:

• Sidebars: Can be set to hide on small devices or appear below content
• Footer widgets: Stack vertically on smaller screens
• Top bar columns: Stack and center on smaller screens

​

Layout settings in the Customizer

Access layout settings at Customize > General > Layout:

​

Width

Choose between:

• Full width - Content can span edge to edge
• Boxed - Page appears in a container

​

Content width

• Default: 1100px
• Range: Typically 960px - 1400px
• Affects: Header and footer content width

​

Boxed layout options

Available only when Width is set to Boxed: Spacing

• Top and bottom spacing around the box
• Default: 20px

Drop shadow size

• Size of shadow around the box
• Larger values create more prominent shadows

Drop shadow color

• Color of the box shadow
• Dark grays look most realistic

​

Using Beaver Themer

​

Best practices

​

Content width

• Keep content width between 1000-1200px for optimal readability
• Match your theme content width to your Beaver Builder row max-width for consistency
• Test your layout at different browser widths

​

Boxed layouts

• Use subtle drop shadows (2-5px) for modern designs
• Consider using a subtle background pattern or color outside the box
• Ensure adequate spacing (15-30px) for breathing room

​

Full-width layouts

• Use background colors or images to create visual separation
• Consider limiting text line length in the content area for readability
• Take advantage of edge-to-edge backgrounds for hero sections

​

Common layout combinations

​

Classic website

• Layout: Boxed
• Content width: 1020px
• Header: Nav Centered or Nav Bottom
• Background: Light color or subtle pattern

​

Modern business site

• Layout: Full width
• Content width: 1100px
• Header: Nav Right with fixed header
• Background: White or minimal

​

Portfolio site

• Layout: Full width
• Content width: 1200px
• Header: Nav Bottom or None (with fade-in)
• Background: Dynamic or minimal