Types of Content

Buttons

Use buttons to initiate an action for users. For example, "Donate," or "Log in" might be appropriate declarative statements for a button.

Screenshot of the button block

Byline

The byline allows you to publish the author of the page as well as the date at the top of each page. This block is useful for news and announcements.

Screenshot of the byline block

Calendar

To embed a Google calendar, first you will need to share the calendar publicly and copy the Calendar ID. Start by going to Calendar Settings.

How to get to Calendar Settings

Click the Sharing this Calendar tab and check the box to make the calendar public.

Screenshot showing Share this Calendar tab and checkbox for the public

Next, go to the Calendar Details tab and copy the calendar ID.

Where to find the Calendar ID

Finally, paste the Calendar ID into the Calendar content block on the page your are editing and select how you want the calendar to display under options.

The calendar ID pasted into a calendar content block

Callout

Callouts allow you to visually draw attention to something that is temporal and important on your site. The callout should not be used as a permanent solution to draw attention to a link or content. Callouts should be used for Important changes such as road closures and upcoming changes.

Screenshot of the Callout Block in the editor

Clipping

You are able to clip individual blocks on a page and insert them into your own page. This allows you to publish content that belongs to someone else, and when they update it, the content updates on your page as well.

To start clipping start by adding the clipping block to the page where you want the content of another page.

Screenshot of clipping icon

After adding the clipping block, begin clipping by clicking the begin clipping button.

Screenshot of clipping block before clipping

After clicking "Begin clipping" you will now be in clipping mode. You can navigate to the page with the content you want to clip by using the site's navigation or if you already know the URL you can enter the full URL.

Screenshot of clip content view

When you are on the page you clip by clicking the "clip part of this page" button to be able to select the blocks you want to clip from the page.

clipping content from a page

When you're done selecting blocks to clip, click the "clip page" button, and the clipped content will now be shown on your page.

editor previewing the clipping

When you publish the page, the clipping will look like any other block on the page.

When you create a clipping, the original content blocks will display a scissors icon in the block toolbar, which is only seen when you're in the editor. The scissors icon is a quick way to see if this block is being used on another page.

The clipping icon in the block tool

If the owner of a clipped block tries to delete a block with the scissor icon, they will be shown what pages are using that block.

editor letting you know your content is clipped

Columns

Columns allows you to split your content area into two, three, or four columns for desktop devices and some tablets. You can insert any number of other blocks within columns.

Column block

Columns stack on top of one another for tablets and phones, so try to not refer to the columns as left or right, as they could instead just as easily be above and below

Two columns

Two columns on desktop.

Two columns

Two columns on mobile.

Courses

Courses allow you to list course descriptions for a specific subject code (i.e. BUS, CST, BIO). The block options allow you to display all courses with the listed subject code or just the undergraduate or graduate courses.

screenshot of courses block

Definition list

Definition list blocks allow you to create a two-column layout. The item on the left is "defined" by the items on the right. Definition lists are very useful for a display of dates and deadlines, for example.

An example of a definition list content block.

An example of a definition list content block.

Documents

The best practice is to avoid PDFs and other file attachments as much as possible. Mobile users find accessing PDFs or Word documents difficult, and users prefer to browse your website rather than look at document files.

However, on rare occasions, you might need to attach a file. Just add a document block, upload the file, and give the document a name to insert it into your page. Give documents a name so when it is downloaded it is easy to use.

Do not include a link to download a free PDF viewer such as Adobe Acrobat. Today's browsers and operating systems support PDF files without needing to download an additional application, and chances are any product you link to will be updated more frequently than you update your link, meaning you wind up linking to an outdated version anyway.

Screenshot of the documents block

Embed event

screenshot of embed event icon

Embed event allows you to embed a single event on your page. You can either embed an existing event or create a new event to embed. Embedded events display important event details and link to the full event page, which contains more details. It is important to know you can only have one event per event block. If you wish to embed multiple events you will need to use multiple event blocks.

screenshot of embedded event

To embed an existing event, click on the Find event button, search for the event you'd like to embed, then click Select.

screenshot of find event interface

To embed a new event, click the Create new event button and proceed with filling out the empty fields of the Create Event page. Once you fill out the event information, click save and that event will be embedded on the page you were previously on.

screenshot of the create new event page

Event feed

Events can be added to a feed that is designed to keep event information orgaizned and have a blue box around them.

screenshot of event feed icon
Screenshot of an event feed

To add a event feed to your page simply use the event feed block. Once the event feed block is saved you a page on your site you will be able to add events to the event feed from the event page's blue gear.

Feeds

Feeds allows you to add a listing of posts to a page. Feeds can be used for news items, events, blog posts, or any type of content you want listed chronologically. You can select how many items you want to appear in the feed. You can specify a tag to limit the feed to a certain category of post, or allow users to filter the feed by all categories themselves.

An example of  a feed on the College of Business site.

An example of a feed on the College of Business site.

Adding an item to a feed

After a page is created, under the blue gear you will have the option to add that page to a feed. If the page is an event page you will also be able to add it to an event feed.

screenshot of add to feed options under the blue gear

Form

You can embed a Google Form using this block. All you need to do is find the URL for your form.

Where to find your form ID
Screenshot of form block

Heading

Headings help organize a page's structure. There are three levels of headings: main, sub, and sub-sub. You can change the levels of a heading by hovering over it and selecting one of these options.

Headings can link to another page. Paste in the URL to another page to make a header a link.

