Editing & Adding Pages

Once you have logged into the editor click 'Edit Pages' from the menu on the left.

Click 'Create a new Folder' (this may say Directory rather than Folder). The folder name needs to be the name of your new page, this name will appear in the URL leading to the page.
For example: http://www.sck-webworks.co.uk/about-us/
This is the URL for our About Us page, this means the page is in a folder called about-us. When naming your folder use lower case letters and rather than spaces or underscores use dashes.

Then click the 'Create New Folder' button.

You should now see your new folder further down this page. Click 'Create New File'. Give it the name index and from the drop down menu choose the folder you have created. Then click 'Create New File'. If the drop down menu to select a folder isn't there you will need to click on the folder, you should then be taken to another page showing the contents of this folder, at the top of the page click 'Create new page'. Name this page index and click 'Create New Page'.

As the file is named index the page will appear at http://www.sck-webworks.co.uk/about-us/ if you wish to create a sub-page in a folder which already has an index give it a different name and the URL will be similar to http://www.sck-webworks.co.uk/about-us/team.htm.

Now if you click on the folder you will see the file you just created. If your site isn't a shop site, when you click a folder you will be taken to a separate page showing the files it contains.

You can click on the file's name to edit it or click the 'edit' button on the right. There is also a 'preview' button to view the page and 'delete' button to delete it.

To add a link to the new page to the site’s navigation or footer see Editing Includes.

Once you have logged into the editor to edit a page click 'Edit Pages' from the menu on the left.

Here you will see your website's pages. The pages which are stored in the root such will be towards the bottom of this page. Other pages will be stored within folders, simply click the folder to see the pages it contains.

To then edit the page click the file name or the 'edit' button on the right. There is also a 'preview' button which when clicked will show you the page and a 'delete' button to delete the page from your site.

If you cannot find the page you are looking for it may be a dynamic page, it won't appear here because it isn't fully editable. However, you may be able to edit some sections of the page through Edit Includes.

Now if you click on the folder you will see the file you just created. If your site isn't a shop site, when you click a folder you will be taken to a separate page showing the files it contains.

After clicking 'Edit' you will be taken to the Page Editor. At the top of this page you should see a list of text boxes, similar to the below image.

'Title' is the text which displays in the page's tab at the top of your browser. 'On Page Title' is the text which appears in the breadcrumb, your site may not have one of these. 'Meta Description' is a short description of what the page is and 'Meta Keywords' is a list of comma separated keywords related to the page.

Below this is the area where you can edit your page content. There is a white space where you can simply type your content, at the top of this area is a selection of tools, if you have used software such as Microsoft Word you may already be familiar with some of these.

Once you have finished editing the page click 'Save this Page' in the bottom right, you can also press 'Back' (top right or bottom left) to go back to 'Edit Pages'. If you don’t save before leaving the page your changes will be lost.

The New Document button is used to clear the content from the page. When clicked a window will open asking you to confirm if you want to clear all content.

The Bold button is used to make text appear bold. You can either click Bold and then whatever you type next will appear bold (click Bold again to switch this off), or highlight existing text and click the Bold button. You can also highlight text which is already bold and click the button again to change the font weight back to normal.

The Italic button is used to make text appear italic. You can either click Italic and then whatever you type next will appear italic (click Italic again to switch this off), or highlight existing text and click the Italic button. You can also highlight text which is already italic and click the button again to change the font back to normal.

The Underline button is used to make text appear underlined. You can either click Underline and then whatever you type next will appear underlined (click Underline again to switch this off), or highlight existing text and click the Underline button. You can also highlight text which is already underlined and click the button again to remove the line.

The Strikethrough button is used to make text appear with a line through it. You can either click Strikethrough and then whatever you type next will appear with a line through it (click Strikethrough again to switch this off), or highlight existing text and click the Strikethrough button. You can also highlight text which already has Strikethrough applied and click the button again to remove it.

The Align Left button is used to make text appear aligned to the left side of it’s container. You can either click Align Left and then whatever you type next will appear aligned to the left (click Align Left again to switch back to default alignment), or highlight existing text and click the Align Left button.

The Align Center button is used to make text appear aligned to the center of it’s container. You can either click Align Center and then whatever you type next will appear aligned to the center (click Align Center again to switch back to default alignment), or highlight existing text and click the Align Center button.

The Align Right button is used to make text appear aligned to the right side of it’s container. You can either click Align Right and then whatever you type next will appear aligned to the right (click Align Right again to switch back to default alignment), or highlight existing text and click the Align Right button.

The Align Full button is used to make text appear aligned to the full width of it’s container. You can either click Align Full and then whatever you type next will appear aligned to the full width (click Align Full again to switch back to default alignment), or highlight existing text and click the Align Full button.

