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"]

 

Change-Maker Awards graphicSave the Date: 2022 Change-Maker Awards Event is Thursday, September 22!You’re invited to Community Shares of Wisconsin’s annual Community Change-Maker Awards on Thursday, September 22, 2022. This hybrid event will take place in person at Union South and online. We will celebrate local leaders and organizations who are advancing social and environmental justice in our community. Tickets purchased in support of this event help CSW […]Read more…

CORE and CSW logosRights of Nature Information SessionOur nation has been built on the concept that corporations have legal personhood and constitutional rights, but the United States has never granted the same rights to nature. However, according to the Center for Democratic and Environmental Rights (CDER), through grassroots and nonprofit efforts local communities, countries, and tribal nations have established laws to recognize […]Read more…

Anniversary Backyard Heroes: Hoes & JessCommunity Shares of Wisconsin marks its fiftieth anniversary in 2021 and is recognizing longtime volunteers and leaders with Anniversary Backyard Heroes Awards. Bernie Hoes & Denise Jess   Today we feature the current board officers at Community Shares of Wisconsin, CSW board president Bernie Hoes and CSW board vice president Denise Jess. Bernie is currently […]Read more…

February 2021 Backyard Hero PhotosFebruary Backyard HeroesWisconsin Council of the Blind & Visually Impaired / Physicians for Social Responsibility Wisconsin    Physicians for Social Responsibility Wisconsin – is privileged to have Dr. Ann Behrmann who is an exemplary role model and mentor. She is a fierce advocate for peace, security & public health through her volunteer work with Physicians for Social […]Read more…

Anniversary Backyard Heroes: Rudd & Figueroa VelezRead more…

February 2021 Backyard Hero PhotosFebruary Backyard HeroesWisconsin Council of the Blind & Visually Impaired / Physicians for Social Responsibility Wisconsin    Physicians for Social Responsibility Wisconsin – is privileged to have Dr. Ann Behrmann who is an exemplary role model and mentor. She is a fierce advocate for peace, security & public health through her volunteer work with Physicians for Social […]Read more…

February 2021 Backyard Hero PhotosFebruary Backyard HeroesWisconsin Council of the Blind & Visually Impaired / Physicians for Social Responsibility Wisconsin    Physicians for Social Responsibility Wisconsin – is privileged to have Dr. Ann Behrmann who is an exemplary role model and mentor. She is a fierce advocate for peace, security & public health through her volunteer work with Physicians for Social […]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…

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