When logged in with the appropriate privileges a new page can be created by clicking the + sign on the top right hand side of the page, or from the Page Management menu.
The following guidance can be applied if 'New Page with Standard Content Editor' or 'Create From Template' is selected, though there may be additional settings on a page created from template.
The following guidance describes the information to be recorded under the ‘Content’ tab.
Page heading
This is the heading and title of the page.
Meta Description
Meta descriptions are short texts that summarize the content of webpages to search engines. They are important for good "SEO" (Search Engine Optimization) and typically (but not always) appear within search engine results below the heading and address. The meta description should be no longer than 135–160 characters long. Any longer and search engines will chop the end off, so make sure any important keywords are nearer the front.
Content
This is where the main content of the page is created.
Tip: when copying and pasting text into the editor from Word, a PDF, or web page, first paste it into Notepad and remove any visible formatting (numbered lists, etc.). Then paste this into the content editor and add the desired formatting using the available tools.
Tip: never use absolute URLs for links within the same website. Only use absoluteURLs for external links.
WYSIWYG and source editing mode (click to expand/collapse)
WYSIWYG and source editing mode
There are two viewing options for the content editor: WYSIWYG and source.
- The WYSIWYG editor is the default and opens when a new page is created. The editor has similar tools to MS word, for example bullet-pointed or numbered lists, hyperlinks and formatting.
- The source editor will allow you to view and edit the underlying html on the page.
It is possible to edit the content entirely through the source editor. This enables much greater control over layout and styling, however it takes more time and can be quite fragile. See our documentation page on Bootstrap styling for more information.
Tip: if you do use the source editor to create html you can validate it online using various tools like the W3C Markup Validation Service.
Embedding images in content (click to expand/collapse)
Embedding images in content
The most common method of embedding images in a webpage is to upload them to the website server and link to them from there. If your image is already uploaded onto the server then proceed to step 6 below.
Tip: prepare you images before you upload them by giving them an easily recognisable name and resizing them to the size you would like them to appear on the page.
-
Click the ‘Image’ button in the WYSIWYG editor to open the ‘Image Properties’ pop-up.
-
Click ‘Browser Server’ to open the website file manager.
-
In the website file manager, choose the folder you would like to upload the file to and then click the ‘Upload tab’.
-
You may wish to untick the ‘Reduce Image Size For Web’ checkbox (especially if the images have been resized already).
-
Click ‘Choose Files’ to find the files on the local machine or drag and drop the image into the website file manager.
-
Go back to the ‘Browse’ tab and select the image to embed in the webpage.
-
Set the 'Alternative Text' for the image, which is important for accessibility. Alt text is a short written description of an image, which makes sense of that image when it can't be viewed for some reason.
-
The dimensions of the image can be changed in the ‘Image Properties’ pop-up. For example, if the image should be full-width set ‘Width’ at ‘100%’ and delete the ‘Height’ value. The best setting for images is the "img-fluid" class, which ensures that the image will resize responsively for different screen resolutions. This can be changed in the source editor. For example:
<img alt="Image Properties Pop-up" src="/images/documentation/createpageimageproperties.png" style="height: 670px; max-width: 600px;">Would become:
<img alt="Image Properties Pop-up" class="img-fluid" src="/images/documentation/createpageimageproperties.png">
Using figure instead of image classes (click to expand/collapse)
Using figure instead of image classes
The following is an example of an image added using the WYSIWYG editor:
<img alt="Image uploader in file manager" class="img-thumbnail" src="/images/documentation/createpageuploadimage.png" />
A much better way of expressing this, which tells search engines a lot more and allows the mark-up to explicitly link the copyright statement/caption with the image, is as follows. This requires manual editing in the source editor:
<figure>
<img alt="Image uploader in file manager" class="img-fluid" src="/images/documentation/createpageuploadimage.png" />
<figcaption>Image uploader in file manager © Emily Pennifold</figcaption>
</figure>
Which creates the following figure with associated caption:
Embedding media in content (click to expand/collapse)
Embedding media in content
It is possible to embed media like video into content pages, for example YouTube videos.
- Click the ‘Embed Media from External Sites’ button in the WYSIWYG editor to open the ‘Embed Media Content’ pop-up.
- Fill in the 'Title' field.
- Insert the URL of the media in the 'URL' field.
- Adjust the rest of the settings as required.
Creating a table (click to expand/collapse)
Creating a table
It is simple to create a basic table using the 'Table' tool in the WYSIWYG editor. Be aware that tables should not be too wide as they do not behave as well on small screens. It is possible to make more stylish tables using Bootstrap classes.
Creating an anchor link (click to expand/collapse)
Creating an anchor link
Anchor links enable the user to jump directly to a marked section of a webpage. This can be very useful if the webpage is long.
- First select the section you would like to be able to jump to and set this as an anchor. Highlight the section and click the 'Anchor' button in the WYSIWYG editor (the image of a flag).
- Give the anchor a short recognisable name.
- Highlight the word(s) that will become a link to this anchor and click the 'Link' button (a chain link image) in the WYSIGWYG editor to open the 'Link' pop-up.
- In the 'Link Type' drop-down select 'Link to anchor in text'.
- Select the relevant anchor name from the dropdown in 'Select an anchor'.
Author
Automatically populates with the name of the user who created the page. This field is editable, but the value is not displayed on the page to end users.
Publishing options
| Publishing option | Description |
|---|---|
| Save draft | Click ‘save draft’ to save the page as draft to publish in the future. Anonymous users will not be able to see the page until it is published. |
| Publish now | Click ‘publish now’ to publish the page immediately. |
| Publish at date/time | It is possible to set the page to publish at a date/time in the future. This can be useful if you have a series of blogs or pages that you would like to be published weekly, or similar. |