Kitchen Sink Test Page

WYSIWYG Styles

Important content entry note!

Don't copy and paste text from Word or another program directly into the WYSIWYG. Unfortunately, you have to "clean" the formatting off first by copy/pasting it into a plain-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.).

Please note: Drupal will pop up a message if you copy and paste from Word that says "This looks like it was copied from Word. Would you like to clean it?" This is a system message that we cannot clear, but despite the message, please note that the CMS does NOT clean the formatting. The best bet is to paste any Word content into a plain text program first to strip the formatting, then re-paste into Drupal.

How to Write User-Friendly Content

  • Use pronouns. The user is “you.” Diabetes Free SC 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 the words your users use. 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's 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 are particularly effective as headlines—e.g., "How do I register for classes?"

Header Styles

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) as subheadings as needed.

Sample H2 Header

This is "Intro Text". Intro style can be used to emphasize information at the top of the page. Use it to highlight or reiterate important points at the very beginning of the body content area in WYSIWYGs.

Sample H3 Header

Sample H4 Header

Sample H5 Header
Sample H6 Header

Text Styles

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.

Use italics sparingly, as it is difficult to read long passages online that are italicized. Use bold as needed to emphasize specific words or sentences.

Tables are normally used to show things like schedules or fees:

Cras lorem lacus Nullam commodo Sed viverra tempus Fusce dignissim purus
Proin eget finibus Vestibulum interdum quam Duis finibus arcu ante Class aptent taciti
Proin eget finibus Vestibulum interdum quam Duis finibus arcu ante Class aptent taciti
Proin eget finibus Vestibulum interdum quam Duis finibus arcu ante Class aptent taciti
Proin eget finibus Vestibulum interdum quam Duis finibus arcu ante Class aptent taciti

Bulleted lists are used when the order of the items doesn't matter:

  • Lorem ipsum dolor sit amet
  • Amet lorem ipsum dolor sit
    • Lorem ipsum dolor sit amet
    • Amet lorem ipsum dolor sit
    • Sit amet lorem ipsum dolor
  • Sit amet lorem ipsum dolor

Numbered lists are used when putting things into a heirarchy:

  1. Lorem ipsum dolor sit amet
  2. Amet lorem ipsum dolor sit
    1. Lorem ipsum dolor sit amet
    2. Amet lorem ipsum dolor sit
    3. Sit amet lorem ipsum dolor
  3. Sit amet lorem ipsum dolor

Horizontal lines can be used to separate elements of the page, like what you see immediately below:


Links

Using descriptive link text improves accessibility for disabled users.

No: Visit the Cyberwoven website here.

No: Click here to visit the Cyberwoven website.

Yes: Visit the Cyberwoven website.

Anchor Link

Anchor links allow you to move the user down the page to link them to content that's further down. To create an anchor link, first create the "anchor" by clicking the flag icon in the spot you want to link to. Then create the link by putting #LINKNAME. Anchor links are case sensitive.

Example Anchor Link

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 "Register" or "Donate." 

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. 

Default Button

Blue Button Orange Button Green Button Dark Blue Button Red Button White Button Ivory Button

Accordions

What is an accordion?

Accordions are very useful for when you have a lot of information, but you want the user to be able to review it at-a-glance.

Why use one?

Users can see all the headings at once, and click to expand the accordion for those that they are interested in. Accordions are great for FAQs!

How do I add items?

Right-click in the WYSIWYG editor to add or remove additional accordion tabs.

Add your content here!

This Is A WYSIWYG Layer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales est nec neque feugiat suscipit. Sed a blandit erat, vestibulum volutpat metus. Aenean quis tortor elit. Nullam at lacinia ante, eu sodales augue. Curabitur at neque efficitur, consequat justo vitae, faucibus diam. Sed a placerat dui. Mauris imperdiet consequat justo, ut varius odio consequat sed. Integer laoreet turpis eget tortor tincidunt convallis. Mauris auctor nec lectus quis gravida:

  • Lorem ipsum dolor sit amet
  • Amet lorem ipsum dolor sit
    • Lorem ipsum dolor sit amet
    • Amet lorem ipsum dolor sit
    • Sit amet lorem ipsum dolor
  • Sit amet lorem ipsum dolor

Nullam vitae ante augue. Pellentesque molestie lorem eros, et finibus mauris gravida a. In vitae ultrices ligula. Fusce ullamcorper nulla a nisl egestas, id posuere felis maximus. Nunc neque velit, posuere in purus vitae, pulvinar aliquet tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque lacinia ante eget lorem porttitor, porta luctus tortor maximus. Etiam vitae condimentum erat. Etiam massa mi, ultrices sit amet euismod et, consectetur vel elit. Morbi et pellentesque nibh. Duis dapibus turpis ac pulvinar commodo. Integer odio odio, ultrices in leo ut, tempor vehicula risus. Vestibulum in vehicula justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ornare arcu ut elit porttitor rhoncus. In eleifend ornare felis ut molestie.

Test

  1. one
  2. two
Call To Action

The CTA layer promotes one big idea, and drives traffic to that link. Keep headline copy short.

Call To Action

You can adjust color schemes & button colors for CTA layers, and add icons to them.

Spotlight Layer

Spotlight layers combine text with visuals

If you want more space to drive a point home, or to articulate something in finer detail, a spotlight is a great alternative to the CTA layer. If you've got video content, you can embed that here in lieu of a static image.

Spotlight Layer

When it comes to design, spotlight layers are very dynamic

You can adjust layer and button colors, and change the position of the text (from the left side of the layer to the right, and vice versa). Like all layer copy, it's best to keep this content short! Don't write too much text.

Testimonials infuse site content with personality and humanity. Use them to share uplifting insights from medical professionals, community partners, and impacted individuals.

First & Last Name | Job Title, Employer Name

Quoting a medical professional or community partner? Use the attribution style above. Quoting a resident of SC impacted by DFSC's work? Use the attribution style below. (Remember, you can adjust the color schemes of testimonial layers, too.)

First & Last Name | SC City Name, SC County Name