Skip to main content
All CollectionsSite Building
Site and Page Layout
Site and Page Layout
Updated over a week ago

Layout is controlled by the two menus shown below: Default Page Settings and Local Page Settings. Default Page Settings apply to all pages on a site; Local Settings override Default Settings for individual pages.

Default Page Settings

Apply to all pages, including new pages, unless a page has local settings applied.

Local Page Settings

Apply to the current page only and override Default Page Settings. Duplicating a page with local settings retains these.

When a setting is modified locally, the red diamond ⬥ indicates that it deviates from the default. To reset, click the diamond.


Background Colors

There are various ways of controlling background colors in both default and local settings. Page Background controls the background color of the entire page (which can be overridden on individual pages) and Content Background sets the background color of just the area that the Page Width is set to. Content Background sits on top of Page Background, so that the two can interact when the color opacity is changed.

As with all these settings: the Background option in Default Page Settings applies to every page on the site, and the Background option in Local Page Settings applies to the current page only. To remove a background color, open the color picker and click on the checkered square with the red diagonal line.

Borders

Borders can be applied on a site-level as well as on a page-level. And here again these can be overridden locally, on individual pages. The Page Border adds a border to each page individually, including pages that are visible next to other pages (when Pinned or Stacked), the Site Border applies to the site as a whole, and sits “around” all the pages on the site.

Each border menu has options for Width and Radius. Click the “···” icon to adjust the Top, Right, Bottom, and Left properties individually.

Layering Effects

The Layering Effects menu (in Local Page Settings) contains modifications that change how a page visually interacts with pages below it, and can be used on pages that are pinned, overlaid, or have a Backdrop or background color.



Additional site-wide options can be found in the “Site Settings” menu:

Image Settings

The Image Settings menu contains options to change the way images are displayed by default (which can in turn be overridden for individual images).

Images are, in most cases, not allowed to grow beyond the width of their container. This container is always a column, gallery, or page. So if the page width is 100%, the image will be too. When an image is added to a set of columns or a gallery, it will scale to the width as dictated by each function’s configuration. Scale by Width — Images are limited to a chosen width and will be an arbitrary height. Scale by Height — Images grow to the width of their container, but are limited to a chosen height, useful for smaller images like logos or icons. Scale to Fit — Images are scaled to a percentage of the available viewport size.

Other image effects like Border and Drop Shadow can also be applied (and in turn overridden for individual images by right-clicking an image and opening the Effects menu).

Read more about images here.

Quick View Settings

Active Link

When text links are used for site navigation, these can be styled to indicate the currently active page. Choose a color or click the “</>” icon to add other styles, like font-weight: bold;, text-decoration: underline;, etc. By default links to “Home” are excluded from this, but can be included by checking the “Apply to Home link” option.

Color Filter

Adds a color overlay that applies to all site contents: images, text, videos, etc. This can be used to subtly adjust your overall color scheme: soften, intensify, invert or make monochromatic.


Did this answer your question?