In This Guide

Modules are stylized bits of content that you can use, and reuse, on your various assets. This topic provides detailed instructions on creating and applying module styles in your Brightspot site.

Module overview

The following diagram illustrates a typical page structure for a blog post. Within the main section there are six modules: two above the blog post, two below, and two to the side.

Module placement

Another use for modules is in section pages—media-rich tables of contents to assets within the section. Good examples of section pages are at the website Inspire Confidence, where there are sections dedicated to topics such as courage, happiness, and innovation. The following illustration is Inspire Confidence’s section page Perspective.

Component overview 2.png

This section page has four modules:

  • The top module is rich text containing a single graphic. This module serves as the section title.
  • The second module is a list of videos related to nature.
  • The third module is a list of videos related to the military.
  • The fourth module is a list of videos related to hope.

These modules are stacked on top of each other.
Modules are part of page structure, which means that you can define them anywhere in the content hierarchy. Most enterprise publications define page structure, and associated modules, at the global, site, and section levels.

Applying a module style

You can apply a module's style to one of the following content types: homepage, package, page, section, and tag.

To apply a module style:

  1. Search for or create an asset from one of the following content types: homepage, package, page, section, or tag.
  2. Under Main, under Contents, click add_circle_outline. The Add widget appears.
  3. Select one of the custom style groups, and then select one of the styles.
    Curated Style Group In Add Widget.png
  4. Complete your site's workflow and publish the asset.

Configuring a style group

Some content types, such as pages, sections, and tags, use modules to lay out and format text. You can configure style groups to predefine settings and styles associated with a theme's modules. For example, you can predefine a module's text or background color, guaranteeing a consistent appearance across multiple assets in a site.

To configure a style group:

  1. Click menu > Admin > Sites & Settings.
  2. In the Sites widget, select the site for which you want to configure module's style, or select Global to configure a module's style for all sites.
  3. If necessary, apply a theme to the site. Under Main, under Theme, select a shared or one-off theme.
  4. Under CMS, expand Style Groups.
  5. Under Curated Style Groups, click add_circle_outline. A form appears.
  6. In the Display Name field, enter a name for this style group. This name appears in an asset's Contents list.
  7. Under Styles, click add_circle_outline. A list of modules appears.
  8. Select the module you want to configure. You return to the Edit Site widget with a form for the selected module.
  9. Toward the right of the widget, select more_horiz> Styles. A widget appears.
  10. Fill out the fields as required.
  11. Repeat steps 7–10 to add additional module styles to the style group.
  12. Click Save.