Here are some written instructions on how to add and edit buttons to a page.  The CMS uses 'blocks' which are the different types of content that can be dragged onto a page. 

If you prefer, the video guide at the bottom of this page demonstrates adding a content block, although the drag and drop motion can be used for any type of block. 

You can expand the screenshots by double clicking on them. 

These notes assume you are already logged into the CMS.

Guides Instructions

  • To add a block click 'Add Content' in the CMS toolbar
  • Find the button block in the left hand toolbar. 

1.png

  • Click on the block and drag it onto the page.  The areas that can take a content block are highlighted in green.  If you hover over one area you will see the green line thicken to indicate the area that the block will be placed in.  

2.png

  • You can now configure button depending on what you want it to do:

3.png

Link Type

Page

  • To take the user to another page in the website. Click the ‘Page' option and then the 'Choose Page’ button site map

4.png

  • Select the desired page from the site map.  Click the blue ‘Add’ button to save the button block

5.png

File

  • To prompt the user to open or download a file. Click the ‘File’ option and ‘Choose File’ button
  • Find the desired file from the File Manager (you can browse the folders or use the keyword search on the right hand side) and select it
  • Click the blue ‘Choose’ button

6.png

Telephone, Urls and Email

  • To use these links, click the relevant option and enter either the telephone number, website url or email address.
  • For website urls - these should be external websites only, for pages in the CMS use the Page option
  • For emails, you can add a subject and body text which will appear prepopulated in the user’s mail client (e.g. Gmail or Outlook) when they click the button 

For all link types, you should  leave the ‘Link Target’ setting blank and not ‘Open Link in new window’.  This is for accessibility and follows the best practice set by websites like Welcome to GOV.UK  and NHS website for England.

Display Options

Button placement

  • By default buttons will appear “stacked” meaning that if you put them next to other buttons, they each sit on their own line

8.png

  • For buttons to sit in a line, go to ‘Edit block’ and select the ‘Display’ tab in the top right
  • Select ‘Inline’ under Display Mode

9.png

Icons

  • To change the icons that appears on the button, go to ‘Display’ and under style pic one of the options under ‘Style’
  • Recommended options include:
    • Arrow right - for links to other pages within the website
    • File thumbnail - for links to files
    • Preset Icon - to select from a library of icons such as ‘externalLinkAlt’ for urls to external websites
  • For most option, you can then select the position as Left or Right.  For external websites the right side is recommended

10.png

11.png

  • Once the preferred options are selected, click ‘Save’ and also Save or Publish the page