How to Edit Page Content & Page Images

How to Edit Page Content & Page Images

First you will need to log into the Administration area of your website using your Username and Password.

We have recently updated the Text Editor !

< Under your left menu you will see a Text Editor Selector. The latest text editor is Version 4. If you are using Internet Explorer or Google Chrome as your web browser – please select Version 4 from the drop menu as Version 3 has a few little issues caused by the new Windows update (only when using Internet Explorer or Google Chrome). If you are using Mozilla FireFox – both versions of the Text Editor are still completely compatible.

To edit the content on one of your content pages, Click on Content Editor on the left menu.

You will see all of your content pages will be listed. Find the page from the list that you want to edit. Now you can Edit that page by clicking on the “Edit Icon” (see “Pencil & Paper” circled in the image above)

With your content page open, you need to select the Page Sections tab.

This is where you will see all of the content (text and images) on your webpage.

How to add text to your Webpage As you can see the Text Box is very similar to Microsoft Word and has many of the same features and icons. There are 2 ways to add text.

• The first is to simply type directly into the editor. (No more explanation needed really.) • Second is to “copy and paste” text from a Word Document (or other source eg- email).

Open up your Microsoft Word document and highlight the text you want to copy. Right click on the highlighted text and select the Copy Option from the pop up menu.

Alternatively, you can also use your shortcut keys to copy text by pressing the Ctrl and C keys on your keyboard. (This will copy your highlighted text to your clipboard.) Go back to your content editor text box and click in the editor where you would like your new text to be. You can paste the text by using the paste shortcut keys: Ctrl V. Your text will now be in the content editor for you to format.

Changing the look of your text (Bold, Underline, Headings, etc...)

Above is an image of the many buttons you will find in the Content editor. Some of them you may be familiar with as they are the same as you would find in any word processor such as Microsoft Word, or even your Email software.

When in the content editor, an information bubble will pop up when you hover your mouse over each button to tell you what it is used for. But for now, I have added a brief description of what the most common icons are used for:

B – is to make text Bold I – is to make text italic U – is to underline text ABC – is to Strikethrough or to draw a line through the text

These buttons align your body of text for example: align to left margin, Centre the text, align to right margin, or justify the text.

This creates a bulleted list or a numbered list

This is the Create a Table button. (please see the “How to create Tables” info sheet)

This is the “Image” button - to insert and edit the properties of your images.

This is where you can change the format or your text – create Headings of various sizes, or just create text in paragraphs. To keep your headings consistent on every page of your website, you can simply highlight the text you want to be a heading and select one of the heading options from the drop menu. There are 6 different headings to choose from – heading 1 being your biggest main heading, and gradually getting smaller all the way down to a heading 6 size. Please Note - Your heading list will look different to what is pictured on the left as each website is unique and will therefore use a different font and different colour for your headings to suit your individual website requirements.

Changes the size of your font. If you want to make headings – please refer to the notes above.

Changes the colour of your text & Highlights your text with colour (just like a highlighter pen)

How to make Headings

This is where you can change the format or your text – create Headings of various sizes, or just create text in paragraphs. To keep your headings consistent on every page of your website, you can simply highlight the text you want to be a heading and select one of the heading options from the drop menu. There are 6 different headings to choose from – heading 1 being your biggest main heading, and gradually getting smaller all the way down to a heading 6 size. Please Note - Your heading list will look different to what is pictured here on the left as each website is unique and will therefore use a different font and different colour for your headings to suit your individual website requirements.

How to insert an image onto your page & How to upload an image.

On the Page Sections page, click at the beginning of the line of text where you would like the top of the picture to be located.

Now click on the Image button . (As seen pictured above)

< This window will open.

Click on the File button found at the end of the Source line

< This window will then open. From this window you can select an existing image that has already been uploaded simply by double clicking on the Images folder Or you upload a new image by clicking on the Upload button. < This will open a file upload window Select the image file you want to put on to your page either by clicking on the Add Files button, or by simply dragging the files from your folder directly into the frame where indicated. You will see the file name now in the list. Now click on the Upload button. A progress bar will show you the progress of the file upload. Depending on the size of the file, this may take 2 seconds or a few minutes.

Once the files have uploaded you will see 100% in the progress bar. Simply click on the Close button

< you will now see you file in the other files that are already uploaded to your website. . You will see the image you just uploaded. Select it (just by clicking in the tick box). Now you have selected the image, simply click on the Insert button.

