Creating Layouts Using Content Blocks

The CMS offers users a simple way to build and edit page layouts using content blocks. There are 3 steps to create a layout using content blocks: creating a page, creating a content block, and assigning the content block to the page. These content blocks fit inside a 12-column grid row. These rows will define the layout of your page. Before getting started creating a page and content block, it is best to understand how this grid works.

Download PDF Instructions

12-Column Grid

  1. Every page is composed of the main content section with a right rail. By default, this main content section spans the entire width.

    12 Column Grid Example Picture

  2. The main content section can have an unlimited number of rows. Those rows provide a wrapper that contain columns.

    Row Example Picture

  3. Each content block spans a specific number of columns inside a row. In the example below there is a row of 12 columns, two rows of 3 – 4 columns, and another row of 12 columns. There can be any combination of column spans that add up to 12, such as 3 + 3 + 6 = 12. Anything that adds up to more than 12 columns will be pushed down into a new row.

    Content Block Example Picture

  4. If the content blocks do not span the full 12-column width of the row, that content block will by default float to the left. Ideally all content blocks should add up to the full 12-column width.

    Empty Column Example Picture

Creating the page

  1. The correct type of page needs to be created before assigning content blocks to a page. When creating the page select the campus display data page.

    Creating the Page Picture

  2. Name your page title in the required field.

    Naming the Page Picture

  3. Any information added inside the body copy will appear before any content block.

    Adding information in the title and body copy fields picture.

  4. After you have created content block you can assign it to the page using the data component options. This will be reviewed later.

    Data Component Field Picture

  5. By default, every page that is created will be added to workflow. Use the advance in workflow option to send to test site when the page is ready for review on staging, or send to live site to publish the page.

    Advance In Workflow Picture

Creating the content block

    1. Start by creating the content block under your people components folder. Navigate to: Internal Components > Content Blocks > Content Blocks: Department
    2. Right click on the appropriate folder, and go to New, then click on Component
    3. Naming the content block with a “CB:” or “Content Block:” and your department folder name such as “MarCom” will help when assigning the content block to the page.

      Data Components with Data Field

    4. It is important to select the appropriate rule of the component to use on your page. Select the create content block when creating the content block.
    5. Information field descriptions. There are multiple types of content blocks. The information field descriptions for this document are only referencing the standard type of content block.

Name a Component with a Rule

      1. Title: This field is required. The title of the content block will display at the top unless you hide using the component style options. (The title can be hidden using hide title option under component style section)
      2. Body copy: Any information inside the body copy will display inside that content block and adjust to the column width. You content can include links, HTML, lists, etc.

        Filled Out Data Components with Data Field

      3. Link: This option allows the user to link to a page, a document or a URL.
      4. Link text: This determines the text of the button. (Only for button option)
      5. Image: The image for your content block.
      6. Column span: This option allows the user to determine the column width of the content block. (See 12-column grid for more information)

        Link, link text, image, component style fields.

      7. Hide title: This option hides the title of the content block. This is helpful when the user wants to display the title below the image instead of above. In that case the title would have to be added back inside the body copy.
      8. Enable button: This option adds a blue link button to the bottom of the content block.
      9. Highlight: This option adds a light gray box to the background of the content block.

        Advance In Workflow Options

Information fields

  1. Title
  2. Body copy
  3. Link
  4. Link Text
  5. Image
  6. Column span
  7. Hide title (currently showing in this example)
  8. Enable button
  9. Highlight

Header and picture with paragraph of how a content block looks.

Advance In Workflow

Use the advance in workflow option when the content block is ready to be published. Click on advance in workflow > send to live site. Publishing the content block won’t publish the page. The page must also be published before the content block is visible on that page.

Advance in Workflow Menu Options: Send To Live Site, Check In Only, Remove from Live Site, Send to Test Site

Assigning the content block to page

  1. The content block can now be assigned to the page using the data components page options.

    Empty Data Component

    Picking a Data Component to Fill The Empty Data Component

  2. Use the pick button you can assign the content block to the page.

    Picked Data Component in Field

  3. The content blocks can be rearranged using the up and down arrow options.

Image optimization

Image optimization is important because it determines the quality of the image and the image file size. A smaller file size will load quicker on your page and keep visitors engaged. A well optimized image should have a good balance between image quality and image file size. Before uploading an image to your page it is important to determine the pixel width size of the parent container.

Recommended Image sizes

Column SizeRecommended Image Width
2 Column 94px
3 Column 160px
4 Column 220px
5 Column 282px
6 Column 344px
7 Column 406px
8 Column 468px
9 Column 530px
10 Column 592px
12 Column 720px

A display of the previous table on how each column will look.

Pixlr Express

One of the recommended applications to use when optimizing your images is Autodesk® Pixlr® Express®. It is free to use. To sign up for free visit https://pixlr.com/express

Re-size of the image

  1. Click on browse button to open your image.

    Choosing from browse, open URL, webcam, collage, and choosing browse on the Pixlr Express website.

  2. Locate the image on your computer, and open it.

    An opened picture on the Pixlr website.

  3. Click on the adjustment button at the bottom left.
  4. Click on the resize button.

    Clicking the adjustment button at the bottom left, then the resize button, allowing us to resize the image.

  5. Use the dimension fields to resize the image. Leave the keep proportions option selected so that the image does not get skewed when resizing.
  6. When the size is ready click on the apply button.

    Changing the dimensions of the desired image by changing numbers on the width and height options in the Dimensions field on Pixlr.

  7. Use the zoom scroll to zoom into 100% after you resize your image.

    Using the zoom scroll to zoom out far, allowing us to understand the page-load impression of our users.

    Using the zoom scroll to zoom in to 100%, allowing us to understand the page-load impression of our users.

  8. When the image is ready, click on save button at the top right of the screen.

    Pressing save at the top left corner of the screen to save the image.

  9. Name the image, and select the level of quality using the quality scroll option. The file size is determined by the the image size and quality. 100% will not produce the best optimized image. It is recommended to stay in between 50% – 80% for a decent quality image. This guide illustrates the different ranges.
    • Low – 10%
    • Medium – 30%
    • High – 60%
    • Very High – 80%
    • Maximum – 100%
  10. Click save to save the resized image to your computer.

    Choosing the quality on a slider, as well as choosing a name, and pressing save.