The Styles & Format menus affect how your content appears, both of these menus contain some items which look the same but are different. The Styles menu only affects appearance, not SEO, whereas the options in the Format menu affect both. For example, each page on your site should only contain one Heading1 (h1) for the purposes for SEO, but if you want something else on the page to look the same as your Heading1 you can then choose h1 from the Styles menu, it will look the same and won’t have a negative effect on SEO. The Styles menu also contains all the styling options that have been created to use on your site.

The Insert Predefined Template Content button is used to insert a template into your page to enter your content into, clicking the button will open a window. At the top of the window is a menu containing all your template options, select an option and a preview of how this will look is shown below. If you would like to add the template to your page click Insert in the bottom left of the window and the template will appear wherever your cursor was within the content before clicking Insert Predefined Template Content.

The Edit HTML Source button is used to edit the HTML of the page. Clicking this will open a window showing the HTML. Once you have adjusted the code click 'Update' in the bottom left to keep the changes, however this won't be saved until you click 'Save this Page' in the bottom right.

The Cut button is used to cut highlighted content from the page, when content is cut the highlighted content will be removed, but you will be able to paste the content elsewhere. Highlight the content you wish to cut and press the Cut button, then click where you would like to paste the content and click the Paste button or use the Ctrl+V keyboard shortcut.

The Copy button is used to copy highlighted content. Highlight whatever you wish to copy, click the Copy button and you will now be able to click where you would like to paste the content and click the Paste button or use the Ctrl+V keyboard shortcut.

The Paste button is used to paste content, if you have copied or cut content you can click where you would like the content to appear and press the Paste button to insert it. If your browser does not support this (a warning message will display) use the Ctrl+V keyboard shortcut.

The Paste as Plain Text button is used to paste content without any styling from where it was copied. If you have copied content from another site you can choose this option to paste the content without any styling which may also have been copied, this ensures the content fits in with the appearance of your site. Click the Paste as Plain Text button to switch on plain text mode. Now when you use the Paste button content will be pasted as plain text, click Paste as Plain Text again to switch this off.

The Paste from Word button is used to paste content that has been copied from a Microsoft Word document. When content is copied from Microsoft Word it keeps the formatting from the document which can break the formatting of your page, this button will try to remove that formatting before pasting the content. To use this click Paste from Word and a window will open where you can paste the content. Click 'Insert' to add this to your page. However, we recommend pasting content from the Microsoft Word document into a plain text editor such as Notepad, then copying it from the plain text editor and pasting it into your site, as this will definitely remove all styling.

The Find button is used to find or replace content within the page. When the button is clicked it opens a window, here you can type the word or phrase you are looking for, what direction you want to search in (up or down from where your cursor was within the content before clicking Find) and if the word or phrase needs to match the case of what you have typed into 'Find What', enter this information then click 'Find Next' and the next appearance of the word or phrase within the content will be highlighted ('Find Next' can be clicked more than once). When you click 'Close' the content will stay highlighted. There is also a 'Replace' tab within the window, this works in a similar way except you can enter a replacement word or phrase into 'Replace With' and use 'Find Next' and 'Replace' to replace the text or use 'Replace All'.

The Replace button is used to replace or find content within the page. When the button is clicked it opens a window, here you can type the word or phrase you are going to replace, the replacement text, what direction you want to search in (up or down from where your cursor was within the content before clicking Replace) and if the word or phrase needs to match the case of what you have typed into 'Find What', enter this information then click 'Find Next' (Find Next can be clicked more than once) and then 'Replace' or use 'Replace All'. There is also a 'Find' tab within the window, this works in a similar way except you don't need to enter replacement text and there are no Replace buttons.

The Insert/Remove Bulleted List button is used to add bullet points to a list of information. Highlight the list and click Insert/Remove Bulleted List and a bullet point will be added to the start of each list item. Highlight a bulleted list and click the button again to remove the bullet points.

The Insert/Remove Numbered List button is used to add numbers to a list of information. Highlight the list and click Insert/Remove Numbered List and a number will be added to the start of each list item. Highlight a numbered list and click the button again to remove the numbers.

The Decrease Indent button is used to remove indentation from text. Highlight the indented text and click Decrease Indent to decrease the indentation once, this button can be used on the same content more than once.

The Increase Indent button is used to add indentation to text. Highlight the text you want to indent and click Increase Indent to increase the indentation once, this button can be used on the same content more than once.

The Block Quote button is used to make text appear indented as a block quote (this is usually used for longer quotes). Highlight the quote and click Block Quote. You can highlight a block quote and click the button again to remove the effect.

The Undo button is used to undo your previous action. When clicked the last change you made will be undone. This can be clicked multiple times.

The Redo button is used to redo an action you cancelled using Undo. When clicked the last change you reverted will be redone. This can be clicked multiple times.

The Insert/Edit Link button is used to add a link to text or an image, highlight the text or click the image you wish to add a link to, a window will open, here you can either enter the link URL or choose a page in your site from the 'Link List', the 'Target' menu can be used to choose where the link will open, a title can be added (this is text which will display when you hover your cursor over the link) and a 'Class' can be chosen to change the link's appearance.

