Paragraph Elements

To learn more about the available paragraph types, click on the Accordion blocks below.

A great way to learn what can be done with paragraphs is to play around with them. Be aware that often, less is more, when it comes to page design.

Overview

Each row of content on your page is represented by a separate paragraph element.

Using the paragraph elements you can customize the layout of each page on your site.

To rearrange the order of the paragraph elements on your page you can drag and drop them to reorder where they appear on the page.

Alert Message

The Alert message provides a thin red bar that you can place at the top of your page to show important announcements you want to bring to the attention of your audiences.

1 column background image

The background image is responsive, so it will be resized based on the size of the screen used to view the webpage. The image will be resized/cropped based on the center of the image.

The Background section can be set to Parallax or Image.

Parallax - Gives the background image the perception of movement as the user scrolls up or down the page.
Image - The background image does not change as the user scrolls up or down the page.

This content type can be used with or with out text. If you choose to add text to this paragraph the Content field can be aligned in several ways. It can be set to appear in the left or right half of the paragraph. If neither of these options are selected the text will be centered over the entire width of the paragraph. The text will have a semitransparent white box behind it so that it is readable over the background image.

Menu Bar

You can place up to 4 links in each menu bar.

Example of Menu Bar options

Icons

To add an icon to the menu item in your menu bar, copy the icon code for the icon you want (ie. icon-book ) and paste it into the " p_menu_icon " field.

There are 2 ways to find an icon code:

1. You can find the icon code listed next to the icon on the Font Awesome Icon Cheat sheet

icon-picker-widget.gif

2. You can find the icon code by using the Icon Picker widget within Drupal

In any body field set the Text format to Full HTML (Not in the menu bar field)
Click on the Icon Picker widget. It looks like a smiley face.

A. Select the tab for the Icon type you want to use. (OSU Icons) or (Font Awesome Icons)

B. Click on the icon you want to use

C. Copy the Icon code that appears next to the Font Awesome Icons tab.

Go back to the menu bar field and paste the code into the p_menu_icon field

When selecting multiple icons for a menu they should all be from the same font type. It is not advised to mix OSU Icons with Font Awesome Icons in the same menu.

Menu Style

Select the background color you would like to use for your menu bar. We currently have 6 different background colors that can be used with your menu bar.

Accordion

This page is built with a series of Accordions. The Heading is the text you click on to open up and show the Accordion Body content.

2 column 4/8 or 2 column 8/4

2 column 4/8

This will create a 2 column paragraph. The first column will be 1/3 of the page width and the second column will be 2/3 of the page width.
x x x x | y y y y y y y y

2 column 8/4

This will create a 2 column paragraph. The first column will be 2/3 of the page width and the second column will be 1/3 of the page width.
x x x x x x x x | y y y y

Drupal uses a layout for our pages using a grid of 12. The 8 and 4 represent how many spaces in this grid are used by that column.

These paragraph types are good for when you have a smaller amount of supporting material to go along with your primary content. Examples of what may be included in the smaller column content could be; photo(s), a list of related resources, supporting quote(s).

Divider

This lets you create a bar to divide content on your page.You can change the height of the bar as well as the color of the bar.

Divider Size: Provides you with 3 choices to change the height of your divider bar (Small, Medium, or Large)

Divider Color: Provides with with 7 choices to change the color of your divider bar.

Additional Divider: Provides you with options of None or Horizontal Line. For a solid colored Divider bars that goes the entire width of your screen, you will leave this on None. If you choose the Horizontal Line, then you will want to set your Divider Color to White, and it will place a single line on your page that will span 90% of the screen width.

Paragraph Examples

OSU Paragraph Examples

These examples show how to put these elements together to make an attractive page layout.

Examples of Background Images

This page provides examples of how the background images act in our responsive design.