A Content Box provides a What You See Is What You Get (WYSIWYG) editor mainly used for adding body text and media/tables.

Content Box - WYSIWYG

WYSIWYG (which stands for "What you see is what you get") is the editing interface that you will use for a Content Box. 

Image
Screenshot showing the WYSIWYG content editor
  1. Styles [1] dropdown: This allows you to add headings: H2, H3, H4, H5, and H6.
    • H1 is reserved for page titles.
    • Headings represent hierarchy and should be used in order to demonstrate content priorities for accessibility.
  2. Remove Formatting [2]: Highlight text and select this button to remove formatting. This is helpful when copying/pasting text from other sources that might bring in text formatting that is not needed.
  3. Link [3]: Link to existing content (internal links) within the site, or add an external link.
    • Internal links: Start to type the name of the page or piece of content that you wish to link to; select it from the auto-suggest dropdown. Important for helping with broken links.
    • External links: Insert the entire URL in this link field.
    • Email addresses: You can simply add an email address along with other text and Drupal will automatically link the email address so that it opens in a user's mail client. Alternately, you can add an email address in this link field which will recognize that it is an email address; select it from the auto-suggest dropdown.
  4. Remove link [4]: If you need to remove a link, highlight the text and select this button. Simply deleting the link and words doesn't guarantee all of the code is removed.
  5. Anchor link [5]: Use this to link to a specific location on a page.
  6. Bullets [6]: Unnumbered and numbered bullets. Use frequently.
  7. Block quote [7]: Use to add a block quote style to text
  8. Add media [8]: Upload new media or find existing media in the pop up Media browser.
  9. Horizontal rule [9]: Add a horizontal rule between text or other elements.
  10. Source [10]: Shows source code. Good way to check your work if something looks off.
  11. Alignment [11]: Left, center, and right alignment options.
  12. Add a table [12]: Use sparingly. Large tables are more challenging to navigate on mobile devices.

Example Content Box

Heading four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan in magna eget tincidunt. Vivamus ultricies neque blandit, lobortis nibh blandit, commodo arcu. Morbi consectetur scelerisque ipsum. Vestibulum ornare nulla ut risus pretium congue. Etiam faucibus augue quis faucibus tempus. Integer augue lectus, tincidunt vel nunc vitae, accumsan interdum sapien. Suspendisse egestas laoreet felis.

Quisque non ipsum vel nisl ultricies hendrerit. Sed placerat ornare porttitor. Proin egestas luctus nulla quis gravida. Nunc eu tellus pharetra, efficitur ipsum quis, ullamcorper felis. Proin ut erat lectus. Curabitur eget tempus libero. Nunc sit amet volutpat ante. In ex justo, pretium id quam sed, commodo fermentum felis. Morbi tortor massa, pretium pharetra commodo ut, iaculis nec neque.

Example text link (links to Homepage)