The visual editor provides a semi-WYSIWYG (what you see is what you get) content editor that allows you to easily create, edit and format your blog content in a view similar to that of a word processor.

This is the default editing mode of Church Web Werx sites, but if it does not appear to be enabled, you can 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 any icon means or does by hovering over it with your mouse – a small tooltip will appear describing the icon and its purpose.

Row 1

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

1. Bold
2. Italic
3. Strike-through
4. Unordered list (bullet points):
   • Item 1
   • Item 2
5. Ordered list
   1. Item 1
   2. Item 2
6. Blockquote (a way of displaying quoted text; each theme will style this differently.)
   

   Always forgive your enemies; nothing annoys them so much.

7. Align Left
8. Align Center
9. Align Right
10. Insert/edit link
11. Unlink
12. Insert More tag
13. Toggle proofreading
14. Toggle fullscreen mode
15. Show/Hide Kitchen sink (enables the second row of editing icons:

Row 2

To display the second row of icons, select the kitchen sink icon

1. Style – various formatting styles defined by your theme
2. Underline
3. Align full
4. Select text color – change the text color
5. Paste as Plain Text
6. Paste from Word
7. Remove formatting
8. Insert custom 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.

Alignment

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

Left

Right

Center

Full

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

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 all styles are defined within your theme.

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:

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.

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 then a special cleanup process will run to remove any special formatting and HTML tags that may otherwise change your text.

Once clicked a window appears where you can enter your text:

Checking the keep linebreaks box will preserve all HTML <br /> tags. Unchecking this option will remove them.

Remove Formatting

The remove formatting button, as you would expect, 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:

Custom Characters

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.

Outdent / Indent

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

There are a couple of ways to add links to your posts or pages.

Visual Editor Links

To add a link using the Visual editor:

1. Highlight the text you want to link.
2. Click the link button on the toolbar.

   

3. A popup will appear with configuration options for the link.
   
   Link URL – The URL of the link (include http:// at the start for external websites)
   Target – Select if you want the link to open in a new window
   Title – Title of the link when a visitor hovers over it (a small tooltip will appear with the title)
   Class – Advanced. Specify a CSS class for the link
4. After setting the options, click the Insert button, and the highlighted text will change to the color blue with an underline to signify a link.

HTML Editor Links

To create a link using the HTML editor:

1. Highlight the text you want to link.
2. Click the link button on the toolbar.
   
3. A popup will appear asking for the link URL.
4. Type or paste in the URL, click the OK button and the highlighted text will be wrapped with the HTML link code.

Keeping the @ in links

If you try to put this (for example)

into the Add Link page, the @ gets removed and breaks the link.

Instead, put this there

If you re-edit the link the @ will go again so you need to redo it in that case.