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
- Breadcrumb
- Cause Breadcrumb
- Member Breadcrumb
- Cause List
- Contact Form
- Call to Action Button
- Call to Action Mailing List
- Call to Action Mailing List Slim
- Hero Image
- Member List
- News Across
- All
- Filtered
- News Down
- All
- Filtered
- Pair Full (Text & Image)
- 50-50 Text+Image
- 50-50 Image+Text
- Pair Inset (Text & Image)
- 50-50 Text+Image
- 50-50 Image+Text
- 67-33 Text+Text
- 33-67 Image+Text
- Testimonial
- Single
- Double
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.
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.
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:
- No setting specified
- Member specified (ACLU)
- Cause specified (Engagement)
- 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:
- No setting specified
- Member specified (WCBVI)
- Cause specified (Families)
- 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"]
Backyard Heroes: Jenny Lujan and Claire WileyA photo of Jenny Lujan, board member for Chrysalis. A photo of Claire Wiley, volunteer for Wisconsin Wetlands Association. Below that is the Community Shares logo and the words Backyard Heroes. Each month Community Shares of Wisconsin presents the Backyard Hero Award to organizations and people making change happen in our community. Jenny Lujan and […]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 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 Heroes: Maggie Munson and Jamie CampbellA photo of Maggie Munson, volunteer for Midwest Environmental Advocates. A photo of Jamie Campbell, volunteer for Wheels for Winners, fitting a helmet on a bike recipient. Below that is the Community Shares logo and the words Backyard Heroes. Each month Community Shares of Wisconsin presents the Backyard Hero Award to organizations and people making […]Read more…
Backyard Hero: Nivali MariamIn this picture Nivali is standing in a room and she is smiling and wearing a Black T shirt that says Wheels for Winners on it with a gray open button-down shirt over it and black pants. Each month Community Shares of Wisconsin presents the Backyard Hero Award to organizations and people making change happen […]Read more…
February 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…
October 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.


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.
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.”
“Quote goes here.”
What Our Supporters Say
“Quote goes here.”