Community Shares of Wisconsin

Design Pattern Library

This page demonstrates examples of all the design patterns used to construct the CSW website. Each section contains one pattern. By visiting this page on the administrative side, you can see examples of how to set up each of these design patterns.

Important note if you’re editing this documentation page: If you use the Divi visual builder to edit a section that includes a left or right square bracket, the builder will remove the bracket. This is very bad. To avoid this, if you need to edit the text of any section that includes a square bracket, DO NOT use the Divi visual builder. Use one of the back-end editor methods and use a double square bracket or the ASCII codes [ and ] to represent square brackets.

How to add a design pattern to a page

It’s easy to add a design pattern template to a page—there’s a whole library of them waiting to be added.

When you add a section to a page, one of the options the Divi editor gives you is to “Add From Library.” If you choose that tab, you’ll see a list of these design patterns. Choosing one will insert the design pattern with some example content that you can replace.

Here are the patterns:

Body Text

Body Text is used for simple blocks of text. On a full-sized browser (laptop or desktop), the text is restricted from using the full available width. This keeps lines from becoming too long for good readability.

The example below shows a level 2 heading. Though several levels of headings are available, for readability, it’s best to go no deeper than 3 levels. Beyond that, it’d hard for readers to keep track of the differences between levels.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec lacus pharetra, scelerisque lorem placerat, accumsan massa. Suspendisse ac purus a nibh consectetur accumsan nec in nulla. Donec ac tellus tortor. Cras nunc lorem, consequat ac viverra et, scelerisque sed massa. Morbi est lorem, fringilla vel est eu, posuere euismod urna. Donec nec nibh eget leo aliquet imperdiet. Nunc nulla lorem, auctor in tempus nec, laoreet a sem.

Breadcrumb

Navigational breadcrumbs help orient visitors to their location within the website. Following are examples of the breadcrumbs that appear at the top of Cause and Member pages.

All Causes > ZZZCauseNameZZZ

All Members > ZZZMemberNameZZZ

Call to Action: Button

This is the basic CTA: a button that takes visitors somewhere.

Call to Action Title

A Sentence or Phrase Describing the Call to Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus tellus odio, eu lobortis turpis posuere sed. Etiam vitae dolor semper, euismod eros et, bibendum enim.

Call to Action: Mailing List

This is a full-sized mailing list signup form.

Newsletter

Join our mailing list to receive updates delivered to your inbox.

Call to Action: Mailing List Slim

This is a minimal mailing list signup form.

Join Our Mailing List

Cause List

The List of Causes is a “data-driven” pattern. That means its content is automatically generated based upon the post or page where it appears. If you have specified one or more Causes for a post or page (using the checkboxes in the WordPress editor), the List of Causes pattern will show the associated Causes.

The List of Causes is created by entering a shortcode like this:

[csw-cause-list]

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the List of Causes.

When entering the List of Causes shortcode, you can specify two things about the list’s format:

  • If shownames is set to true, the name for each Cause will appear below the icon. If it has any value other than true, or if it’s missing altogether, only the icon will appear.
  • If title has a value, that title will appear at the top of the List of Causes. If the title is empty (“”) or is missing altogether, no title will appear at the top.

Here is an example of the shortcode with both parameters specified. And below the shortcode, you can see the Cause list that it generates.

[csw-cause-list shownames="true" title="This Story's Causes"]


 

Contact Form

A form visitors can use to contact CSW.

Contact Us

Hero Image

An example of the Hero Image is at the top of this page. The Hero Image appears at the top of the page’s content, and includes the page’s title.  For usability, it’s important to create a hero image that has good contrast with the white page title.

Hero images should be 1260 x 400 pixels.

Community Shares of Wisconsin

Design Pattern Library

Member List

The List of Members is a “data-driven” pattern. That means its content is automatically generated based upon the post or page where it appears. If you have specified one or more Members for a post or page (using the checkboxes in the WordPress editor), the List of Members pattern will show the associated Members

The List of Members is created by entering a shortcode like this:

[csw-member-list]

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the List of Members.

