Part Four - The Editor Explained

4.0 The Editor Explained

The editor is a common feature when managing your site 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:

  • Remove all formatting
  • Change the color of text
  • Change the color of the text background
  • Make text bold
  • Make the text italic
  • Make the text underlined
  • Create sub and superscript text.

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.

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 Styles

You are able to add styles to your text using these three drop down menus.

Highlight the text you wish to change and choose from one or more, of the style drop down menus.

4.4.1 Format

From here you can choose from a list of predefined styles.

4.4.2 Font Family

Use this option to change your font type.

NOTE: If you wish to change the default font type across your whole site then please contact the SubHub support team who will be happy to help.

4.4.3 Font Size

You can also change the font size here.

NOTE: If you wish to change the default font size across your whole site then please contact the SubHub support team who will be happy to help.

4.5 Copying and Pasting From Word and Other Text Documents

If you have written your content in a Word or other text document and you want to copy and paste it into the editor on your site there are two options available to you.

You can either paste as plain text or paste from Word.

NOTE: Even if you are copying from a Word document it is always recommend that you use the 'paste as plain text' option. The reason for this is because pasting from Word copies over strange formatting that Word can generate and this can effect the way your content is displayed.

Pasting as plain text ensures all of the copy on your site is standardized.

To past as plain text you need to

  • Open the document you want to copy from,
  • Highlight the text,
  • Copy the text,
  • Return to your SubHub site
  • Click on the paste as plain text button in the editor.
  • A pop up box will open into which you need to paste the text. You do this by clicking within the window with your cursor and then hold down control and V on your keyboard.
  • You will see the text appear in the window,
  • Click 'insert' and the text will now be copied into the body field.

4.6 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.7 Links Overview

These three buttons on the editor are concerned with linking, you can use this button to create external links, internal links and email links, used with the anchor button you can also link within the same page.

To make sure all three buttons are activated you must have highlighted the text or image that you wish to apply the link to.

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.

When entering a link to an external site it is important to add the http:// at the beginning.

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 insert button to close the window and 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 firstly highlight the text or image you want the link to be assigned to and click the insert/edit link 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 'insert' 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 Linking Within a Page (Anchors)

It is possible to set up links that take you to different positions within the same page.

An example of where this could be used is for a Frequently Asked Questions (FAQs) area on your site.

To create these links we will use a function called 'anchors'.

We will use the FAQ's as an example for this section.

The first step is to create the page and add all content:

To create a link from the third question at the top of the page to the answer in the middle of the same page we need to create an 'anchor'.

Within the body field, place the cursor at the start of the line you wish to be taken to.

Click on the anchor button in the editor.

An insert anchor window will open, in this field you need to give your anchor a name.

Name it something that relates to where it is on the page.

Click 'insert' and you will see the anchor has been set.

The next step is to create a link to the anchor, you can add this link in the same why we described in section 4.7.2 Internal Links.

But this time the 'Link URL' field must be the same as the name you entered for the anchor, proceeded by a #

NOTE: You must enter the # for the link to work.

So when a user clicks on this link they will be taken to the anchor on the page. Again this will not be live until the page is published.

4.7.5 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.

Once you have done this you will see the 'unlink' button has become active.

Click this and you will see the link has been removed.

4.8 Images

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

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 insert/edit image button.

The image window will now open

To add a new image you need to click on the 'browse' button.

This will open up your image manger. The image manage will show you all the images that are currently in your uploads folder on the server.

To add your first image click on 'Upload new image'

This will open a pop up window

Click on the 'browse' button

This will open another window that will allow you to find your previously saved image

Click to highlight the required image

Click the 'Open ' button

You will see the file location has been added into the 'File to upload' field

Click upload and your image will now appear in the image manager.

Click on the image

The image will appear in the preview panel

Here you can add an image description, which is important for search engine optimization.

You can change the appearance of the image by clicking on the 'Appearance' tab.

