Try ShortPoint nowIntroduction
The General Layout Options for Modern Pages are now available in the ShortPoint Theme Builder. If you have used these options for Classic Pages before you should be familiar with the way they work. If you haven’t used them before, then this guide is for you. You can control the layout of the site to modify its appearance like so:
New General Layout Features
The General Layout settings for Modern Theme Builder are now active and various options can be tweaked in order to achieve the desired look and feel, similar to how the Theme Builder works for Classic Pages.
Clicking on these settings will now offer the following options that you can select from a dropdown list to customize your Intranet site:
Full (default)
Boxed
Frame
Let’s go through each one by one and find out what they do.
1. Full Layout (Default)
The Full Layout is selected by default and it represents the way the site looks without any customizations. Select this option to reset any General Layout settings you might have applied.
2. Boxed Layout
The Boxed Layout option will add spacing on the left and right sides of the page, narrowing it down.
It also opens up a set of features that can be further tweaked to customize the look of the page as you can see from the following screenshot:
These options are:
Box Width: You can select either a percentage value or a fixed pixel value. This represents the width of the page you are customizing. For example, if selecting a 92% width value, there will be a 4% margin applied to the left and right of the page, totaling 100%, which is the width of the browser viewport
Enable Box Shadow: Enabling this option will add a shadow delimiting the Box from the outside content.
Shadow Depth: This option becomes available if the previous one is selected and it controls how wide should the shadow effect be.
Enable Box Border: Enabling this option will add a border which further delimits the Box from the outside content.
Box Border Width: This option becomes available if the previous one is selected and it controls wide the border will be. The value is set in pixels
Box Border Color: This option controls the color of the previously set border.
Here is an example of these customization options being applied to a Modern Page on a Team Site:
3. Frame Layout
The Frame Layout is similar to the Boxed Layout, however it adds a “frame” around the page, on both sides as well as on top and bottom.
It also opens up a set of features that can be further tweaked to customize the look of the page as you can see from the following screenshot:
These options are:
Frame Width: You can select fixed pixel value that will be applied as a margin all around the page you are customizing.
Enable Frame Shadow: Enabling this option will add a shadow delimiting the Frame from the outside content.
Shadow Depth: This option becomes available if the previous one is selected and it controls how wide should the shadow effect be.
Enable Frame Border: Enabling this option will add a border which further delimits the Frame from the outside content.
Frame Border Width: This option becomes available if the previous one is selected and it controls wide the border will be. The value is set in pixels.
Frame Border Color: This option controls the color of the previously set border.
Here is an example of these customization options being applied to a Modern Page on a Team Site:
Background for Layouts and Background behind Boxed/Frame Layout
With the introduction of these new features, we can now also further customize how a Background can be applied to your Intranet pages. In order to do this, you need to navigate to General Settings > Background:
Once there you will see the following options:
These options are identical, however the first set is being applied to the Boxed or Framed layouts and the second set of options is being applied behind the layouts themselves.
Let’s go through them one by one:
Background Image: Path to the image that can be applied inside the Boxed or Framed Layout.
Background Color Overlay: If you would like to add a background color on top of the image you have previously selected, you can do using this option.
Enable advanced settings for Background Image: Turning this option on will expand the set of options that are available for customizing backgrounds.
Background Image Size: Various options for resizing the background image.
Background Image Horizontal Position: Image should be aligned to the left, center or right of the viewport.
Background Image Vertical Position: Image should be aligned to the top, center or bottom of the viewport.
Background Image Attachment: The image can move when the user scrolls or it can stay fixed.
Background Image Repeat: Repeat the image horizontally, vertically, in both directions or not at all.
Background Image Under Box or Frame: Path to the image that can be applied outside of the Boxed or Framed Layout. It will be shown behind the Boxed or Framed Layout, so only a small part of it will be visible.
Color Overlay: If you would like to add a background color on top of the image you have previously selected, you can do using this option.
Enable advanced settings for Image Under Box or Frame: Turning this option on will expand the set of options that are available for customizing backgrounds.
Image Under Box or Frame Size: Various options for resizing the background image.
Image Under Box or Frame Horizontal Position: Image should be aligned to the left, center or right of the viewport.
Image Under Box or Frame Vertical Position: Image should be aligned to the top, center or bottom of the viewport.
Image Under Box or Frame Attachment: The image can move when the user scrolls or it can stay fixed.
Image Under Box or Frame Repeat: Repeat the image horizontally, vertically, in both directions or not at all.
Here is an example of how our site can look with a Background Image and a Background Image Under a Frame applied:
Finally, clicking Publish from the Theme Builder will save these settings and your Modern Page will now have a newly customized Layout applied to it according to the options you have selected.