< You will find yourself back at this window again. Here you can change the size, or add an image description. To insert on to your page simply click OK. To add or remove a border, or to add vertical or horizontal space around your picture, you will need to click on the Advanced Tab.

Dimensions: this is where you can change the size that the image appears on your page. It is recommended that you do not make the image larger as it decreases the quality of the image. It is always better to upload the image at the size you need it to be. Vertical & Horizontal Space: this puts an invisible buffer on either the vertical or horizontal edge of the image. This is helpful if you want to push the image away from a margin or text. Border: this puts a border around your image. A simple thin border would be 1 or 2 pixels. When you have finished with your image settings, Click on the OK button. (You can always come back to this window to edit these settings again by clicking on the image and then the Image

button. (See Step by step instructions below)

How to wrap your text, change the position, size, or border of your image.

First select the image you want to change simply by clicking on it. When the image is selected, a black frame will appear around the image (as seen in the image above.) You can resize the image from here by clicking and dragging the frame around the image until the desired size is reached. It is recommended that you use this method of resizing for only minor adjustments. We would also recommend that you do not make the image larger as it decreases the quality of the image. It is always better to upload the image at the size you need it to be. For resizing, rotating, cropping and special effects, our new editor has some great image editing tools – please refer to the Image editing information on page 6 of this document.

How to wrap text around your image and change image position.

To wrap the text around the image and to move the image to the left or right side of the page, simply select the

image by clicking on it and then from the left or right align buttons: . You can move you image around the page simply by left clicking and dragging it up and down the page.

To add or remove borders, adding vertical or horizontal space around your images.

Select your image by clicking on it. Now click on the Image Button (as seen circled above)

< You will see this window again. Dimensions: this is where you can change the size that the image appears on your page. It is recommended that you do not make the image larger as it decreases the quality of the image. It is always better to upload the image at the size you need it to be. For resizing, rotating, cropping and special effects, our new editor has some great image editing tools – please refer to the Image Editing information further down in this document.

To add or remove a border, or to add vertical or horizontal space around an image, click on the Advanced Tab. Vertical & Horizontal Space: this puts an invisible buffer on either the vertical or horizontal edge of the image. This is helpful if you want to push the image away from a margin or text. Eg: 10 Border: this puts a border around your image. A simple thin border would be 1 or 2 pixels. When you have finished with your image settings, click your curser into the style field and it will auto-fill the coding for your settings. Click on the OK button. (You can always come back to this window to edit these settings again by clicking on the image and then the Image button )

How to EDIT an image: Image Editing tools: Resize, Rotate, Crop and Special Effects/Filters

Click on the Image Button (as seen circled above)

Click onto the Images folder and locate the image you want to edit.

When you hover your mouse over an image, a tick box will appear. Click the tick box on the image you want to edit.

Click on the Manage Button to reveal the drop menu.

Select Edit.

From here you can select a range of image

editing options from the left menu.

Some of these options will display a slide bar to alter the effect you have selected – for example, Brightness, Contrast etc.

Resize Image: this will change the physical dimensions of the image to the specified size. It is never recommended to enlarge an image as the image will pixelate and lose clarity. All measurements are in pixels (px)

Crop Image: this will allow you to snip out a section of the image to a specific height & width.

Rotate Image: this allows you to rotate or flip the image.

Save the edited image with a new file name by typing the new file name in to the field provided at the top of the Edit Image window, and then click on Save. The Edit Image window will then close and you can select the edited image from the images directory and insert onto your page as normal.

How to move your image up and down your page

You can also drag your picture to position it lower down or higher up your page, simply by clicking and dragging it. (As pictured above) You will see a curser as you move the image around the page. (This looks like a little line.)

As a guide, wherever you drag the curser that is where the top of the image will sit.

Please note - To move the image to the left or right, you need to change the alignment setting by clicking on the

image button as described earlier.

Save your changes! >

When ever you edit or make any changes to one of your webpages, you MUST scroll all

the way to the bottom and click the Update Page button.

This SAVES all of the changes you just made to your webpage!

This is VERY IMPORTANT.

If you dont update after every change, your changes will not be saved and your website will not be updated with the new changes.

Always check your website whenever you make a change to a webpage, as your content can look very different in the content editor

than it does on your actual website!

A handy tip is to keep the webpage open in one window of your internet browser, and your Administration / Content Editor open in another window, so you can easily go from one to the other without having to put in the web address in all the time.

How to Edit Page Content & Page Images

Documents

Transcript of How to Edit Page Content & Page Images