Layout Builder

Layout Builder is currently available on the Basic Page content type for SiteNow v3 websites.

Basic pages need to be saved (with a page title) before layout builder is visible. Once created, a horizontal menu will appear with a "Layout" tab.

This is where you will be able to view and use the available SiteNow v3's layout builder blocks to build your page. Heads up: the save button is at the top of the page.

NOTE: By default, a basic page will load with an initial "header" section. This includes the page title and breadcrumb links. 

The Layout Builder blocks serve as a page building tool to create complex layouts with a mixture of different content. Below you will find information about how to work with the builder blocks within the administrative interface.

Sections

Sections are top-level content blocks that wrap around and contain other content blocks.

ADD/REMOVE A LAYOUT BUILDER SECTION

To add a section, click the “+ Add section” button on the layout builder page. This will prompt a right sidebar menu to appear allowing you to select how you would like the layout builder blocks to be displayed in the section. 

When hovering over a section, in the upper left corner there will be an “x” icon followed by a “Configure [Administrative Label]” link. If you want to remove a section, select the “x” icon. This will prompt a message in the right sidebar menu where you can either confirm or cancel the removal of the section.

EDIT A LAYOUT BUILDER SECTION

When hovering over a section, in the upper left corner, there will be an "x' icon followed by  a “Configure [Administrative Label]” link. To edit a section, click on the linked text.

With the One Column Layout, you can change the styles applied to the section block.

With the Two, Three and Four Column Layouts, you have the option to change a section’s Administrative Label, styles and column width

SECTION LAYOUT OPTIONS

The section layout determines the available blocks and how they are allocated. Not every block is available with every section layout. 

ONE COLUMN LAYOUT BUILDER BLOCKS: Articles Block, Banner/Hero Block, Call to Action Block, Card Block (with the horizontal variant style), Collection Block, Event Block, Events Block, Image Gallery Block, People Block and the Text Area Block

TWO, THREE AND FOUR COLUMN LAYOUT BUILDER BLOCKS: Articles Block, Card Block, Call to Action Block, Collection Block, Event Block, Events Block, Image Gallery Block, People Block, Statistic Block and the Text Area Block

SECTION ADMINISTRATIVE TITLE

This isn’t displayed to users, but is helpful to organize content when working with more than one section on a page.

NOTE: This is only available with two, three and four column layouts.

    SECTION STYLES

    Section styles allow you to change the background, margin, padding, layout and vertical alignment of a section. More than one style can be applied to a section.

    BACKGROUND: Black, Brain pattern, Brain pattern black, Brain pattern reversed, Gold, Gray

    CONTAINER: Edge-to-edge, Full width (has side margins), Narrow, Normal or Wide

    NOTE: Margin refers to the space around an element.

    SPACING: Add extra bottom spacing, Add extra top spacing, Remove bottom spacing, Remove default column spacing, Remove default vertical spacing, Remove top spacing and Remove default spacing

    NOTE: Padding refers to the space between an element and the content inside it. So if there's a border, it will add the extra space to the content that's within the border

    STYLES: Grid 1x3, Grid 3x2, Grid 3x2 (stacked) and Vertical alignment: Start

    HEADER SECTION

    Every Basic Page is provided with a ‘Header’ section, which contains the page title, breadcrumbs, and featured image (if one has been added through the page Edit tab).

    Blocks

    Blocks are displayed within a section. Not all content blocks are available with every section layout. 

    AVAILABLE BLOCKS:

    Articles, Call to Action, Card, Collection, Event, Events, Hero/Banner, Image Gallery, People, Statistic and Text Area.

    There's also a 'More...' block that provides the ability to embed existing content fields (body), system information (menu links) and existing webforms.

     ADD/REMOVE A CONTENT BLOCK

    Content blocks provide users an opportunity to configure, move or remove the block after it is implemented on a page.

    pencil

    Locate the edit pencil icon that is displayed in the top right hand corner of the content block you want to update. If you want to make changes to an existing content block, select the  'Configure' menu link. Once you're satisfied with the changes you've made, select the 'Update' button and save the page. If you want to remove a content block, select 'Remove block'. This will prompt a sidebar menu on the right side of the page to appear for you to either confirm or cancel the removal.  

    REORDER CONTENT BLOCKS

    There are currently two ways you can reorder content blocks:

    1. Content blocks can be reordered by dragging the block up or down a page to the desired location
    2. Select the 'Move' menu link when editing a block. In the righthand sidebar menu, you will see the existing sections on the page. Regions can provide insight on the section's selected layout. If a section has a three column layout, there will be three regions within the section. If a section region has existing blocks, you can drag your block (by selecting the drag handle icon) and reorder the blocks as desired.

    SITENOW TIP: If an 'Administrative Title'  isn't provided for a block, the Block Label defaults to display the block type (ie Card). If there are multiple card blocks in a region, it would be very difficult to differentiate between four  'Card' blocks. An 'Administrative Title' will not only make it easier to distinguish the difference between duplicate block types, but it will also help when finding a specific section.