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.
- Every page is composed of the main content section with a right rail. By default, this main content section spans the entire width.
- The main content section can have an unlimited number of rows. Those rows provide a wrapper that contain columns.
- 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.
- 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.
Creating the page
- 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.
- Name your page title in the required field.
- Any information added inside the body copy will appear before any content block.
- After you have created content block you can assign it to the page using the data component options. This will be reviewed later.
- 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.
Creating the content block
- Start by creating the content block under your people components folder. Navigate to: Internal Components > Content Blocks > Content Blocks: Department
- Right click on the appropriate folder, and go to New, then click on Component
- 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.
- 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.
- 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.
- 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)
- 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.
- Link: This option allows the user to link to a page, a document or a URL.
- Link text: This determines the text of the button. (Only for button option)
- Image: The image for your content block.
- Column span: This option allows the user to determine the column width of the content block. (See 12-column grid for more information)
- 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.
- Enable button: This option adds a blue link button to the bottom of the content block.
- Highlight: This option adds a light gray box to the background of the content block.
- Body copy
- Link Text
- Column span
- Hide title (currently showing in this example)
- Enable button
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.
Assigning the content block to page
- The content block can now be assigned to the page using the data components page options.
- Use the pick button you can assign the content block to the page.
- The content blocks can be rearranged using the up and down arrow options.
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 Size||Recommended Image Width|
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
- Click on browse button to open your image.
- Locate the image on your computer, and open it.
- Click on the adjustment button at the bottom left.
- Click on the resize button.
- Use the dimension fields to resize the image. Leave the keep proportions option selected so that the image does not get skewed when resizing.
- When the size is ready click on the apply button.
- Use the zoom scroll to zoom into 100% after you resize your image.
- When the image is ready, click on save button at the top right of the screen.
- 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%
- Click save to save the resized image to your computer.