Site and Page Layout
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, a diamond ⬥ indicates that it deviates from the default. To reset, click the diamond.
Width
This controls the width of pages. The value is the percentage of the available width. The three buttons to the right of this setting align the page horizontally to the left, center or right within the available width.
Padding
Padding controls the spacing around a page’s content. To adjust the padding on each side individually, click the “···” button to expand the menu. Set the padding in the Default Page Settings menu to something appropriate for most pages on your site and override it for pages that don’t follow a repeatable convention (like Pinned or Overlay pages).
Text Align
This sets the alignment of content to the left (default), center or right. To align a specific piece of content within a page specifically; select the text or media and find the Text Alignment option in the top menu bar.
Inset
Inset adds spacing outside a page’s edges. It is particularly useful when the Content Background color is set on a page, to offset the position of the page’s edges. Click the “···” button to adjust the Inset of each individual side.
100% Height
This option gives a page the full height of the browser window, at minimum. The three buttons to the right of this setting align the page’s content vertically to the top, center or bottom within the available height.
Tip: To make a page that scrolls within itself; first Pin it, or set it to Overlay and also set 100% Height. Once the content overflows the height, it will scroll within its content bounds rather than scrolling with the rest of the site in the window. You can then use Inset to offset the location of the scrollable page.
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.
To add a grain texture to a Background color, open the color picker for any Page or Content Background and find the Noise option at the bottom. Change the grain size with the S / M / L buttons. Noise is available in Default Page Settings, Local Page Settings, Site Settings, and on Gradient and Wallpaper backdrops.
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 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, Color and Radius. Click the “···” icon to adjust the Top, Right, Bottom, and Left properties individually.
Page Shadow
This puts a visible shadow around a page’s content. There are controls for offset (click the “···” button to adjust individual horizontal & vertical offset values), blur, spread, color, and a checkbox for inset (which will position the shadow inside the page’s content).
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.
Read about Layering Effects here
Limit height to content
If 100% Height is enabled and a Content Background color is selected, this checkbox becomes available. When turned on, instead of extending to 100% of the available height, the Content Background will be limited to the height of content present on the page.
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
Read about Quick View here.
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.
Horizontal Rule
To insert lines into the contents of a page, use a horizontal rule. The line will extend to the width of its container. There are settings for their height, color and margin (click the “···” button to expand the menu to adjust the top and bottom margins separately). To use a horizontal rule on a page, click the horizontal line icon in the top menu bar.
Site Border
The Site Border is applied once, around all visible pages. There are settings for width, color, radius and inset (the spacing between the border and the viewport edges). Click the “···” icon to adjust the top, right, bottom, and left properties individually.
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.
Site Background
This is the base background color for the entire site.
Spelling & Grammar
This uses the browser’s built-in spelling and grammar checker to highlight spelling and grammar mistakes.