The Unlink button is used to remove a link. Highlight linked text or click a linked image then click Unlink to remove the link.

The Insert/Edit Anchor button is used to add an Anchor to a page, an anchor can be linked to to take users to a specific part of the page. Click where you would like to add an anchor then click Insert/Edit Anchor, a window will open where you can enter a name for the anchor and click Insert. When you add a hyperlink there will now be an Anchors menu so you can choose the relevant anchor to link to.

The Insert/Edit Image button is used to add an image to your page, when the button is clicked a window will open, you can either enter the 'Image URL' or select an image from the 'Image List', enter an 'Image Description' (this is alternative text in case your image doesn’t display) and enter a 'Title' which will display if you hover your cursor over the image. A preview of the image will display, you can then click 'Insert' to add it to the page wherever your cursor was in the content before you clicked Insert/Edit Image.

The Cleanup Messy Code button is used to cleanup issues with any code that has been added.

The Help button opens a window when clicked which shows information on TinyMCE and loaded plugins.

The Insert/Edit Table button is used to add a table to the page. Once the button is clicked a window will open, here you can choose the number of columns and rows, amount of cell padding and spacing, border size and table alignment, table width and height, select a class to adjust how the table is styled and tick 'Table Caption' to add a caption to the table. The table will still work if you don't fill in all the options, but they can be used to give you more control. After you insert the table you can click the table and click Insert/Edit Table again to adjust these settings.

The Table Row Properties button is used to adjust the rows in a table. Click within a table and click Table Row Properties and a window will open. Here you can adjust the row type, text alignment, vertical alignment of cell contents, select a class to adjust styling and adjust cell height. At the bottom of the window you can choose which rows to update with these details before clicking 'Update'.

The Table Cell Properties button is used to adjust individual cells. Click within a table and click Table Cell Properties and a window will open. Here you can adjust the text alignment, cell type, vertical alignment, cell scope, width and height and add a class to adjust styling. At the bottom of the window you can choose which cells to update with these details before clicking 'Update'.

The Insert Row Before button is used to add an additional row to a table. After clicking within a table click Insert Row Before to add a row above where you clicked within the table.

The Insert Row After button is used to add an additional row to a table. After clicking within a table click Insert Row After to add a row below where you clicked within the table.

The Delete Row button is used to remove a row from a table. Click within the row you wish to delete, then click Delete Row to remove it.

The Insert Column Before button is used to add an additional column to a table. After clicking within a table click Insert Column Before to add a row to the left of where you clicked within the table.

The Insert Column After button is used to add an additional column to a table. After clicking within a table click Insert Column After to add a row to the right of where you clicked within the table.

The Delete Column button is used to remove a column from a table. Click within the column you wish to delete, then click Delete Column to remove it.

The Split Merged Table Cells button is used to change merged cells back to individual cells. Click within the cell which has been merged and click Split Merged Table Cells to change this back to multiple cells.

The Merge Table Cells button is used to merge multiple cells into an individual cell. Click within the cell which will merge with neighbouring cells, then click Merge Table Cells and this will open a window. Here you can choose how many columns and rows will be merged together. Once Update is clicked the cells will be merged. This can be reverted using the Split Merged Table Cells button.

The Insert Horizontal Line button is used to add a line to split up page content. Click where you would like the line to display (you don’t need to create a new line for the horizontal line to display on, it will add one automatically after where you click), then click Insert Horizontal Line to add it to the content.

The Remove Formatting button is used remove styles (these are added through the Styles menu) from content. Highlight the content you wish to remove styles from then click Remove Formatting.

The Show/Hide Guidelines/Invisible Elements button is used toggle the display of guidelines, such as those which display around borderless tables and invisible elements such as anchors. These guidelines display to help you see the location of elements and do not display on the live page. Click Show/Hide Guidelines/Invisible Elements once to hide guidelines and click the button again to display them.

The Subscript button is used to make text appear as subscript. You can either click Subscript and then whatever you type next will appear as subscript (click Subscript again to switch this off), or highlight existing text and click the Subscript button. You can also highlight text which is already appearing as subscript and click the button again to change the text back to normal.

The Superscript button is used to make text appear as superscript. You can either click Superscript and then whatever you type next will appear as superscript (click Superscript again to switch this off), or highlight existing text and click the Superscript button. You can also highlight text which is already appearing as superscript and click the button again to change the text back to normal.

The Insert Special Character button is used to add special characters to your content. After clicking Insert Special Character a window will open with a list of all available options. When you hover over a character it's details will display on the right side of the window, click a character to insert it in the page.

The Toggle Full Screen Mode button is used to make the content editing area fill your screen. Click Toggle Full Screen Mode once to switch this on and click it again to switch it off.