Go in to each individual site’s dashboard and go to Pages to edit – these are set up as the new Gutenberg editor.
If you are viewing the site from the front end (and are logged in) you will see ‘Edit page’ in the black bar at the top:
Click a page to edit it – a page with a dash before the title means it is a sub page of the one above.
At the very centre of the page you’ll see your main content area. First you add a title to the page, clicking on the plus sign means you can add a content block, this can include paragraphs, images, headings, quotes, lists etc..
Add a paragraph or click ‘Add text or type / to add content’ to add standard copy.
When you roll over the text you will be able to see a basic text editor:
You can easily move blocks around using the arrows on the left hand side of the block:
By clicking the 3 dots (ellipsis) on the right hand side you have further options for the block – duplication for similar content, add to reusable blocks – so you can use it again on another page.
The intro field on each page corresponds to the text area to the right hand side of the page title
To create a heading within your page click the plus sign to add a new block and select ‘Heading’
Generally on a website ‘Heading 1’ is reserved for the title of the whole site. ‘Heading 2’ is for page titles and ‘Heading 3’ are sub headings within a page. Therefore in the editor you should use Heading 3 (H3) for headings (do not just use bold).
To make the page you are editing a sub-page (known as a child page) of another page (known as a parent page) select the page from the ‘parent page’ drop down menu in the Page Attributes box on the right. For example the following image shows a page that is a sub page of About:
Images should ideally be no less than 2000px on the shortest side. It’s best not to go below this size so that the image remains at good quality for high retina screens. Images for the web must be in .jpeg, .png or .gif format
Avoid using ‘rogue’ characters in file names. When saving any image or document for use on the web you should not include any characters other than those from the alphabet (lowercase) and underscores (_) – this includes spaces. If you do include characters such as spaces or & or , in file names this may cause problems displaying them.
To add an image to the page either click the plus sign and select image
You will be given the option to upload from your computer or from the media library which includes all of the media (images, sound files, video files) you (and everyone else) have uploaded so far.
When you have inserted the image into the page you can resize it by clicking on it once. Two blue dots will appear – on the right and at the bottom, which you can drag to change the size (you can also use pre-determined sizes in the options panel on the right hand side) :
You can also add a caption to the image here.
When you click once on the image you will also see some options appear at the top right:
Here you can left or right align the image. When you select this the text below will wrap around the image.
On the right hand side panel you will see more options for the image:
Image alt text is used by screen readers to describe an image to people with visual impairments when having a website read out aloud to them. Without alt text the screen reader just reads the word ‘image’ when reading the webpage. As you can imagine this can be very frustrating for the user. There is a field in the media library called ‘Alt text’ – you will see this on the right hand side when an image is selected. Enter your description of the image here. Search engines will mark the site down if the alt text field is left blank.
Pre-determined image sizes – here you can select a size from the drop down list rather than dragging the blue dots, this makes all the images set to this size uniform.
Linking images – The default option for linking the image is ‘Media File’ – this means when an image is clicked it will show a larger version of itself in a modal. If you want the image to link to a page on the site then you can change it to ‘Custom URL’ and enter the URL of the page you want it to go to. If you don’t want it to link to anywhere then select ‘none’ from the list.
The ‘featured image’ is usually the image that will be the main ‘chosen’ or ‘hero’ image to represent the page (the large landscape image at the top, under the navigation) and will also appear in any listing pages/promos
This can be found on the right hand side under Document > Featured Image
If you only want the image to appear in listing and not on the page itself then select the box “hide image from header”
Select images that work well with the proportions used at the top of the pages
Avoid lists of links, instead try to incorporate them into paragraph text. This gives them more meaning and puts them into the context of how they may be useful. People are unlikely to scroll through lists of links looking for what they want and search engines will mark you down if you have links pages.
To create a link in a body of text, highlight the text that you want to be a link and click the chain symbol at the top of the text panel
Either paste in the url or start typing to search for pages within the same site:
If you are linking to an outside web source you must put the whole URL in including the http://
Click the arrow to apply the link
Use meaningful links –Avoid labelling links as ‘here’ or ‘click here’ as out of the context of the page they don’t tell the user anything about where they’ll lead them. WHY: links need to make sense even if they stand alone, as many assistive technology users will short-cut to a list of links on a page as a way of getting a quick impression of what content is available on that page. Making links look consistent follows standard conventions for navigation and will make the site as usable and accessible as possible, as users will know what to expect as they explore the site.This is also beneficial in terms of search engine results as they tend to look for links when searching.
Pasting the original url into the site can look ugly, instead highlight some descriptive text and insert the link by clicking the chain symbol. This is also best for SEO as Google reads all the links in the site.
Do not tick the box for the link to open in a new window. This is very bad for accessibility as it can disorientate the user
Avoid using directions when highlighting a link e.g. ‘Click the link on the right hand side of the page’ It may be on the right hand side when you are editing the site but won’t necessarily be every time as there are different layouts for different screen sizes and devices.
Publishing your page
To view the page on the front end click the ‘Preview’ button at the top right of the screen – it is best to always have the front end open in a different window when editing:
You can set the page to be visible to the public or private. This option is under ‘visibility’ in the Status & Visibility panel:
Here you can also schedule when you want the page to be published by clicking the date line next to Publish. If a date in the future is entered then the page will not be viewable by the public until that date. If a date in the past is entered then the sub-pages will order in publication date on the menu page – this is useful for older news items or events.
You can also select ‘pending review’ if you have an internal content sign off system in place.
When you have edited your text and images remember to click ‘update’ or ‘publish’ near the top right.