Master Layouts

Master layouts enable users to establish a page framework with the elements (such as the school logo or navigation menu) that will be appear the same across multiple pages. In addition, master layouts must contain page content areas, which house the editable content that will differ per page.

For example, if you want each page to have the same headers, footers, menus, banner photos, page titles, breadcrumb trails (or other navigation), or background styles you would create a master layout with those elements. Once an item is added to a master layout, it can no longer be edited at the page level, as it will need to be removed directly from the master layout instead.

  1. From School website, select Website management, edit an existing website, and then select Master layouts.

  2. Select a previously created layout or create a new one from + Create new layout.

    Note: Copy layout is a common way to create a new layout to make modifications to an existing layout.

There are three major elements to a page layout:

  • Region: Regions span the entire width of the page and the height is determined by the amount of content within the region. You can have one region within your master layout, or as many as you wish. Having multiple regions allows you to create a banner effect with styles; a banner effect is created by having multiple regions and adding different styles to each region.

    To create a region, you either select Add region when creating a master layout from scratch, or you can click and drag + Add region onto your page. When you do this, a region is automatically created and you are then editing the first row of your region. While here, there is an option for Full browser width which refers to the rows that live within this region. If you select yes, rows then mimic regions and will be the width of the browser window. Normally, content in rows displays with a fixed margin inside the region.

    Select Full browser width if you would like to have wall-to-wall content on your page. If you enjoy having the content on your page to stay within the middle of the screen (margin spaces to the outside of the page), then leave this option as no.

  • Row:  Rows are added to create a new layout of columns on your page. You create new rows by dragging the + Add row into a Region. Once you have added the row to the page, you are then able to create your columns. 

  • Column: A column can be the size of one grid line (35px) or up to 24 grid lines (1185px). Those dimensions can be found here. To add a new column, you just need to select Add column in the upper right corner of the lightbox you are working within.

    To resize these columns, just move your cursor to either side of the grayed out area – your column – and click & drag. You do not need all 24 grid lines to be covered by one or all of your columns. There can be grid lines not used, and sometimes it helps to have that spacing so your content is not so close to one another.

Once the master layout is set up with regions, rows, and columns, content can be added. Using the left hand column on your screen, you are able to select from content types (e.g. text, photos), widgets (e.g. embed code, department picker), navigational items (e.g. menu, breadcrumb trail), and forms (e.g. giving). 

The most important element to add onto the page is a widget called Page content as it determines where content can be added after the page is created. This area can be modified directly from the page, while other area will need to be updated by going back to the master layout. Rows of columns will be added into the Page Content widget, and it is where you place page content that will differ from page to page that uses the master layout you have just created. Without the Page Content widget, you will not be able to edit any pages attached to this master layout.

While you edit the page, it is always helpful to use the View page feature to see a preview of what you are creating. By using this, you will always make sure your vision is being reached.

After the content portion of your layout is established on the page, the paintbrush can be used to add styles to your master layout. When the paintbrush is selected, a preview screen will appear that shows the current page layout. A blue container will appear over the various content items on the page within the layout as they're selected, which indicates that styles can be added.

  1. Select an existing style to apply one to the selected content.

  2. If you wish to style the rows, regions, or the page background, select Edit stylesfrom the bottom of the page. From here you can select the different layout elements to style.

  3. Repeat steps 1-3 until your layout is fully styled the way you wish.

If there is a style that needs to be changed, you will need to stop editing the layout and go to the styles task to edit that style.