Skip to main content
CMS Example Site CMS Example

Text Block Module

Best Practices

  • Useful for creating a visual break to highlight particular content or when changing subjects within a page.
  • Use images with caution. Many images won't look as good against the dark blue background as they do in the standard WYSIWYG.
  • Don't overload the text block. Even though this can hold more text than the other modules, it is still meant to add visual interest in order to highlight content. It is not a replacement for a normal page.

To create a new text block module:

  1. From the New Content menu, click Modules->Text Block. The module will be placed in the _modules folder by default. You can create multiple sub-folders within _modules as needed (similar to images and files). To create multiple instances of this module, copy the module and rename it. Edit each module separately.
  2. Click Edit to bring up the edit screen.
  3. Complete these fields:
    • Block name: This will default to "text-block". Change it to something that describes the module.
    • Headline (sentence case, left aligned):
      • Note: This will be formatted as H2. You can start with H3 in the module.
    • WYSIWYG (indented from Headline):
      • Standard WYSIWYG controls, but pre-formatted. H2 will be all caps to match other modules, for example.
      • Keep the Dark Blue background in mind if you are doing anything other than basic formatted text.
    • Module Style choose one:
      • Navy Blue, Grit (default option)
      • Solid Navy Background
      • Navy Blue, Grit Orbs
      • Custom Background Image
        • Use the file chooser to upload a background image.
        • The width of the module on the homepage template is 1200 pixels.
        • For shorter text you can use 1200 x 410 pixels, the same size as the Callout Content module.
        • The image will zoom as needed to fill the space if you have a large amount of text.
        • Overlay Color: applied to the image so the text remains readable - choose blue or navy

Examples

Text Box Module: Headline

How it works

The Text Box module features a headline plus an unlimited WYSIWYG field for all of the text below the headline.

All headlines and text display in white, on a blue background with a choice of patterns. You cannot change background color or text color, and there is no option for a graphic button like those found in other modules.

Other formatting

The Text Block module lets you add formatting to the main body of text. For example, this Text Block uses two H3-level headers (How It Works and Other Formatting) to break up the content into two sections.

You can also add other formatting to the Text Box, such as:

Text Box Module Styles

Choose from the following four background options:

Navy Blue, Grit

Used in the module above. This is the default option if no option is chosen.

Solid Navy Background

As the navy blue, yellow grit, but with no yellow accent in the corner (used below in the what not to do section).

Navy Blue, Grit Orbs

Grit orbs will shift on small screens to avoid overlap with text as much as possible. Used for the background of this module.

Custom Background Image

Upload your own background image with either a blue or navy overlay. Used in the next two modules on this page.

 

Using a Background Image, Part 1

Select Module Style: Custom Background Image to upload your own background image.

Images will be modified by the CMS to fit the space of the module. Don't select images that will look strange if zoomed it on. Don't select images that will look strange with text floating on top of it.

Appropriate background content would include landscapes, patterns and groups of people that don't need to be identified.

The width of the module on the homepage template is 1200 pixels. The height of the module will depend on how much text is in the WYSIWYG.

We suggest starting with a 1200 x 410 pixel image and adjust as needed.

This example is using a blue overlay.

Using a Background Image, Part 2

This example is using a navy overlay.

Notice how the same image displays differently due to the smaller amount of text.

What Not to Do

Text problems:

There is too much text in this module.

  • Headline is too long. The text looks best when when it's only a few words long, or two lines long at the most.
  • Body text is too long. The text box's deep-blue background can look overwhelming on a page when when it is too large, and it's hard to read long stretches of text in this format. If you have a lot of text to use on your page, it's best to use a WYSIWYG block of formatted text instead of a module.
  • Break up your text into shorter paragraphs or bullets. This is a best practice for websites in general, not only for the Text Block module.
  • Read more about writing for the web.

Here's an example of a v5 text block module, and how it looks when you have too much text in the headline and also too much text in the field below

Note: What follows is a bunch of Latin filler text to demonstrate how too much text can sometimes be too much of a good thing. It can be difficult to read this much text against a colored background, without any other formatting to break up the text into scannable chunks or lists. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.