Skip Navigation

Section

Section Component

Sections are used to organize your page and are required before you can begin adding components. You can divide your page into multiple sections to help structure your content and apply different styles or layouts to each one.

Usage

  • Creating visual breaks between topics 
  • Applying different background colors or images 
  • Making your page easier to read and navigate

How to Add the Component

Click within the Content Parsys to insert new components.

  1. Click the + icon 

  2. Choose Section Component
arrow pointing to the + icon on the component menu and another arrow pointing to the Section Component option on the insert new component menu

How to Configure the Component

  1. To start using the component, click anywhere on the component and a menu will appear.

  2. Click the wrench icon to enter configure mode.
An arrow pointing to the wrench icon on the configure toolbar.

Section Configuration Fields

General 

  • ID
    This is where you assign a unique name (or ID) to the section. 

  • CSS Class
    This is where you can apply predefined OU styles to your section.

Advanced

  • Background Style
    Allows you to choose from a list of pre-defined styles with different colors.

  • Background Image
    Allows you to specify a specific image to use for a section background. To ensure full accessibility, the image will be automatically darkened to allow for the appropriate level of color contrast between the text and background.

 

Section configuration settings. Two tabs show General and Advanced options. General include ID and CSS Class. Advanced include: Background Style and Background Image.

Working within the Component

Setting a Background Color

  1. Click the dropdown list under the Background Style heading.
     

  2. Select the background color you want to use.
     

  3. Click the check mark to save your changes and close the window. To cancel without saving, click the X.

Tip: Use background colors to visually separate content sections or highlight important information.

Available Color Options

  • White 
  • Black (Use sparingly)
  • Dark Grey
  • Light Grey
  • Crimson
  • Light Blue (Use Sparingly)
  • Dark Blue  (Do Not Use)
Configuration settings of the Advanced tab. Dropdown list for Background Style is show. Dark Grey is selected and a check mark shows where to save changes.

Setting a Background Image

  1. Drag and drop your image from the assets in your side panel. (See the note and tip below for guidance on choosing the right image.)
     

  2. Click the check mark to save your changes and close the window. To cancel without saving, click the X.

Note: Do not upload images into the component directly from your computer. You must first upload images to the Digital Asset Manager (DAM) and then select them from there.

TipRecommended sizes for background images are 2000 pixels wide. The length that you will need will vary on your content but 750 pixels is a good place to start.

Configuration fields of the section showing an image in the Background Image area. The Check mark is highlighted to show how to save changes.

Examples - Sections with Background Colors

Section with black background color.

Section with dark grey background color.

Section with light grey background color.

Section with light crimson background color.

Section with light crimson background color.

Example - Sections with Background Image

Created by the Oklahoma Territorial Legislature in 1890, the University of Oklahoma is a doctoral degree-granting research university serving the educational, cultural, economic and health-care needs of the state, region and nation.

The University's first president, David Ross Boyd, arrived in Norman in August of 1892. By 1895, there were four faculty members, three men and one woman, and 100 students enrolled.

Today there are more than 30,000 students at the University. It is Norman's largest employer, and the city itself has grown to a population of more than 110,000 residents. 

The Norman campus serves as home to all of the university's academic programs except health-related fields. The OU Health Sciences Center, which is located in Oklahoma City, is one of only four comprehensive academic health centers in the nation with seven professional colleges. Both the Norman and Health Sciences Center colleges offer programs at the Schusterman Center, the site of OU-Tulsa.

OU has more than 2,600 full-time faculty members, and has 20 colleges offering a variety of bachelor's, master's, doctoral and doctoral professional, as well as multiples graduate certificates.

It is a majestic campus with meticulously manicured grounds. There are sculptures by internationally renowned artists, serene park and fountain settings, and soaring Prairie Gothic architecture in every direction.

The Fred Jones Jr. Museum of Art has been acclaimed as one of the finest university art museums in the country, and it recently received the largest gift of French Impressionist paintings - the Weitzenhoffer Collection - ever given to a university.