New Editor - 2015 Release

4.0 The Editor Explained

The editor is a common feature when managing your content and is used to edit:

  • Homepages
  • Articles
  • Categories
  • Events
  • HTML blocks

4.1 Overview

This editor is a WYSIWYG editor which is an acronym for: What You See Is What You Get.

There maybe several icons and features on this editor that are familiar to you already, if not each area of the editor will be explained below.

4.2 Text Formatting

The first section of buttons on the editor can be used to:

  • Make text bold
  • Make the text italic
  • Change the color of text
  • Change the color of the text background

 

To use any of these functions you need to highlight the required text in the editor field and click on one or more of the required formats in the editor.

 

The formats tab has a drop down which will display further styling options. Hover over formats and then hover over the drop down titles to reveal these additional styling features. 

Headings

 

Inline

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Superscript
  • Subcript
  • Code (displays dev code on a web page)


 

 

Blocks

 

Alignment

 

Font Size

Font Family

 

4.3 Text Placement

The next section on the editor again maybe familiar to you. These buttons enable you to place your content to the left, center or right of the page.

Highlight the relevant content and click on the required position, using one of the three buttons.

 

4.4 Creating Lists

If you want to create a list within your content you can use either:

  • Numbered list
  • Bulleted list

To add this formatting, highlight the text then click on the numbered list button to add numbered bulleting or bulleted list button to add the bulleted list.

 

4.5 Indent Content

If you would like to indent your content either left or right, highlight the text and use the icons below 

4.6 Clear Formatting

If you need to undo your styling and remove any formatting, highlight the text and use the icon below. 

 

4.7 Links Overview

To add links to your content simply click on the 'link' icon shown below.  

,

4.7.1 External Links

To link to an external website you need to highlight the text or image you want act as the link.

Click on the insert/edit link button and a pop up window will appear

Enter the URL of the external website into the 'Link URL' field. So for this example we will enter a link to the SubHub site.

So we will enter http://www.subhub.com.

As we are linking to an external site I would recommend setting the target to open in a new window, so your visitors are not taken away from your site.

Enter a descriptive title for your link to inform users and search engines where the link will taken them once clicked.

Click 'insert' and the link will be added.

NOTE: The link will not be active until the content is previewed or published.

4.7.2 Internal Links

To link to another page within your own website you need to firstly find the page on your site you wish to link to.

Copy Destination Page Location

Go to the page on your site you wish to link to.

To link to the 'about us' category you need to click on the 'about us' page.

To copy the location of the page look in the address bar, you should see something like this:

Highlight everything that appears after the end of your domain, including the forward slash.

Highlight this text and copy.

NOTE: Do not copy the whole link as once your site goes live you will be using a different domain name.

Paste Destination Page Location

The next step is to create the link to your destination page. To do this, edit the page that will carry the link.

Click on the 'insert/edit link' button on the editor and the insert link window will pop up.

Paste the location of the destination page into the 'Link URL' field.

As we are linking to an internal page on your website I would recommend setting the target to open in same window.

Enter a descriptive title for your link to inform users and search engines where the link will taken them once clicked.

Click on the OK button to close the window to create the link.

NOTE: The link will not be active until the content is previewed or published.

4.7.3 Email Links

To add a link to an email address you need to first highlight the text or image you want the link to be assigned to, and click the OK button.

In the link URL field enter 'mailto:' (without the commas) followed by the email address you wish the link to be sent to.

By adding a title you can add hover over text to the link. This means whenever someone hovers over the link with their cursor they will see this text.

Click 'OK' to create the link and close the pop up window.

NOTE: The link will not be active until the content is previewed or published.

4.7.4 Removing Links

To remove a link you need to edit the page you wish to remove the link from.

Highlight the text or image that has an active link in the editor.

Click on the Insert/Edit Link

Delete the URL from the field

Click OK to remove the link from the text

 

4.8 Images

In this section we will show you how to add/edit images within the editor.

*You can watch a video tutorial on Uploading and Inserting Images here.*

4.8.1 Insert an Image

When adding an image to your site you must firstly save the image to your computer.

You must also ensure it has been saved using the correct dimensions and as either a .jpg, .gif or .png file.

NOTE: Please make sure the image does not have any spaces in the file name, as this can cause display issues in Internet Explorer.

To add an image into the body - 

  • Place the cursor at the place you wish to insert the image
  • Click on the ‘Image Manager’ icon
  • An pop up window will appear
  • You need to upload an image via the source section, click on the magnifier icon
  • This will open up your Image Manager
  • Click ‘Add file’
  • You will now see a file uploader
  • Click ‘Choose Files’ then locate the file on your computer and click upload
  • The file will now appear within your Image Manager
  • You can select multiple images to upload
  • To insert an image, double click on the file name, or right click and choose ’select’
  • The Image Manager edit window will now appear
  • Give your image a description (good for SEO)
  • You can also modify the dimensions here if required.

 

