Kitchen Sink

Important content entry note! Don’t copy and paste text from Word or another program directly into the WYSIWYG. You have to “clean” the formatting off first by copy/pasting it into a text program, like Notepad, then copy/pasting it into the WYSIWYG. If you don’t, Word can carry over its own inline styles that will override our CSS stylesheets and make the text look weird (wrong color, wrong font, wrong size, etc.).

How to Write User-Friendly Content

• Use pronouns. The user is “you.” Your organization is “we.” This creates cleaner sentence structure and more approachable, conversational content.
• Use active voice. “The board proposed the regulation” not “The regulation was proposed by the board.”
• Use common words. By using keywords that your users use, you will help them understand the copy and will help optimize it for search engines.
• Chunk your content. Chunking makes your content more scannable by breaking it into manageable sections.
• Front-load the important information. Use the journalism model of the “inverted pyramid.” Start with the content that is most important to your audience, and then provide additional details.
• Use short sentences and paragraphs. The ideal standard is no more than 20 words per sentence, five sentences per paragraph. Use dashes instead of semi-colons or, better yet, break the sentence into two. It is ok to start a sentence with “and,” “but,” or “or” if it makes things clear and brief.
• Use bullets and numbered lists. Don’t limit yourself to using this for long lists—one sentence and two bullets is easier to read than three sentences.
• Use clear headlines and subheads. Questions, especially those with pronouns, are particularly effective.
• Use images, diagrams, or multimedia to visually represent ideas in the content. Videos and images should reinforce the text on your page.
• Use proper casing when typing. For visitors using assistive technology, it provides a better experience vs. typing in ALL CAPS. The CSS styling (rules that determine how colors, fonts, etc are displayed) can display website elements in all caps which will not affect how it is read to the user. Read more about CSS.

Headings

Please use H2 as the main heading style for your content. You can use as many H2s on a page as you want. Use the other styles (H3, H4, H5, H6) as subheadings as needed.

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is Normal

---

Other Formatting Options

Italics – Use italics sparingly, as it is difficult to read long passages online that are italicized.

Table – Tables are normally used to show things like schedules or fees.

Image Size Reference Guide

Content Type	Minimum Dimensions	Max File Size
Homepage Hero Banner (MMA)	2400 x 1600 pixels	10 MB
Side by Side Content Block Image	800 x 900 pixels	10 MB
Team Member Image	600 x 800 pixels	10 MB
Core Value Image	600 x 335 pixels	10 MB
Funded Partner Logo Image	200 x 93 pixels	10 MB
Timeline Entry Image	400 x 400 pixels	10 MB

Bulleted List (sometimes called an “unordered list” in programming lingo)—Use when the order of the items doesn’t matter:

• Ensure Fair Voting
• Fill the Pipeline
• Reduce Polarization

Numbered list (sometimes called an “ordered list”)—Use when putting things into a hierarchy.

1. Donate
2. Volunteer
3. Apply for an internship
4. Host a fundraiser

Use the Quote button in the editor to create a blockquote. Use this style for quotes and other information that you want offset from the regular paragraph text like this:
We cannot predict the new forces, powers, and discoveries that will be disclosed to us when we reach the other planets and set up new laboratories in space. They are as much beyond our vision today as fire or electricity would be beyond the imagination of a fish.

Arthur C. Clarke

This is a horizontal line. Use sparingly to separate elements of the page.

---

Links

Using descriptive link text improves accessibility for disabled users. Blind users navigate by having links read aloud to them, so using descriptive links helps them understand where they are going when they don’t have the context of the surrounding words.

No: Visit the Beam & Hinge website here.

No: Click here to visit the Beam & Hinge website.

Yes: Visit the Beam & Hinge website.

Buttons

What is the difference between a button and a link? As a rule of thumb, buttons indicate that you want the user to do something, while links usually just mean they are being directed to another page. For example, you might want to use a button for “Give” or “Volunteer.” To add a button link, highlight the text and create the link using the editor, as you normally would. Then select from the “Styles” dropdown menu to choose the button style you want.

Accordions

Anchor Links

Anchor links are helpful for directing users to specific content on a page. When content within the WYSIWYG gets lengthy, an anchor link can be created and a button style applied to direct users back to the top of the page, as shown below.

Steps to create an anchor link in the WYSIWYG:

1. Click where you want to anchor to (ie: before the first letter of the WYSIWYG content, if you want to anchor to the top of the page.)
2. Navigate to the toolbar on the far right of the page and choose “Advanced”
3. Add your anchor point word (ie: top), and save
4. Create a hyperlink/button that goes to your anchor by entering the # symbol before your anchor text in the URL field: #top and save.
5. Test your new anchor link. It is recommended you test in an Incognito window, or while logged out of the CMS to accurately see the behavior

How to add media

• Go to “Media” – Add New on the Dashboard.
• Select files to add to Media Library.

To add media to a page or post… 

• click “Add Media” button at the top left of the content box to access the media library
• choose image you want to add to page or post.
• When adding media to a page or post, you can select and hover over the image to select the image’s alignment on the page.
• Remember to Publish/Update!

How to review submissions to your contact form

• To review contact submissions click the forms button on the left side of the page. This will take you to the Gravity Forms page.
• Hover over the form you want to access and click “Entries” to view all of the entries for that specific form.

How to Add a new Team Member

• Go to the Dashboard on the left hand side of the page, go to Team Members – Add New.
• Fill out name, bio, Team Member type, email address, title, and photo
• Remember to update!

How to Add a Call to Action

• Go to the Dashboard on the left hand side of the page, go to Call to Actions As – Add New.
• Fill out title, content, content link, background image
• Don’t forget to update

How to Add New Social Determinant

• Go to the Dashboard on the left hand side of the page, go to Social Determinants – Add New.
• Choose corresponding icon from media library. (Add icon to media library if it is not already located there)
• Fill out description
• Dont forget to update

How to Add Core Value

• Go to the Dashboard on the left hand side of the page, go to Core Values – Add New.
• Choose corresponding image from media library. (Add icon to media library if it is not already located there)
• Fill out description
• Dont forget to update

How to Add Funded Partners

• Go to the Dashboard on the left hand side of the page, go to Funded Partners – Add New.
• Choose corresponding image from media library. (Add icon to media library if it is not already located there)
• Fill out description, grant title, and corresponding social determinants and roles
• Dont forget to update

How to add Timeline Entry

• Go to the Dashboard on the left hand side of the page, go to Timeline Entries – Add New.
• Choose corresponding image from media library. (Add icon to media library if it is not already located there)
• Choose Event date, photo shape
• Fill out timeline entry in Title box
• Dont forget to update

Header/Footer

• Appearance
• Menu
• Main Menu – header/footer

Photo credits – Go to Theme settings – Photo credits tab

Change newsletter link in form section: Go to “Theme Settings” in the Dashboard, then click the “Newsletter Form” tab, then change the newsletter link.