CommonSpot - Creating a 50 Year Anniversary (Bootstrap) Layout

How to use the CommonSpot 50 Years Layout

  • Start by creating a page using the normal method and selecting "50 Year" for the page Category. The Anniversary website is located in the sub site "/50years/".Creating a 50 Year Page

  • After hitting "Next", you can define a Hero Image. This will be the image displayed at the top of the page spanning its full width.
    The recommended width for a hero image is 1920 px using JPG format. Make sure to try you best to keep the file-size small for these large images.
    If you define a caption, this will give the ability to view additional information about the photo for the user.
     Hero Image

  • The default page will give you one formatted text block to use and one large unstyled container.
    If you wish to keep a single background for all of your content, you can start styling this container directly.
    If you wish to break up your content with colored backgrounds, add additional "container" elements inside of the main container for styling. (One for each block of color separation.)

  • To style a container's background color, select the container and choose "Style".
    Container Select

    Choose the Pencil Icon across from "container", then select the color for the background.
    Container Style Options

    Save

  • To format column layouts in the Bootstrap layout, select the container you would like to edit and choose "Layout Properties".
    Layout Properties

    Select the "Grid" tab and start defining rows.
    The default "Basic container is unstyled and flows over the entire page, you can change this to one of the Bootstrap Container options, and add more rows to the container here.
    Container Grid Options

    Save

  • Add elements to the empty columns which should now be formatted for your data.
    The end result can look something like this.

    50 Years


  • If you would like to add more full width hero images to the page, you can set them up by selecting "Fluid Bootstrap Container - Hero Image" for a grid row.
    Hero Image Grid Row

    In the grid row container select "Insert new element" and a "Single Image" element will automatically populate within the container.
    Hero Image Container

    Hero Image Element

    Define the image element like normal. Recommended image width is 1920px in JPG format. 



Keywords:commonspot, 50 years, anniversary   Doc ID:78502
Owner:Matthew G.Group:UW Parkside
Created:2017-12-04 12:32 CDTUpdated:2018-04-10 10:34 CDT
Sites:UW Parkside
Feedback:  0   0