This is the body text editor (also known as the WYSIWYG—"what you see is what you get'—editor).
You use it to edit the the contents of almost all your site's content types, formatting text and adding images and links. It works very similarly to Microsoft Word or any other word processor. Here is a quick overview of what some of these buttons do:
Use this to view the actual HTML markup of your content. If you're familiar with HTML, this can be handy to clean up imported pages that are displaying poorly, or to fine-tune your image placements. Typically you should only be seeing paragraph, link, and text formatting tags. Some imported content may have extraneous <div> and other tags with inline styles (style="blah blah blah") that should be stripped out in most cases to get things to display properly.
Things like bold, italic, indents, bulleted and numbered lists—all of these work just like you'd expect in any other word processor. You will typically only need to use bold/italics and the bulleted & numbered list buttons. In our layouts, there are very few cases in which anything should be centered or indented.
Paste as plain text
A very useful button! If you're pasting text from a Word document, another webpage, or any other source, it's highly recommended that you click this button first and paste it into the box that appears:
This will ensure that the editor won't try to style the text to match where you pasted it from. We always want to paste clean, plain text and let our web templates do the styling for us.
Link & unlink
Highlight any text in the editor and click the Link button to create a link by pasting in the URL you want to link to, whether it's on your own site or an external site. You can also create linked email addresses.
Use this drop-down to create headings (either select the text you want to turn into a heading, or simply place the cursor anywhere on the line you wish to turn into a heading). It's easiest if the header text is on its own line, that way the entire paragraph is not turned into a heading along with it.
We should always use heading tags to mark headings in body text—not bold or italics (and headings themselves should never be italicized or bolded). The larger the heading number, the bigger the heading will be:
- Heading 1 is the largest heading, and shouldn't typically be used in the body text (the title of the page or article is already assigned h1, and Google and other search engines typically only like there to be a single h1 on each page))
- Heading 2 is for use on pages that should have two sets of headings—main headings, and sub-headings. Use h2 for the main headings.
- Heading 3 is just the right size for text that only needs a single size heading. It's the most commonly used heading on the site.
Clicking the "Add image/media" button on the far-right gives you a variety of options to place non-text content into your page. "Image" will be most handy (for details on Image sizes/etc, see the Image size/crop requirements & other photo guidelines page).
A cool trick for moving images around
But here is a trick that will make image management much easier. If you ever want to delete an image, you can select it in the WYSIWYG view so that it's highlighted yellow, and then press delete:
But sometimes, this won't fully delete the image (don't ask; WYSIWYG editors are still surprisingly clunky across the entire web). And sometimes you don't want to fully delete an image; you just want to move it. To make deleting and moving images easier, I recommend:
- Switch to "Source" view to view the HTML code (don't worry, this is easy)
- Every time an image is inserted, it creates a block_insert tag that looks like this:
- To remove an image for good, simply delete this entire tag.
- To move an image elsewhere in the body, copy it and place this tag where you'd like it to appear in the text (always on its own line, outside of any <p> tags)