Skip to main content

Page Layout and Content Module Options

Content Area Module

Description: The most basic module in web design is the Content Area where you simply type or paste in text and links, and insert images, videos, Google embeds, etc. All of the content on this page is in a Content Area.

Use the Content Area to present:

  • Long-form text with headings and subheadings
  • Google widgets -- Google calendars, Google Maps, Google Forms
  • Videos
  • Images (image will display in full-width no matter the original size of the image)
  • Anchor tags

Available on: Page-Standard; Page-No Side Nav

Recommended image size: Minimum width 800px

See it in use: Apply; Financial Aid (includes a table)

Tip: Break up long blocks of text into smaller, easier-to-read chunks using bullet lists, headings and subheadings, and shorter paragraphs.

Note: After typing or pasting text into the WYSIWYG, always press the ENTER key to ensure proper text styling.

Content Area Example

This is a content area module.

  • The content area module is the easiest module to use when you want to present basic text.
  • The content area module is also useful for tables of data, inline images, bullet lists, numbered lists, and custom formatting with headlines and subheadlines. 

Below are examples of options in the content area WYSIWYG editor.

Two Column Layout

Break up large chunks of content by creating a two column layout. Columns are created by adding an additional WYSIWYG field by clicking the green plus above the WYSIWYG editor menu. The first field will be the left column content and the second field will be the right column content.

Content area module displaying the location of the Green Plus Add Field button above the WYSIWYG editor menu

Horizontal Rule

Create divisions with the Insert>Horizontal Line tool:


Tables

Use the table tool in the WYSIWYG editor to organize tabular data into columns and rows.

Tip: Select the table, then apply a custom style for borders or background color. With the table selected, go to Format > Custom> Table-Bordered or Format> Custom> Table-Striped.

GPA

Academic Excellence Award

3.0-3.24

$2,000

3.25-3.49

$4,000

3.50-3.74

$6,000

3.75-4.0

$8,000

Images

Images display the full width of the content area, no matter what device or monitor the page is viewed on. If a full-width image is too much, consider using a different module that displays images in smaller sizes, e.g. the List-o-matic or Cards.

Videos

You can embed videos from YouTube, Warpwire and Vimeo in your page. Use the Insert/Edit Media tool in the WYSIWYG. Simply paste in the Share URL of the video into the tool. The video will display and play on your page.

Google Widgets

You can display Google calendars, Google maps, and Google forms in your page.

Tip: Grab the embed code from the widget and paste it into the Insert/Edit Media tool in the WYSIWYG.


Google Calendar


Google Map


 Google Form

The WYSIWYG

The WYSIWYG (what you see is what you get) text editor in Cascade provides a limited selection of tools for content creation. Some text formatting options are not provided, e.g. font, text color, and underline. This is because the website template has a style sheet that determines the fonts, font colors, font sizes, links styles and other such formatting and design specifications.

WYSIWYG Features

Edit menu > Paste as plain text

When pasting content copied from another webpage or a document, activate the paste as plain text tool. Then proceed with pasting the content. This will remove extraneous background code that could interfere with display or functioning of the content.

Formats > Headings

Put structure into your content using headings. Headings provide both visual landmarks and a retrievable outline of the content that helps people quickly scan the information and jump to the parts of interest.

IMPORTANT: Apply headings in descending order and DO NOT SKIP levels. Headings are used by screen readers to announce the page structure. Do not choose a heading style just for its font, size or color.

  • Heading 1 - Page title (used only once per page -- so, do not apply Heading 1 to your page copy because it's already being used by the page template)
  • Heading 2 - Main content sections of the page. Note: Our module headlines are marked as Heading 2. 
  • Heading 3 - sub-topics of heading 2 sections. 
  • Heading 4 - sub-topics of heading 3 sections
  • Heading 5 - sub-topics of heading 4 sections
  • Heading 6 - sub-topics of heading 5 sections

Source Code

If you like to edit directly in HTML, go ahead and access the source code editor from the Tools menu or clicking the Source Code icon. The HTML editor supports HTML4 and HTML 5. Inline styles are not supported.

Anchor Tags

Anchors are hidden bookmarks within a page that can be linked to. They provide convenience to users by taking them directly to the referenced section of a page. They are sometimes called jump links or page jumps when used within the same webpage.

The only correct way to add anchors in a page is by editing the source code which is HTML. Follow these easy steps:

  1. From the Tools menu, select Source Code. This opens an editing window of the HTML code. The HTML is a series of sections, each starting with an opening <tag>, indicated by the opening caret "<" and  an element and a closing caret ">". Sections of your page will be indicated by heading tags: <h2>Your Section Heading Here</h2>
  2. So, scan through the code and locate the section where you want an anchor.
  3. Now, place the cursor inside the opening <h2> or <h3> tag. 
  4. Enter a space, then type id="your-anchor-name" in the anchor information so that the tag looks like this: <h2 id="your-anchor-name">
  5. Note: Anchor-name must be lowercase, no spaces. Anchor-name can be used only once per page.
  6. Save the change to the source code to close the source code window.
  7. Save your page. 
  8. To link to the anchored section, create a hyperlink on any Cascade webpage (including the page containing the anchor). In the link tool, select the page containing the anchor, even if it the same page you are currently editing. Then enter the exact anchor-name in the Anchor field. 
link-tool-anchor.jpg
CONTACT

Need Cascade Help? Call or email the IT Service Center.



937-229-3888
Email