Approved Responsive templates

Web supportResponsive templatesTemplatesGeneric highlight button

Generic highlight button

  • The Generic highlight button template is used to draw attention to an important link on a page.
  • It can only be used in the right hand column 
  • It performs a similar function to the Call to action template which can be used to display up to three links. 
  • On screen sizes under 768 pixels the Generic Highlight button will appear below the main column content (the Call to action links appear above). 
  • Links will automatically have Google Analytics tracking code added to them.
  • Typically they will be styled to stand out on a page.
  • They are normally used for important calls to action such as the 'Apply' buttons on our prospective student facing pages.
  • They should be used sparingly.

Instructions

  1. Ensure that you have the right column enabled in the Page structure v1 template at the top of the page.
  2. Add the Generic highlight button template and give it the Name 'Highlight button - [description]'.
  3. Add the text that you would like to display as your link  in the Button text field.
  4. If the page you are linking to is external and not generated by T4 paste the URL into the Button URL (external page) field, otherwise leave blank.
  5. If you're linking to a T4 generated page on the University website click on the Select button in the Button URL (internal page) to open up the site structure. Navigate to the page you wish to link to and click on the title of it to insert the link.
  6. If the page you are linking to is external and not generated by T4 paste the URL into the Button URL (external page) field, otherwise leave blank.
  7. If you're linking to a T4 generated page on the University website click on the Select button in the Button URL (internal page) to open up the site structure. Navigate to the page you wish to link to and click on the title of it to insert the link.
  8. By default the button will display a forward arrow. If you wish to display a back arrow instead check the Display back button box AND the Hide forward button box.
  9. If you do not wish to display either arrow just check the Hide forward button box.