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/".
- 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.
- 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".
Choose the Pencil Icon across from "container", then select the color for the background.
- To format column layouts in the Bootstrap layout, select the container you would like to edit and choose "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.
- Add elements to the empty columns which should now be formatted for your data.
The end result can look something like this.
- 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.
In the grid row container select "Insert new element" and a "Single Image" element will automatically populate within the container.
Define the image element like normal. Recommended image width is 1920px in JPG format.