Alignment

  • To wrap text around the image you need to choose an option from the 'Alignment' drop down list.
  • Select left to position the image to the left and select right to position the image to the right

Dimensions

  • You can change the size of the image by changing the hight and width

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.

Spacing & Borders

  • You can also add space around the image or give the image a border.
  • Click insert and the image will be inserted into the body field.

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 insert/edit image button.

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

Click 'update' 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 .mp3 file.

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.

  • Go to the control panel
  • Click on 'Downloads'
  • Click on 'add new download'
  • Set who can view the file to 'everyone' or 'members only'
  • Give the file a relevant title
  • Click the 'Browse' button
  • Find the audio file in the pop up window and double click
  • Click 'Save'

NOTE: Large files or a slow Internet connection will result in slow upload or a timeout. If this occurs please try reducing the file size.

4.9.2 Embed Your Audio

Create or edit the page you wish the audio to play in

Click on the embed audio button on the editor

The following window will appear:

NOTE: This window will only display .mp3 files that you have previously added to the download section.

You can either click on the 'insert' option or 'insert autoplay'

  • Insert – This means your visitors will have to click 'play' on the audio player
  • Insert Autoplay – This means the audio will automatically start playing as soon as a visitor opens the page.

Once you have made your selection the audio player will now be visible in the editor.

Click 'Save' and 'Preview' to listen to the audio.

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

4.10 Embed Video into Your Content

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

4.10.1 Upload Your Video

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

  • Go to the control panel
  • Click on 'Downloads'
  • Click on 'add new download'
  • Set who can view the file to 'everyone' or 'members only'
  • Give the file a relevant title
  • Click the 'Browse' button
  • Find the video file in the pop up window and double click
  • Click 'Save'

NOTE: Large files or a slow Internet connection will result in slow upload or a timeout.

If this occurs please try reducing the file size.

4.10.2 Embed Your Video

Create or edit the page you wish the video to play in

Click on the embed video button on the editor

The following window will appear:

NOTE: This window will only display .flv files that you have previously added to the download section.

You can either click on the 'insert' option or 'insert autoplay'

  • Insert – This means your visitors will have to click 'play' on the audio player
  • Insert Autoplay – This means the audio will automatically start playing as soon as a visitor opens the page.

Once you have made your selection the video player will now be visible in the editor.

Click 'Save' and 'Preview' to watch the video.

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

4.11 Insert Video From YouTube

We have made it simple for you to embed video clips straight from YouTube.

To do this you will need to know the video ID of your required YouTube video.

  • You can find this by going to www.youtube.com and finding the relevant video.
  • In the address bar you will see a series of characters at the end of the URL.
  • Highlight and copy everything that appears after the equals sign.

Edit or create the page you want to embed the YouTube! Video within.

Click on the YouTube! button on the editor

The following pop up window will appear

Paste the video ID into the ID field.

Click 'insert' and a placeholder will appear in the editor.

Click 'Save' and 'Preview' to see the youtube video has been inserted.

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

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

Place the table using the alignment drop down, align the table in the center of the page or to the left of right

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.

For more advanced controls click on the 'advanced tab'.

The most useful advanced options are the ability to set the border and background color of the table.

Click 'insert' and you can see the table has been added to the content.

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.

These will enable you to edit the table (From right to left on the image above).

  • Create a new table
  • Table row properties
  • Table cell properties
  • Insert row at the top of selection
  • Insert row at bottom of selection
  • Delete selected row
  • Insert column at beginning of selection
  • Insert column at the end of selection
  • Delete selected column
  • Split previously merged cell
  • Merge cells

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 Spell Checker

There is a spell checker included in the editor.

Click on the ABC button and the spell checker will underline any incorrectly spelt words.

Click on the underlined word and you will be offered alternative spellings.

You can choose to ignore this mis-spelt word if you so wish.

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

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

4.18 PDF Download

To download a PDF copy of this article please click the following link: Part Four - The Editor Explained PDF.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk