Authoring HTML Content with the WYSIWYG Editor
The more that you work with your Reservoir site, the more you'll become acquainted with the "What you see is what you get" (WYSIWYG) editor. Get a head start on working with the WYSIWYG editor by reading this article.
Let's go through each feature, button by button.
Tip: If you're ever unsure what a button does or is named, just hover your mouse over it for a couple seconds, and a tooltip with appear with its title.
1. Working with Text
When you start typing in web content, the text is formatted as a paragraph. In general, paragraphs on web pages may be a little different than you're used to:
- Most of the time, paragraphs on web pages are not indented. You'll notice that this is the convention when browsing most popular websites.
- Paragraphs have an extra line of space below them. It's generally how paragraphs are separated from one another.
Forcing a Single Line Break
If you would like to break the line by a single line instead of the default two, hold down the Shift key before hitting Enter. This will enter a line break without adding the extra space.
Cut, Copy, and Paste Buttons
The first 3 buttons in this group are your standard Cut, Copy, and Paste operations. You can also use the Ctrl+X, Ctrl+C, and Ctrl+V keyboard shortcuts, respectively.
Paste as Plain Text and Paste from Word Buttons
The next 2 buttons are of special interest though: Paste as plain text and Paste from Word. Both buttons should be used to clean up content that you may paste in from Microsoft Word, a web page, or another program on your computer.
The important thing to note here is that copying content from any program will copy "extra stuff" along with it, usually code to control formatting and such. If you paste this directly into your web content, all of that extra stuff will be pasted along with the content. This often leads to the content showing up formatted strangely on your web page.
Because of this issue, we strongly recommend always using the Paste as plain text or Paste from Word buttons to paste content into your Reservoir website, no matter where you copied the content from.
Also note that when you use these special paste buttons, any formatting like bold text, headings, lists, and links will be stripped out. That means that you'll need to add that formatting back in manually. But having the content entered into your site correctly will prove to be invaluable in the long term.
Undo and Redo Buttons
The Undo and Redo buttons will undo and redo any changes that you've made to the content since you've loaded it.
Note that it will not undo and redo content that you changed before clicking the Update button. It only gives you control over the current form that you're viewing.
Source Button
Clicking the Source button shows you what's going on under the hood. If you need to paste in HTML code or fine-tune how a certain element is marked up, this is the place to do it.
To return to the more visual (non-code) editor, just click the Source button again.
3. Formatting Buttons
These buttons allow you to format and mark up parts of your text. In general, the formatting buttons listed in this section work can be used in either of these ways:
- Click one or more of the buttons to enable the formatting. Type in your content. Click the activated button(s) to turn off the formatting for any other content that you type in after that.
- Type in your content and highlight it by clicking and dragging the cursor over it. Click any of the formatting buttons to apply that formatting to the highlighted text.
To remove specific formatting from text in your content, highlight the formatted text and click the corresponding formatting button to deactivate it.
Remove Format Button
If you highlight text and click the Remove Format button, the editor will remove any formatting applied to that text.
This is useful if you want to remove extraneous formatting from large blocks of text. For example, perhaps you went a little overboard on bolding and/or italicing phrases within your copy.
Bold, Italic, and Underline Buttons
These buttons apply standard bold, italic, and underline formatting. You can also access these formats from the keyboard by pressing Ctrl+B, Ctrl+I, or Ctrl+U, respectively.
Subscript and Superscript Buttons
Subscript causes the text it's applied to to appear sunken down slightly below the line of text. Think footnote numbering.
Superscript causes the text to be raised above the line of text. Think of how an exponent is marked up (squared, cubed, etc.).
Link and Anchor Buttons
Hyperlinking is one of the key defining features of the Web as a whole. You can use these buttons to link text and images to other websites or to other pages on your own website.
See the article on Creating Links [coming soon] for more information.
Font Size Menu
If you need to change the size of a word or phrase in your content, select the text to modify and use this menu to adjust the font size.
Text Color Button
Use this button to change the color of selected text in the editor.
If you want to remove a text color from your content, select that text and click the "Automatic" color.
Also, there is a More Colors menu to give you some more choices.
4. Block Level Buttons
HTML content is divided into different blocks—paragraphs, divs, block quotes, and so on. This group of buttons helps you to choose what type of block formats, alignment, and so on.
In general, you can just place your cursor on a block of content and use these block-level controls to change the formatting.
Numbered List and Unordered List Buttons
Using ordered and bulleted lists helps break up content into easier-to-scan chunks and makes your content appear less overwhelming to your site's visitors.
Click the Insert/Remove Numbered List button to create a numbered list.
Click the Insert/Remove Unordered List button to create a bulleted list.
If you have a group of paragrahs that you would like to turn into a list, you can highlight the entire set of paragraphs, click the desired list button, and the paragraphs will each be be converted into items in the list automatically.
When your cursor is inside the list, hit your Enter key to create a new list item.
When you're done with your list, hit Enter to create a new item, and click the list button again to exit out of the list.
Indentation and Block Quote Buttons
The first 2 buttons are for decreasing and increasing indentation of an entire block of content. You can either click the button and start typing or highlight an entire block of content to indent.
The Block Quote button should be used to indicate that the block of text is quoting a person, article, or another website. The text marked as a block quote will appear indented in your editor.
Text Alignment Buttons
Use these buttons to align your selected text or paragraph left, centered, or right, respectively.
Format Menu
This menu should be used to create Heading 1's as the visible page title at the top of the page, Heading 2-6's for different levels of subheadings, pre-formatted fixed-width text blocks, and address blocks.
5. Object Insertion Buttons
HTML content also allows for you to insert different types of objects—tables, divider lines, special characters, etc. To use these controls, place your cursor where you would like to insert a given object and click the button.
If you wish to move an object after inserting it into the content, you can often click and drag an object to a new location in the content.
Templates Button
This button exposes extra content "templates" that can be inserted into your content. Right now, Reservoir offers only one template, a More Content page break feature.
More Content Template
If you're writing an article or blog post, we may sometimes instruct you to use this feature to split your article into "introduction" content that's displayed on any screen that lists articles (like the main blog page and category pages).
Adding the More Content Template will cause a line to appear in the editor, which divides your content into 2 parts. What appears before the line will appear on the screens that list blog posts. Both parts will then appear as the full post on the individual blog posts' pages.
Image Button
Place your cursor where you would like to place an image and click this button. You can either upload a new image or use an existing image that's already uploaded to your membership site.
See the article on Images [coming soon] for more information.
Table Button
Click the Table button to insert a table, which generally should only be used to display tabular data.
Clicking this button will cause a Table Properties dialog window to appear where you can change many different settings, inlcuding number of rows and columns; width; height; header styles; cell spacing; cell padding; border size; alignment; caption; and summary.
If you want to tweak the settings for a given table after you've created it, you can get the Table Properties window to appear again by right-clicking inside the table and clicking Table Properties or by placing your cursor in one of the cells and clicking the Table button again.
Insert Horizontal Line Button
This is often referred to as a "horizontal rule" as well. Click this button to insert a horizontal divider line into the content to give different sections of content more division.
Insert Special Character Button
Click this button to see a menu of special characters that you usually cannot get to easily from your keyboard. More popularly-used special characters on our membership sites are the em dash (—), left and right arrow quotes (« and »), trade mark sign (™), copy right sign (©), and registered trade mark sign (®).