Boylen Support

How can we help you today?

How to add content using Visual Editor

Modified on: Tue, 2 Sep, 2014 at 11:54 AM

The editor used to enter content into your Page or Post is very easy to use. It’s much like using a regular word processor, with toolbar buttons that allow you to Bold ( ) or Italicize ( ) text or enter in Headings ( ) or bullet points (). You can even use most of the basic keyboard shortcuts used in other text editors. For example: Shift+Enter inserts a line break, Ctrl+C/Cmd+C = copy, Ctrl+X/Cmd+X = cut, Ctrl+Z/Cmd+Z = undo, Ctrl+Y/Cmd+Y = redo, Ctrl+A/Cmd+A = select all, etc. (use the Ctrl key on a PC or the Command key on a Mac).

At the top of the editor there are two tabs, Visual and Text (). These switch the editor view between the Visual Editor and the Text editor. The Text view will enable you to view the HTML code that makes up your content. For the more experienced users this can be helpful at times but for those not familiar with HTML tags, it’s not recommended.

When creating a new Page or Post, the first thing to do is enter in your title in the top entry field where it says Enter title here. After moving the cursor down to the editor a new Permalink is created for your page. Permalinks are the permanent URL’s to your individual Posts, Pages, Categories etc.. Though not usually necessary, you can manually edit your permalink by clicking on the actual permalink (the part after the domain name with the yellow background) or by clicking the Edit button next to it. Once you’ve modified it, click Ok to save or Cancel to cancel your changes.

At the top of the editor where your content is written, there are numerous formatting buttons. Clicking the Toolbar Toggle button () will show or hide a second line of formatting buttons which gives you extra functionality. The editor buttons perform the following functions:

Add Media – Used to upload and insert media such as images, audio, video or documents

Bold – Bold text

Italic – Italicise text

Strike through – Add a strikethrough to your text

Bulleted List – Create an unordered (bullet point) list

Numbered List – Create an Ordered (numbered) list

Block quote – Used as a way of showing a quote. How this looks will be
entirely dependent on the Theme that your site is currently using

Horizontal Line – Inserts a horizontal line into your page

Align Left – Align text to the left

Align Center – Align text in the center of the page

Align Right – Align text to the right

Insert/edit link – Used to create an html link to another page or
website. The text or image that you want to link needs to be selected
first before the button will become active

Remove link – Remove
the html link from the selected link. Your cursor must be sitting on an
active link for the button to be active

Insert Read More tag –
Inserts the More tag into your Page. Most blogs only display a small
excerpt of a Post and you’re required to click the Post title or a ‘Read
more...’ link to continue reading the rest of the article. When you
insert a ‘More’ tag into your Post, everything prior to the tag is
considered as this excerpt. Most times you’d only use this button when
you’re creating a blog Post, rather than a Page

Toolbar Toggle – Used to show or hide the second row of formatting buttons on the editor toolbar

Distraction Free Writing – Clicking this button will enlarge the
editor so that it fills the browser window. Clicking the Exit fullscreen
link at the top of the screen will reduce it back to its original size

Style – Used to format the Page text based on the styles used by the current Theme

Underline – Underline your text

Justify – Align text on both the left and right (i.e. justify)

Text colour – Use to change the color of text

Paste as Text – Copying and pasting text from other sites or word
processors sometimes leaves the text formatted differently to what you
were expecting. The reason for this is that quite often the html tags or
codes that formatted the original text are pasted along with the text
itself. To avoid this, Paste as Plain Text will strip all these
formatting and html tags. Checking the keep linebreaks checkbox will
preserve all HTML <br /> tags. Unchecking this option will remove
them

Clear formatting – Use this to remove all the formatting (e.g. Bold, Underline, text color etc..) from the highlighted text

Visual/Text – Switches the editor view between the Visual Editor and
the Text editor. The Text view will enable you to view the HTML code
that makes up your content. For the more experienced users this can be
helpful at times but for those not familiar with HTML tags, it’s not
recommended