Page Designer-Page Settings

Page Settings Overview and Capability

Page Settings allows users to configure the display and behavior options for the page.
Page Settings only affects the specific page users are working on, not all of the sites within the site collection. Page settings would need to be duplicated for multiple pages in a collection.

Within Page Settings, there are four tabs: General, Custom Code, Side Menu, About

Note: if in Fixed Width Canvas, there will also be a Layout tab

 

General Tab 

Summary: There are four tabs within Page Settings. The main driving force between display style will belong to the General Tab. The main driving force between performance is the Side Menu Tab. 

The General Tab is primarily responsible for page display and page structure. This tab enables users to customize the style of their page as well as the overall structure. Some options within the General Tab are exclusive to certain types of canvases.
The tabs listed below are for Responsive Canvases. The ones for Fixed-Width Canvases possess their own section towards the bottom.  

Title

Assign a title to the page you are creating/editing. 

The title does not change the name of the page seen within your SharePoint site collection. It changes the name that appears on the tab of your browser.

Background Color

Set a background color to the page.
Note: When you have a background image, you will not be able to see the Background Color. 

Note: When exporting a page, you will not be able to export background colors and images set in Page Settings. For more information about our Smartshare Export functionality please follow the link.

 

Background Image
Set a background image to the page. Page Settings retrieves images from SharePoint. 

As noted earlier, You will not be able to see any background color if there is a set background image. 

Best Practice Tip: The recommended background image size for Web is typically a resolution of 1250x800, which translates to either 72 or 96 dpi.
It is important to select the best resolution because certain images can be stretched out, pixelated or even duplicated to fit the page.  

 

Background Image Style
Users can set a Background Image Style from selecting one of the options via drop-down menu.

The option Tile fits the selected image in a repeated left to right display sequence

 

Key differences between the rest of the options: Stretch, Fill, Fit, and Center. 

• Stretch:  image to fit its content to the frame of the site. Stretch may stray from its original image aspect ratio 
• Fill: fills the site frame with the image content. Fill does its best to maintain aspect ratio
• Fit maintains it's true aspect ratio and ensures the entirety of the image is within the frame of the site page
• Center focuses and zooms into the center of the image, cutting off some of the surrounding edges of the image. 

 

3D Style:
This allows you to set the 3D style tiles on the page.

• Rectangle type tiles (Image, Video, Delve Tile, etc) will have a 3D effect.
• The 3D style color is based on the tile color.

 

Font Family

Set the default font on all tiles on the page.

Note: Tiles can still be set independent of the page font family by using the Override Page Font option in the tile settings.

Upgrade Insecure Requests MetaTag

The html header tries to upgrade content from http to https, and if it can't, it drops that content. To prevent content dropping, add a meta tag in the html header.
Unchecking the box allows ability to display http based content. 

Best Practice Tip: Enable if custom scripting links with outside images and scripts. Have it on as an extra layer of safety.

Enable Wireframe mode

This allows users to toggle on/off a sketch prototype based style of page. The end users have the option to toggle Wireframe on/off from the end user page.
For more information, check out the Wireframe mode article for further detail.

 

Page Width

Fixed Horizontal Padding
Set the horizontal padding. When this option is toggled on, you have control of the horizontal padding (left and right). Users enter in numeric values to set the horizontal padding in units of pixels.
This option helps to avoid scrollbars on smaller devices.

 

Custom Code

The Custom Code Tab allows for more flexible page customization by allowing the implementation of custom code. The options are primarily responsible for generating and customizing Document Heads and Footers.

 

Side Menu 

The Side Menu Tab allows users to create and customize he side menu bar for the page. Options within this tab enables users to customize the display, performance and behavior options for their page.

Enable Side Menu
Tick this to enable the side menu. When selected, the below options will be available for customization 

Link Source
This chooses the source of the link. Options include the global menu and the quick launch menu.

Link Target
Selected link will open in the side menu will open up in:
New window, Modal window or Load in place of the page. 

Override Page Font
This option allows you to override the font style set for the canvas. 

Font Family
When Override Page Font is checked-This allows you to choose the font type that you would like to apply to the side menu.
If a Font Family is not chosen, the font will be in the style that was chosen within the General Tab of Page Settings.

Width
Sets the width of the side menu when opened. 

Collapsed Width
Sets the width of the side menu when collapsed.

• If the width of the side menu is enlarged, it does not push your background image, but instead layers on top.

Best Practice Tip: It is important to set the collapsed side menu width with accordance to how the rest of the page is designed. If there is a background image, having a large collapsed side menu width would cover it up.

Open On Load
This option can be turned on or off. When turned on, the side menu will already be opened when the page is loaded. When it is turned off, the side menu will remain collapsed until a user opens it.

 

About Tab

The About Tab informs users of the current version of Design 

 

Fixed Width Layout Page Settings

The Layout Tab is only available on the fixed width canvas.

Snap to Grid
This allows you to choose whether the tiles snap to grid when placed on the page.

Snap to Other Tiles
his allows you to choose whether the tiles snap to each other when placed on the page.

 

Fixed-Width Canvas Options

• Page Padding These four options (Left, Right, Up, Down) applies padding to all the rows on the page.
• Page Margin Style This option allows you to set the margin style of the page. The options included are Centered and margin. NOTE: This option is only available option on the Fixed Width Canvas.
• Width This allows you to set the width of the page. NOTE: This option is only available on the Fixed Width Canvas.
• Height This allows you to set the height of the page. NOTE: This option is only available on the Fixed Width Canvas.