Rich editing, also called WYSIWYG (What You See Is What You Get), means that your text is formatted as you type. The rich editor automatically creates HTML code behind the scenes while you concentrate on writing. Links, font styles and images all appear on the live page approximately as they can be seen within the rich editing box.

FORMATTING TEXT

The toolbar should look similar to the image on the right. If only one row is being displayed, click on the “kitchen sink” button located second from the right, next to the green “plus”.

Many of the buttons are the same as can be found in word processing software such as changing text alignment, making text bold or adding bullet points; however there are several differences.

Text Size

Text size is not changeable in the same way as a word processor. Instead you need to use the various formatting options that can be found within the drop-down box located at the bottom left of the toolbar, with “Paragraph” selected by default. The options seen represent how the text will look with different formats. For example “Paragraph” being used for normal text and “Heading 1” being used for large text titles. There are six types of header which all represent different sizes, “Heading 1” being the largest, and “Heading 6” the smallest. Highlight the text you wish to change and then click on the type you wish to change it to in the drop down box.

Hyperlinks


To create a hyperlink use the mouse to highlight the text you wish to be linked, then click on the Hyperlink button with an icon of a chain. This will display a box on your screen as seen in the image. The URL is the link to a page that will open upon clicking, and the title will be displayed as text upon mouse over.

You can either manually type or paste in the URL and Title in the two respective boxes at the top, alternatively below there is a list of all the pages that currently make up your website. You can click on one of these to automatically insert the link and title.

After you have the information entered, click on “Add Link” and it will be created. To see that it has worked, the linked text  will appear blue and underlined



Shortcodes

A very effective way of formatting information on a page can be by using shortcodes. There are usually one word commands that are interpreted by the rich text editor to manipulate content in many different ways including columns, styles and frames. This example will inform you how to add two columns, one of the easier shortcodes to insert, into a page.

To bring up a list of shortcodes, click on the green plus icon, located at the top right of the toolbar. Next, click on the dropdown box and within the second section titled column layouts select “2 columns“. With that shortcode highlighted click on “Insert”. This will add the shortcode into the page.

The first tag will be one_half. This signifies that the following content will appear across one half of the page. Below that there is some sample text. This is where you need to add the content that will appear within the first column. finally there is /one_half. The forward slash indicates that it is the end point of the column. All content that is intended to be in the column needs to be between these two tags.

After the first tag there is a second tag that looks very similar, with the start line and the end line. This one however is called one_half_final. Much like the previous tag, one half means that it will take up half a page, after the first column. The “final” is telling the page that this is the last column to appear in the row, thus completing a two column split. This page has been created using this method, with the text in the first half and images in the second.

There are many more column shortcodes to create a variety of different layouts on a page, including splitting the page in up to six columns, or even having two columns split unevenly such as the first taking up two thirds of a page, and the second column using the last one third.

Advanced Users

For advanced users, there are two tabs in the top right corner named “Visual” and “HTML”. You can click on the “HTML” tab to view and edit the HTML code.



 

Top