Don't See What You're Looking For?

Help Us Improve

Browse by Collection

Skip to end of metadata
Go to start of metadata

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.



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.

The placeholder button in the visual wordpress editor

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.

editing the button in the visual wordpress editor

editing the button's link  in the visual wordpress editor

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.

Callout Box

Here’s what it looks like in the editor:

Callout Box  in the visual wordpress editor

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

Covid-19 Dashboard layout built with columns and callout boxes

Small Text

Makes the selected text smaller.

Small text



Advanced Elements

Expander

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

Before:

closed expander

After:

open expander

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

expander in the visual wordpress 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:

the expander is always open in the editor

What you see on the front end:

expander is closed unless user has clicked

Media Object

example of 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:

media object in editor

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

adding media to the media object

media added to the media object

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…

small media in the media object

Or large...

large media in the media object

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

resize handle for the media object

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.

two columns side by side

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 vertically stacked, as on a mobile device screen

Two Columns - 50%/50%

Editor view:

two equal width columns in the editor


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:

Advanced CSS Class Styling Framework

  • No labels