When entering the List of Members shortcode, you can specify two things about the list’s format:

  • If shownames is set to true, the name for each Member will appear below the icon. If it has any value other than true, or if it’s missing altogether, only the icon will appear.
  • If title has a value, that title will appear at the top of the List of Members. If title is empty (“”) or is missing altogether, no title will appear at the top.

Here is an example of the shortcode with all parameters specified. Below the shortcode, you can see the generated Member List.

[csw-member-list shownames="true" title="This Story's Members"]

News Across

[News Stories Across is a “data-driven” pattern. That means its content is automatically generated based upon recently published posts. You add a News Stories Across by entering a shortcode like this:

[csw-stories-across]

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the horizontal list of news stories.

When entering the News Stories Across shortcode, you can optionally specify two things that will determine which stories are included in the list:

  • Specifying member-slug will restrict stories to just those that have been categorized for a particular member. For this value, provide the member’s “slug” rather than its full name—for example, “1k-friends” rather than “1000 Friends of Wisconsin.” You can find the member’s slug on the administrative side by going to Posts > Member Orgs.
  • Specifying cause-slug will restrict stories to just those that have been categorized for a particular cause. For this value, provide the cause’s “slug” rather than its full name—for example, “disabilities” rather than “Empowering People with Disabilities.” You can find the cause’s member’s slug on the administrative side by going to Posts > Causes.
  • If you specify both a member and a cause, the list will be restricted to stories that

This pattern will list the three most recent stories matching the criteria you specify. Only published stories will appear. They will appear in reverse chronological order—most recent first. If you specify both a member and a cause, the list will be restricted to stories that have been categorized for both that member and that story.

Here are four examples of shortcodes and the story lists they generate. These show all four combinations of settings:

  1. No setting specified
  2. Member specified (ACLU)
  3. Cause specified (Engagement)
  4. Member and Cause specified (ACLU + Engagement)

[csw-stories-across]
[csw-stories-across member-slug="aclu-wi"]
[csw-stories-across cause-slug="engagement"]
[csw-stories-across member-slug="aclu-wi" cause-slug="engagement"]

 

News Down

News Stories Down is a “data-driven” pattern. That means its content is automatically generated based upon recently published posts. You add a News Stories Across by entering a shortcode like this:

[csw-stories-down]  

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the vertical list of news stories.

When entering the News Stories Down shortcode, you can optionally specify two things that will determine which stories are included in the list:

  • Specifying member-slug will restrict stories to just those that have been categorized for a particular member. For this value, provide the member’s “slug” rather than its full name—for example, “1k-friends” rather than “1000 Friends of Wisconsin.” You can find the member’s slug on the administrative side by going to Posts > Member Orgs.
  • Specifying cause-slug will restrict stories to just those that have been categorized for a particular cause. For this value, provide the cause’s “slug” rather than its full name—for example, “disabilities” rather than “Empowering People with Disabilities.” You can find the cause’s member’s slug on the administrative side by going to Posts > Causes.
  • If you specify both a member and a cause, the list will be restricted to stories that meet both criteria–for example, stories that are about both 1000 Friends and the Environment.

This pattern will list the two most recent stories matching the criteria you specify. Only published stories will appear. They will appear in reverse chronological order—most recent first. If you specify both a member and a cause, the list will be restricted to stories that have been categorized for both that member and that story.

Here are four examples of shortcodes and the story lists they generate. These show all four combinations of settings:

  1. No setting specified
  2. Member specified (WCBVI)
  3. Cause specified (Families)
  4. Member and Cause specified (WCBVI + Families)

[csw-stories-down]
[csw-stories-down member-slug="wc-blind"]
[csw-stories-down cause-slug="families"]
[csw-stories-down member-slug="wc-blind" cause-slug="families"]

 

The Big Share 2021 Featured Image LogoThe Big Share will Support Nonprofits Working for a Just RecoveryMadison, WI – On Tuesday, March 2, Madison-based nonprofit groups will participate in The Big Share®. Visit TheBigShare.org for details. “Recognizing that the COVID crisis is not over and the Black Lives Matter movement continues to teach us how we can do more for racial justice, it’s more important than ever to support groups that […]Read more…

Fund for a Just Recovery - We do not seek a return to business as usualCommunity Shares to Distribute $81,000 to NonprofitsThis week the Board of Directors of Community Shares of Wisconsin took action to distribute $81,000 to its members from the Fund for a Just Recovery. The Fund was created as an effort to help Community Shares of Wisconsin’s member nonprofits continue to take bold action for social justice during the COVID-19 crisis. The funds […]Read more…

Backyard HeroesOctober 2020 Backyard HeroesDana King – Nuestro Mundo  Dana King is a parent at Nuestro Mundo Community School that has been a dedicated volunteer for the past eight years. Dana routinely volunteers in the classroom and contributes to the wider community through fundraising, garden, and social justice work. Dana is from New York (Long Island) and came to […]Read more…

Feature Image containing both the Wisconsin Council of the Blind and Visually Impaired logo as well as the Disability Rights Wisconsin logoWCBVI and DRW Collaborate as Wisconsin Disability Vote Coalition to Advocate for Safe and Accessible ElectionsDisability Rights Wisconsin along with other community groups, such as the Wisconsin Council for the Blind & Visually Impaired, formed The Wisconsin Disability Vote Coalition (WDVC). The WDVC is a non-partisan effort to help ensure full participation in the entire electoral process of voters with disabilities, including registering to vote, casting a vote, and accessing […]Read more…

Backyard HeroesOctober 2020 Backyard HeroesDana King – Nuestro Mundo  Dana King is a parent at Nuestro Mundo Community School that has been a dedicated volunteer for the past eight years. Dana routinely volunteers in the classroom and contributes to the wider community through fundraising, garden, and social justice work. Dana is from New York (Long Island) and came to […]Read more…

june 2020 backyard heroesJune 2020 Backyard HeroesDana Pellebon – OutReach Dana is an OutReach board member. She assists with fundraising and stage management for special events.  In her spare time, Dana is also an actor, director, and producer in local and regional theatrical productions, in addition to being active in several organizations throughout Dane County. For more information about Outreach LGBTQ […]Read more…

Backyard HeroesOctober 2020 Backyard HeroesDana King – Nuestro Mundo  Dana King is a parent at Nuestro Mundo Community School that has been a dedicated volunteer for the past eight years. Dana routinely volunteers in the classroom and contributes to the wider community through fundraising, garden, and social justice work. Dana is from New York (Long Island) and came to […]Read more…

Wisconsin Council of the Blind and Visually Impaired logo and Madison Audubon Logo for featured imageCSW Member Groups Making Nature More AccessibleCSW member groups Madison Audubon Society and Wisconsin Council on the Blind and Visually Impaired partnered to host workshops to teach community members to bird by ear. Attendees who were blind and visually impaired, as well as those who are sighted, learned ways to better identify birds through birdsong–all with the aim of increasing opportunities […]Read more…

Page Header

At the very top of the page is the standard Page Header.

Pair Full

This pattern shows an image next to text. This pattern is “full” because the image and text together take the full width of the content area with no padding or indentation. The text ends with a “Learn More” link.

Image size can vary for both Pair Full and Pair Inset, though 630 pixels is a good minimum width in either case. The most important consideration for length is the length of the text half. Ideally, the photo will be at least as tall as the text at all screen sizes; you can test this by changing the width of your browser window.

If the image is too short, it’s not a terrible problem. The layout just looks neater if the image is as tall or taller than the text, since the image essentially acts as a border for the text.

There are two variants:

  • 50-50 Full Text+Image
  • 50-50 Full Image+Text

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur pulvinar lectus id elementum. Morbi quis nulla risus. Nunc volutpat nisi id ante molestie, a lobortis libero porta. Integer sodales dictum ex non sollicitudin. Morbi ac sapien in eros suscipit egestas sed eu nibh. Donec eu ultrices arcu. Praesent sed mauris pellentesque, pretium lacus non, eleifend tortor. Donec ex arcu, viverra at elit eget, ultricies sagittis arcu. Sed pretium leo at quam varius, vel laoreet ex tincidunt.

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur pulvinar lectus id elementum. Morbi quis nulla risus. Nunc volutpat nisi id ante molestie, a lobortis libero porta. Integer sodales dictum ex non sollicitudin. Morbi ac sapien in eros suscipit egestas sed eu nibh. Donec eu ultrices arcu. Praesent sed mauris pellentesque, pretium lacus non, eleifend tortor. Donec ex arcu, viverra at elit eget, ultricies sagittis arcu. Sed pretium leo at quam varius, vel laoreet ex tincidunt.

Learn More

Pair Inset

This pattern shows an image next to text. This pattern is “inset” because the image and text have a white margin (indent) from the left and edges of the content area. The text ends with an action button.

Image size can vary for both Pair Full and Pair Inset, though 630 pixels is a good minimum width in either case. The most important consideration for length is the length of the text half. Ideally, the photo will be at least as tall as the text at all screen sizes; you can test this by changing the width of your browser window.

If the image is too short, it’s not a terrible problem. The layout just looks neater if the image is as tall or taller than the text, since the image essentially acts as a border for the text.

There are four variants:

  • Pair Inset 50-50 Text+Image
  • Pair Inset 50-50 Image+Text
  • Pair Inset 67-33 Text+Image
  • Pair Inset 33-67 Image+Text

Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur pulvinar lectus id elementum. Morbi quis nulla risus. Nunc volutpat nisi id ante molestie, a lobortis libero porta. Integer sodales dictum ex non sollicitudin. Morbi ac sapien in eros suscipit egestas sed eu nibh. Donec eu ultrices arcu. Praesent sed mauris pellentesque, pretium lacus non, eleifend tortor. Donec ex arcu, viverra at elit eget, ultricies sagittis arcu. Sed pretium leo at quam varius, vel laoreet ex tincidunt.

Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur pulvinar lectus id elementum. Morbi quis nulla risus. Nunc volutpat nisi id ante molestie, a lobortis libero porta. Integer sodales dictum ex non sollicitudin. Morbi ac sapien in eros suscipit egestas sed eu nibh. Donec eu ultrices arcu. Praesent sed mauris pellentesque, pretium lacus non, eleifend tortor. Donec ex arcu, viverra at elit eget, ultricies sagittis arcu. Sed pretium leo at quam varius, vel laoreet ex tincidunt.

Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur pulvinar lectus id elementum. Morbi quis nulla risus. Nunc volutpat nisi id ante molestie, a lobortis libero porta. Integer sodales dictum ex non sollicitudin. Morbi ac sapien in eros suscipit egestas sed eu nibh. Donec eu ultrices arcu. Praesent sed mauris pellentesque, pretium lacus non, eleifend tortor. Donec ex arcu, viverra at elit eget, ultricies sagittis arcu. Sed pretium leo at quam varius, vel laoreet ex tincidunt.

Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur pulvinar lectus id elementum. Morbi quis nulla risus. Nunc volutpat nisi id ante molestie, a lobortis libero porta. Integer sodales dictum ex non sollicitudin. Morbi ac sapien in eros suscipit egestas sed eu nibh. Donec eu ultrices arcu. Praesent sed mauris pellentesque, pretium lacus non, eleifend tortor. Donec ex arcu, viverra at elit eget, ultricies sagittis arcu. Sed pretium leo at quam varius, vel laoreet ex tincidunt.

Testimonial

This pattern adds one supporter testimonial, or two side-by-side testimonials.

What Our Supporters Say

“Quote goes here.”

ZZZNAMEZZZ

Supporter since ZZZYEARZZZ, ZZZORGANIZATIONZZZ

“Quote goes here.”

ZZZNAMEZZZ

Supporter since ZZZYEARZZZ, ZZZORGANIZATIONZZZ

What Our Supporters Say

“Quote goes here.”

ZZZNAMEZZZ

Supporter since ZZZYEARZZZ, ZZZORGANIZATIONZZZ