Home > Style Guide > Visual Composer Elements

Contents

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.
  • Expand / Collapse Item 1
    Expand / Collapse Item 1 content goes here.

    Multiple paragraphs can be used.

  • Expand / Collapse Item 2
    Expand / Collapse Item 2 content goes here.

    Multiple paragraphs can be used.

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.

Learn More Section

This is a sample Learn More section.

envelope icon
Contact Us
Name and contact information here

Link to a resource

Link to a resource

Link to a resource

download icon
Contact Us
Name and contact information here

Link to a resource

Link to a resource

Link to a resource

toolkit icon
Contact Us
Name and contact information here

Link to a resource

Link to a resource

Link to a resource

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.

Header

  • Fact 1
  • Fact 2
  • Fact 3

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.

Header

Call to action text

Read More

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.

Our Research

Our committment to research has signifantly impacted reduced hunger in America
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio.
RESEARCH STORIES
See how our research helps schools feed students in New York City

Video Billboard Section Element

This element generates a large image-and-text content section with a callout, intended to link to a video on YouTube or somewhere similar.  The default content includes a header and body text, but other content can be added or substituted.  Note that the inset call-to-action overlaid on the picture can be omitted by simply leaving these fields blank.

Video 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 left 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 blue text with an arrow in the inset section.
  • Link URL: the URL that the inset section button links to.
UNDERSTANDING HUNGER
How we are solving the problem of hunger in America
Hundreds of millions of people in the US experience hunger and poor nutrition in their daily lives. Learn why one of the richest countries in the world struggles with providing this basic human needs, and how we can work together to change that.

Events List Element

This element generates a list of the three next upcoming events from the Events section of the site.  The element’s title can be customized here, but the rest of the content is pulled from the events listings automatically.

Note that this section uses a full-width background color, so it will not look as intended when used inside a constrained-width column.

Events

View All Events

Resources List Element

This element generates a list of the four most recently published resource items.  All content is pulled automatically from the Resources section.  The only customization option on this element is an optional custom class name; enter “list” in this setting to have the resources displayed as a vertical list instead of horizontal cards.

Note that this section uses a full-width background image by default. Use the “list” style as described above if using the section inside a constrained-width column.

Recent Publications & Data

See More Resources
  • Fact Sheet
    Streamlining the New SNAP Time Limit Exemption for People Experiencing Homelessness Fact Sheet

    By providing benefits to purchase food, the Supplemental Nutrition Assistance Program (SNAP) is vital to supporting the nutrition, health, and well-being of people experiencing homelessness. New temporary SNAP time limit exemptions went into effect September 1 — including for people experiencing homelessness — pursuant to the 2023 Fiscal Responsibility Act. Ensuring that the time limit exemptions for the newly exempt people experiencing homelessness are implemented effectively is an important strategy to improve their access to SNAP. Learn more in this new fact sheet from FRAC, the National Alliance to End Homelessness, and Opportunity Starts at Home. 

    Read the fact sheet
  • Fact Sheet
    Streamlining the New SNAP Time Limit for Young People With Experience in Foster Care Fact Sheet

    By providing benefits to purchase food, the Supplemental Nutrition Assistance Program (SNAP) is vital to supporting the nutrition, health, and well-being of young adults who are exiting foster care. Even so, too many of these eligible young adults miss out on SNAP. On September 1, new temporary SNAP time limit exemptions went into effect including for young adults, 18 to 24 years of age, who have left foster care, pursuant to the 2023 Fiscal Responsibility Act (FRA).1 Ensuring that the new time limit exemption for young people with experience in foster care is implemented effectively is an important strategy to improve their access to SNAP. Learn more in FRAC’s new fact sheet.

    Read the fact sheet
  • Fact Sheet
    Streamlining Veterans New SNAP Time Limit Exemption Fact Sheet

    By providing benefits to purchase food, the Supplemental Nutrition Assistance Program (SNAP) is vital to supporting the nutrition, health, and well-being of military veterans. New temporary SNAP time limit exemptions went into effect September 1, including for veterans (e.g., people with military experience regardless of the conditions of their discharge or release) pursuant to the 2023 Fiscal Responsibility Act. Ensuring that the time limit exemptions for the newly exempt are implemented effectively is an important strategy to improve veterans’ access to SNAP.

    Read the fact sheet
  • Guide
    What Anti-Hunger Advocates Need to Know About Standardized Screening for Food Insecurity and Other Health-Related Social Needs

    This brief examines recent standards-setting initiatives within the healthcare sector regarding screening for food insecurity and other health-related social needs. It offers recommendations for anti-hunger advocates to leverage screening efforts to improve the nutrition, health, and well-being of people struggling to put food on the table.

    Read the guide

News and Chat Listing Element

This element generates a list of the three most recently published News items and a second list of the three most recently published FRAC Chat items.  All content is pulled automatically from these sections.

News

More News

FRAC Chat

Nov 20, 2023
Alexandra Ashbrook
Food Insecurity and Housing Instability Are Inextricably Linked

In recognition of Hunger and Homelessness Awareness Week in November, this blog lifts up opportunities to take action to support millions of families who are experiencing food insecurity and housing instability.
Across the nation, tens of millions of people are struggling to keep up with skyrocketing rents, stagnant incomes, and the end of COVID-19 pandemic-relief supports, which have resulted in growing food insecurity and housing instability. The “rent eats first” and “heat or eat” are phrases anti-hunger stakeholders hear all too often.

Nov 09, 2023
Alexandra Ashbrook
Veterans Protected Our Nation, It’s Time to Protect Them Against Hunger

Veterans Day provides a prime opportunity to not only reflect on the unconscionable rates of food insecurity among veterans, but also to highlight efforts to ensure no veteran goes hungry.
This Veterans Day, take a moment to recognize the great work that is being done to address hunger among veterans and to double down on needed efforts to ensure no veteran goes hungry.

Nov 08, 2023
Elisabet Eppes, Deputy Director, Maryland Hunger Solutions
New Nutrition Programs Data for All 24 Maryland Jurisdictions in Maryland Hunger Solutions Profiles Report

Maryland Hunger Solutions is excited to announce the publication of the 2023 Maryland Hunger Profiles, a comprehensive resource, featuring the latest participation data for the Supplemental Nutrition Assistance Program (SNAP), K–12 child nutrition programs, and the Special Supplemental Nutrition Program for Women, Infants, and Children (WIC). The report, updated by Maryland Hunger Solutions annually, provides information at the state and county level. Each hunger profile also contains key demographic data points, including population, median household income, and percentage of the population living below the Federal Poverty Level.

All Blogs

Custom Home Banner Element

This element generates the custom banner used on the home page.

Options include:

  • Main header: the main header text; displays as an H1 element.
  • Subheader: the subheader text; displays as an H2 element.
  • Callout 1 text: the text in the first callout button.
  • Callout 1 link URL: the URL that button 1 should link to.
  • Callout 2 text: the text in the second callout button.
  • Callout 2 link URL: the URL that button 2 should link to.
  • Callout 3 text: the text in the third callout button.
  • Callout 3 link URL: the URL that button 3 should link to.
  • Inset header: the small header text at the top of the inset section on the right.
  • Inset title: the main title of the inset section.
  • Inset image: the image used in the inset section.
  • Inset link URL: the URL that the inset section image and title should link to.
  • Inset related links title: the title above the related links section.
  • Related links content: the related links content.  Defaults to a bulleted list, but this content can be replaced with another style.