The Make Collapsible option makes anything below this header, until it reaches another header, initially hidden from the user until the header is clicked. The page you are reading right now is an example of collapsible headers in action. Collapsible headers are useful to fit a lot of content into a page without forcing users to scroll around to find what they are looking for.

Headings should be written using sentence case. That means capitalizing the first word and proper nouns only. Sentence case is easier to read online and the rules are simple - no need to worry about whether or not to capitalize that preposition!

Keep headings short there is a limit of 200 characters for headings.

Header block

Hero image

A Hero image is a large banner image usually placed at the top of a page. It is a powerful communication tool that should include a call to action. A hero image should be one large image that publicizes a single key message.

screenshot of a hero image block

Image

Image blocks are useful for diagrams or photographs. Because users might be experiencing your images on a variety of screen sizes, you should never use image blocks to upload a photo of a flyer or other image with text. Instead, use other content blocks to type out the information in the flyer image.

After adding an image block to your page, choose upload and then a new window will appear where you may drag an image file into the window from your desktop or use the Choose a file button to find the file.

If you are editing your page with your phone or tablet, tapping Choose a file will allow you to upload a photo directly from your camera or photo roll.

filestack upload tool
screenshot of an image block

The Image description is a required field and helps users who have visual impairments understand the image. Image descriptions do not appear on the page but are read aloud to users who require a screen reader. Descriptions for images must be at least 7 characters long but no longer than 80 characters. If your image is a chart, graph or diagram it may be necessary to provide a text narrative alongside the image in order for visually impaired users to access the information in the image. Image captions are optional and appear below an image.

After your image is uploaded, you can hover over the image and you will see Change button that allows you to change the image.

Image block options

Image Grid

Image grids are used to create uniformity across columns when displaying images with accompanying headings. Text can also be added below headings if needed. If a URL is provided in the link field, the image and the accompanying heading will both be linked. You have the option between a two column, three column or four column grid.

Image dimensions

Two column grid: 556 x 417 pixels

Three column grid: 316 x 236 pixels

Four column grid: 262 x 192 pixels

Screenshot of an image grid

Lists

List blocks have three display options: Unordered with bullets, ordered lists with numbers and unstyled. All function in the same way. Hitting the Return key on your keyboard or screen will create a new list item.

Unordered list

Screenshot of an unordered list

An unordered list

Ordered list

 Screenshot of an ordered list

An ordered list

Unstyled list

 Screenshot of an unstyled list

Unstyled list

You can indent list items by clicking on the arrows to the right of each list item. To delete list items, select the x symbol.

Screenshot of an indented list

Block options

  • Link: Allows you to link the image by entering a URL
  • Caption: Displays a caption below the image
  • Height: Allows you to change the size of an image
  • Photo Credit: Displays a photo credit
  • Pull to Right: Pulls the image to the right of the page and allows subsequent text blocks to wrap around the image
  • Make Full Width:Results in the image spanning the full width of the page with no white space on the left and right

Map

Maps allow you to add an interactive map to your page where you can add Pins, Lines, and Boxes to the map to help provide more detailed directions.

Screenshot of the map block

Person

A person block embeds a section of a person's directory profile into the page. All you need is the person's email address.

You can select either the Full Profile display (default), which includes name, title, department, contact information, office location and headshot.

Or you can choose the compact view, that just lists name, title, department and contact info.

Screenshot of the person block

Quote

Quote blocks are used to cite external sources, especially useful in pages like alumni profiles, where you can include a lengthy and laudatory quote from the alum.

Quotations should not be used to apply formatting, make your department's mission statement bigger, or any other situation other than a direct quote from a person.

Screenshot of a quote block

Block options

Quote Block
  • Pullquote: Pulls the quote to the right side of the page, changes it to a vertical display, and allows subsequent text blocks to wrap around it.
  • Source: The name of the person who said the quote
  • Link for source: Allows to you to the link the source to a web page by entering the URL

Here's what this pullquote would look like with wrapping text:

Screenshot of a pullquote

Sound

To embed a sound file from SoundCloud you need to find the embed code. To find the embed code click share > embed > Copy and paste the code into the sound block.

When posting an audio clip be sure to include access to a transcript to be fully accessible to all users. Scribie offers a free service if you are the publisher of the content

Screenshot of sound block

Spacers

Spacers allow for better separation between content

screenshot of the spacer block

Tables

Tables are useful for displaying certain types of data. Make sure the top row of your table contains column headings. You can add as add rows and columns as you need, but the best tables are simple.

Example of a table

Text

Text blocks are the first block you start with on a page. Text blocks are broken up into paragraphs so if you begin typing and hit the Return/Enter key, you will notice a new text block appear.

To apply formatting to text within a block, highlight the text you wish to format. A toolbar will appear over the selection giving you the option to make the selected text bold, italic or linked. To remove formatting, highlight the text you wish to remove formatting from then select the bold icon to remove bold formatting, select the italic icon to remove italics, and select the link icon to remove a link.

Selecting text

Selecting anywhere in a text box shows available formatting tools.

Lead paragraph

Lead paragraphs are introductory paragraphs that appear at the top of a page. The text is slightly larger to draw attention. They should summarize the content of the page. To make the first paragraph a lead paragraph, open the block options for the text block and select the Lead Paragraph checkbox.

Video

You can easily embed a video from YouTube or Vimeo into your page by adding the video block and pasting in the URL to the video. When uploading a video from youtube make you can create branded accounts from your CSUMB account and share ownership with other CSUMB employees to allow proper delegation of the account.

Video Block