Brandicoot clients that have access to their website dashboard and are creating or editing posts or pages on their website will have noticed that there are two editing modes available for use, the Visual Editor and the Text Editor.
In this guide we are focusing on the Visual Editor. This is the default editing mode for your website and looks very similar to a word processor. The visual editor icons allow you to format text, change font alignment, insert bulleted and numbered lists, and more.
If you find that the visual editor is not enabled, don’t panic, switching between the Visual and Text editing modes is easy. Just use the tabs directly above the right side of the editing area.
There are 2 rows of editing icons contained within the visual editor. You can find out what any icon means or does by hovering over it with your mouse – a small tooltip will appear describing the icon and its purpose.
Visual Editor Row 1
3. Blockquote (a way of displaying quoted text; each theme will style this differently.)
Always forgive your enemies; nothing annoys them so much.
4. Bulleted list:
- Item 1
- Item 2
5. Numbered list:
- Item 1
- Item 2
6. Align Left
7. Align Center
8. Align Right
9. Insert/edit link
14. Toolbar Toggle aka The Kitchen Sink (enables the second row of editing icons)
15. Distraction Free Writing
Visual Editor Row 2
Tip: If you can’t see the second Row, select the toolbar toggle icon aka The Kitchen Sink
1. Style – various formatting styles defined by your theme
4. Decrease Indent – move text further left
5. Increase Indent – move text further right
6. Paste as Text
7. Clear formatting
8. Insert special character
9. Insert Read More Tag
11. Text Colour
12. Keyboard Shortcuts.
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, get in touch with Brandicoot if this is the case.
To change text colour you must first highlight a section of text:
Clicking on the down arrow next to the text colour button will display a colour selector. While the colour selector is open, the arrow will point up. You can click on it to close the selector without selecting a colour:
Selecting a colour will apply that colour to the selected text and make it the default colour for the colour button.
Clicking on the text colour button itself will apply the last default colour.
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 then a special cleanup process will run to remove any special formatting and HTML tags that may otherwise change your text.
The first time you click the button, a window will appear notifying you that you will be pasting in plain text. This window will only reappear after you refresh or open a new post or page:
Once you’ve enabled the Plain Text option once for a post or page, subsequent clicks on the button will turn it on (evidenced by a box around the button) or off (no box around the button). You will not see the pop up window again unless you reload the page or go to a new post/page, but the toggle option still works.
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:
The remove formatting button, as you would expect, removes all formatting (bold, italic, colours etc) from a highlighted section of text. First select your text:
When the button is clicked, all the formatting will be removed:
As well as the normal letters available directly from your keyboard, you can also insert special characters. 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.
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.
The visual editor has several keyboard shortcuts, or hotkeys, built in.
To see a list of all of the available shortcuts, click the Help icon and then scroll through all the keyboard shortcuts.