Layout Components & Templates

Layout Components

Layout components are used to create the structure of your page. Most layout components are used to add columns to your page. 

Adding Layout Components

1. When on the edit screen of a page you can get to the layout screen by clicking on the "Layout" button in the top right of the screen.
2. Drag and drop the layout component you wish to use onto the page. You can add layout components inside other layout components when needed.
3. Once you have your layout components, you can click back to "Content" in the top right and add content components to the newly created columns.

Grid Layout Components

The grid layout components follow a grid of 12. The numbers you see on the components represent how many pieces of 12 that column will take up. 4+4+4 would be three columns, each column representing 4 of the 12 spaces needed to complete a row. 8+4 would be two columns, the first taking up 8 of the 12 and the second taking up 4 of the 12. If you are unsure of the sizing of the these column layout components, just drag one onto the page and if it suits your needs.

Fog Row

Add the Fog Row component to the page will create a row with a gray background. This will not add any columns, though you can add a layout component inside of the Fog Row to add columns to it. Do not add the fog row inside a column.

Horizontal Tabs

Horizontal Tabs is a unique layout component and is only used to house the horizontal tab content component. Please see the the horizontal tab page for more information. Do not add any other layout components inside of the horizontal tabs.

Page Style Wrap & Site Width Wrap

You will not need to use these layout components on general pages. They are used in setting up the framework of the site.

Templates

Templates are the variations in the shell of the site. You can change your template at the bottom of the layouts panel. Below is a list of the templates that have been set up for your site.

Default

Default is the most trimmed down version of the template. This template includes all the header and footer components.

Page Base

Page Base starts with the Default template and adds the banner image area, site width, and the white overlay that comes up over the banner.

Page Default

Page Default is the default template that is used when creating a new page. It has everything from the page base, but also include the breadcrumb and the page intro to make sure those consistently get on every page.

Page Default with Media Area

The Page Default with Media Area, is similar to the Page default except the top area is split into two columns for when a video or image is needed right next to the title.

Program Details

Program details is used only for the page displaying the details of the programs. Please do not select this for another page.

Site Guide

Site Guide is the default template for the site guide. If you are adding pages to the site guide please use this template.

Site Guide - Component Page

The site guide template, set up for page components information.

The Salesian Center Page

The Salesian Center Page template is used for all pages under the Salesian center and will add the additional styles needed to keep this section branded for The Salesian Center.