Page Boxes & Backgrounds

The page structure is 5 boxes with 10 editable sections each.  We've made it easy to add styles to the boxes which will go 100% wide meaning all your content will be on top of a background image.  Each box has space for you to upload a class, add an image for desktop and another for mobile. 

CSS Box Styles

• content-max-width
  • removes the content gutter and allows sections to go 100% of the page width
• padding-zero
  • removes standard padding around box, best used with content-max-width if you have a layout with more than 1 section per row

Gap Styles

Sets the gaps within the box.  Gaps are the space between each section.

• gap-2
• gap-5
• gap-8
• gap-10
• gap-15
• gap-20

Background Colors

Use the CSS to place a solid background color.  This is one of the 9 colors that are controlled by the theme and the same class names you would use for a section.

Stock Photos

The button inside the background panel for Stock Photos will open the quick find photo gallery.  Each photo is labeled with the class name that you can copy / paste into the CSS edit space.  The photo will become the background across the box and behind any section within it.

Set Box Styles / Images

In the edit mode, on the right side of the page manager, you'll find the layout and background controls.

Press the backgrounds button and open the style interface panel.