How do I build nice looking mobile responsive layouts in UMBC Sites? (using "Insert Elements")

Tell Me

We’ve created a few basic layout components to help you create your pages in the new UMBC Sites Theme. 

To access these elements, in your editor toolbar, click on the Insert Elements menu.

Open

Pro tip: If you don't see the Insert Elements menu, click on the “toolbar toggle” button on the right side of the toolbar

Table of Contents:

Basic Elements

Button

Inserts a pre-styled button that goes with the page theme. The color of the button will be gold in the editor, but it will match the theme color when you view it on the front-end. Users may control both the text and URL for the button.

Open

Edit Instructions:
To edit the text, click into the text on the button, position the cursor, and type. To edit the link, click on the tooltip button, and then the Edit button (with the pencil icon) to edit the link URL. Be sure to click the blue enter button to confirm.

Callout Box

A gray box with content. Use this box to call attention to something within a block of text. Accepts any kind of content. Useful to separate content sections visually.

Here’s what it looks like in the editor:

A more complicated example of using Callout Boxes is the covid-19 stats dashboard:

Small Text

Makes the selected text smaller.

Advanced Elements

Expander

Also known as “accordion”. Starts out collapsed, and when you click, opens up to show the inner content.

Before:

After:

Here’s what it looks like in the editor when you first insert it in the editor:

To change the title, just click on the text Placeholder in the gray bar next to the arrow. You can type in the title, paste content, and also convert text to headings, etc. To add content to the inside of the expander, just click in the Expander content area and type / paste content, or even insert other elements like columns and images, as you normally would.

Note: In the editor, the content area will always be visible. On the front end, the expander will always be collapsed until it is clicked on by the user.

What you see in the editor:

What you see on the front end:

Media Object

This is good for having an image on the left and text on the right, when the image is meant to be smaller. Also nice if you don’t want the text to wrap around the image.

Here’s how it looks in the editor initially:

To add an image, select the text “media goes here” and then click the “add media” button.

One important difference between the “media object” and columns is that you can resize the image inside of the media object and it will resize the elements to whatever size you select.

You can make it small…

Or large...

Just drag the resize handle and the media object will resize to the size of your image.

See this article for the origin of the term “media object”: - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Columns

Creates a row of columns with the indicated quantity and width. If you want additional rows, just insert more columns from the menu underneath your original columns.

Images or other content in the columns will never be wider than the width of the column. This is an important difference between columns and the “media object” element above.

The columns stack vertically on mobile screens. For example, here is a two-column 50%/50% element.

On a desktop, we see two equal-sized columns. On a phone, this stacks vertically. The left-most column will be on top.

Two Columns - 50%/50%

Editor view:

Two Columns - 25%/75%

Editor view:

- The first column is 25%, the second is 75%

Three Columns - 33%/33%/33%

Editor view:

All three columns take up an equal width, 33.33%

Four Columns - 25%/25%/25%/25%

Editor view:

All four columns are an equal width, 25%

Next Topic:

How can I further customize my UMBC Sites website with advanced CSS class styling?