Understanding the Divi Builder modules in NUsites

This document will serve as a descriptive and visual guide to all of the branded module options available through NUsites. If you have any additional questions, and to see these modules in action, please visit http://sites.northwestern.edu/divi-modules.


The Accordion module is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. When a new item within the list is opened, the previously-opened item is closed and the new item’s content is displayed.

This image has a screenshot of the accordion module, with 5 items with toggles show, with item 1 expanded

Alternate Photo Float

The Alternate Photo Float module is the most frequently used module. It’s aflexible component that allows for alternating images or video with link lists, paragraphs, or quotations.

This image has a screenshot of the alternate photo float module, with space for a photo next to a paragraph of text

Photo Feature (2 Across or 3 Across)

The Photo Feature is used to highlight two or threeinternal or external links using imagery. There may be multiple rows. Optionally, you can include a more detailed description that appears on hover (desktop) or click (mobile).

This image has a screenshot of the photo feature, with two photo spaces side by side

Feature Boxes (2Columnsor 3 Columns)

The Feature Boxes are used to present sections in a visual manner, for example to highlight the most popular FAQ pages under different categories. Images and buttons optional.

This image has a screenshot of the feature box module, with 3 photos side by side, with a text description under each

Responsive Tabs

The Responsive Tabs module allows grouping of similar content to be displayed in tabbed panels. It’s typically used for presenting dense information in a compact space.

This image has a screenshot of the responsive tabs module, with multiple tabs shown along the top of the page and tab 1 selected.

Photo Grid Module

The Photo Grid Module is perfect for displaying people profiles or news articles. It gives you the opportunity to display four images in every row, along with text and a link.If you use fewer than four photo items, the remaining items will be left-justified.

This image has a screenshot of the photo grid module, with four photos side by side with text underneath each

Statistics Callout

The Statistics Callout is a great way to display numbers in an engaging way. This module is commonly used to display statistics about research.

This image has a screenshot of the statisitics callout module, with three percentages shown in large font

EventsFeed (PlanItPurple)

The Events module is avisual feed of your upcoming PlanItPurple events.You have to input your XML feed number, not your PlanItPurple calendar number.

This image has a screenshot of the events feed module, with an event from a calendar shown

Text Module

Typically, each module of a full-width index page will have a section top with the section title and some brief descriptive text. The text width options for this region are contain-970(large), andcontain-1120(full).

This image has a screenshot of the text module, with a paragraph of text shown spanning the whole window

See Also:

For additional assistance please contact the IT Support Center at 847-491-4357 (1-HELP) option 7, or consultant@northwestern.edu.

Keywords:accordion float feature photo boxes responsive grid statistics module section events text "photo float" "feature box" "photo grid" callout   Doc ID:87150
Owner:TSS Tier 2 .Group:Northwestern
Created:2018-10-24 18:29 CDTUpdated:2019-04-02 14:44 CDT
Feedback:  0   0