Design Elements • Sweet Briar College

Design Elements

In addition to the basic content styles for text on webpages, a range of design elements (editable content layouts and widgets) can be added to pages to make them more engaging, informative, and dynamic.

Content layouts

Content layouts are blocks of editable content with pre-formatted style and layout. They can be inserted into most content areas, and only their content can be edited, not their design and structure.

To add a content layout:

Select “Content layout” from the Insert menu while editing; choose a layout from the dropdown list; and click Insert to place it where you’re at on the page.

Here’s the list of layouts:

  • Accordion
  • Callout Box, Informational
  • Contact Info
  • Call to Action (Green)
  • Call to Action (Pink)
  • Featured Links
  • Featured News
  • Landing Page Call to Action (used on landing pages only)
  • Landing Page Full Width Image (used on landing pages only)
  • Related Links
  • Testimonial / Pull Quote

Here are a few examples:

Testimonial / pull quote

“Testimonials are entered as content layouts.”
- Sweet Briar Web Team

Related Links 

To insert related links, use a content layout. This includes include a block of basic text content on the left and related links box on the right. 

You can change the heading from “RELATED LINKS” to something more specific if appropriate. After you type in the text for the link, remember to add the link using the editing toolbar. 

Accordions

This is the first header 
  
This is content for the first accordion. Use the green + at the bottom right to add another accordion section.
Second header
  
Lists, paragraphs, images, widgets, and other content layouts can be added here.

Formatting Text

Header and paragraph styles are used not only to change the style or formatting of text, but to provide a clear hierarchical structure to content on a page so screen readers can easily navigate and jump to different sections. To optimize the accessibility of our site, please use the header styles to distinguish different sections while using paragraph text for the bulk of the page content.

To style a header or paragraph, highlight the text you’d like to change, select the Paragraph menu next to Formats, and select the desired or appropriate style. To remove a style, highlight the text and select a new one in the menu.

Formats

Formats are visual styles which can be applied to specific elements in content; for example, links, headings, or lists. Heading and paragraph styles are used not only to change the style or formatting of text, but to provide a clear hierarchical structure to content on a page so screen readers can easily navigate and jump to different sections. To optimize the accessibility of our site, please use different heading styles for different sections while using paragraph text for the bulk of the page content.

To use a format, place your cursor within the element you wish to format while editing, and select from the Formats menu. 

For example: to make a link into a navy button, highlight the link and check BUTTON (NAVY) in the Formats menu.

This is a test link

To remove a format, highlight the item again, and uncheck the format in the Formats menu.