The steps in this document refer to our Classic Editor. If you are using our new block editor, please see this support document.

What is the Visual Editor?
First Row
Second Row
Alignment
Styles
Text Color
Pasting Text
Clear Formating
Custom Characters
Outdent / Indent
Spacing
Keyboard Shortcuts

What is the Visual Editor?

The visual editor is a content editor that allows you to easily create, edit, and format your content in a view similar to that of a word processor.

To ensure you’re not looking at the HTML view of the post or page, select the Visual tab in the top right corner of the editor area, as depicted below.

There are two (2) rows of editing icons contained within the visual editor. You can find out what each icon does by hovering over it with your mouse. A small tooltip will appear describing the icon and its purpose.

The content in the visual editor is styled by the CSS (a type of code that gives HTML styling such as color, spacing, width, etc) of the theme that you choose. What you see in the editor may not exactly match the live site. Please use the Preview button to check how the post or page looks on the live site.

---

↑ Table of Contents ↑

First Row

When initially opened, the visual editor will display a single row of icons:

1. Add Media
2. Style – various formatting styles defined by your theme
3. Bold
4. Italic
5. Unordered list (bullet points):
   • Item 1
   • Item 2
6. Ordered list
   1. Item 1
   2. Item 2
7. Insert/edit/remove link
8. Blockquote (a way of displaying quoted text; each theme will style this differently.)
   Always forgive your enemies; nothing annoys them so much.
9. Align Left
10. Align Center
11. Align Right
12. Proofread/Spell Check
13. Insert More tag
14. Toolbar Toggle (enables the second row of editing icons)

---

↑ Table of Contents ↑

Second Row

To display the second row of icons, select the toolbar toggle icon on the right of the first row.

This will open a second toolbar that looks like this:

1. Strikethrough
2. Underline
3. Horizontal line
   
4. Justify
5. Select text color – change the text color
6. Paste as Text
7. Clear formatting
8. Insert special character
9. Outdent – move text further left
10. Indent – move text further right
11. Undo – undo your last action
12. Redo – redo your last action
13. Help – display some information about using the editor, as well as keyboard shortcuts.

---

↑ Table of Contents ↑

Alignment

Both text and images can be aligned using the appropriate icons:

Left

Right

Center

Justify

Note that justified alignment can only be applied to text and will align both sides of the text.

---

↑ Table of Contents ↑

Styles

The style drop-down menu allows you to change the formatting of any selected text. This includes various headings and other pre-defined styles built into your theme.

Note that further style modification requires the Custom CSS Upgrade (and appropriate knowledge of CSS).

---

↑ Table of Contents ↑

Text Color

To change text color you must first highlight a section of text:

Clicking on the down arrow next to the text color button will display a color selector. While the color selector is open, the arrow will point up. You can click on it to close the selector without selecting a color:

Selecting a color will apply that color to the selected text and make it the default color for the color button.

Clicking on the text color button itself will apply the last default color.

---

↑ Table of Contents ↑

Pasting Text

If you copy and paste text from somewhere else, you may discover that it does not always appear exactly as you would expect. If you use the Paste as text button, a special cleanup process will run to remove any special formatting and HTML tags that may otherwise change your text’s formatting.

Below is how the Toolbar looks in “Plain Text off” mode. Note that there’s no box around it:

Below is how the Toolbar looks in “Plain Text on” mode. Notice the icon now has a box around it, and the button is shaded black:

---

↑ Table of Contents ↑

Clear Formatting

The clear formatting button removes all formatting (bold, italic, colors, etc) from a highlighted section of text. First select your text:

When the button is clicked, all the formatting will be removed:

---

↑ Table of Contents ↑

Custom Characters

You can insert special characters into your post or page. Position your cursor to where you want to insert a character and click on the insert custom character button. A popup window will appear:

Click any character and it will be inserted at your cursor position.

---

↑ Table of Contents ↑

Outdent / Indent

The indent button will move text in by one level, and the outdent button will take away one level.

---

↑ Table of Contents ↑

Spacing

Hitting the Enter (Return) key will end the paragraph you are writing and start a new one. If you want to start a new line without creating a new paragraph, press the Shift key while hitting Enter.

---

↑ Table of Contents ↑

Keyboard Shortcuts

The visual editor has several keyboard shortcuts, or hotkeys, built in.

To see a list of all of the available shortcuts, click the toolbar toggle to show the second row of icons, and then click the Keyboard Shortcuts (question mark) icon at the end of the second row.

A window will pop up showing a list of keyboard shortcuts available in the editor.

Default shortcuts, Command + key on Mac, Control + key on Windows:

Key	Action	Key	Action
c	Copy	x	Cut
v	Paste	a	Select all
z	Undo	y	Redo
b	Bold	i	Italic
u	Underline	k	Insert/edit link

Additional shortcuts, Control + Option + key on Mac, Control + Alt + key on Windows:

Key	Action	Key	Action
1	Heading 1	2	Heading 2
3	Heading 3	4	Heading 4
5	Heading 5	6	Heading 6
l	Align left	c	Align center
r	Align right	j	Justify
d	Strikethrough	q	Blockquote
u	Bullet list	o	Numbered list
a	Insert/edit link	s	Remove link
m	Insert/edit image	t	Insert Read More tag
h	Keyboard Shortcuts	x	Code
p	Insert Page Break tag