Advanced Tab

Vertical Space - Add some space to the top and bottom of the image

Horizontal Space - Add some space to the left and right of the image

Border - Add a border around the image to create a frame

 

 

Click OK once you are happy to proceed, the image will be placed into the content

Resize - You can also resize the image by dragging on the corners of the image to keep the correct proportions

(NOTE: This will only change the appearance of the image not the actual file size. We therefore recommend you resize your image before you save it to the image manager, using an image editor application.)

Wrap Around Content - It is possible to make the image sit within the text. Click to select the image, then click on the alignment buttons shown below.

 

4.8.2 Edit an Image

To edit an image you need to click on the image in the editor so it becomes selected, then click on the Image Manager.

The edit image window will open allowing you to make any changes to the image.

Click 'OK' and the changes will have been made.

4.8.3 Image Link

To add a link to an image click on the image in the editor to make sure it is selected.

Then click on the insert/edit link button.

Here you can add any type of link as covered in the 'Editor Explained' (4.7).

4.9 Embed Audio into Your Content

Before you can upload your audio file to your site you must ensure it has been saved as an .mp4 file. This will ensure the file can be played across all mobile devices. 

The audio section is found within the Media Manager.

 

NOTE: The optimum recording settings are 44.1kh, 16bit, 64 kbps

4.9.1 Upload Your Audio

To upload you audio file please follow the instructions listed below.

  • Open the Media Manager
  • Click on 'Add File'
  • The mini menu uploader will now appear
  • Locate and upload file from your computer
  • The file will now appear in your media manager list
  • Double click or right click and to select the file you want to embed
  • A new window will now appear allowing you to change the image location if required
  • Click OK and the Audio file will appear in a player format

NOTE: Large files or a slow Internet connection will result in slow upload or a timeout. If this occurs please try plugging into your internet connection rather than use WiFi, or reduce the file size. 

4.9.2 Embed Your Audio

 

  • Create or edit the page you wish the audio to play in
  • Click on the Media Manager
  • Select embed
  • Insert code into window
  • Click OK to embed the audio

 

If you are happy with it then click the 'Publish Now' link.

4.10 Embed Video into Your Content

*You can watch a video tutorial on Embedding Video here.*

Before you can upload your video file to your site you must ensure it has been saved as a .mp4 file.

Media Manager Icon

4.10.1 Upload Your Video

To upload you video file please follow the instructions listed below.

    • Open the Media Manager
    • Click on 'Add File'
    • The mini menu uploader will now appear
    • Locate and upload file from your computer
    • The file will now appear in your media manager list
    • Double click or right click and to select the file you want to embed
    • A new window will now appear allowing you to change the image location if required
    • Click OK and the Video file will appear in a player format

 

NOTE: Large files or a slow Internet connection will result in slow upload or a timeout. If this occurs please try plugging into your internet connection rather than use WiFi, or reduce the file size.

 

 

 

4.10.2 Embed Your Video

  • Create or edit the page you wish the audio to play in
  • Click on the Media Manager
  • Select embed
  • Insert code into window
  • Click OK to embed the video

If you are happy with it then click the 'Publish Now' link.

 

4.11 Embed Video From YouTube

You can embed YouTube videos using the Embed Video feature above. The YouTube code is found next the video share options. 

 

4.12 Tables

4.12.1 Insert a Table

To add a table into your content you need to click on the 'Insert a new table' button on the editor.

The following window will pop up:

Define how many columns and rows the table needs

We would always advice that you set the width of a table at 100%, this will make sure that the table will always fit the available space on your website.

Once you have created the table, click on the Insert/Edit table icon to reveal the Table properties options. 

To add text or images into your table you need to place your cursor within one of the table cells and add any text or images as normal.

4.12.2 Edit a Table

Once a table has been created several more options will be activated on the editor under the table properties header. 

  • General
  • Width
  • Height
  • Cell spacing
  • Cell padding
  • Border
  • Caption
  • Alignment

 

Advanced

  • Set the border color
  • Set the background color

 

4.13 Full Screen Editor

By clicking on this button you will make the editor appear full screen, which will give you more room to edit your content.

NOTE: When using full screen, you are not getting a true representation of the page.

4.14 Find and Replace

If you need to locate and update some text you can use this search and correction tool.

 

4.15 Insert Custom Characters

You are able to insert special characters by clicking on this button in the editor.

It is useful for inserting copyright or trademark symbols or other such custom characters.

This window will pop up, from which you can select the character you want to insert.

4.16 Undo/Redo

These buttons allow you to undo any unwanted changes you have made in the editor or redo ones we have already undone – a very useful tool!

4.17 Edit HTML

For the more technically minded you can also edit the HTML of the body content also know as source code. 

Click on the HTML button and a new window will open

Here you can make any required changes to the actual HTML of the page

Click 'update' to see these changes implemented

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk