Contents

• Row Element
• One Column Section Element
• Two Column Section Element
• Text Block Element
• Expand / Collapse Container and Item Elements
• Trending Section Container and Item Elements
• Learn More Section Container and Item Elements
• Facts List Element
• Twitter Callout Element
• Callout Section Element
• Billboard Section Element
• Video Billboard Section Element
• Events List Element
• Resources List Element
• News and Chat Listing Element
• Custom Home Banner Element

Row Element

Rows are the default structural element in Visual Composer.  They can be added manually, or Visual Composer adds them automatically when another element is added directly to the main content area. The row covers the full width of the page (including the left and right margins) and does not center content by default; those styles are primarily generated by the custom modules that are added into the rows. Custom classes can be added to the default row if necessary, e.g. to create sections with full-width backgrounds. Rows can also be split into multiple subcolumns.

One Column Section Element

The One Column Section applies the page’s maximum width and centers the contents.  This element is used with text block elements to create basic sections of text content.

Two Column Section Element

The Two Column Section applies the page’s maximum width and centers the contents, but it also styles the contents in columns.  This section has styles built in to accommodate the side-by-side publications listings and news-and-chat listings that appear on some pages, but different modules can be used as well.

Note that the column styles are applied via CSS automatically, so splitting the parent row element into columns in Visual Composer is not necessary.

Text Block Element

The text block is the simplest way to add content to the page using Visual Composer.  Text blocks include a WYSIWYG editor to add and style text and an HTML editor for more advanced content editing.

Expand / Collapse Container and Item Elements

This element consists of a parent “container” element and child “item” elements.  This style is useful for displaying sets of content with a header-and-content pattern, such as an FAQ section, in a compact fashion.

After adding an Expand / Collapse Container to a page, use the “+” button within it to add Expand / Collapse Item elements to it, then add the content for each item.

Trending Section Item elements use the following fields:

• Title: the text that stays visible when the element is collapsed.
• Content: the content that is shown only when the element is expanded.

Trending Section Container and Item Elements

This element consists of a parent “container” element and child “item” elements.  The child elements are displayed as a slider when enough of them are added to the parent.  Note that there is no central database for these items, like Resources or News Posts have – the items that are added to one page are only accessible on that page.

After adding a Trending Section Container to a page, use the “+” button within it to add Trending Section Item elements to it, then add the content for each item.

Trending Section Item elements use the following fields:

• Image: the image displayed at the top of the item.
• Title: the title of the trending item.
• Link text: the text at the bottom of the item styled to look like a link, e.g. “Learn more”.
• Link URL: the URL that the item should link to.

Learn More Section Container and Item Elements

This element consists of a parent “container” element and child “item” elements.  The child elements are displayed as columns within the parent element.

The Learn More Section Container itself has editable fields:

• Title: the header of the section.
• Introduction: the text after the title, but before the column items.

After adding a Learn More Section Container to a page, use the “+” button within it to add Learn More Section Item elements to it, then add the content for each item.

To change the background color of a Learn More Section Container, click the pencil icon on the container component, scroll down to the Extra class field, and type white.

Learn More Section Item elements use the following fields:

• Icon: the icon image displayed to the left of the item.
  • There are currently six pre-set icons available
    • icon-envelope
    • icon-download
    • icon-toolkit
    • icon-money
    • icon-education
    • icon-hospital
• Title: the title of the column.
• Content: the text at the bottom of the item, typically paragraphs with links.

Facts List Element

This element generates the style seen below, with an icon to the left of a bulleted list.  The sample content below is provided by default in the element’s content editor, but it can actually be replaced if something other than a header and bulleted list is needed instead.  The “Disable Automatic Italics” setting can be checked to prevent the element from automatically making the text italicized.

Twitter Callout Element

This element generates a callout with a button for the user to share the current page’s URL, plus whatever text content is entered, via Twitter.

Callout Section Element

This element generates a callout section that can be used to link to any URL.  The default content includes a header and body text, but other content can be added or substituted.

Callout Section elements use the following fields:

• Image: the image displayed on the left side of the item.
• Content: the content inside the box, apart from the button.
• Button text: the text inside the button at the bottom.
• Link URL: the URL that the callout should link to.

Billboard Section Element

This element generates a large image-and-text content section with a callout.  The default content includes a header and body text, but other content can be added or substituted.

Billboard Section elements use the following fields:

• Section header: the small header at the top of the text section.
• Section title: the large title text toward the top of the text section.
• Main content: the main content of the text section.
• Image: the image used on the right side.
• Inset label: the small, all-caps text at the top of the inset section.
• Inset title: the main text in the inset section.
• Button text: the text in the button in the inset section.
• Link URL: the URL that the inset section button links to.