Styleguide FOR

Building the page

This guidance is for content producers. It's designed to help them create pages in Umbraco and add their content smoothly.

Now that you've chosen a suitable template and carefully crafted the content, you need to put the two together to bring the content to life on the website.

Choosing the page location

First, you need to select the location for the new page. In the content tree, identify where the page should sit and find the parent page.

For example, if the page should be a child of the Workplace section, find the workplace page. Or, if it should sit under the Workplace Wellbeing Index (WWI) within the Workplace section, find the WWI page.

The parent page can be any page from the homepage to any of the sub-pages of the site. It's good to avoid too many generations, so that pages don't get buried many levels deep in the site navigation

Creating the page

To create the page, do the following:

  1. Hover over the name of the parent page and then click on the options icon (•••) to reveal the types of page you can create.
  2. Click on the type of page you need to create: content, event, news or story. If you want to create a listing page, you'll need to get in touch with the digital development team at [email protected] for help and advice.
  3. Next, you'll be prompted to choose a template. You should have already identified the appropriate template for the content. Click on the name of the template in the list. Only select 'blank' if you've worked with digital engagement to produce a core content model.
  4. Whatever you select, the new page will then appear in the content area on the right-hand side.
  5. Type the title of the page in the text field at the top of the content area where it says "Enter a name..."
  6. Click on the arrow on the right hand side of the green save and publish button to expand the menu, and click save.
  7. The new page will appear in the content tree.

Adding the content

If you're using a ready-made template, transfer the content into the relevant content blocks. You may need extra rows or blocks, or there may be blocks you won't use, in which case it's fine to delete or add these where appropriate. 

Depending on which template you choose, at the top of standard page templates there will either be a banner, or a rich text box on a right sidebar row to house the page title. Please do not remove this or replace it with images, 50/50s or other content types. This is to maintain consistency across the site. 

Templates will include the correct styling for your headings, body text and so on. If you add new rows and content types, make sure you format this text correctly in a way that's consistent with the rest of the page.

If you're using a blank template and working from a core content model, you'll need to add the rows and content blocks you need to the page, before you can insert the content.

Saving and previewing

It's a good idea to save the page frequently to avoid losing any of the work you do. Click on the arrow on the right of the save and publish button to reveal the menu and click save.

As well as saving regularly, you should preview your work as you go. Preview shows you how the page will look once published. It helps us to make sure that the layout and content is looking as it should, and that all the links and buttons are working properly.

To preview your work, click the preview button in the bottom-righthand corner of the content area. 

The preview will open in a new tab, and you'll be able to see how the page is progressing. Preview mode gives us the option to view the page at different screen sizes. Click on the image of the device in the left sidebar menu to see how the page will look on mobile, tablet, laptop and desktop.

Always make sure you check how the page will look on different devices. This helps us to pick up any issues with the layout of our page or with our images.

It's important that our website looks as good on a phone as it does on a computer, because over 50% of the sessions on our website come from mobile users, while roughly 30% are on desktop.

Submitting for approval

When you're satisfied that the content looks great at all screen sizes, click "save and request publish". This will notify approvers that the content is ready to be checked.