Types of Content
Use buttons to initiate an action for users. For example, "Donate," or "Log in" might be appropriate declarative statements for a button.
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.
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.
Click the Sharing this Calendar tab and check the box to make the calendar public.
Next, go to the Calendar Details tab and copy 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.
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.
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.
After adding the clipping block, begin clipping by clicking the begin clipping button.
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.
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.
When you're done selecting blocks to clip, click the "clip page" button, and the clipped content will now be shown on your page.
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.
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.
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.
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
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.
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.
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.
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.
To embed an existing event, click on the Find event button, search for the event you'd like to embed, then click Select.
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.
Events can be added to a feed that is designed to keep event information orgaizned and have a blue box around them.
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 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.
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.
You can embed a Google Form using this block. All you need to do is find the URL for your form.
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.
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.
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.
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 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.
Two column grid: 556 x 417 pixels
Three column grid: 316 x 236 pixels
Four column grid: 262 x 192 pixels
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.
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.
- 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
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.
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.
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.
- 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:
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
Spacers allow for better separation between content
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.
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.
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.
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.